chapa-inline-hook v0.0.5

Chapa Inline Hook

chapa-inline-hook is a React hook for integrating the Chapa payment gateway into your React applications. This hook simplifies the setup and management of payment processes using Chapa's service, handling payment success, failure, and errors efficiently.

Installation

You can install the library via npm or yarn:

npm install chapa-inline-hook

or

yarn add chapa-inline-hook

Usage

To use the useChapaPay hook, import it into your React component and call it with the required parameters.

Example-1

import React from "react";
import { useChapaPay } from "chapa-inline-hook";

const PaymentPage = () => {
  const { error, isPaymentSuccessful, isPaymentFailed, isPaymentClosed } =
    useChapaPay({
      amount: 500,
      public_key: "your-public-key-here",
      classIdName: "chapa-inline-form",
    });

  return (
    <div>
      <h1>Make a Payment</h1>
      <div id="chapa-inline-form"></div>
      {isPaymentSuccessful && <p>Payment was successful!</p>}
      {isPaymentFailed && <p>Payment failed. Please try again.</p>}
      {isPaymentClosed && <p>Payment window was closed.</p>}
      {error && <p style={{ color: "red" }}>{error}</p>}{" "}
      {/* Display error message */}
    </div>
  );
};

export default PaymentPage;

Example-2-with-custome-style

import React from "react";
import { useChapaPay } from "chapa-inline-hook";

export function PaymentPage() {
  const { error, isPaymentSuccessful, isPaymentFailed, isPaymentClosed } =
    useChapaPay({
      amount: 200,
      public_key: "your_chapa_public_key",
      classIdName: "chapa-inline-form",
      styles: `
            .chapa-pay-button:hover { 
                background-color: green; 
                color: white;
            }
                #chapa-loading-container{
                  position: absolute;
                  top: 0%;
                  margin: 0px;
                  padding: 0px;
                  background: #ffffffdd;
                  width: 100%;
                  left: 0px;
                  backdrop-filter: blur(2px);
                  height: 100%;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  border-radius: 10px;
                }
        `,
      showPaymentMethodsNames: false,
    });

  useEffect(() => {
    isPaymentSuccessful && alert("payment sucessfull");
    isPaymentFailed && alert("payment failed try again");
    isPaymentClosed && alert("payment has closed");
  }, [isPaymentSuccessful, isPaymentFailed, isPaymentClosed]);

  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#20202020",
      }}
    >
      <div
        style={{
          backgroundColor: "white",
          borderRadius: "10px",
          width: "25vw",
          padding: "10px",
          position: "relative",
        }}
        id="chapa-inline-form"
      ></div>
      {/* {error} */}
    </div>
  );
}

Example 2 Preview

https://github.com/user-attachments/assets/b6b35826-9e5d-4903-b6d4-657613f7d570

API

useChapaPay

This hook sets up the Chapa payment process and provides payment status indicators.

Parameters

Returns

Example of Custom Callbacks

If you want to handle payment events, you can use returned values:

const { isPaymentSuccessful, isPaymentFailed, isPaymentClosed, error } =
  useChapaPay({
    amount: 500,
    public_key: "your-public-key-here",
    classIdName: "pay-button-container",
  });

isPaymentSuccessful && alert("Payment successful!");
isPaymentFailed && alert(error);
isPaymentClosed && alert("Payment has closed");