​
SwwipePay

SwwipePay library provides a simple and convenient payment flow for web. It can be integrated in easy steps, making it the easiest way to start accepting payments. you can make use of the SwwipePay CDN.

https://parkwaycdnstorage.blob.core.windows.net/bank3d/bank3d.min.js

​
Collecting Customer Information

To initialize the transaction, you need to pass information such as email, amount, transaction reference, etc. The key, email and amount parameters are the only required parameters. The table below lists the parameters that you can pass when initializing a transaction.

ParamRequiredDescription
merchantKeyYesYour SwwipePay merchant key. Use test key for test mode and live key for live mode
emailYesEmail address of customer
amountYesAmount(in the lowest currency value -kobo) you are debiting customer.
referenceYesUnique case sensitive transaction reference. If you do not pass this parameter, SwwipePay will generate a unique reference for you.
currencyCodeNoCurrency charge should be performed in. Allowed value is: NGN
callbackNoFunction that runs when a payment is successful. This should ideally be a script that uses the verify endpoint on the SwwipePay API to check the status of the transaction
onCloseNoJavaScript function that is called if the customer closes the payment window instead of making payment.

The customer information can be retrieved from a database if you already have it stored, or from a form like in the example below:

index.html
 <form id="paymentForm">

  <div class="form-group">

    <label for="email">Email Address</label>

    <input type="email" id="email-address" required />

  </div>

  <div class="form-group">

    <label for="amount">Amount</label>

    <input type="tel" id="amount" required />

  </div>

  <div class="form-group">

    <label for="first-name">First Name</label>

    <input type="text" id="first-name" />

  </div>

  <div class="form-group">

    <label for="last-name">Last Name</label>

    <input type="text" id="last-name" />

  </div>

  <div class="form-submit">

    <button type="submit" onclick="payWithSwwipe()"> Pay </button>

  </div>

</form>

<script src="https://parkwaycdnstorage.blob.core.windows.net/bank3d/bank3d.min.js"></script>

To use SwwipePay, you simply call the createPayment method on the SwwipePay library passing in the payment options object. This returns an instance of a payment. To open the SwwipePay window, call the open method on the payment object

index.js
// Create the payment instance

const paymentForm = document.getElementById('paymentForm');

paymentForm.addEventListener("submit", payWithSwwipe, false);

function payWithSwwipe(e) {

  e.preventDefault();

  const payment = Netpay.createPayment({
  amount: 400000,
  
  reference: 'SFSE552VB',
  
  email: 'email@email.com',
  
  merchantKey: 'Your-Merchant-Key',
  
  callback: function(response){
  	alert(`The payment with reference ${response.reference} was successful`);
  },
  
  onClose: function() {
    alert(`The payment attempt failed`);
  }
  // You can find the rest of the payment options in the definition file below
});
payment.open();

}

In the sample code above, notice how:

  1. The pay button has been tied to an onClick function called payWithSwwipe. This is the action that causes SwwipePay library popup to load.

​
Initialize transaction

When you have all the details needed to initiate the transaction, the next step is to tie them to the JavaScript function that passes them to SwwipePay and displays the checkout popup modal.

initialize
// Create the payment instance

const payment = Netpay.createPayment({
 amount: 400000,
 
 reference: 'YOUR_REFERENCE',
 
 email: 'email@email.com',
 
 merchantKey: 'Your-Merchant-Key',
 
 callback: function(response){
 	alert(`The payment with reference ${response.reference} was successful`);
 },
 
 onClose: function() {
   alert(`The payment attempt failed`);
 }
 // You can find the rest of the payment options in the definition file below
});
payment.open();

​
Important Notes

  1. the merchantKey field here takes your SwwipePay publickey.
  2. The amount field has to be converted to the lowest currency unit by multiplying the value by 100 so if you wanted to charge** N50**, you have to multiply** 50 * 100** and pass 5000 in the amount field.
  3. It’s ideal to generate a unique reference from your system for every transaction to avoid duplicate attempts.
  4. The callback method is called when payment has been completed successfully on the Bank3D checkout. See the next section to see how to hand the callback.
  5. the onClose method is called if the user closes the modal without completing payment.

​
Handling the callback method

The callback method is triggered when the transaction is completed. This is where you verify the transaction status.

Helpful Tip To verify the transaction, you have to set up a route page that you pass the transaction reference to From your server, you call the Swwipe verify endpoint to confirm the status of the transaction. You should then return the response to your fronted.

In your callback function, you should make a request to your server where the verification is performed:

callback

callback: function(resonse){
  // make API request to your server 
}

​
Verify the transaction status

After payment is made, the next step is to confirm the status of the transaction. A transaction can be confirmed by the verify transactions endpoint. To verify the transaction, you must set up a route or page on your server that you pass the reference to. Then from your server, you calls SwwipePay verify endpoint to confirm the status of the transaction, and response is returned to your fronted. The following parameters are needed to confirm if you should deliver value to your customer or not:

ParameterDescription
data.statusThis indicates if the payment is successful or not
data.amountThis indicates the price of your product or service in the lower denomination (e.g for NGN 50, you’d see 5000 and so on)

🚧 Verify Amount

When verifying the status of a transaction, you should also verify the amount to ensure it matches the value of the service you are delivering. If the amount doesn’t match, do not deliver value to the customer.

Overview