@zevpay/inline

Drop-in checkout modal for accepting payments on your website with ZevPay Checkout.

Installation

npm

npm install @zevpay/inline

CDN (Script Tag)

<script src="https://js.zevpaycheckout.com/v1/inline.js"></script>

Quick Start

Script Tag

<script src="https://js.zevpaycheckout.com/v1/inline.js"></script>
<script>
  function payWithZevPay() {
    const checkout = new ZevPay.ZevPayCheckout();
    checkout.checkout({
      apiKey: 'pk_live_xxx',
      email: '[email protected]',
      amount: 500000, // ₦5,000 in kobo
      reference: 'ORDER-123',
      firstName: 'John',
      lastName: 'Doe',
      onSuccess: function (reference) {
        // Verify payment on your server
        console.log('Payment successful:', reference);
      },
      onClose: function () {
        console.log('Checkout closed');
      },
    });
  }
</script>

<button onclick="payWithZevPay()">Pay ₦5,000</button>

ES Module (npm)

import { ZevPayCheckout } from '@zevpay/inline';

const checkout = new ZevPayCheckout();

checkout.checkout({
  apiKey: 'pk_live_xxx',
  email: '[email protected]',
  amount: 500000,
  reference: 'ORDER-123',
  firstName: 'John',
  lastName: 'Doe',
  onSuccess: (reference) => {
    // Verify payment on your server
  },
  onClose: () => {
    console.log('Checkout closed');
  },
});

Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | apiKey | string | Yes | Your public API key (pk_live_* or pk_test_*) | | email | string | Yes | Customer email address | | amount | number | Yes | Amount in kobo (₦1 = 100 kobo) | | currency | string | No | Currency code (default: NGN) | | reference | string | No | Your unique transaction reference | | firstName | string | No | Customer first name | | lastName | string | No | Customer last name | | metadata | object | No | Custom metadata object | | paymentMethods | "all" or string[] | No | Payment methods to show ("bank", "payid", "card") | | onSuccess | (reference: string) => void | No | Called on successful payment | | onClose | () => void | No | Called when modal is closed | | onError | (error: Error) => void | No | Called on error | | onFailure | (error?: Error) => void | No | Called on payment failure | | onExpired | () => void | No | Called when session expires | | onInitialize | () => void | No | Called when checkout initializes |

Payment Methods

| Method | Value | Status | |--------|-------|--------| | Bank Transfer | "bank" | Available | | ZevPay ID | "payid" | Available | | Card | "card" | Coming soon |

// Show only bank transfer
checkout.checkout({
  // ...
  paymentMethods: ['bank'],
});

// Show bank and PayID only
checkout.checkout({
  // ...
  paymentMethods: ['bank', 'payid'],
});

Amounts

All amounts are in kobo (minor currency units):

| Naira | Kobo | |-------|------| | ₦1 | 100 | | ₦1,000 | 100,000 | | ₦10,000 | 1,000,000 |

Verify Payment

After onSuccess fires, verify the payment server-side using your secret key:

// Server-side (Node.js with @zevpay/node)
import ZevPay from '@zevpay/node';

const zevpay = new ZevPay('sk_live_xxx');
const result = await zevpay.checkout.verify(sessionId);

if (result.status === 'completed') {
  // Payment confirmed
}

License

MIT