Wayflyer Financing UI SDK

Wayflyer provides a @wf-financing/ui-sdk - a client-side UI SDK to interact with the Embedded Finance API. Its primary method mounts the CTA banner in the partner UI.

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 the main part of the functionality.

Instantiation

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

1. companyToken - The merchant identifier.
   • Note: The companyToken should be minted using the Company Token endpoint on the partner's backend. See the Authentication section here for more details.
2. options (optional) – an object of type UiSdkOptions that provides an ability to configure SDK behaviour.

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

const wayflyerUiSdk = await WayflyerUiSdk.loadSdk(companyToken);

SDK methods

mountCta(targetId, partnerCallback)

This function mounts the CTA banner once it's called.

options parameter

When initializing the SDK, the options parameter allows you to configure its behavior:

1. options.skipAnimations - by default, animations are enabled for the CTA banner. Set this to true to disable animations.
2. options.isSandbox - enables sandbox (non-production) mode for the SDK.
3. options.language - sets the preferred language for the UI. If not provided, English will be used as the default.

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

const partnerCallback: PartnerCallbackType = await () => {
   const startHostedApplicationRequestPayload: StartHostedApplicationRequestType = {};

   return startHostedApplicationRequestPayload;
};

wayflyerUiSdk.mountCta(targetId, partnerCallback);

partnerCallback

The partnerCallback function is called when a user agrees to the terms and conditions in the consent modal, immediately prior to starting the hosted application and redirecting the user to Wayflyer. The callback should return data of type StartHostedApplicationRequestType, which will be passed to Wayflyer to pre-populate the user's funding application.

The callback may also be used to execute partner-related logic in response to the user agreeing to Wayflyer’s terms and conditions.

Sandbox

To simplify the testing process, the SDK can be initialized in sandbox mode. To do so, pass the second argument of type UiSdkOptions with isSandbox flag set to true. In sandbox mode, the partner can simulate responses for SDK methods with the help of the additional package @wf-financing/sandbox-ui.

import { WayflyerUiSdk, type UiSdkOptions, type PartnerCallbackType, type StartHostedApplicationRequestType } from '@wf-financing/ui-sdk';

const options: UiSdkOptions = { isSandbox: true };
const wayflyerUiSdk = await WayflyerUiSdk.loadSdk(companyToken, options);

const partnerCallback: PartnerCallbackType = await () => {
  const startHostedApplicationRequestPayload: StartHostedApplicationRequestType = {};
  
  return startHostedApplicationRequestPayload;
};

wayflyerUiSdk.mountCta(targetId, partnerCallback);

After instantiation in sandbox mode, the SDK will call the sandbox environment API.