JavaScript

Integrating SwipePay

Getting the Javascript file

To integrate SwipePay into your application, download the javascript file using the download button or using the CDN link below.


#CDN
<script src="https://cdn.jsdelivr.net/npm/swipe-pay@2.0.1"></script>

#NPM
npm i swipe-pay

Loading HTML and Script files

Proceed to add the HTML code and its associated script file into the said application

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connecting to Swipe Pay</title>
    <base href="/">
    <link rel="stylesheet" type="text/css" />
</head>

<body>
    <swipe-pay-widget
        merchant-id="898965953867317248"
        pay-amount= '140'
        fallback-url = 'https://app.swipe.ng/'
    ></swipe-pay-widget>

    <script type="text/javascript" src="swipe-pay-widget.js"></script>
</body>

window.addEventListener("swipe.connect.on_exit", function(evt) {
        alert(evt.detail);
    }, false);


    window.addEventListener("swipe.connect.success", function(evt) {
        alert(JSON.stringify(evt.detail));
    }, false);


    window.addEventListener("swipe.connect.failed", function(evt) {
        alert( JSON.stringify(evt.detail));
    }, false);

Usage

The payload has three(3) properties, the description of the properties is shown below.

Properties	Required	Description
merchant-id	YES	The id given to the merchant on sign up.
pay-amount	YES	The amount of the transaction
fallback-url	YES	This is the redirect URL the user is referred to after the process has been completed.

Configuration

Enforce any action or set up any process when any of the specified events is triggered. The events are as follows:

Event	Description
swipe.connect.on-exit	This is the event that is triggered when the user exits the application. Return type: String
swipe.connect.success	This is the event that is triggered when the user has made a successful payment. Return type: Object
swipe.connect.failed	This is the event that is triggered when the transaction wasn't successful. Return type: Object