@farayolaj/react-remita-inline

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: "[e-mail]",
          narration: "Payment for groceries.",
          email: "[e-mail]",
          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: "[e-mail]",
        narration: "Payment for groceries.",
        email: "[e-mail]",
        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.