Package Exports

mima-react-checkout

Readme

Mima React Library

Introduction

Mima React Checkout is a React SDK that helps businesses collect payments for goods and services directly on their websites. Funds go straight into their Mima Wallet and can be received in Naira (NGN) or any of 135+ international currencies like USD, GBP, EUR, and more.

This react sdk provides an easy-to-integrate UI and programmatic API for initiating payments via Mima; whether you're selling products or booking services.

🌍 Features

Collect payments in NGN and 135+ international currencies.
Seamless UI components for quick integration.
No provider setup required.
React + TypeScript ready.

Requirements
Installation
Usage
Parameters
Support
Contribution Guidelines
License
Contributors
Changelog

Requirements

Mima Public Api keys
Node version >= 16.0.0
React version ^ 18.x or ^19.x
Npm version >= 7.x

Installation

Install the SDK

npm install mima-react-checkout
# or
yarn add mima-react-checkout

Usage

Add Mima pay to your projects as a component or function:

As a component with selection UI
As a pre-styled button
As a function

Components

Include the selected and onSelect props to ensure the user can select mima as the preferred payment option

import React, { useState } from "react";
import { PayWithMima } from "mima-react-checkout";

export default function App() {
  const customer = {
    fullname: "John Doe",
    email: "john@example.com",
    mobile: "08012345678",
    street: "123 Street",
    country: "Nigeria",
    postCode: "100001",
    state: "Lagos",
  };

  const items = [
    {
      item: "T-shirt",
      unitPrice: 2000,
      quantity: 2,
    },
  ];

  const payload = {
    customer,
    publicKey: "fd86a********************4",
    order: {
      items,
      currencyCode: "NGN",
      shipping: 200,
      orderId: "ORDER123456",
    },
    callBackUrl: "www.google.com",
  };

  const [method, setMethod] = useState("mima");

  const mimaConfig = {
    payload,
    selected: method === "mima",
    onSelect: () => setMethod("mima"),
    onSuccess: () => alert("Payment Successful"),
    onClose: () => console.log("Closed"),
    signature: "2341abc********************4",
  };

  return (
    <div className="App">
      <h1>Hello Test user</h1>
      <PayWithMima {...mimaConfig} />
    </div>
  );
}

Button

import React from "react";
import { MimaButton } from "mima-react-checkout";

export default function App() {
  const customer = {
    fullname: "John Doe",
    email: "john@example.com",
    mobile: "08012345678",
    street: "123 Street",
    country: "Nigeria",
    postCode: "100001",
    state: "Lagos",
  };

  const items = [
    {
      item: "T-shirt",
      unitPrice: 2000,
      quantity: 2,
    },
  ];

  const payload = {
    customer,
    publicKey: "fd86a********************4",
    order: {
      items,
      currencyCode: "NGN",
      shipping: 200,
      orderId: "ORDER123456",
    },
    callBackUrl: "www.google.com",
  };

  const mimaButtonConfig = {
    payload,
    onSuccess: () => alert("Payment Successful"),
    onClose: () => console.log("Closed"),
    signature: "2341abc********************4",
  };

  return (
    <div className="App">
      <h1>Hello Test user</h1>
      <MimaButton {...mimaButtonConfig} />
    </div>
  );
}

Function

import React from "react";
import { checkOutWithMima } from "mima-react-checkout";

export default function App() {
  const customer = {
    fullname: "John Doe",
    email: "john@example.com",
    mobile: "08012345678",
    street: "123 Street",
    country: "Nigeria",
    postCode: "100001",
    state: "Lagos",
  };

  const items = [
    {
      item: "T-shirt",
      unitPrice: 2000,
      quantity: 2,
    },
  ];

  const payload = {
    customer,
    publicKey: "fd86a********************4",
    order: {
      items,
      currencyCode: "NGN",
      shipping: 200,
      orderId: "ORDER123456",
    },
    callBackUrl: "www.google.com",
  };

  const mimaConfig = {
    payload,
    signature: "2341abc********************4",
    onSuccess: () => alert("Payment Successful"),
    onClose: () => console.log("Closed"),
  };

  return (
    <div className="App">
      <h1>Hello Test user</h1>
      <button
        onClick={() => {
          checkOutWithMima(mimaConfig);
        }}
      >
        Pay Now
      </button>
    </div>
  );
}

Parameters

Read about our parameters and how they can be used

Parameter	Always Required ?	Description
payload	Yes	An object containing order and customer information
signature	Yes	A SHA-512 HMAC hash of the payload, generated using your Secret Key. This ensures the integrity and authenticity of the request. The payload must be JSON-stringified before hashing.
onSuccess	No	A function of your desired action once a payment is successful
onClose	No	A function of your desired action once a payment is canceled
testMode	No	A boolean value to enable test mode. If not included value defaults to false

Payload Parameters

Parameter	Always Required?	Description
customer	Yes	Customer Information
order	Yes	Order Information
publicKey	Yes	Your API public key
callBackUrl	No	Your webhook to send information

Customer Parameters

Parameter	Always Required?	Description
fullname	Yes	Full name of the customer
email	Yes	Email address of the customer
mobile	No	Customer's mobile phone number
street	No	Street address of the customer
country	No	Country where the customer resides
companyName	No	Name of the customer’s company
postCode	No	Postal/ZIP code
state	No	State or province

Order Parameters

Parameter	Always Required?	Description
items	Yes	Array of order items
currencyCode	Yes	Currency to charge in.
orderId	Yes	Your order Id. This MUST be unique for every order so you can be able to receive information on the order related to the payment
shipping	No	This specifies the cost of shipping. Defaults to 0 when not added.

Items Parameters

Items is an array of objects with these properties

Parameter	Always Required?	Description
item	Yes	Name of the product or service
quantity	Yes	Number of units being purchased
unitPrice	Yes	Price per unit (in selected currency)

Debugging Errors

We understand that you may run into some errors while integrating our library.

For authorization and validation error responses, double-check your API keys and request. If you get a server error or any other error, kindly engage the team for support.

Support

For additional assistance using this library, please create an issue on the Github repo or contact the developer experience (DX) team via email.

You can also follow us @mimapayafrica and let us know what you think 😊.

Contribution Guidelines

We welcome contributions from the community. Read more about our community contribution guidelines here.

License

By contributing to this library, you agree that your contributions will be licensed under its MIT license.

Contributors

Babatunde Nathaniel Shodunke

JSPM

mima-react-checkout