Receive Payments

Accept Payments

📘
Info
To accept a payment, create a transaction using our JavaScript library, netpay-lib, CDN, our SDKs. here is a link to our CDN

Collect Customer Information

Params	Required?	Description
email	Required	Email address of customer
merchantKey	Required	Your merchant key from Bank3D. Use test key for test mode and live key for live mode
amount	Required	Amount you're debiting customer(in the lowest currency value -`kobo`).
reference	No	Randomly generated alphanumeric characters allowed.it should be unique for each transaction.
Channels		An array of payment channels to control what channels you want to make available to the user to make a payment with. Available channels include; `['card', 'bank', 'ussd', 'bank_transfer']`
Currency		currency charge should be performed in `NGN`
callback	No	Function that runs when payment is successful. This should ideally be a script that uses the verify endpoint on the Bank3D 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 a payment.

The customer information can be retrieved from your 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-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", payWithBank3D, false);

function payWithBank3D(e) {

  e.preventDefault();


  const payment = Netpay.createPayment({
  
    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. 
    
    email: document.getElementById("email-address").value,

    merchantKey: 'Your-Merchant-Key', // merchant key with your public key
        

    onClose: function(){

      alert('The payment attempt failed');

    },

    callback: function(response){

      alert(`The payment with reference ${response.reference} was successful`);

          }

  });


  payment.open();

In this sample, notice how:

The Bank3D inline javascript is included using a script tag. This is how you import Bank3D into your code.
The amount here can be hardcoded if you want to charge a specific amount.
The Pay button has been tied to an onClick function called payWithBank3D. This is the action that causes the Bank3D 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.

var paymentForm = document.getElementById('paymentForm');
 
 paymentForm.addEventListener('submit', payWithBank3D, false);
 
const payment = Netpay.createPayment({
  amount: document.getElementById('amount').value * 100,
  
  reference: 'YOUR_REFERENCE', // Replace with a reference you generated 
  
  email: document.getElementById('email-address').value,
  
  merchantKey: 'Your-Merchant-Key', // Replace with you 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();

The merchantKey field here takes your Bank3D _public_ key.
The amount field has to be converted to the lowest currency unit by multiplying the value by 100. So if you wanted to charge N100 or you have to multiply 100 * 100 and pass 10000 in the amount field.
It's ideal to generate a unique reference from your system for every transaction to avoid duplicate attempts.
The callback method is called when payment has been completed successfully on the Bank3D checkout. See the next section to see for how to handle the callback.
the onClose method is called if the user closes the modal without completing payment.

Handle the callback method.

The callback method is fired when the transaction is processed. This is where you include any action you want to perform. The recommended next step here is
to verify the transaction to confirm the status.

📘
Tip:
To verify the transaction, you have to 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 the response is returned to your frontend.

you can call your server from the callback function in two ways

You do this by making a GET request to the Verify TransactionAPI endpoint from your server using your reference.

callback: function(response){

 fetch('url: 'http://www.yoururl.com/verify_transaction?reference='+ response.reference,', {
  method: 'GET',
  headers: {
    Accept: 'application.json',
    'Content-Type': 'application/json; charset=UTF-8'
  },
  body: JSON.stringify({body: body}),
  Cache: 'default'
}).then(function(response){
return response.json()}).then(function(data){ console.log(data) } 
  
 
 // the transaction status is in response.data.status 
}

Redirect to the server URL by setting a window.location to the URL where the verification endpoint is set on your server.

callback: function(response) {

  window.location = "http://www.yoururl.com/verify_transaction.php?reference=" + response.reference;

};

// On the redirected page, you can call the Bank3D verify endpoint.

🚧
Warning

Never call the Bank3D API directly from your frontend to avoid exposing your secret key on the frontend. All requests to the Bank3D API should be initiated from your server, and your frontend gets the response from your server.

Response should look like this

{
    "hmac": "feffc947c4a88cc1d91d5d3e7c3392838f0e50502bd3a7f8313d7854a9632714",
    "mode": "dev",
    

"status": "SUCCESSFUL",
 "code": "00",
    "description": "Approved by Financial Institution",
    "amount": 4000000,
    "merchantRef": "WQ-506391000507913",
    "transactionRef": "0000000000000044177",
    "paymentRef": "330137174040",
    "currencyCode": "NGN",
    "data": {
        "pan": "501501******5015",
        "expiry": "01/30",
        "expiryDate": "2030-01-31T23:59:00.000"
    },
    "option": "card",
    "nextAction": "APPROVE",
    "transactionDate": "2022-11-14T22:33:37.833Z",
    "paymentDate": "2022-11-14T22:34:24.913Z"
}

Receive Payments

Accept Payments

📘
Info

Collect Customer Information

Initialize Transaction

Handle the callback method.

📘
Tip:

🚧
Warning

Accept Payments

📘Info

Collect Customer Information

Initialize Transaction

Handle the callback method.

📘Tip:

🚧Warning

📘
Info

📘
Tip:

🚧
Warning