Widget

The Vesicash widget is an alternative way of integrating the vesicash escrow into your existing web or mobile app. It is a less technical way of providing the full escrow capabilities directly to customers on your app.

The widget comes with two main buttons;

  1. Make Payment: This enables your customers to easily initiate escrow transactions directly from within your app.

  2. Manage Payments: This enables your customers to perform transaction actions such as accepting a transaction, rejecting a transaction, accepting shipment, rejecting a shipment, etc as well as updating their escrow profile and bank details to easily receive funds from escrow.

Initial Setup

To get started with integrating the widget, you are required to have created a vesicash business account in order to generate API keys to be used in the widget. Once this is done, proceed to configuring the widget by following the steps below:

Step 1

Copy and paste the following script directly on the page on your app where you want your customers to see the widget:

<form id="vesicash">
<script src="https://cdn.vesicash.com/widget.js"></script>
<button type="button" onclick="initiateEscrow()">New Escrow</button>
<button type="button" onclick="manageTransactions()">Manage Escrow</button>
</form>

The code above display two main buttons which your customers sees to begin interacting with the escrow.

The buttons can be separated and put in any desirable place within your app. You only have to put the script tag once above the buttons.

Step 2

Copy and paste this script directly below the one in step 1:

<script>
const initiateEscrow = function() {
const data = {
access_token: "api_key_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
sender_email: "johndoe@gmail.com",
sender_phone: "09089786756",
};
createEscrowTransaction(data);
}
const manageTransactions = function() {
fetchTransactions({
access_token: "api_key_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
});
}
</script>

The script above is responsible for carrying out the escrow actions whenever a customer clicks the buttons in step 1.

access_token This is the public api key that you generated in the vesicash dashboard.

sender_email This is the email address of the person initiating the escrow transaction.

sender_phone This is the phone number of the person initiating the escrow transaction.

Notes:

  • It is important to note that the buttons in step 1 above will not perform any actions if this script is not present in your code. Ensure this script is pasted below the script in step 1 before proceeding.

  • The business integrating this widget is required to automatically pass their customers registered email address and phone number as the data for the sender_email and sender_phone respectively. This is necessary in order for the widget to identify returning customers and the various parties to a transaction.

The Result

If you follow the steps above successfully, customers on your app will be able to this:

The escrow buttons

When a customer clicks on the New Escrow button, they see the page below to confirm their email address and phone number:

When they click Next button, they are taken to the page below to initiate a escrow transaction and then supply the details of the transaction:

Create New Transaction

After successfully entering the transaction details and clicking the submit button, they see a success page below that indicates that their transaction has been successfully created.

Transaction status success page

Upon clicking the Manage Escrow button, the customer is directed to login using the email and phone number or email and password to begin carrying out other actions on the widget:

Login area to manage transactions

Upon successful login, users are shown the page below where they can utilize the full escrow capability directly from the widget.