react-foree-pay-checkout

A React component for integrating Foree Pay checkout into your React or Next.js applications.

Installation

To install the package, use npm:

npm install react-foree-pay-checkout

Usage

1. Wrap your application with ForeePayProvider

The ForeePayProvider must wrap your component tree in order to provide the context for useForeePay to work. It accepts an optional prop useProduction to toggle between production and sandbox environments.

import { ForeePayProvider } from 'react-foree-pay-checkout';

export default function Main({ children }: { children: React.ReactNode }) {
  return (
    <ForeePayProvider useProduction={false}>
      <App />
    </ForeePayProvider>
  );
}

2. Using the useForeePay hook

Once the provider is set up, you can use the useForeePay hook to access the executeForeePay function, which you can call to initiate the checkout process.

import { useForeePay } from 'react-foree-pay-checkout';

const MyComponent = () => {
  const { executeForeePay } = useForeePay();

  const handleCheckout = () => {
    const transactionDetails = {
      key: <API_KEY>,
      amount: <AMOUNT>,
      create_bill: <true/false>,
      reference_number: <ORDER_ID>,
      callback: myCallbackFunc,
      callback_url: <URL_TO_REDIRECT>,
      customer_email_address: <EMAIL_ADDRESS>,
      customer_phone_number: <PHONE_NUMBER>,
      consumer_name: <CONSUMER_NAME>,
      payment_method: <PAYMENT_METHOD>,
      bill_details_id: <UUID>,
    };
    executeForeePay(transactionDetails);
  };

  return (
    <div>
      <button onClick={handleCheckout}>Checkout with Foree Pay</button>
    </div>
  );
};

ForeePayProvider Props

The ForeePayProvider accepts the following props:

| Prop | Type | Description | |------------------|-------------|---------------------------------------------------------------------------------------------------------------------------------------------------| | useProduction | boolean | Optional - If true, it uses the production URL for Foree Pay, otherwise it uses the sandbox URL. Default is false. | | children | ReactNode | The children to be rendered inside the provider. |

Example

<ForeePayProvider useProduction={true}>
  <YourComponent />
</ForeePayProvider>

License

MIT License. See LICENSE for more details.