Integrating MIPS Payment SDK into Your React Native App

Written by ShyankApril 2025

The React Native SDK bridges the native Android and iOS MIPS SDKs, offering seamless integration for cross-platform payment solutions.

Prerequisites

Before you begin, ensure you have the following credentials provided by MIPS Admin:

Merchant Details:

• sIdMerchant
• id_entity
• id_operator
• operator_password

Merchant Credentials:

• username
• password

Step 1: Install the SDK

npm install mips-payment-sdk

Step 2: Import Required Classes

import {
  StartPayment,
  Amount,
  MerchantDetails,
  MerchantCredentials,
  Currency,
} from "mu.mips.react-native-sdk/src";

Step 3: Configure Merchant and Order Details

const orderID = "YOUR_ORDER_ID";

const amount = new Amount(Currency.Mauritian_Rupee, 100);
// Replace currency and amount with required values

const detail = new MerchantDetails(
  "XXXXX", // sIdMerchant
  "XXXXX", // id_entity
  "XXXXX", // id_operator
  "XXXXX" // operator_password
);

const cred = new MerchantCredentials(
  "XXXXX", // username
  "XXXXX" // password
);

Step 4: Start Payment Flow Using StartPayment Function

The StartPayment function provides two callback functions: one when the user completes the payment, and another when the payment fails for any reason

StartPayment(detail, cred, amount, orderID)
  .then((paymentMode) => {
    console.log("Payment success with payment mode " + paymentMode);
  })
  .catch((error) => {
    console.log("Payment failed with error ", error);
  });

By following these steps, you can seamlessly integrate the MIPS Payment SDK into your React Native application, providing a secure and efficient payment experience for your users.

For more information, visit the Official doc on GitHub