Swifter JS is the front-end library needed on the e-commerce site.

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

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

How to use Swifter 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.

  "onComplete": (message) => {
  	// Called on successful session completion
	"onExit": (response) => {
    // Called on a failed session

Parameters supported by the startSession function:

ParameterDescriptionDefault ValueArguments
Session ID generated from Create Session API callnull
Success callback function to execute after a successful sessionnull{response: Object}

(Refer success callback)
Failure callback function to execute after an unsuccessful session, such as the user exiting or verification failingnull{code: string}

(Refer exit codes)
The selector of the element in which the Swifter Pay widget will be embedded'body'
('sandbox' | null)
The environment, in which the flow will be initiatednull'sandbox' - to initiate on sandbox environment
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.

Sample checkout flow

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

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

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

      document.getElementById('start').onclick = function() {
        // Part 3/3: Start a Session
          "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');


Success Callback

onSuccess callback function is called with the following response object.

ParameterData TypeNotes
createdDateDate ISO StringDatetime of the session creation
feesnumberConvenience fee configured by the merchant, in least denomination
referenceIdstringUnique Swifter reference ID
tipnumberTip amount added by the customer, in least denomination
orderAmountnumberOrder amount as set by the merchant, in least denomination
totalAmountnumberSum of fee, tip and order amount, in least denomination
consumerobjectConsumer information including name, email, phone number and last 4 digits of bank account

Sample response

  createdDate: '2021-12-19T03:33:28.574215+00:00', 
  fees: 150, 
  referenceId: 'hfyx47', 
  tip: null, 
  orderAmount: 100, 
  totalAmount: 250,
  consumer: {
    firstName: "Swifter",
    lastName: "User",
    phone: "+10000000000",
    email: "[email protected]',
    accountEnding: "1111",

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