Skip to main content

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

1) Install the SDK​

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

<script src="https://js.inpaycheckout.com/v1/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:

OptionTypeRequiredNotes
apiKeystringYesPublic key from Dashboard
amountnumberYesIn lowest denomination (kobo)
emailstringYesCustomer email
currencystringNoDefaults to NGN
firstNamestringNo—
lastNamestringNo—
metadataobjectNoAttach your identifiers
onClosefunctionNoCalled when modal closes

5) Go live​

  1. Complete business verification
  2. Switch to Live keys (Dashboard → Keys & Webhooks)
  3. 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