Skip to main content
Ready-to-LaunchCustom Builds
Start Building Now

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.

Note

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​

5 minutes

If you have not done so already, embed the Ready-to-Launch component into your app.

  1. Add the script tag below to your HTML header
<script async src="https://ui.s.unit.sh/release/latest/components-extended.js"></script>
Note

In the production environment, use https://ui.unit.co/release/latest/components-extended.js as the script source.

  1. 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​

Up to 2 hours

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​

20 minutes

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​

10 minutes

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>

Cleanup​

10 minutes

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");

Content Security Policy​

10 minutes

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;
    script-src 'self'
      https://*.zdassets.com
      https://*.zendesk.com
      https://cdn.plaid.com;
    frame-src 'self'
      https://*.zendesk.com
      https://cdn.plaid.com;
  "
/>