Embedded Account UI

Embedded account component is the fastest and easiest way to show vendor's account in a UI.

Using a single script, you can show the vendor's account embedded within your platform, while UNIPaaS handle all of the account's financial states with respect to the vendor's balance and onboarding status.

The embedded account component will:

• Show the vendor's balances
• Ask for verification documents and information when needed
• Communicate with the onboarding UI component
• Handle payouts to the vendor's bank account.

Embedding this component will save you the work of integrating both account and payout APIs! while giving you the flexibility to customize the design to fit your platform's look & feel.

Generate Vendor Access Token

Make a POST /platform/authorize request using vendorId. Get a temporary vendor access token, allowing the account 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": ["ewallet_read", "payout_write"],
      "vendorId": "{vendorId}"
   }'

You should receive a response containing the access token, similar to the following:

{
    "accessToken": "{{VENDOR_ACCESS_TOKEN}}",
    "expiresIn": "3600",
    "scopes": [
        "ewallet_read"
    ],
    "vendorId": "60c9a73bf51a8b4bd2034c13",
    "merchantId": "60c9a73bce55c1202708e4cc"
}

Embedding the account UI

Embed the Script & launch the account 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/ewallet-sandbox.js';
  d.body.append(s);
  s.onload = function() {
    window.unipaas.ewallet.create(
      {
        accessToken: '{{VENDOR_ACCESS_TOKEN}}',
        selector: '.app-main',
      }, callback);
  };
}(document, 'unipaas-ewallet-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>

Parameters object

This script will load our account SDK and launch the account UI with the following parameters:

Changing account component style

You can change the following css styles within the component script:

{
   "theme":{
      "fontFamily":"roboto",
      "colors":{
         "primary":"#888E99",
         "secondary":"#F5F7FA",
         "subHeader":"#687B97",
         "disabled":"#AAB3C1",
         "primaryTextColor":"#3B3B3B",
         "secondaryTextColor":"#687B97",
         "buttonColor":"#2F80ED",
         "borderColor":"#BDC8DA",
         "errorColor":"#E50000",
         "success":"#F4FAF2",
         "successTextColor":"#687B97",
         "alert":"#FFFBED",
         "alertTextColor":"#D88100"
      },
      "header":{
         "fontSize":"14px"
      },
      "fontFamily":"inherit",
      "boxShadow":"none"
   }
}

• You can use your own css stylesheet to override the default style settings.

Connecting account component with onboarding component

When needed, the component will request to redirect vendors to another page in your web app,
that holds the embedded onboarding UI, to complete verification process for the vendor. The image below presents this state, clicking on the "Complete Details" button should move the vendor to the embedded onboarding UI.
The account component will send a callback with the matching action payload: { "action" : "onboarding" } so you know where to redirect the vendor.

Extra account component configurations

Handling vendor's payout from account component
Showing the payout CTA's is the default option for the component.
You should use this option if you want your vendor to be able to:

• Configure their own payouts schedule - daily, weekly or monthly. Available funds will be moved to the vendor's bank account.
• Withdraw all available funds on demand. This action will be enabled only if the account has available funds to withdraw.

If you wish to remove this line - send the initial authorization scope without "payout_write".
You should set this option if you wish to control your vendor's payouts for them.
In this case, you will need to configure the payout scheduling for all vendors or for a single vendor. This option is available for you to configure inside the UNIPaaS portal.

Show pending and reserved balances
The account component will automatically show the reserved and pending balances, in the case reserved amount apply for your vendors.
Note - reserved amount are configured based on the platform's risk profile and platform business model type.