<!-- The following files can also be downloaded from the js folder in this repository -->
<script src="https://cdn.jsdelivr.net/gh/Xfers/xfers-sdk@c7b429f46f7c842ce7504577dfac0b345f23739c/JavaScript/dist/vendors~xfers.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Xfers/xfers-sdk@c7b429f46f7c842ce7504577dfac0b345f23739c/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>

2. Through npm package

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.

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

FAQs

What is @xfers/xfers-js-sdk?

Is @xfers/xfers-js-sdk popular?

Is @xfers/xfers-js-sdk well maintained?

Package last updated on 14 Jun 2019

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.

Install

@xfers/xfers-js-sdk

Web SDK Table of content

Getting Started

2. Through npm package

Types of Xfers Web UI SDK

Xfers.Connect

Xfers.Payout

Xfers.Components

Related posts

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft

Weekly Downloads Now Available in npm Package Search Results