@zevpay/react

React components and hooks for ZevPay Checkout. Drop-in payment UI powered by @zevpay/inline.

Installation

npm install @zevpay/react @zevpay/inline

Requires React 18 or later.

Quick start

Button component

import { ZevPayButton } from '@zevpay/react';

function CheckoutPage() {
  return (
    <ZevPayButton
      apiKey="pk_test_your_public_key"
      email="[email protected]"
      amount={500000} // ₦5,000 in kobo
      onSuccess={(reference) => {
        console.log('Payment successful:', reference);
        // Verify payment on your server
      }}
    >
      Pay ₦5,000
    </ZevPayButton>
  );
}

Hook

import { useZevPayCheckout } from '@zevpay/react';

function CheckoutPage() {
  const { openCheckout } = useZevPayCheckout({
    apiKey: 'pk_test_your_public_key',
    onSuccess: (reference) => {
      console.log('Payment successful:', reference);
    },
  });

  return (
    <button onClick={() => openCheckout({
      email: '[email protected]',
      amount: 500000,
    })}>
      Pay ₦5,000
    </button>
  );
}

Provider (shared API key)

import { ZevPayProvider, ZevPayButton } from '@zevpay/react';

function App() {
  return (
    <ZevPayProvider apiKey="pk_test_your_public_key">
      <ProductPage />
    </ZevPayProvider>
  );
}

function ProductPage() {
  return (
    <ZevPayButton email="[email protected]" amount={500000}>
      Pay ₦5,000
    </ZevPayButton>
  );
}

API

<ZevPayButton />

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes* | 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 | | paymentMethods | "all" | string[] | No | Payment methods to show | | onSuccess | (reference: string) => void | No | Called on successful payment | | onClose | () => void | No | Called when modal closes | | 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 on session init | | children | ReactNode | No | Button content (default: "Pay Now") | | className | string | No | CSS class for the button | | disabled | boolean | No | Disable the button |

*Required unless <ZevPayProvider> is used.

useZevPayCheckout(config)

Returns { openCheckout } — call openCheckout(params) to open checkout.

Config (shared options):

| Option | Type | Description | |--------|------|-------------| | apiKey | string | Public API key (or use Provider) | | currency | string | Currency code | | paymentMethods | "all" | string[] | Payment methods | | onSuccess | function | Success callback | | onClose | function | Close callback | | onError | function | Error callback | | onFailure | function | Failure callback | | onExpired | function | Expiry callback | | onInitialize | function | Init callback |

openCheckout params (per-call):

| Param | Type | Required | Description | |-------|------|----------|-------------| | email | string | Yes | Customer email | | amount | number | Yes | Amount in kobo | | reference | string | No | Transaction reference | | firstName | string | No | Customer first name | | lastName | string | No | Customer last name | | metadata | object | No | Custom metadata |

<ZevPayProvider>

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes | Shared public API key | | children | ReactNode | Yes | Child components |

Amounts

All amounts are in kobo (minor currency units):

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

Server-side verification

Always verify payments on your server after onSuccess:

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