zewstpay-react

React SDK for ZewstPay. Easily integrate ZewstPay payment links and checkout into your React or Next.js application.

Installation

npm install zewstpay-react
# or
yarn add zewstpay-react
# or
pnpm add zewstpay-react

Usage

The SDK provides a function initializeZewstPay to open the payment modal.

Basic Example

import { initializeZewstPay } from "zewstpay-react";

function CheckoutButton({ orderCode }) {
  const handleCheckout = () => {
    const handle = initializeZewstPay({
      apiKey: "YOUR_PUBLIC_API_KEY",
      code: orderCode, // The order code from ZewstPay
      environment: "sandbox", // or 'live'
      onSuccess: (data) => {
        console.log("Payment successful:", data);
      },
      onError: (error) => {
        console.error("Payment failed:", error);
      },
      onClose: () => {
        console.log("Payment modal closed");
      },
    });
  };

  return <button onClick={handleCheckout}>Pay Now</button>;
}

Next.js / Server Components

Since initializeZewstPay interacts with the DOM (window/document), ensure you call it from a Client Component or inside a useEffect/event handler where window is defined.

API Reference

initializeZewstPay(options)

Initializes and opens the ZewstPay payment modal.

Parameters:

options: InitializeZewstPayOptions object with the following properties:

| Property | Type | Required | Description | | -------------------- | --------------------------------------- | -------- | ---------------------------------------------------- | | apiKey | string | Yes | Your ZewstPay Public API Key. | | code | string | Yes | The Order Code or Payment Link Identifier. | | environment | 'sandbox' \| 'live' | No | Environment to use. Defaults to 'sandbox'. | | onSuccess | (data: { orderCode: string }) => void | No | Callback fired when payment succeeds. | | onError | (error: any) => void | No | Callback fired when an error occurs. | | onClose | () => void | No | Callback fired when the modal is closed. | | onOpen | () => void | No | Callback fired when the modal opens. | | baseUrl | string | No | Override the base API URL (for advanced usage). | | merchantIdOverride | string | No | Override the Finix Merchant ID (for advanced usage). |

Returns:

ZewstPayHandle object:

• open(): Re-opens the modal (if closed).
• close(): Closes the modal programmatically.
• container: The DOM element containing the modal.

Styling

The modal comes with built-in styles that render it as a centered overlay. It injects a style tag into the DOM.

License

MIT