Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@xfers/xfers-js-sdk

Package Overview
Dependencies
Maintainers
1
Versions
89
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@xfers/xfers-js-sdk

Xfers Javascript SDK

  • 1.1.0
  • npm
  • Socket score

Version published
Weekly downloads
7
increased by40%
Maintainers
1
Weekly downloads
 
Created
Source

Web SDK Table of content

  • Getting Started
  • Types of Xfers Web UI SDK

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:

<!-- The following files can also be downloaded from the js folder in this repository -->
<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:

<!-- 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>

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 TypesFunctionalitiesPrerequisitesIntegration Area
ConnectLink-up customers to their Xfers Wallet through phone numberXfers App Token & Secret TokenFrontend & Backend
PayoutIntra-wallet TransferXfers User Access TokenFrontend & Backend
ComponentsVerification, Manage Bank, Payment (Charging users for a service), Top-up, WithdrawalXfers User Access TokenFrontend 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

Package last updated on 10 Apr 2019

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc