react-safehaven-checkout

A lightweight React package that provides a Tailwind-styled popup for integrating SafeHaven Checkout into your React applications.

This package abstracts the SafeHaven Checkout JS SDK and exposes a simple React API. You only provide your credentials and customer details — the popup handles the rest.

✨ Features

• Easy React integration
• TailwindCSS modal popup UI
• Supports SafeHaven sandbox and production environments
• Automatically configures settlement bank code by environment
• Fully written in TypeScript
• Ships with complete type definitions
• No SDK setup required by the consumer

📦 Installation

npm install react-safehaven-checkout

or

yarn add react-safehaven-checkout

import { SafeHavenPopup } from "react-safehaven-checkout";

function App() {
  return (
    <SafeHavenPopup
      clientId="shv_test_xxx"
      reference="ORDER-1001"
      amount={5000}
      environment="sandbox"
      email="[email protected]"
      firstName="John"
      lastName="Doe"
      phoneNumber="08031234567"
      settlementAccountNumber="0123456789"
      buttonText="Pay Now"
      onSuccess={(response) => {
        console.log("Payment successful:", response);
      }}
      onClose={() => {
        console.log("Checkout closed");
      }}
    />
  );
}

export default App;

| Prop | Type | Required | Description | | ------------------------- | --------------------------- | -------- | ----------------------------------------------- | | clientId | string | ✅ Yes | SafeHaven OAuth Client ID | | reference | string | ✅ Yes | Merchant-generated unique transaction reference | | amount | number | ✅ Yes | Amount in NGN (minimum ₦100) | | currency | "NGN" | ❌ No | Defaults to "NGN" | | environment | "sandbox" \| "production" | ❌ No | Defaults to "sandbox" | | email | string | ✅ Yes | Customer email address | | firstName | string | ✅ Yes | Customer first name | | lastName | string | ✅ Yes | Customer last name | | phoneNumber | string | ✅ Yes | Customer phone number | | settlementAccountNumber | string | ✅ Yes | 10-digit SafeHaven settlement account number | | buttonText | string | ❌ No | Text for trigger button (default: "Pay Now") | | onSuccess | (response: any) => void | ❌ No | Called when payment succeeds | | onClose | () => void | ❌ No | Called when checkout is closed |

🏦 Settlement Account Handling

You only need to provide the account number. The package automatically sets the correct bank code based on the environment:

🎨 Styling

The popup is styled using TailwindCSS utility classes.

If your project already uses Tailwind CSS, the component will work out of the box. If Tailwind is not set up, you can style the component using global CSS or by wrapping it in your own styled component.

🧠 Notes & Requirements

All customer fields (email, firstName, lastName, phoneNumber) are required by SafeHaven. reference must be unique per transaction. amount must be ≥ ₦100. Requires React 17+. Fully TypeScript supported with complete type definitions.

Keywords

safehaven, safehaven-checkout, checkout, payment, nigeria, fintech, payment-gateway, banking, nigerian-fintech

📜 License

MIT

Made with ❤️ for the developer community.