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) => {
  console.log('Callback', data);
};
</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

vendorId

Yes

String

Vendor unique identifier

status

Yes

Enum

ACCEPT_PAYMENTS - vendor can accept payment up to £1500. Fully activating the account will remove this limitation.

ACTIVATED - vendor can both accept payments and payout money.

IN REVIEW - vendor is being reviewed by UNIPaaS

completionRate

Yes

Number

Indicates the % of the onboarding process that was completed by the vendor