@wf-financing/ui-entry

Wayflyer Financing UI SDK

Wayflyer provides a @wf-financing/ui-entry package that can be used as a client-side UI SDK to interact with the Embedded Finance API. It provides a single method to mount the CTA banner in the partner UI.

Installation

Install the package directly from NPM with npm install @wf-financing/ui-entry.
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 loadSdkMode with the following parameters:

• targetId - The DOM element's ID where the CTA is supposed to be mounted.
• partnerDesignId - The ID of the partner theme that needs to be applied to the CTA.
  • Note: The partner must request Wayflyer to generate a special theme ID.
• partnerCallback - A function of type PartnerCallbackType, which is also provided by the @wf-financing/ui-entry package.
• 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.

import { type IWayflyerUiCtaSdk, WayflyerUiSdk } from '@wf-financing/ui-entry';

const wayflyerSdk = (await WayflyerUiSdk.loadSdkMode(targetId, partnerDesignId, partnerCallback, companyToken)) as IWayflyerUiCtaSdk;

SDK methods

mountCta()

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

wayflyerSdk.mountCta();

Mocked mode

To simplify the testing process, the SDK can be initialized in mock mode. To do so, pass a fifth argument of type MockedModeType. In mock mode, the partner can manually set responses for SDK methods via the sdkScenario field in the optional mockedMode argument.

import { WayflyerUiSdk, type MockedModeType, SdkScenarios } from '@wf-financing/ui-entry';

const mockedModeNewApplication: MockedModeType = {
   isMockedMode: true,
   sdkScenario: SdkScenarios.INDICATIVE_NEW_APPLICATION,
};

const mockedModeNewApplication: MockedModeType = {
   isMockedMode: true,
   sdkScenario: SdkScenarios.GENERIC_NEW_APPLICATION,
};

const mockedModeContinueApplication: MockedModeType = {
   isMockedMode: true,
   sdkScenario: SdkScenarios.CONTINUE_APPLICATION,
};

const mockedModeNoCta: MockedModeType = {
   isMockedMode: true,
   sdkScenario: SdkScenarios.NO_CTA,
};

const wayflyerSdk = (await WayflyerUiSdk.loadSdkMode(targetId, partnerDesignId, partnerCallback, companyToken, mockedMode)) as IWayflyerUiCtaSdk;

After instantiation with the mockedMode parameter, the CTA banner will behave according to the specified scenario.