UI SDK

Integrate the full Wayflyer embedded financing experience with a single method call.

UI SDK

The UI SDK renders the CTA banner and the Embedded Journey panel directly in your application, significantly reducing development and design effort. As part of onboarding, you will define the look and feel of the Wayflyer components to match your brand. See the UI Style Guide for details.

Installation

Install the package from NPM:

npm install @wf-financing/ui-sdk

To minimize bundle size and reduce the impact on page load times, the SDK uses dynamic imports to load only the required parts of the UI.

Instantiation

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

companyToken — The company token.
options (optional) — An object of type UiSdkOptions used to configure SDK behaviour.

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`)

Field	Type	Default	Description
`isSandbox`	`boolean`	`false`	Enables sandbox (non-production) mode for testing and development.
`skipAnimations`	`boolean`	`false`	Disables UI animations such as the CTA banner animation.
`language`	`string`	`"en"`	Sets the preferred UI language. Available languages: `en`, `de`, `fr`, `nl`, `sv`, `es`.

Example

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

const options: UiSdkOptions = {
  isSandbox: true,
  skipAnimations: true,
  language: 'de',
};

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

SDK methods

`mountCta(targetId, prefillCallback)`

Mounts the CTA banner and embedded journey panel at the specified DOM element. Call the method with the following arguments:

targetId — The ID of the DOM element where the CTA should be mounted.
prefillCallback — A callback function invoked when the embedded journey opens. It can optionally return data of type EmbeddedJourneyPrefill to pre-populate fields in the application form.

import {
  type EmbeddedJourneyPrefillCallback,
  type EmbeddedJourneyPrefill,
} from '@wf-financing/ui-sdk';

const prefillCallback: EmbeddedJourneyPrefillCallback = async () => {
  const prefill: EmbeddedJourneyPrefill = {
    email: 'merchant@example.com',
    companyName: 'Acme Ltd',
    country: 'IE',
    monthlyRevenue: 50000,
  };

  return prefill;
};

wayflyerUiSdk.mountCta('wayflyer-cta', prefillCallback);

Prefill callback

The prefillCallback function is called when the embedded journey panel 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.

Available prefill fields (`EmbeddedJourneyPrefill`)

Field	Type	Description
`email`	`string`	User's email address
`phoneNumber`	`{ number: string, regionCode: string }`	User's phone number with region code
`country`	`string`	ISO 3166-1 alpha-2 country code
`stateOrProvince`	`string`	ISO 3166-2 state/province code. Only required for US and Canada.
`monthlyRevenue`	`number`	Average monthly revenue over the last 6 months, in the company's local currency.
`companyName`	`string`	Business name
`primaryStoreUrl`	`string`	Primary website or store URL
`dateOfIncorporation`	`string`	Date the business was incorporated

Sandbox

To simplify the testing process, the SDK can be initialized in sandbox mode. Pass the isSandbox option set to true. In sandbox mode, the SDK will call the sandbox environment API.

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('wayflyer-cta', prefillCallback);

After instantiation in sandbox mode, the SDK will call the sandbox environment API. Partners can simulate responses with the help of the additional package @wf-financing/sandbox-ui.