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 and embedded application 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, prefillCallback)

This function mounts the CTA banner and embedded application 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 EmbeddedJourneyPrefillCallback, type EmbeddedJourneyPrefill } from '@wf-financing/ui-sdk';

const prefillCallback: EmbeddedJourneyPrefillCallback = async () => {
   const prefill: EmbeddedJourneyPrefill = {
     email: '[email protected]',
     companyName: 'Acme Ltd',
   };

   return prefill;
};

wayflyerUiSdk.mountCta(targetId, prefillCallback);

prefillCallback

The prefillCallback function is called when the embedded application opens. It can optionally return data of type EmbeddedJourneyPrefill to pre-populate fields in the application form. The callback may also return void if no prefill data is available.

The callback may also be used to execute partner-related logic in response to the user opening the embedded application.

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 EmbeddedJourneyPrefillCallback, type EmbeddedJourneyPrefill } from '@wf-financing/ui-sdk';

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

const prefillCallback: EmbeddedJourneyPrefillCallback = async () => {
  const prefill: EmbeddedJourneyPrefill = {};

  return prefill;
};

wayflyerUiSdk.mountCta(targetId, prefillCallback);

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