Integrate Mai Payment Aggregator in your react application.

Prerequisites

• git
• npm
• react

Examples

Installation

import Gateways from "mai-payment-aggregator";

BASIC EXAMPLE:

    const [transactionPayload, setTransactionPayload] = useState({});
  const userInfo = {
    name: "USER_NAME",
        email: "USER_EMAIL",
        phoneNumber: "USER_PHONE_NUMBER",
        countryCode: "COUNTRY_CODE",
        redirect_url: "YOUR_PAGE_REDIRECT_URL",
  };

  const payload = {
    productId: "YOUR_PRODUCT_ID",
    referenceNumber: "REFRENCE_NUMBER",
    amount: 101,
    currencyCode: "CURRENCY_CODE",
    paymentType: "CARD",
    items: [
      {
        productName: "PRODUCT_NAME",
        amount: PRODUCT_AMOUNT,
      }
    ],
  };

  const headers = {
    apiKey: "YOUR_PLATFORM_API_KEY",
    environment_url: "ENVIRONMENT_URL/SENDBOX OR PRODUCTION",
  };

  const transactionStatusCallback = (payload) => {
    setTransactionPayload(payload);
  };

  return (
    <div>
      <Gateways
        payload={payload}
        headers={headers}
        userInfo={userInfo}
        transactionStatusCallback={transactionStatusCallback}
      />
    </div>
  );

FULL EXAMPLE:

import React, { useState } from "react";
import Gateways from "mai-payment-aggregator";

export default function App() {
    const userInfo = {
        name: "USER_NAME",
        email: "USER_EMAIL",
        phoneNumber: "USER_PHONE_NUMBER",
        countryCode: "COUNTRY_CODE",
        redirect_url: "YOUR_PAGE_REDIRECT_URL",
      };

      const payload = {
        productId: "YOUR_PRODUCT_ID",
        referenceNumber: "REFRENCE_NUMBER",
        amount: 101,
        currencyCode: "CURRENCY_CODE",
        paymentType: "CARD",
        items: [
          {
            productName: "PRODUCT_NAME",
            amount: PRODUCT_AMOUNT,
          }
        ],
      };

    const headers = {
    apiKey: "YOUR_PLATFORM_API_KEY",
    environment_url: "ENVIRONMENT_URL/SENDBOX OR PRODUCTION",
  };


  const transactionStatusCallback = (payload) => {
    setTransactionPayload(payload);
  };

  return (
    <div>
      <Gateways
        payload={payload}
        headers={headers}
        userInfo={userInfo}
        transactionStatusCallback={transactionStatusCallback}
      />
    </div>
  );
}