Implementation
This guide walks you through everything needed to integrate Unit's Ready-to-Launch banking product. To get started, make sure you’ve signed up for Unit’s Sandbox environment—if you haven’t yet, please do so before proceeding.
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 banking experience. Paste the code below to the new page.
<unit-elements-white-label-app jwt-token="demo.jwt.token"></unit-elements-white-label-app>
Note demo.jwt.token is a real value you can use to preview the component without any setup.
You may choose to create unit-elements-white-label-app dynamically using JavaScript:
<html>
<head>
<script
async
src="https://ui.unit.co/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 Banking 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 you use one of the following identity providers: Okta, Auth0, AWS Cognito, Stytch - follow the steps below. Otherwise, please follow the steps detailed in Unit’s custom jwt authentication guide.
Log into Unit's dashboard.
- Under "Developer", go to "Org settings"
- Under "JWT settings", choose the identity provider you use from the "Provider" drop down.
- Paste the JWKs Path in the JWKs Field.
Passing The JWT
Pass your JWT to Unit's banking 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>
If the JWT token is recognized as an existing user, the user will see their account. If the JWT token is recognized as a new user, the user will be presented with the application form.
In sandbox, please use a unique phone number with each application submission.
Cleanup
Ready-to-Launch Banking 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.
localStorage.removeItem("unitCustomerToken");
localStorage.removeItem("unitVerifiedCustomerToken");
Content Security Policy
If you are using a Content-Security-Policy (CSP) header, you may need to add the following directives to allow the web components to work correctly:
<meta
http-equiv="Content-Security-Policy"
content="connect-src 'self' https://*.s.unit.sh https://*.unit.co"
/>