Bank3D Embedded

👍

Good to know

you can use Netpay JavaScript client library to accept payment from customers.

Nepay Library

Netpay provides a simple and convenient payment flow for web. to receive payment from customers, you can just use the following steps:

Collect customer information

To initialize the transaction, you need to pass information such as email, amount, transaction reference, etc.

The merchantKey, email and amount parameters are the only required parameters. The table below lists the parameters that you can pass when initializing a transaction.

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

<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="payWithBank3D()"> Pay </button>

  </div>

</form>


<script src="https://unpkg.com/netpay-lib@latest/umd/netpay.min.js"></script>

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

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


function payWithBank3D(e) {

  e.preventDefault();


   const payment = Swwipe.createPayment({

    merchantKey: 'pk_test_xxxxxxxxxx', // Replace with your public key

    email: document.getElementById("email-address").value,

    amount: document.getElementById("amount").value * 100,

    reference: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you

    // label: "Optional string that replaces customer email"

    onClose: function(){

      alert('Window closed.');

    },

    callback: function(response){

      let message = 'Payment complete! Reference: ' + response.reference;

      alert(message);

    }

  });

payment.open();

}

In this sample, notice how:

1. The Amount here can be hard-coded if you want to charge a specific amount
2. The pay button has been tied to an onClick function called payWithBank3D. This is the action that causes the Netpay 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 Bank3D and displays the checkout popup modal.

// Create the payment instance
 
const payment = Netpay.createPayment({
  amount: 400000,
  
  reference: 'YOUR_REFERENCE',
  
  email: '[email protected]',
  
  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 Swwipe 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 Bank3d 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: 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 call the Bank3d 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:

🚧

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.