NetappsPay Integration
NetappsPay is a payment processing platform that allows you to easily integrate payments into your website or web application. In this guide, we will show you how to integrate NetappsPay using the netpay.js library.
Integration Walk-through
To use NetappsPay, you will need a NetappsPay public key. You can obtain this by signing up for a NetappsPay account and creating an application.
- Once you have your public key, you can add the NetappsPay library to your HTML file by including the following script tag in the
<head>section:
<script src="https://cdn.netapps.ng/pay/netappspay.js" type="text/javascript"></script>
- In the bottom section of your HTML file, add a button element that will be used to trigger the payment process when clicked. For example:
<button onclick="pay()">Test Payment</button>
- Define a
pay()JavaScript function that will be called when the button is clicked. In this function, you can create an instance of the InitNetAppsPay class by passing in your NetPay public key as an argument. Then, you can call the pay() method in this instance, passing in an object with the required payment details, such as the currency, amount, phone number, etc. An example of this is shown below:
function pay() {
var publicKey = "4a650f4a81eb4ae5acd202f392ee491f"
const service = new InitNetAppsPay(publicKey);
service.pay({
currency: 'NGN',
amount: 1,
phone: '080****',
paymentChannels: 'card,ussd,transfer,payatitude',
email: '[email protected]',
fullname: 'John Doe',
narration: 'Testing',
onReady: function (){
},
onSuccessful: function (res) {
},
onFailed: function (res) {
}
}, function (success, err) {
if(success) {
// Payment successful
}
if(err) {
// Payment failed
}
})
// Run this to close payment modal
service.close()
}
Get customer details
To initiate the transaction, you need to pass a pay load with data such as email, amount, etc. The table below describes the parameters that you can pass when initializing a transaction.
| Required | Required | Description |
|---|---|---|
| key | Yes | The key is your NetappsPay public API key |
| currency | Yes | The currency to charge in. If you don't specify a value. |
| amount | Yes | The amount to charge the customer. |
| phone | Yes | The phone number of the customer. |
| paymentChannels | Yes | 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','ussd','transfer','payatitude'] |
| Yes | The email of the customer | |
| fullname | Yes | The full name of the customer |
| narration | Yes | The paymentChannel allows you to specify what payment channels to allow payments from. |
The customer details can be gotten from the database if it already exist, or from a form as shown in the example below:/
<form id="paymentForm">
<div class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email-address" required />
</div>
<div class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class="form-group">
<label for="amount">Amount</label>
<input type="tel" id="amount" required />
</div>
<div class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class="form-group">
<label for="first-name">First Name</label>
<input type="text" id="first-name" />
</div>
<div class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class="form-group">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" />
</div>
<div class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class='preserveHtml' class="form-submit">
<button type="submit" onclick="payWithPaystack()"> Pay </button>
</div>
</form>
<button onclick="pay()">Test Payment</button>
That's it! When the button is clicked, the pay() function will be called, which will initiate the payment process using the NetPay JavaScript library. You can add additional code in the callback function to handle the success or failure of the payment.
Note
Based on ISO-85 standard, the amount should be in the lower denomination of the supported currency i.e. for USD50 the figure should be 5000.
Verify transaction
When payment has been made, next is to confirm the transaction status. A transaction can be confirmed by using webhooks.
Updated over 1 year ago