PaySwifter.js is the front-end library needed on the e-commerce site.

Use PaySwifter.js library to link customer information, verify payment method details, and easily accept payments online and in-store at point of sale (POS).

PaySwifter.js tokenizes customer payment details, ensuring sensitive banking information does not touch your servers, reducing the compliance burden.

How to use PaySwifter.js

1) Import the library

<script src="https://js.payswifter.com/v1.js"></script>

2) Initialize Swifter Pay

const sp = new SwifterPay();

3) Start a Swifter Pay session

When you're ready to run the user through the bank verification flow, create a Swifter Pay Session on the front end/e-commerce site. It takes three mandatory parameters.

sp.startSession({ 
  "sessionID": "SESSION_ID_FROM_SWIFTERPAYAPI", 
  "onComplete": (message) => {
    // Called on successful session completion
  },
    "onExit": (response) => {
    // Called on a failed session
  }
})

Parameters supported by the startSession function:

Parameter

Description

Default Value

Arguments

sessionID*
string

Session ID generated from Create Session API call

null

onComplete*
function

Success callback function to execute after a successful session

null

{response: Object}

(Refer success callback)

onExit*
function

Failure callback function to execute after an unsuccessful session, such as the user exiting or verification failing

null

{code: string}

(Refer exit codes)

selector
string

The selector of the element in which the Swifter Pay widget will be embedded

'body'

env
('sandbox' | null)

The environment, in which the flow will be initiated

null

'sandbox' - to initiate on sandbox environment

renderInModal
boolean

The mode of the Swifter Pay widget. Renders as a modal with an overlay, by default.
When false, the widget is embedded inline in the parent selector.

true

Sample checkout flow

<html>
  <body>
    <button id="start">Pay Now</button>

    <!-- Part 1/3 Include the Sparc Pay library -->
    <script src="https://js.payswifter.com/v1.js"></script>

    <script>
      // Part 2/3: Initialize SwifterPay
      const sp = new SwifterPay();

      document.getElementById('start').onclick = function() {
        // Part 3/3: Start a Session
        sp.startSession({
          "sessionID": "sessionID",
          "onComplete": function(response){
            console.log("Session completed successsfully");
          },
          "onExit": function(response){
            const {code} = response;
             if (code === 'requested_pay_later') {
               console.log('Place order anyway');
             } else if (code === 'init_error') {
               console.log('Initialization error');
             } else if (!code) {
               console.log('Exit without action');
             }
          }
        })

      };
    </script>
  </body>
</html>

Success Callback

onSuccess callback function is called with the following response object.

Parameter

Data Type

Notes

createdDate

Date ISO String

Datetime of the session creation

fees

number

Convenience fee configured by the merchant, in least denomination

referenceId

string

Unique Swifter reference ID

tip

number

Tip amount added by the customer, in least denomination

orderAmount

number

Order amount as set by the merchant, in least denomination

totalAmount

number

Sum of fee, tip and order amount, in least denomination

Sample response

{
  createdDate: '2021-12-19T03:33:28.574215+00:00', 
  fees: 150, 
  referenceId: 'hfyx47', 
  tip: null, 
  orderAmount: 100, 
  totalAmount: 250
}

Exit Callback

onExit callback function will be called with the appropriate error code/action code, based on the trigger scenario. A list of all the possible codes can be found here.

Sample response

{
  type: 'session_insufficient_balance',
  code: null
}