Embedded Onboarding UI

Before you begin

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