Seerbit Checkout Wrapper for ReactJS

Requirements

This module was built and tested using React 15.0.0 - 18.0.0

Get Started

A simple way to add Seerbit to your React application

Install

npm install --save seerbit-reactjs

OR

yarn add seerbit-reactjs

Usage

Add Seerbit to your projects:

1. As a React Hook
2. As a React Button Component

As React Hook

import React, { Component } from "react";
import { useSeerbitPayment } from "seerbit-reactjs"

const App = () => {
    const options = {
    public_key: "YOUR_PUBLIC_KEY",
    amount: 100,
    tranref: new Date().getTime(),
    currency: "NGN",
    email: "[email protected]",
    full_name: "Sam Smart",
    mobile_no: "081234566789",
    description: "test",
    tokenize: false,
    planId: "",
    pocketId: "",
    vendorId: "",
    customization: {
      theme: {
        border_color: "#000000",
        background_color: "#004C64",
        button_color: "#0084A0",
      },
      payment_method: ["card", "account", "transfer", "wallet", "ussd"],
      display_fee: true, // true
      display_type: "embed", //inline
      logo: "logo_url | base64",
    },
  };

  const close = (close) => {
    console.log(close);
  };

  const callback = (response, closeCheckout) => {
    console.log(response);

    setTimeout(() => closeCheckout(), 2000);
  };

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


  return (
    <div>
      <h2>Make Payment</h2>
      <button onClick={initializePayment}>Pay</button>
    </div>
  );
};


export default App

As Button Component

import React, { Component } from "react";
import { SeerbitButton } from "seerbit-reactjs"

const App = () => {
    const options = {
    public_key: "YOUR_PUBLIC_KEY",
    amount: 100,
    tranref: new Date().getTime(),
    currency: "NGN",
    email: "[email protected]",
    full_name: "Sam Smart",
    mobile_no: "081234566789",
    description: "test",
    tokenize: false,
    planId: "",
    pocketId: "",
    vendorId: "",
    customization: {
      theme: {
        border_color: "#000000",
        background_color: "#004C64",
        button_color: "#0084A0",
      },
      payment_method: ["card", "account", "transfer", "wallet", "ussd"],
      display_fee: true, // true
      display_type: "embed", //inline
      logo: "logo_url | base64",
    },
  };

  const close = (close) => {
    console.log(close);
  };
  const callback = (response, closeCheckout) => {
    console.log(response);

    setTimeout(() => closeCheckout(), 2000);
  };

  const paymentProps = {
    ...options,
    callback,
    close,
  };

  return (
    <div>
      <h2>Make Payment</h2>
      <SeerbitButton text="test payment" className="app-btn" {...paymentProps} />
    </div>
  );
};


export default App

Please checkout Seerbit Documentation for other available options you can add to the tag

License

MIT © seerbit