@xfers/xfers-js-sdk
Advanced tools
Download and install the Xfers Web SDK either through Content Delivery Network (CDN) or via npm install
Add the following lines into the corresponding HTML file's <head></head> section:
<!-- The following files can also be downloaded from the js folder in this repository -->
<script src="https://cdn.jsdelivr.net/gh/Xfers/xfers-sdk@98efff8d2cfa7758919d1be74b314d3cc533788b/JavaScript/dist/vendors~xfers.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Xfers/xfers-sdk@98efff8d2cfa7758919d1be74b314d3cc533788b/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:
<!-- The ID of the DOM element is to be used to instantiate Web SDK later -->
<!-- Make sure the following line is executed before the instantiation in the next segment -->
<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()
}
}
/* Instantiation takes in two parameters:
* 1st param => mountingElementId: 'xfers_elements'
* 2nd param => options: { country, test, displayName, logo, submitPhoneCallback, submitOtpCallback, requestOtpCallback, connectFlowCallback }
*/
const element = new Xfers.Connect("xfers_elements", connectOptions);
// Next step, trigger the SDK flows by executing the following command:
// Start Xfers Connect Flow
element.startAuthenticationFlow();
</script>
Begin by installing the SDK package:
yarn add @xfers/xfers-js-sdk
// Or using npm
npm install @xfers/xfers-js-sdk
Next step, import the components into your app:
import { Connect } from '@xfers/xfers-js-sdk'
Next step, configure the options for connect flow, you can set sandbox environment, locale, merchant display information and callbacks here:
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()
}
}
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:
<!-- The ID of the DOM element is to be used to instantiate Web SDK later -->
<!-- Make sure the following line is executed before the instantiation in the next segment -->
<div id="xfers_connect"></div>
Next step, instantiate the component onto a mounting DOM, and after that, trigger the pop-up:
/* Instantiation takes in two parameters:
* 1st param => mountingElementId: 'xfers_elements'
* 2nd param => options: { country, test, displayName, logo, submitPhoneCallback, submitOtpCallback, requestOtpCallback, connectFlowCallback }
*/
this.xfersConnect = new Connect("xfers_connect", connectOptions);
// Next step, trigger the SDK flows by executing the following command:
// Start Xfers Connect Flow
this.xfersConnect.startAuthenticationFlow();
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.
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.
Please refer to the link below for the Connect Flow Guide:
https://github.com/Xfers/xfers-sdk/wiki/Xfers---Connect
Please refer to the link below for the Payout Flow Guide:
https://github.com/Xfers/xfers-sdk/wiki/Xfers---Payout
Please refer to the link below for the Components Flow Guide:
https://github.com/Xfers/xfers-sdk/wiki/Xfers---Components
FAQs
Xfers Javascript SDK
The npm package @xfers/xfers-js-sdk receives a total of 6 weekly downloads. As such, @xfers/xfers-js-sdk popularity was classified as not popular.
We found that @xfers/xfers-js-sdk demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."