Integrating MIPS Payment SDK into Your Expo App

Written by Shyank

Expo apps can use the same React Native MIPS SDK. However, because it is a native module, you must enable native modules in your Expo project. If you are using the pure managed workflow without a development build, the SDK will not work until you generate native projects (ios/ and android/) via Expo prebuild or run commands.

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 0: Create or open an Expo project

If you don't already have an Expo project, initialize one:

npx create-expo-app my-mips-app
cd my-mips-app

Common project commands you may use:

# Start the dev server (web/native)
npx expo start

# Run on iOS simulator/device (also generates native projects if missing)
npx expo run:ios

# Run on Android emulator/device (also generates native projects if missing)
npx expo run:android

Step 1: Enable native modules for Expo

Because mu.mips.react-native-sdk is a native module, a standard managed workflow build will not include it. You have two options:

Option A: Use Expo prebuild to generate ios/ and android/ once.
Option B: Use expo run:ios or expo run:android, which will also trigger prebuild if needed.

Either way, this will create the native projects and link the module so it can be compiled.

# Prebuild to generate ios/ and android/
npx expo prebuild

# Or simply run for a platform (will prebuild if needed)
npx expo run:ios
npx expo run:android

Notes:

On iOS, CocoaPods will run automatically during prebuild/run. If it fails, run cd ios && pod install.
Commit the native folders if your workflow requires it, or rely on re-running prebuild in CI.
If the SDK ever provides a Config Plugin, you could remain managed without checking in native folders; until then, prebuild is required.

Step 2: Install the SDK

npm i mu.mips.react-native-sdk

After installing, re-run npx expo prebuild or npx expo run:ios|android to ensure the native projects are updated with the new module.

Step 3: Import Required Classes

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

Step 4: 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 5: 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);
  });

Expo-specific build tips

After prebuild, use the platform run commands to build and install development builds:

# iOS dev build (simulator or device)
npx expo run:ios

# Android dev build
npx expo run:android

For CI or distribution, consider EAS Build and a Development Client so you can load your JS while including native modules.
If you revert to pure managed without a dev client or prebuild, native modules like this SDK will not be available at runtime.

By following these steps, you can integrate the MIPS Payment SDK into your Expo application. If you started from a managed project, ensure you have run prebuild or platform run at least once so the native module is compiled and available.

For more information, visit the Official doc on GitHub