This page documents v4 (Hosted Application). v4 is in maintenance mode. New integrations should use v5 (Embedded Journey). Existing partners can follow the Migration Guide to upgrade.

UI SDK

Leveraging our UI SDK allows you to directly render Wayflyer's embedded finance user interface within your application, significantly reducing your development and design efforts.

As part of your onboarding, you'll have the opportunity to define the look and feel of the Wayflyer banner and modal that will be displayed in your application's UI. Based on your theming choices, we'll generate a unique theme ID for you. You'll then use this theme ID to seamlessly integrate the customized banner and modal into your user interface, ensuring brand consistency with minimal setup.

Installation

Install the package directly from NPM with npm install @wf-financing/ui-sdk@release-v4. To minimize the bundle size and reduce the impact on partners' page load times, the SDK uses dynamic imports to load only the required parts of the UI. It also allow Wayflyer to continuously improve the SDK transparently.

Instantiation

To initialize WayflyerUiSdk, call the static method loadSdk with the following parameters:

1. companyToken The company token.
2. options (optional) An object of type UiSdkOptions used to configure SDK behavior (e.g., enabling sandbox mode, disabling animations, or setting UI language).

The companyToken should be minted using the Company Token endpoint on the partner's backend. See the Authentication guide for more details.

options Fields (UiSdkOptions)

Example

import { WayflyerUiSdk, SdkOptionsType } from '@wf-financing/ui-sdk';

// Initialize in sandbox mode without animations and with German as the preferred localization
const options: SdkOptionsType = {
  isSandbox: true,
  skipAnimations: true,
  language: 'de',
};

const wayflyerUiSdk = await WayflyerUiSdk.loadSdk(companyToken, options);

SDK methods

mountCta

This function mounts the CTA banner at the target DOM element. Call the method with the following arguments:

1. targetId - The DOM element's ID where the CTA should be mounted.
2. partnerCallback - Callback method to retrieve customer application data when user initiates a funding application. The return value should be a StartHostedApplicationRequestType object.

import { type PartnerCallbackType } from '@wf-financing/ui-sdk';

const partnerCallback: PartnerCallbackType = async () => {};
wayflyerUiSdk.mountCta(targetId, partnerCallback);