Quick Start (Inline Checkout)

Integrate the iNPAY Checkout modal on your website in minutes. No package manager required — just a script tag and a click handler.

Prerequisites

iNPAY account with KYC Tier 2 or higher
Public key from the Checkout Dashboard (Settings → Keys & Webhooks)
A page where you can add a script tag

Available Versions

Version	Script URL	Features
V1	`https://js.inpaycheckout.com/v1/inline.js`	Bank Transfer, PayID, QR Code
V2	`https://js.inpaycheckout.com/v2/inline.js`	V1 + Card Payments + Payment Method Control

1) Install the SDK

Add the script to the <head> of your page:

<!-- V1 (Stable) - Shows all available payment methods -->
<script src="https://js.inpaycheckout.com/v1/inline.js"></script>

<!-- V2 (New) - Includes card payments & method control -->
<script src="https://js.inpaycheckout.com/v2/inline.js"></script>

This exposes window.iNPAY.InpayCheckout once loaded.

2) Try the Live Demo

Live Demo

This is a live demo of the iNPAY Checkout modal. Transactions completed through this demo will be counted as a giveaway to help you simulate our checkout experience in real-time.

Try the checkout modal below. Enter your name and email, then click "Pay Now" to see the modal in action:

3) Minimal integration

Vanilla JavaScript

<button id="payButton">Pay Now</button>
<script>
  document.getElementById('payButton').addEventListener('click', () => {
    try {
      const inpay = new window.iNPAY.InpayCheckout();
      inpay.checkout({
        apiKey: 'pk_sandbox_your_public_api_key',
        amount: 500000, // ₦5,000.00 NGN in kobo
        email: 'customer@example.com',
        firstName: 'Jane',
        lastName: 'Doe',
        metadata: { order_id: 'ORD-12345' },
        onClose: () => console.log('Modal closed')
      });
    } catch (error) {
      console.error('Checkout Error:', error?.message || error);
    }
  });
</script>

React

// public/index.html → add the script tag there
// Then in a component:
export default function PayButton() {
  const onPay = () => {
    const inpay = new (window as any).iNPAY.InpayCheckout();
    inpay.checkout({
      apiKey: 'pk_sandbox_your_public_api_key',
      amount: 500000,
      email: 'customer@example.com',
      firstName: 'Jane',
      lastName: 'Doe',
      metadata: { cart_id: 'cart-xyz-789' },
      onClose: () => console.log('Closed')
    });
  };
  return <button onClick={onPay}>Pay ₦5,000.00</button>;
}

PHP (Blade template)

<!-- resources/views/checkout.blade.php -->
<head>
  <script src="https://js.inpaycheckout.com/v1/inline.js"></script>
</head>
<button id="payBtn">Pay Now</button>
<script>
  document.getElementById('payBtn').addEventListener('click', () => {
    const inpay = new window.iNPAY.InpayCheckout();
    inpay.checkout({ apiKey: '<?= e($publicKey) ?>', amount: 500000, email: 'customer@example.com' });
  });
</script>

Python (Flask + Jinja)

<!-- templates/checkout.html -->
<head>
  <script src="https://js.inpaycheckout.com/v1/inline.js"></script>
</head>
<button id="payBtn">Pay Now</button>
<script>
  document.getElementById('payBtn').addEventListener('click', () => {
    const inpay = new window.iNPAY.InpayCheckout();
    inpay.checkout({ apiKey: '{{ public_key }}', amount: 500000, email: 'customer@example.com' });
  });
</script>

Ruby (Rails ERB)

<!-- app/views/payments/new.html.erb -->
<head>
  <script src="https://js.inpaycheckout.com/v1/inline.js"></script>
</head>
<button id="payBtn">Pay Now</button>
<script>
  document.getElementById('payBtn').addEventListener('click', () => {
    const inpay = new window.iNPAY.InpayCheckout();
    inpay.checkout({ apiKey: '<%= h(@public_key) %>', amount: 500000, email: 'customer@example.com' });
  });
</script>

4) Options reference

checkout(options) accepts:

Common Options (V1 & V2)

Option	Type	Required	Notes
`apiKey`	string	Yes	Public key from Dashboard
`amount`	number	Yes	In lowest denomination (kobo)
`email`	string	Yes	Customer email
`currency`	string	No	Defaults to `NGN`
`firstName`	string	No	—
`lastName`	string	No	—
`metadata`	object	No	Attach your identifiers
`onClose`	function	No	Called when modal closes
`onSuccess`	function	No	Called with reference on success
`onFailure`	function	No	Called on payment failure
`onError`	function	No	Called on errors

V2-Only Options

Option	Type	Required	Notes
`paymentMethods`	`"all"` or array or `undefined`	No	Control which methods to show. If not provided, uses dashboard settings. If provided, overrides dashboard settings.

`paymentMethods` Values

// Use dashboard settings (recommended - don't pass paymentMethods)
// The payment methods configured in your dashboard will be used

// Explicitly show all methods (overrides dashboard settings)
paymentMethods: "all"

// Show only specific methods (overrides dashboard settings)
paymentMethods: ["bank"]              // Bank Transfer only
paymentMethods: ["card"]              // Card Payment only
paymentMethods: ["payid"]             // PayID + QR Code
paymentMethods: ["bank", "card"]      // Bank + Card
paymentMethods: ["bank", "payid"]     // Bank + PayID + QR
paymentMethods: ["payid", "card"]     // PayID + QR + Card
paymentMethods: ["bank", "payid", "card"]  // All methods

tip

"payid" automatically includes QR Code since they use the same underlying payment method.

Dashboard Settings Fallback (V2 Only)

If you don't pass the paymentMethods option, the checkout modal will automatically use the payment methods you've configured in your dashboard (Settings → Payment Methods). This allows you to:

Set default payment methods for all checkout sessions in your dashboard
Override on a per-checkout basis by explicitly passing paymentMethods when needed
Simplify integration - you don't need to pass payment methods every time

Example: Using Dashboard Settings

inpay.checkout({
  apiKey: 'pk_sandbox_your_public_api_key',
  amount: 500000,
  email: 'customer@example.com',
  // paymentMethods not provided - uses dashboard settings
});

Example: Overriding Dashboard Settings

inpay.checkout({
  apiKey: 'pk_sandbox_your_public_api_key',
  amount: 500000,
  email: 'customer@example.com',
  paymentMethods: ['card'], // Override dashboard settings
});

Configure your default payment methods in Dashboard → Settings → Payment Methods.

5) V2 Example — Payment Method Control

V2 lets you control which payment methods appear:

<!-- Using V2 Script -->
<script src="https://js.inpaycheckout.com/v2/inline.js"></script>

<script>
document.getElementById('payButton').addEventListener('click', () => {
  const inpay = new window.iNPAY.InpayCheckout();
  inpay.checkout({
    apiKey: 'pk_sandbox_your_public_api_key',
    amount: 500000,
    email: 'customer@example.com',
    // V2: Show only card and bank transfer
    paymentMethods: ['bank', 'card'],
    onSuccess: (reference) => {
      console.log('Payment successful:', reference);
    }
  });
});
</script>

6) Go live

Complete business verification
Switch to Live keys (Dashboard → Keys & Webhooks)
Use your live public key in production

Next steps

Collect Payments (Checkout modal) → /docs/products/collect-payments
API Reference (v1.0) → /docs/api/v1
Webhooks (Coming soon) → /docs/guides/webhooks

Prerequisites​

Available Versions​

1) Install the SDK​

2) Try the Live Demo​

3) Minimal integration​

Vanilla JavaScript​

React​

PHP (Blade template)​

Python (Flask + Jinja)​

Ruby (Rails ERB)​

4) Options reference​

Common Options (V1 & V2)​

V2-Only Options​

paymentMethods Values​

5) V2 Example — Payment Method Control​

6) Go live​

Next steps​