Embed the application journey

The Application Journey 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 Embedded Component package 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 Embedded Component Package and render the component

We recommend loading the Embedded Component Package 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 Embedded Component Package 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 Embedded Component Package
const ylEmbedInstance = await loadYlEmbed({
  thirdPartyCustomerId: 'YOUR_UNIQUE_ID_FOR_THIS_MERCHANT',
  country: 'GB',          // ISO 3166-1 alpha-2 country code; used to open the relevant localized journey
  partnerName: 'example', // YouLend will provide this
  createEmbedToken,       // Embedded Component Package 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. Set the embedded component language

Set the country value in loadYlEmbed to open the localized version of the embedded application journey for that market.

For example:

The PreferredLanguageCode field on the onboarding API is stored against the lead, but it does not set the initial language of the embedded component.

If a merchant's preferred language is different from their country, use the country value that best matches the experience you want to show. Before doing this, confirm that any country-specific behaviour for that market is suitable for your integration.

The Embedded Component Package does not currently expose a method to change the embedded component language after initialization.

4. 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 Embedded Components

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 Embedded Component Package.

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 Embedded Component Package URLs stay in the WebView rather than being redirected to the system browser.

• iOS: if using WKNavigationDelegate / WKUIDelegate, allow navigations for the YouLend Embedded Component Package 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.