@simplipayng/checkout

A React component for accepting card payments via SimpliPay.

Installation

npm install @simplipayng/checkout
# or
yarn add @simplipayng/checkout

Quick Start

import { SimpliPayCheckout } from '@simplipayng/checkout';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Pay Now</button>

      <SimpliPayCheckout
        isOpen={isOpen}
        config={{
          publicKey: 'pk_test_your_public_key',
          environment: 'development' // or 'production'
        }}
        paymentData={{
          organizationId: 'your-organization-id',
          email: '[email protected]',
          phone: '+2348012345678',
          amount: 5000,
          currency: 'NGN',
          transactionRef: 'TXN-' + Date.now(),
          customerId: 'CUST-123',
          serviceId: 'payment-service', // optional
          narration: 'Payment for order', // optional
          merchantName: 'Your Store'
        }}
        callbacks={{
          onSuccess: (result) => {
            console.log('Payment successful:', result);
            setIsOpen(false);
          },
          onError: (error) => {
            console.error('Payment failed:', error);
          },
          onClose: () => setIsOpen(false)
        }}
      />
    </>
  );
}

Using the Hook

import { SimpliPayCheckout, useSimplipay } from '@simplipayng/checkout';

function App() {
  const { isOpen, openCheckout, closeCheckout, paymentData } = useSimplipay({
    publicKey: 'pk_test_your_public_key',
    environment: 'development'
  });

  const handlePay = () => {
    openCheckout({
      organizationId: 'your-organization-id',
      email: '[email protected]',
      phone: '+2348012345678',
      amount: 5000,
      currency: 'NGN',
      transactionRef: 'TXN-' + Date.now(),
      customerId: 'CUST-123',
      narration: 'Payment for order'
    });
  };

  return (
    <>
      <button onClick={handlePay}>Pay Now</button>
      
      {paymentData && (
        <SimpliPayCheckout
          isOpen={isOpen}
          config={{ publicKey: 'pk_test_xxx', environment: 'development' }}
          paymentData={paymentData}
          callbacks={{
            onSuccess: (result) => closeCheckout(),
            onError: (error) => console.error(error),
            onClose: closeCheckout
          }}
        />
      )}
    </>
  );
}

Props

SimpliPayCheckout

| Prop | Type | Description | |------|------|-------------| | isOpen | boolean | Whether to show the checkout modal | | config | SimpliPayConfig | Configuration object | | paymentData | PaymentData | Payment details | | callbacks | CheckoutCallbacks | Callback functions |

SimpliPayConfig

| Property | Type | Description | |----------|------|-------------| | publicKey | string | Your SimpliPay public key | | environment | 'development' \| 'production' | API environment | | baseUrl | string (optional) | Custom API URL |

PaymentData

| Property | Type | Description | |----------|------|-------------| | organizationId | string | Your SimpliPay organization ID | | email | string | Customer email | | phone | string | Customer phone (with country code) | | amount | number | Amount to charge | | currency | string | Currency code (e.g., 'NGN') | | transactionRef | string | Unique transaction reference | | customerId | string | Your customer identifier | | serviceId | string (optional) | Service ID for the payment | | narration | string (optional) | Payment description/narration | | merchantName | string (optional) | Your business name | | metadata | object (optional) | Additional data |

CheckoutCallbacks

| Property | Type | Description | |----------|------|-------------| | onSuccess | (result: TransactionResult) => void | Called on successful payment | | onError | (error: TransactionError) => void | Called on payment failure | | onClose | () => void | Called when modal is closed |

License

MIT © SimpliPay