Search
K

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. 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.
  • Note: The companyToken should be minted using the Company Token endpoint on the partner's backend. See the Authentication section here for more details.
  1. options (optional) - an object of type SdkOptionsType that provides an ability for SDK to run in different modes (e.g. sandbox mode).
import { WayflyerUiSdk, SdkOptionsType } from '@wf-financing/ui-sdk';

// Initialize in production mode
const wayflyerUiSdk = await WayflyerUiSdk.loadSdk(companyToken);

// Initialize in sandbox mode
const options: SdkOptionsType = { isSandbox: true };
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);