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.

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 Swifter 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
consumer	object	Consumer 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
}