How to Easily Integrate the SeerBit Payment Solution with React.js

Integrating the SeerBit ReactJS SDK into your application is straightforward—even for beginners.

This guide walks you step by step through obtaining your Public Key, installing prerequisites, configuring environment variables, and using the SDK both as a React Hook and as a prebuilt Button component. By following best practices for secure key management, and error handling, you’ll be able to accept payments seamlessly in minutes.

Introduction

SeerBit’s seerbit-reactjs package provides a React-specific wrapper for SeerBit’s payment gateway, enabling you to embed payment flows with minimal code. It abstracts away raw HTTP calls, encryption, and error parsing—letting you focus on building your UI and business logic without wrestling with low‑level API details.

Prerequisites

Before integrating, ensure you have:

1. Node.js v12+ installed on your machine. You can download it from the official site.
2. A SeerBit Merchant Account with both Public and Secret keys.
3. Basic React knowledge and familiarity with npm or yarn package managers.

Step 1: Obtain Your Public Key

1. Log in to the SeerBit Dashboard with your merchant credentials.
2. Navigate to API Keys (usually under Settings → API Keys).
3. Copy your Public Key.

Tip: Store these keys securely—never hard‑code them in your source.

Step 2: Install the SDK

In your React project directory, run:

npm install --save seerbit-reactjs
# or
yarn add seerbit-reactjs

The package includes TypeScript definitions for better autocomplete in modern editors.

Step 3: Configure Environment Variables

Create a .env file at your project root (add to .gitignore):

REACT_APP_SEERBIT_PUBLIC_KEY=SBTESTPUBK_xxx

Load them in src/config.js:

export const PUBLIC_KEY = process.env.REACT_APP_SEERBIT_PUBLIC_KEY;

This isolates sensitive data and supports multiple environments.

Step 4: Using the SDK as a React Hook

• Import the Hook:

   import { useSeerbitPayment } from "seerbit-reactjs";
   import { PUBLIC_KEY } from "./config";

• Define your payment options:

   const options = {
     public_key: PUBLIC_KEY,
     amount: 5000,
     tranref: Date.now().toString(),
     currency: "NGN",
     email: "[email protected]",
     full_name: "Jane Doe",
     mobile_no: "08012345678",
     description: "Order #1234",
     tokenize: false,
     customization: {
       theme: {
         border_color: "#000000",
         background_color: "#004C64",
         button_color: "#0084A0",
       },
       payment_method: ["card", "account", "transfer", "wallet", "ussd"],
       display_fee: true,
       display_type: "inline",
       logo: "https://yourdomain.com/logo.png",
     },
   };

• Set up callback and close handlers:

   const callback = (response, close) => {
     console.log("Payment successful:", response);
     setTimeout(() => close(), 2000);
   };
   const close = () => console.log("Checkout closed");

• Initialize the payment:

   const initializePayment = useSeerbitPayment(options, callback, close);

• Trigger on user action:

   <button onClick={initializePayment}>Pay Now</button>

Result: Clicking the button opens SeerBit’s checkout, handles the flow, and returns the response to your callback.

Step 5: Using the Prebuilt Button Component

For minimal setup, use SeerbitButton:

• Import the component:

   import { SeerbitButton } from "seerbit-reactjs";
   import { PUBLIC_KEY } from "./config";

• Prepare options and handlers:

   const callback = (res, close) => { console.log(res); close(); };
   const close = () => console.log("Closed");
   const props = { ...options, callback, close };

• Render the button:

   <SeerbitButton text="Pay with SeerBit" {...props} className="btn-pay" />

Result: A fully styled button that launches the checkout flow on click.

Download source code here.

Step 6: Testing Your Integration

• Local Testing: Run npm start to launch your app and click the Pay button.
• Sandbox Mode: Use your test keys to simulate transactions without real charges.
• Monitoring: Check network calls in your browser’s DevTools to inspect the payload and response.

Error Handling & Logging

Wrap your payment initialization in try…catch:

try {
  await initializePayment();
} catch (error) {
  console.error("SeerBit Error:", error.code, error.message);
}

Use a structured logger (e.g., Winston) for production-level monitoring.

Best Practices

• Secure Key Storage: Keep keys in env vars, rotate regularly.
• Version Pinning: Lock seerbit-reactjs in package.json to prevent breaking updates.
• CI/CD: Automate linting (ESLint), type checks, and integration tests on pull requests.
• Graceful Fallback: Implement retries and user-friendly error messages for network failures.

Conclusion

By following these steps—obtaining your keys, installing the SDK, configuring securely, and using either the Hook or Button component—you can integrate SeerBit payments into your React app quickly and reliably. Happy coding!

References

1. SeerBit ReactJS SDK GitHub: https://github.com/seerbit/seerbit-reactjs
2. SeerBit Official Docs: https://doc.seerbit.com/libraries-plugins/sdks
3. SeerBit Dashboard Login: https://www.dashboard.seerbit.com/#/auth/login
4. NPM Package “seerbit-reactjs”: https://www.npmjs.com/package/seerbit-reactjs
5. Managing Environment Variables in Create React App: https://create-react-app.dev/docs/adding-custom-environment-variables
6. Winston Logging Library: https://www.npmjs.com/package/winston
7. React Error Boundaries: https://www.npmjs.com/package/react-error-boundary

Thanks for reading...
Happy Coding!