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 as shown here:

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 three endpoints to:

• Create a lead: See Create a lead.
• Provide significant persons data: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 create an embed token.

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

We recommend loading the SDK via our NPM wrapper which asynchronously loads the script and also provides the relevant TypeScript types. Install it by running npm i ylembed-js. Alternatively, load the script directly from https://sdk.youlend.com/v1/ylembed.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 'ylembed-js';

// 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 preload assets)
const ylApplicationJourney = ylEmbedInstance.create('ApplicationJourney', { 
  onApplicationSubmitted: (leadId) => console.log(leadId); // Optional - triggers once the merchant has submitted the application
});

// 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:

• Scripts (script-src) from https://sdk.youlend.com
• Iframes (frame-src):
  • Production: https://youlend.com (and/or https://youlend.us if supporting USA)
  • Sandbox: https://partners.staging-youlend.com (and/or https://uspartners.staging-youlend.com if supporting USA)

WebView configuration requirements for YouLend SDK

JavaScript must be enabled for Android and iOS WebViews

• Android: set javaScriptEnabled = true on the WebView.
• iOS: ensure WKWebViewConfiguration.defaultWebpagePreferences.allowsContentJavaScript = true
  JavaScript is allowed by default in WKWebView, but must not be disabled.

Site storage must remain available for Android and iOS WebViews

• Android: enable domStorageEnabled = true so localStorage / sessionStorage work as in a normal browser.
• iOS: use the default WKWebView storage; don’t disable or aggressively clear cookies / localStorage / sessionStorage for the YouLend SDK domain.

Navigation should be kept inside the WebView

• Android: use a WebViewClient to handle navigation inside the WebView.
  If you customise shouldOverrideUrlLoading, ensure navigations for the YouLend SDK URLs stay in the WebView rather than being redirected to the system browser.

• iOS: if using WKNavigationDelegate / WKUIDelegate, allow navigations for the YouLend SDK URLs to continue in the same WKWebView (for example, return .allow for those requests).
  For links that open new windows (e.g. target="_blank" / window.open), load the requested URL into the existing WKWebView instead of creating a separate one or handing off to Safari.