Web SDK Table of content
Getting Started
Download and install the Xfers Web SDK either through Content Delivery Network (CDN) or via npm install
1. Through CDN &
Add the following lines into the corresponding HTML file's <head></head>
section:
<script src="https://cdn.jsdelivr.net/gh/Xfers/xfers-sdk@133c54540fe5abd360a313ec5f33a3c3c13cc013/JavaScript/dist/vendors~xfers.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Xfers/xfers-sdk@133c54540fe5abd360a313ec5f33a3c3c13cc013/JavaScript/dist/xfers.bundle.js"></script>
Note that the Xfers Web SDK requires a mounting point on a HTML DOM. Add the following line into the same HTML file <body></body>
section:
<div id="xfers_elements"></div>
Next step, initialize the components by adding the following javascript into the same <body></body>
section. This is required on all the pages that uses the Xfers SDK
<script type="text/javascript">
const connectOptions = {
test: true,
country: "sg",
displayName: "Merchant A",
logo: "http://goldengate.vc/wp-content/uploads/2016/02/xfers-logo.png",
submitPhoneCallback: (res) => {
res.goNext()
},
submitOtpCallback: (res) => {
res.goNext()
},
requestOtpCallback: (res) => {
console.log("res", res.phoneNo);
},
connectFlowCallback: (res) => {
res.exit()
}
}
const element = new Xfers.Connect("xfers_elements", connectOptions);
element.startAuthenticationFlow();
</script>
Once you see this screen, it means you've successfully integrate the SDK!
Please refer to the next sections to understand different parts of SDK.
Types of Xfers Web UI SDK
Due to different security requirements, Xfers Web SDK are categorised into three components, namely Connect, Payout, and Components.
UI Types | Functionalities | Prerequisites | Integration Area |
---|
Connect | Link-up customers to their Xfers Wallet through phone number | Xfers App Token & Secret Token | Frontend & Backend |
Payout | Intra-wallet Transfer | Xfers User Access Token | Frontend & Backend |
Components | Verification, Manage Bank, Payment (Charging users for a service), Top-up, Withdrawal | Xfers User Access Token | Frontend only |
NOTE:
The Xfers User Acccess token is a token that is required to initialize Payout & Component. The SDK relies on this token to communicate with the Xfers backend. In order to initialize the SDK, you will need to obtain Xfers User Access Token through Connect first.
Xfers.Connect
Please refer to the link below for the Connect Flow Guide:
https://github.com/Xfers/xfers-sdk/wiki/Xfers---Connect
Xfers.Payout
Please refer to the link below for the Payout Flow Guide:
https://github.com/Xfers/xfers-sdk/wiki/Xfers---Payout
Xfers.Components
Please refer to the link below for the Components Flow Guide:
https://github.com/Xfers/xfers-sdk/wiki/Xfers---Components