---
title: "UI SDK"
description: "Learn how to integrate Wayflyer's UI SDK to render the embedded financing experience in your platform"
url: "https://docs.wayflyer.com/embedded-journey-v5-overview/using-the-sdk/ui-sdk"
image: "https://docs.wayflyer.com/_og/d/c_Ocean.takumi,title_UI+SDK,description_Learn+how+to+integrate+Wayflyer's+UI+SDK+to+render+the+embedded+financing+experience+in+your+platform,props_eyJ0aGVtZSI6eyJtb2RlIjoibGlnaHQiLCJjb2xvcnMiOnsicHJpbWFyeSI6IiMyMzIzMmQifX19,p_Ii9lbWJlZGRlZC1qb3VybmV5LXY1LW92ZXJ2aWV3L3VzaW5nLXRoZS1zZGsvdWktc2RrIg,s_e8pgPdXH_S3aFbhf.png"
---

## 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](https://docs.wayflyer.com/embedded-journey-v5-overview/ui-style-guide) for details.

## [Installation](#installation)

Install the package from NPM:

```shell
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](#instantiation)

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

1.  **`companyToken`** — The company token.
2.  **`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](https://docs.wayflyer.com/embedded-journey-v5-overview/shared/authentication) guide for more details.

### [`options` fields (`UiSdkOptions`)](#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](#example)

```typescript
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](#sdk-methods)

### [`mountCta(targetId, prefillCallback)`](#mountctatargetid-prefillcallback)

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

1.  **`targetId`** — The ID of the DOM element where the CTA should be mounted.
2.  **`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.

```typescript
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](#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`)](#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](#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.

```typescript
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`.