@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@d064cdadcbfc309a5661d3c74bfe751fc2f07133/JavaScript/dist/vendors~xfers.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Xfers/xfers-sdk@d064cdadcbfc309a5661d3c74bfe751fc2f07133/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_connect"></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,
/* For Singapore Web SDK, use "sg"
* country: "sg"
* For Indonesia Web SDK, use "id"
* country: "id"
*/
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_connect'
* 2nd param => options: { country, test, displayName, logo, submitPhoneCallback, submitOtpCallback, requestOtpCallback, connectFlowCallback }
*/
const xfersConnect = new Xfers.Connect('xfers_connect', connectOptions)
// Next, trigger the SDK flows by executing the following command:
// Start Xfers Connect Flow
xfersConnect.startAuthenticationFlow()
</script>
Begin by installing the SDK package:
yarn add @xfers/xfers-js-sdk
// Or using npm
npm install @xfers/xfers-js-sdk
Next, import the components into your app:
import { Connect } from '@xfers/xfers-js-sdk'
Next, configure the options for connect flow, you can set sandbox environment, locale, merchant display information and callbacks here:
const connectOptions = {
test: true,
/* For Singapore Web SDK, use "sg"
* country: "sg"
* For Indonesia Web SDK, use "id"
* country: "id"
*/
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 integrated the SDK!
Please refer to the next section to understand different parts of SDK.
Due to different security requirements, Xfers Web SDK are categorised into three components, namely Connect 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 |
| Components | Verification, Manage Bank, Top-up, Withdrawal, Transactions Overview, Credit Card, Bank Transfer, Withdrawal on Behalf | Xfers User Access Token | Frontend only |
NOTE:
The Xfers User Acccess token is a token that is required to initialize Component. The SDK relies on this token to communicate with the Xfers backend. In order to initialize the SDK, you will first need to obtain Xfers User Access Token through Connect.
Xfers Connect is a frontend and backend process which you undertake to obtain an Xfers User Access Token. The frontend process is to collect user phone number and OTP (one time password), and the backend process is to ask Xfers server to send an OTP to user, and verify the OTP. Upon successful verification, you will receive a Xfers User Access Token, which can be saved permanently in a database to identify a user. All users should only go through this process once, to link up their Xfers account.
The SDK provides an easy way to integrate the interface for collecting phone number and OTP from the users. If you've followed the Getting Started example, you have already integrated the interface successfully. You should see the following screens as you go through the flow.
The section below explains what each of the option parameter does:
| Parameters | Type | Value | Description |
|---|---|---|---|
| country | String | 'sg' OR 'id' | To specify the country the SDK is used for |
| test | String | true OR false | To specify sandbox or production environment. If it is true, the API call will be made to sandbox.xfers.io. if it's false, the API call will be made to the production environment - www.xfers.io |
| displayName | String | 'Merchant A' | To specify the display name for your company / organization which will be shown in the SDK interface. |
| logo | String | 'http://goldengate.vc/wp-content/uploads/2016/02/xfers-logo.png' | To specify an image that represent your company / organization which will be shown in the interface. |
| submitPhoneCallback | Function | To specify a callback function when user click on submit button on phone field screen | |
| submitOtpCallback | Function | To specify a callback function when user click on submit button on OTP field screen | |
| requestOtpCallback | Function | To specify a callback function when user click on 'Resend Otp' on OTP field screen. Upon clicking, it will start a 60 sec interval before it is allowed to be clicked again. | |
| connectFlowCallback | Function | To specify a callback function when user click on the progress button on the link-up successful screen |
submitPhoneCallback & submitOtpCallback will be triggered when user submit their phone number or OTP on the screen. This is where you make an API call to your backend to engage Xfers backend server to send OTP to users and verify the OTP to retrieve Xfers User Access Token.
requestOtpCallback will be triggered when user click on the 'Resend OTP' link on the screen. You can trigger a new OTP by using the same backend method that handle submitPhoneCallback request.
connectFlowCallback will be triggered when user click on the progress button on link-up successful screen above. If you have the verification documents of the user, this is where you send the information to Xfers. Xfers User Access Token is required to utilise this callback.
The SDK will feed an object to the callback as a parameter, which contains the following:
| Key | Value | Description |
|---|---|---|
| phoneNo | eg: "98888888" | Phone number of user. |
| toggleLoading | function | The function to toggle a loading screen on the SDK. |
| goNext | function | The function to proceed to next screen on the SDK. |
| goBack | function | The function to return to previous screen on the SDK. |
| setErrorMessage | function | The function to set error message on phone screen. |
You can control the SDK using the functions and inputs from the above.
The SDK will feed an object to the callback as a parameter, which contains the following:
| Key | Value | Description |
|---|---|---|
| phoneNo | eg: "98888888" | Phone number of the user. |
| otp | eg: "512512" | OTP (One-time-password) of the user. |
| toggleLoading | function | The function to toggle a loading screen on the SDK. |
| goNext | function | The function to proceed to next screen on the SDK. If you intend to submit user verification information to Xfers, you need to pass user's accessToken to this function as a parameter. Refer to example below. |
| goBack | function | The function to return to previous screen on the SDK. |
| setErrorMessage | function | The function to set error message on otp screen. |
You can control the SDK using the functions and inputs from the above. For example:
The SDK will feed an object to the callback as a parameter, which contains the following:
| Key | Value | Description |
|---|---|---|
| phoneNo | eg: "98888888" | Phone number of the user. |
You can allow your users to request for new OTP using the same method as submitPhoneCallback. In order to prevent spamming, there is a 60 seconds interval in-between initial and subsequent requests.
The SDK will feed an object to the callback as a parameter, which contains the following:
| Key | Value | Description |
|---|---|---|
| accountFullyVerified | eg: true or false | This flag indicates if the user is verified with Xfers or not. (Required user accessToken) |
| exit | function | The function to close the pop-up screen and end the process. |
| toggleLoading | function | The function to toggle a loading screen on the SDK. |
| submitKycInformation | function | The function to submit user information to Xfers to kick-start the verification process. Refer to below for all available params. (Required user accessToken) |
| redirectToVerificationFlow | function | The function to proceed to Xfers verification flow for user to submit verification documents. (Required user accessToken) |
<script type="text/javascript">
const submitPhoneCallback = res => {
res.toggleLoading()
const fetchOptions = {
method: 'POST',
body: { phoneNo: res.phoneNo }
}
// In your backend api, call xfers API (refer to following section) to tell Xfers to send OTP to user
fetch('https://www.example.com/call/your/backend', fetchOptions).then(() => {
res.toggleLoading()
res.goNext()
})
}
const submitOtpCallback = res => {
res.toggleLoading()
const fetchOptions = {
method: 'POST',
body: { phoneNo: res.phoneNo, otp: res.otp }
}
// In your backend api, call xfers API (refer to following section) to verify the OTP user has keyed in and to retrieve the user's api token (which you should then save in your own database).
fetch('https://www.example.com/call/your/backend', fetchOptions).then(accessToken => {
res.toggleLoading()
// Note: If you intend to send user verification information to Xfers, you need to call goNext function with the user accessToken.
res.goNext(accessToken)
})
}
const requestOtpCallback = res => {
const fetchOptions = {
method: 'POST',
body: { phoneNo: res.phoneNo }
}
// In your backend api, call xfers API (refer to following section) to tell Xfers to send OTP to user
fetch('https://www.example.com/call/your/backend', fetchOptions)
}
const connectFlowCallback = res => {
if (res.accountFullyVerified) {
res.exit()
} else {
res.toggleLoading()
const userInformation = {
fullName: 'Chong Chee Meng',
dateOfBirth: '13/01/1987',
addressLine1: '#07-100',
addressLine2: '47 Lorong Ah Keng',
country: 'Singapore',
state: '',
city: '',
postalCode: '740118',
identityNo: 'G1007777N',
nationality: 'Singaporean',
placeOfBirth: 'SG',
idFrontUrl: 'http://goldengate.vc/wp-content/uploads/2016/02/xfers-logo.png',
idBackUrl: 'http://goldengate.vc/wp-content/uploads/2016/02/xfers-logo.png',
selfie2idUrl: 'http://goldengate.vc/wp-content/uploads/2016/02/xfers-logo.png',
proofOfAddressUrl: 'http://goldengate.vc/wp-content/uploads/2016/02/xfers-logo.png'
}
res.submitKycInformation(userInformation)
}
}
const connectOptions = {
test: true,
/* For Singapore Web SDK, use "sg"
* country: "sg"
* For Indonesia Web SDK, use "id"
* country: "id"
*/
country: 'sg',
displayName: 'Merchant A',
logo: 'http://goldengate.vc/wp-content/uploads/2016/02/xfers-logo.png',
submitPhoneCallback,
submitOtpCallback,
requestOtpCallback,
connectFlowCallback
}
const xfersConnect = new Xfers.Connect('xfers_connect', connectOptions)
// Start Xfers Connect Flow
xfersConnect.startAuthenticationFlow()
</script>
You need to complete the backend part by referring to the Xfers API Documentation over here
Xfers Components is an entirely frontend process which allows you to provide the ability for users to:
This SDK requires Xfers User Access Token.
<script type="text/javascript">
// Paste the Xfers User Access Token here
const accessToken = 'insert the xfers user access token here upon retrieving it from your server backend'
/* Instantiation takes in two parameters:
* 1st param => mountingElementId: 'xfers_elements'
* 2nd param => accessToken: e.g. - 'YTB7iKVauTzJ8zyk6cJ4ooTOUGJMG-SYDPxFNFTDs4Z'
* 3rd param => options: { country, test, closeVerifiedNoticeCallback, closePendingVerificationNoticeCallback }
*/
const componentsOptions = {
test: true,
/* For Singapore Web SDK, use "sg"
* country: "sg"
* For Indonesia Web SDK, use "id"
* country: "id"
*/
country: 'sg',
closeVerifiedNoticeCallback: () => {
console.log('verified screen is closed')
},
closePendingVerificationNoticeCallback: () => {
console.log('pending verification screen is closed.')
}
}
const xfersComponents = new Xfers.Components('xfers_elements', accessToken, componentOptions)
// Next step, trigger the SDK flows by executing the following command:
xfersComponents.startVerificationFlow()
</script>
// Example:
xfersComponents.startVerificationFlow()
Verification Flow allows merchant to collect necessary KYC information from users and show user's verification status.
For Singapore, users are considered to be fully verified only if their 1) NRIC Front and Back, 2) Selfie with ID, 3) Proof of address are verified by Xfers
There are two methods for user to verify their Xfers account: 1) MyInfo Verification, 2) Manual Verification
MyInfo verification will redirect users to login to their SingPass account and authorise to share verification information to Xfers
Some Xfers features requires users to be verified before they are granted full access.
For Indonesia, users are considered to be fully verified only if their 1) NRIC Front 2) Selfie with ID are verified by Xfers
// Example:
xfersComponents.startManageBankFlow()
Manage Bank Flow allows merchant to provide users a way to add, edit and delete bank accounts.
// Example:
xfersComponents.startTopUpFlow()
Top-up Flow allows merchant to provide users a way to credit funds into the Xfers wallet for future use.
// Example:
xfersComponents.startWithdrawalFlow()
Withdrawal Flow allows merchant to provide users a way to withdrawal funds from the Xfers wallet to their verified bank accounts.
// Example:
xfersComponents.startTransactionsOverviewFlow()
Transactions Overview Flow allows merchant to provide users a way to check the Xfers related transactions records:
<script type="text/javascript">
// Example:
const accessToken = 'ACCESS_TOKEN'
const componentsOptions = {
test: true,
country: 'sg'
}
const xfersComponents = new Xfers.Components('xfers_elements', accessToken, componentOptions)
// Trigger the SDK flows by executing the following command:
xfersComponents.startCreditCardFlow({
amount: 12000,
fees: 180,
currency: 'SGD',
merchant: 'Binance',
item: function() {
return '1.0 BTC'
},
itemUpdateInterval: 1000,
externalId: '1573714463428',
description: 'extra notes'
})
// item: merchant will override this function, to return the right value.
// itemUpdateInterval: the frequency that item is constantly updated.
</script>
On Sandbox, only credit card info below will produce successful transactions.
<script type="text/javascript">
// Example:
const accessToken = 'ACCESS_TOKEN'
const componentsOptions = {
test: true,
country: 'sg'
}
const xfersComponents = new Xfers.Components('xfers_elements', accessToken, componentOptions)
// Trigger the SDK flows by executing the following command:
xfersComponents.startBankTransferFlow({
bankTransferExternalId: `Ref: ${Date.now()}`,
// Note: callbackUrl is optional
bankTransferCallbackUrl: 'www.yourmerchantsite.com/callback'
})
</script>
<script type="text/javascript">
// Example:
const accessToken = 'ACCESS_TOKEN'
const componentsOptions = {
test: true,
country: 'sg'
}
const xfersComponents = new Xfers.Components('xfers_elements', accessToken, componentOptions);
// Trigger the SDK flows by executing the following command:
xfersComponents.startWithdrawalOnBehalfFlow({
withdrawalOnBehalfAmount: 1000,
submitWithdrawalOnBehalfRequestCallback: params => {
console.log('withdrawalOnBehalfRequest:', params)
// params.toggleLoading()
// params.setErrorMessage("Your withdrawal on behalf request has failed. Please try again.")
params.goNext()
})
</script>
The Withdrawal on Behalf flow works similar to the Connect flow, where we only provide the UI and the merchant is required to do the backend API integration.
FAQs
Xfers Javascript SDK
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.