API Reference
Start typing to search…

Embed the application journey

The ApplicationJourney component lets the merchant submit the full funding application within your dashboard without requiring any redirect or YouLend login.

The component automatically opens the most relevant journey step based on the state of the lead. For example, if you already provided company and owner/director details via API, the component starts directly on the 'Financial information' step.

1. Back-end: add endpoints to create leads and tokens

On your server, first make sure you've authenticated with the YouLend API (see https://docs.youlend.com/reference/authentication).

Then, create two endpoints to:

  • Create a lead: See Create a lead. Optionally supply additional data to improve conversion (e.g. add owners/directors info)
  • Create a token: Create a short-lived token to be passed to the SDK based on your unique identifier for the relevant merchant - we call this thirdPartyCustomerId - that you also supplied when creating the lead. See (coming soon).

2. Front-end: initialize the SDK and render the component

We recommend loading the SDK via the NPM wrapper at @youlend/sdk. This package asynchronously loads the script and also provides the relevant TypeScript types. Alternatively, load the script directly from https://sdk.youlend.com/v1-beta/youlend.js.

First, initialise the SDK by calling loadYlEmbed with a few details and a function that calls the new 'Create a token' endpoint on your server created above.

Then, call .create('ApplicationJourney') on the returned instance to create components. Do this early to warm up assets for a snappier UX.

Finally, when ready (e.g. after creating a lead), open the modal by calling .open() on the component.

import { loadYlEmbed } from '@youlend/sdk';

// 1. Create embed token for the logged in merchant
const createEmbedToken = async () => {
  const res = await fetch('/ylembed-token', { method: 'POST' });
  if (!res.ok) {
    // Handle errors here
    return;
  }
  const { accessToken } = await res.json();
  return accessToken;
};

// 2. Initialise the SDK
const ylEmbedInstance = await loadYlEmbed({
  thirdPartyCustomerId: 'YOUR_UNIQUE_ID_FOR_THIS_MERCHANT',
  country: 'GB',        // ISO 3166-1 alpha-2 country code
  partnerName: 'example', // YouLend will provide this
  createEmbedToken,       // SDK calls this whenever it needs a token
  environment: 'sandbox', // or 'production'
});

// 3. Create component (do this early to warm up assets)
const ylApplicationJourney = ylEmbedInstance.create('ApplicationJourney');

// 4. Later, when ready (e.g. after creating a lead), open the modal:
ylApplicationJourney.open();
// Example coming soon
// Example coming soon

3. Other setup

Please ensure your website's Content Security Policy allows the following: