Embedded Components Implementation
This section helps you launch a business line of credit program by adding the Ready-to-Launch component into your platform's UI. Embedding the component allows your customers to apply for a line of credit, accept offers, and manage their financing directly in your platform.
If you are currently using Unit's Ready-to-Launch Banking and/or Bill Pay product(s), you've already completed this step! The Ready-to-Launch capital experience will appear to your customers alongside their other products in an all-in-one experience.
Customers can:
- Complete an application
- Accept a final offer and sign terms
- View their payment progress
- Monitor transaction history
- Make payments
- View their signed agreement and disclosures
The Ready-to-Launch component displays content dynamically based on the customer's financing status:
- Line of credit landing page: Displays key features, eligibility criteria, and FAQs about the line of credit, along with a prompt for the customer to start an application.
- Active application: Displays the in-progress application for the customer to complete and submit.
- Active final offer: Displays the final offer terms for the customer to review, accept, and sign.
- Active financing: Displays the customer's active financing, including payment progress, transaction history, and options to make payments or view their signed agreement.
Embedding
If you have not done so already, embed the Ready-to-Launch component into your app.
- Add the script tag below to your HTML header
<script async src="https://ui.s.unit.sh/release/latest/components-extended.js"></script>
In the production environment, use https://ui.unit.co/release/latest/components-extended.js as the script source.
- Add a new page to your app that will host the Ready-to-Launch capital experience (for example, a dedicated Financing page). Paste the code below to the new page.
<unit-elements-white-label-app jwt-token="demo.jwt.token"></unit-elements-white-label-app>
You may choose to create unit-elements-white-label-app dynamically using JavaScript:
<html>
<head>
<script
async
src="https://ui.s.unit.sh/release/latest/components-extended.js"
></script>
</head>
<body>
<div id="unit-app-placeholder"></div>
<script>
const unit = document.createElement("unit-elements-white-label-app");
unit.setAttribute("jwt-token", "demo.jwt.token");
document.querySelector("#unit-app-placeholder").append(unit);
</script>
</body>
</html>
Authentication
In order to seamlessly authenticate with Unit's Ready-to-Launch Capital app, you need to pass it a JWT, that allows us to identify your user and verify that they are logged in.
Unit will not ask the user to log in using a separate set of credentials. However, before performing any sensitive banking activities, we will OTP the user.
In sandbox, please use code 000001 to complete the OTP.
Configuring your identity provider
If your identity provider (or your own implementation) exposes a JWKS path (for example, Okta, Auth0, AWS Cognito, or Stytch), follow the steps below. If not, follow the steps in Unit's Custom JWT Authentication Guide.
Log into Unit's dashboard.
- Under Developer, go to Settings.
- In the Authentication tab, choose your identity provider from the Provider dropdown.
- Paste the JWKS path into the JWKS field.
Passing The JWT
Pass your JWT to Unit's Ready-to-Launch component (see example below), replacing the static token that was previously there.
<unit-elements-white-label-app jwt-token="{{JwtToken}}"></unit-elements-white-label-app>
Attributes
Use these attributes to configure <unit-elements-white-label-app> when embedding it in your application.
| Name | Type | Required | Description |
|---|---|---|---|
| customer-token | string | No | A Unit Customer token. Can be used to embed the white-label app for an existing customer. |
| navigation-position | string | No | Position of the navigation on mobile and narrow views. Use "top" to show navigation at the top. Defaults to bottom. |
| navigation-menu-items | string | No | Comma-separated list of navigation menu items to display. |
| is-stretching-layout | boolean string ("true" / "false") | No | Stretch the app layout to fill the available container when set to "true". |
| application-form-full-screen-height | boolean string ("true" / "false") | No | Controls the embedded application form height. Defaults to "true". Set to "false" to make the main part height auto. |
| products | string | No | Comma-separated list of products to enable in the app. Supported values are "Banking", "Capital", and "BillPay". |
| router-type | string | No | Controls the internal routing strategy used by the white-label app. Use "memory" (default) for in-memory navigation invisible to the browser's address bar, suitable for embedding inside an existing app or SPA. Use "hash" to reflect the current page in the URL hash (#), enabling bookmarks, deep links, and browser back/forward navigation — recommended when the white-label app is the primary content of the page. |
Cleanup
Ready-to-Launch Capital will use 2 keys in local storage: unitCustomerToken and unitVerifiedCustomerToken. It's important to clean them up when the user logs out from your app, or after 24 hours, whichever comes first.
localStorage.removeItem("unitCustomerToken");
localStorage.removeItem("unitVerifiedCustomerToken");
Starting from version 4.2.0, tokens are stored in memory rather than localStorage. If you are using version 4.2.0 or later, you no longer need to manually remove these keys on logout.
Content Security Policy
If you are using a Content-Security-Policy (CSP) header, you may need to extend it to allow the web components and third-party integrations (such as Zendesk and Plaid) to work correctly.
Add the following <meta> tag:
<meta
http-equiv="Content-Security-Policy"
content="
connect-src 'self'
https://*.s.unit.sh
https://*.unit.co
https://*.zdassets.com
https://*.zendesk.com
https://cdn.plaid.com
https://*.au10tixservices.com;
script-src 'self'
https://*.zdassets.com
https://*.zendesk.com
https://cdn.plaid.com
https://*.au10tixservices.com;
frame-src 'self'
https://*.zendesk.com
https://cdn.plaid.com
https://*.au10tixservices.com;
"
/>