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: "[email protected]",
          narration: "Payment for groceries.",
          email: "[email protected]",
          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: "[email protected]",
        narration: "Payment for groceries.",
        email: "[email protected]",
        firstName: "John",
        lastName: "Doe",
      }}
      className="button-primary"
      text="Checkout"
    />
  );
}

Types

UseRemitaInlineProps

useRemitaInline(UseRemitaInlineProps)

| Property | Type | Default | Description | Required | | --------- | ---------- | ------- | ---------------------------------- | -------- | | isLive | boolean | | Use demo or live SDK. | true | | onSuccess | Function | | Callback for successful payment. | false | | onError | Function | | Callback for error during payment. | false | | onClose | Function | | Callback for payment modal close. | false |

RemitaInlineButtonProps

<RemitaInlineButton {...RemitaInlineButtonProps} />

| Property | Type | Default | Description | Required | | --------- | ------------------ | ------- | ------------------------- | -------- | | data | RemitaInlineData | | Options needed by Remita. | true | | className | string | | Class names for styling. | false | | text | string | "Pay" | Text to show in button. | false |

RemitaInlineData

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