@netappsng/pay
v2.0.2
Published
A simple, secure payment SDK for accepting payments on your website.
Readme
NetAppsPay SDK V2
A simple, secure payment SDK for accepting payments on your website.
Table of Contents
| Section | Description | |---------|-------------| | Installation | NPM package and Script tag installation | | React Integration | React/Next.js implementation guide | | Script Widget | Vanilla JS implementation for any website | | Configuration Options | All available parameters | | Payment Channels | Available payment methods | | Response Format | Success and failure response structure | | Test Cards | Cards for testing in sandbox mode | | Support | Help and documentation links |
Installation
NPM Package (for React/Next.js)
npm install @netappsng/pay
# or
yarn add @netappsng/payScript Tag (for any website)
<script src="https://cdn.netapps.ng.com/netapps-pay.js"></script>React Integration
Basic Usage
import React, { useState } from 'react';
import { PaymentModal, type PaymentConfig } from '@netappsng/pay';
function CheckoutPage() {
const [showPayment, setShowPayment] = useState(false);
const config: PaymentConfig = {
// Required fields
publicKey: 'pk_live_xxxxxxxxxxxx',
amount: 500000, // Amount in kobo (₦5,000)
currency: 'NGN',
email: '[email protected]',
fullname: 'John Doe',
phoneNumber: '08012345678',
address1: '123 Main Street, Lagos',
paymentChannels: ['card', 'transfer', 'ussd', 'payattitude'],
// Optional fields
narration: 'Payment for Order #123',
businessName: 'My Store',
metadata: { orderId: 'ORD_123' },
// Callbacks
onSuccess: (response) => {
console.log('Payment successful:', response);
setShowPayment(false);
},
onFailed: (response) => {
console.log('Payment failed:', response);
},
onClose: () => {
setShowPayment(false);
},
};
return (
<div>
<button onClick={() => setShowPayment(true)}>Pay ₦5,000</button>
{showPayment && <PaymentModal config={config} />}
</div>
);
}
export default CheckoutPage;Using the Hook
import { useNetAppsPay } from '@netappsng/pay';
function PaymentButton() {
const { pay, isLoading } = useNetAppsPay({
publicKey: 'pk_live_xxxxxxxxxxxx'
});
const handlePayment = () => {
pay({
amount: 500000,
email: '[email protected]',
fullname: 'John Doe',
phoneNumber: '08012345678',
address1: '123 Main Street, Lagos',
paymentChannels: ['card', 'transfer'],
onSuccess: (response) => {
console.log('Success:', response);
},
onFailed: (response) => {
console.log('Failed:', response);
},
onClose: () => {
console.log('Widget closed');
},
});
};
return (
<button onClick={handlePayment} disabled={isLoading}>
{isLoading ? 'Processing...' : 'Pay ₦5,000'}
</button>
);
}Next.js Integration
// pages/checkout.tsx or app/checkout/page.tsx
'use client'; // Required for App Router
import dynamic from 'next/dynamic';
import { useState } from 'react';
// Dynamic import to avoid SSR issues
const PaymentModal = dynamic(
() => import('@netappsng/pay').then(mod => mod.PaymentModal),
{ ssr: false }
);
export default function CheckoutPage() {
const [showPayment, setShowPayment] = useState(false);
return (
<div>
<button onClick={() => setShowPayment(true)}>Pay Now</button>
{showPayment && (
<PaymentModal
config={{
publicKey: 'pk_live_xxxxxxxxxxxx',
amount: 500000,
email: '[email protected]',
fullname: 'John Doe',
phoneNumber: '08012345678',
address1: '123 Main Street, Lagos',
paymentChannels: ['card', 'transfer'],
onSuccess: (res) => {
console.log('Success:', res);
setShowPayment(false);
},
onClose: () => setShowPayment(false),
}}
/>
)}
</div>
);
}Script Widget
Works with any website - HTML, WordPress, PHP, Vue, Angular, etc.
Basic Usage
<!DOCTYPE html>
<html>
<head>
<title>Payment Page</title>
</head>
<body>
<button id="payBtn">Pay ₦5,000</button>
<script src="https://cdn.netappspay.com/netapps-pay.js"></script>
<script>
// Initialize with your public key
const netappsPay = new NetAppsPay('pk_live_xxxxxxxxxxxx');
document.getElementById('payBtn').onclick = function() {
netappsPay.pay({
// Required fields
amount: 500000, // Amount in kobo (₦5,000)
email: '[email protected]',
fullname: 'John Doe',
phoneNumber: '08012345678',
address1: '123 Main Street, Lagos',
paymentChannels: 'card,transfer,ussd,payattitude',
// Optional fields
currency: 'NGN',
narration: 'Payment for Order #123',
metadata: { orderId: 'ORD_123' },
// Callbacks
onSuccessful: function(response) {
console.log('Payment successful:', response);
// Verify payment on your server
},
onFailed: function(response) {
console.log('Payment failed:', response);
},
onClose: function() {
console.log('Widget closed');
}
});
};
</script>
</body>
</html>Custom Widget URL
// For testing with a different widget URL
const netappsPay = new NetAppsPay('pk_test_xxxxxxxxxxxx');Configuration Options
Required Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| publicKey | string | Your NetApps public key (starts with pk_live_ or pk_test_) |
| amount | number | Amount in minor units (kobo for NGN). Min: 10000 (₦100) |
| email | string | Customer's email address |
| fullname | string | Customer's full name (first and last) |
| phoneNumber | string | Customer's phone number |
| address1 | string | Customer's address |
| paymentChannels | string/array | Payment methods to display |
Optional Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| currency | string | 'NGN' | Currency code ('NGN' or 'USD') |
| narration | string | - | Payment description |
| transactionRef | string | Auto-generated | Your unique transaction reference |
| chargeAllocation | string | 'CUSTOMER' | Who pays fees: 'CUSTOMER' or 'MERCHANT' |
| metadata | object | - | Custom data to attach to transaction |
| businessName | string | - | Your business name (shown in sdk) |
| city | string | - | Customer's city |
| defaultChannel | string | - | Pre-selected payment channel |
Callbacks
| Callback | Description |
|----------|-------------|
| onSuccessful / onSuccess | Called when payment is successful |
| onFailed | Called when payment fails |
| onClose | Called when sdk is closed |
| onReady | Called when sdk is ready (script only) |
Payment Channels
| Channel | Code | Description |
|---------|------|-------------|
| Card | card | Debit/Credit card (Visa, Mastercard, Verve) |
| Bank Transfer | transfer | Pay via bank transfer to virtual account |
| USSD | ussd | Dial USSD code to complete payment |
| PayAttitude | payattitude | Mobile push notification payment |
Script Widget: paymentChannels: 'card,transfer,ussd,payattitude'
React/NPM: paymentChannels: ['card', 'transfer', 'ussd', 'payattitude']
Response Format
Success Response
{
status: 'success',
merchantRef: 'YOUR_REF_123',
transactionRef: 'NETAPPS_260117_xxxxx',
amount: 5000, // Amount in major units (₦5,000)
currency: 'NGN',
channel: 'card',
message: 'Payment successful',
timestamp: '2026-01-17T12:00:00Z'
}Failed Response
{
status: 'failed',
amount: 5000,
currency: 'NGN',
message: 'Card declined',
errorCode: 'CARD_DECLINED',
timestamp: '2026-01-17T12:00:00Z'
}Test Cards
Use these cards in test mode:
| Card Number | Expiry | CVV | Result | |-------------|--------|-----|--------| | 4000000000000002 | Any future date | Any 3 digits | Success | | 5200000000000007 | Any future date | Any 3 digits | Success (3DS) | | 4000000000000010 | Any future date | Any 3 digits | Declined |
Support
- Documentation: https://docs.netapps.ng
- Email: [email protected]
- Website: https://netapps.ng