Embedded Ewallet UI

Embedded eWallet component is the fastest and easiest way to build vendor's eWallets.

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

The embedded eWallet component will:

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

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

How to implement the Embedded eWallet component

Generate Vendor Access Token

Make a POST /platform/authorize request using vendorId. Get a temporary vendor access token, allowing the Ewallet 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 Ewallet UI

Embed Script & launch the Ewallet 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 Ewallet SDK and launch the Ewallet UI with the following parameters:

Settings

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.

theme

No

Learn more

Use specific CSS style or override with your own, existing style.

callback

Yes

JS function

The callback function will run each time the component holds a request for the user to be routed to another page in the web app. The component will send a callback with the matching action payload.
Learn more

Changing eWallet 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 our style settings.

Connecting eWallet component with onboarding component

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

Extra eWallet configurations

Handling vendor's payout from eWallet 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:

  • Using the Payout schedule will allow the vendors to configure their own payouts schedule - daily, weekly or monthly. Available funds will be moved to the vendor's bank account.
  • Using Payout now is an on-demand action to withdraw all available funds. This action will be enabled only if the eWallet have 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 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 eWallet 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.