Embedded Onboarding UI
Before you begin
Read how to Create a Vendor
Generate Vendor Access Token
Make a POST /platform/authorize
request using vendorId
that you received in the previous step. Get a temporary vendor access token, allowing the Onboarding UI to communicate with our servers in the context of that specific vendor:
curl --location --request POST 'https://sandbox.unipaas.com/platform/authorize' \
--header 'Accept: application/json' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <PLATFORM_SECRET_KEY>' \
--data-raw '{
"scopes": ["onboarding_write"],
"vendorId": "{vendorId}"
}'
You should receive a response containing the access token, similar to the following
{
"accessToken": "{{VENDOR_ACCESS_TOKEN}}",
"expiresIn": "3600",
"scopes": [
"onboarding_write"
],
"vendorId": "60c9a73bf51a8b4bd2034c13",
"merchantId": "60c9a73bce55c1202708e4cc"
}
Embedding the onboarding UI
Embed Script & launch the Onboarding UI
To embed the drop-in UI, insert a script before </body>
as shown in the example below:
<script type="text/javascript">
(function (d, id) {
var s = d.createElement('script');
s.id = id;
s.type = 'application/javascript';
s.src = 'https://cdn.unipaas.com/onboarding-sandbox.js';
d.body.append(s);
s.onload = function () {
window.unipaas.onboarding.create(
{
accessToken: '{{VENDOR_ACCESS_TOKEN}}',
selector: '.app-main',
}, callback);
};
}(document, 'unipaas-onboarding-sdk'));
const callback = (data) => {
if (data.status === 'COMPLETED') {
window.location.href = 'https://your-platform.com/home';
}
};
</script>
Add the following HTML element to your page. The UI will be injected into this element
<div class="app-main"></div>
A full HTML file with a working example is available on our examples repo on GitHub.
Parameters object
This script will load our Onboarding SDK and launch the Onboarding UI with the following parameters:
Parameter | Is Required | Type | Description |
---|---|---|---|
accessToken | Yes | String | Temporary user access token allowing the interaction between the Onboarding UI and the Onboarding API in the context of a specific vendor. |
selector | Yes | String | CSS selector where the Onboarding UI will be located. It's recommended to use main application div. |
style | No | String | Use CSS style to override the existing style. html { font-family: 'roboto', sans-serif; } |
Callback function
This function will get called with the onboardingResult object when closing the Onboarding UI:
Parameter | Always Available | Type | Description |
---|---|---|---|
status | Yes | OnboardingStatus | Onboarding status of Vendor |
Updated over 1 year ago