Embedded Components Implementation
This section helps you launch a merchant cash advance program by adding prebuilt components into your platform's UI.
Configuring Payment Processor Settings
Configure your payment processor settings through the Unit Dashboard to provide anonymized data for prequalification and underwriting of merchant cash advance offers. You can add multiple processors if you would like Unit to evaluate income data from multiple sources when generating offers.
To configure your payment processor settings:
- Navigate to Settings from the top menu under the Developer section.
- Select the Payment Processing tab.
- Select your Vendor from the dropdown.
- Enter your API key (your payment processor secret key).
- Enter your Webhook secret (your payment processor webhook signing secret).
- Click Save to apply your settings.
Required Settings
| Setting | Required | Description |
|---|---|---|
| Vendor | Yes | Select your payment processor. |
| API key | Yes | Your payment processor API key (secret key). This is required for Unit to pull anonymized processing data to prequalify and generate merchant cash advance offers for your customers. |
| Webhook secret | Yes | Your payment processor webhook signing secret. This is required to verify incoming webhook events, understand when your customer receives a sales payout, and calculate/collect payments on active merchant cash advances. |
Creating Prequalified Offers
Create prospects to identify the population of businesses that you would like Unit to prequalify for a merchant cash advance offer.
To create a prospect, you must provide a JWT subject and payment processor account details (e.g., the customer's connected account ID on Stripe). You have the option to provide additional anonymized data that helps Unit more accurately assess eligibility and size offers.
| Verb | POST |
| URL | https://api.s.unit.sh/capital/prospects |
| Data Type | prospect |
| Timeout (Seconds) | 5 |
Attributes
Business is supported.2001-08-10).LLC, Sole Proprietor, S Corporation, C Corporation. Helps Unit assess eligibility and suppress offers for ineligible entity types.CA). Helps Unit assess eligibility and suppress offers for businesses in ineligible states.Payment Processor Account Details
A JSON object mapping payment processor name(s) to an array of associated account ID(s).
Stripe, Square). Must match exactly.curl -X POST 'https://api.s.unit.sh/capital/prospects'
-H 'Content-Type: application/vnd.api+json'
-H 'Authorization: Bearer ${TOKEN}'
--data-raw '{
"data": {
"type": "prospect",
"attributes": {
"prospectType": "Business",
"idempotencyKey": "3a1a33be-4e12-4603-9ed0-820922389fb8",
"jwtSubject": "2ab1f266-04b9-41fb-b728-cd1962bca52c",
"paymentProcessorAccountDetails": {
"Stripe": [
"acct_1aBcDeFgHiJkLmN"
]
},
"establishmentDate": "2001-08-10",
"naicsCode": "541511",
"businessStructure": "LLC",
"businessState": "CA"
}
}
}'
Response
Response is a JSON:API document.
201 Created
Prospect is a JSON:API resource, top-level fields:
Attributes
2022-02-23T12:15:47.386Z).Business is supported.{
"data": {
"type": "prospect",
"id": "7345432",
"attributes": {
"createdAt": "2022-02-23T12:15:47.386Z",
"prospectType": "Business",
"paymentProcessorAccountDetails": {
"Stripe": [
"acct_1aBcDeFgHiJkLmN"
]
},
"establishmentDate": "2001-08-10",
"naicsCode": "541511",
"businessStructure": "LLC",
"businessState": "CA"
}
}
}
When a prospect is created, Unit will immediately evaluate the last six months of processing data for the business, as well as any additional data provided on the business, and determine if prequalified offers can be generated.
Surfacing Prequalified Offers to Businesses
Embed Unit's Prequalified Offer Component to advertise financing offers in different areas of your platform's UI.
The Prequalified Offer Component has a number of options for promotional tiles, cards, and banners. These can help:
- Drive awareness of available financing among eligible customers
- Surface offers at high-intent moments to increase application rates
- Increase adoption of capital products with minimal friction
To embed the prequalification banner in your interface, paste the code below to the new page.
<unit-elements-capital-prequalification jwt-token="demo.jwt.token"></unit-elements-capital-prequalification>
Note demo.jwt.token is a real value you can use to preview the component without any setup.
Place the component where your customers are most likely to engage with it — such as a main dashboard, home page, or high-traffic section of your platform. Consider embedding it on pages where customers make key business decisions, such as those related to payments, revenue, or financial reporting. Placing the component in multiple locations increases visibility and can improve adoption.
The component adapts its display based on the prospect's prequalification status:
- With active prequalified offer: Shows full offer details with a Start application button.
- Active financing in progress: The component doesn't render (returns null).
- No eligible prequalified offer: The component doesn't render (returns null).
To customize the appearance of the component, see Theming options.
Embedding Financing in Your Platform
Embed the Ready-to-Launch component to allow customers to apply for financing and manage their financing after they accept an offer, directly in your platform's UI.
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:
- Active prequalified offer: Displays offer details and 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>
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");
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;
script-src 'self'
https://*.zdassets.com
https://*.zendesk.com
https://cdn.plaid.com;
frame-src 'self'
https://*.zendesk.com
https://cdn.plaid.com;
"
/>