@farayolaj/react-remita-inline v0.3.0

React Remita Inline

This is a wrapper around Remita Inline SDK for React projects.

Install

NPM

npm install @farayolaj/react-remita-inline

Yarn

yarn add @farayolaj/react-remita-inline

PNPM

pnpm add @farayolaj/react-remita-inline

Usage

1. Imperative API.

import { useRemitaInline } from "@farayolaj/react-remita-inline";

function Example() {
  const { initPayment } = useRemitaInline({
    isLive: false,
    onClose() {
      console.log("Remita closed");
    },
    onError(response) {
      console.log("Remita Error: ", response);
    },
    onSuccess(response) {
      console.log("Remita Success: ", response);
    },
  });

  return (
    <button
      onClick={() =>
        initPayment({
          key: config.remita.publicKey,
          transactionId: String(Math.floor(Math.random() * 1101233)),
          amount: 10000,
          customerId: "johndoe@gmail.com",
          narration: "Payment for groceries.",
          email: "johndoe@gmail.com",
          firstName: "John",
          lastName: "Doe",
        })
      }
    >
      Checkout
    </button>
  );
}

2. Declarative API.

import { useRemitaInline } from "@farayolaj/react-remita-inline";

function Example() {
  const { RemitaInlineButton } = useRemitaInline({
    isLive: false,
    onClose() {
      console.log("Remita closed");
    },
    onError(response) {
      console.log("Remita Error: ", response);
    },
    onSuccess(response) {
      console.log("Remita Success: ", response);
    },
  });

  return (
    <RemitaInlineButton
      data={{
        key: config.remita.publicKey,
        transactionId: String(Math.floor(Math.random() * 1101233)),
        amount: 10000,
        customerId: "johndoe@gmail.com",
        narration: "Payment for groceries.",
        email: "johndoe@gmail.com",
        firstName: "John",
        lastName: "Doe",
      }}
      className="button-primary"
      text="Checkout"
    />
  );
}

Types

UseRemitaInlineProps

useRemitaInline(UseRemitaInlineProps)

RemitaInlineButtonProps

<RemitaInlineButton {...RemitaInlineButtonProps} />

RemitaInlineData

Options needed by Remita Inline SDK. More information about this here.