Accepting Payments

you can use our client Javascript library, to accept payment from customers

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.

Param	Required	Description
merchantKey	Yes	Your public key from PaywithSwwipe. Use test key for test mode and live key for live mode
email	Yes	Email address of customer
amount	Yes	Amount(in the lowest currency value -kobo) you are debiting customer.
reference	Yes	Unique case sensitive transaction reference. If you do not pass this parameter, PaywithSwwipe will generate a unique reference for you.
currencyCode	No	Currency charge should be performed in. Allowed value is: NGN
callback	No	Function that runs when a payment is successful. This should ideally be a script that uses the verify endpoint on the PaywithSwwipe API to check the status of the transaction
onClose	No	JavaScript 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();

  // Get form data
  const email = document.getElementById('email-address').value;
  const amount = document.getElementById('amount').value;
  const firstName = document.getElementById('first-name').value;
  const lastName = document.getElementById('last-name').value;

  // validate form data




  const payment = Netpay.createPayment({
  amount: parseInt(amount) * 100, // Convert to kobo
    reference: generateReference(),
    email: email,
    merchantKey: 'Your-Merchant-Key',
    metadata: {
      firstName: firstName,
      lastName: lastName
    },
    callback: function(response) {
      verifyPayment(response.reference);
    },
    onClose: function() {
      alert('Payment was cancelled');
    }
  });
  
  payment.open();

}

function generateReference() {
  return 'txn_' + Date.now() + '_' + Math.random().toString(36).slice(2, 11);
}
 

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.

Important Notes

1. the merchantKey field here takes your PaywithSwwipe 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 PaywithSwwipe 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 PaywithSwwipe verify endpoint to confirm the status of the transaction. You should then return the response to your fronted.

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 call the PaywithSwwipe 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:

Parameter	Description
data.status	This indicates if the payment is successful or not
data.amount	This 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.

Security Best Practices

Never expose your secret key on the frontend. Always keep it on your server.

1. Use HTTPS for all payment pages
2. Validate amounts on both frontend and backend
3. Store transaction logs for audit purposes
4. Implement rate limiting on verification endpoints
5. Use webhook endpoints for reliable payment notifications