Skip to main content

Inttegro SDK for React Native

The Inttegro SDK for React Native presents Inttegro's native iOS and Android payment sheet from a typed React Native facade. The native SDKs own presentation, accessibility, authentication, payment collection, and lifecycle state.

Start with MCP

Before writing SDK code, connect your MCP client and ask MCP to design the integration for your mobile checkout flow. Use the resulting plan to define the boundary between your server, this SDK, and the Inttegro API.

Developer preview

This SDK is not yet published for live payments. It currently supports mobile money; card payments, Apple Pay, and Google Pay are not exposed.

Requirements

After adding the local package, rebuild the native application so Codegen and autolinking can run. Expo applications require a development build; Expo Go cannot load the native module.

Native payment sheet

React Native delegates payment collection to the shared Inttegro SDK for each platform. Both implementations follow the hosted invoice payment experience; these genuine iOS simulator captures show the SwiftUI presentation.

Native oniOSAndroid
Native Inttegro payment sheet presented over the Kora Market demo, showing the merchant, amount, and attached mobile money account.
iOSLight
Use an attached accountThe familiar hosted-invoice hierarchy, presented as a native system sheet.
Native Inttegro payment sheet in dark appearance with an active segmented Mobile Money number field, the iOS phone keypad, and logo-backed MTN MoMo, Telecel Cash, and AirtelTigo Money network choices.
iOSDark
Enter a Mobile Money numberThe large native sheet suggests a network from the prefix while keeping ported-number overrides explicit.
Full-height native Inttegro payment sheet in dark appearance with completed saved-method owner and contact details.
iOSDark
Save it for next timeOwner and contact details mirror hosted invoice payment without changing shipping information.
Native Inttegro payment sheet in light appearance confirming a completed GHS 50 Mobile Money payment to Kora Market.
iOSLight
Confirm payment completionThe terminal state confirms the paid amount and merchant before returning control to the host app.

Captured from the shared Inttegro iOS SDK in the Kora Market demo on an iPhone 17 Pro simulator. The checkout data is a deterministic fixture; the payment-sheet UI is the SDK’s native implementation. The Android robot is reproduced from work created and shared by Google and used according to the Creative Commons 3.0 Attribution License.

Present the payment sheet

import {
  addPaymentSheetEventListener,
  initializePaymentSheet,
  presentPaymentSheet,
} from '@inttegro/react-native'

const telemetrySubscription = addPaymentSheetEventListener((event) => {
  recordInttegroEvent(event)
})

await initializePaymentSheet({
  orderId,
  returnURL: 'merchant-app://inttegro-return',
  telemetry: activeTraceContext,
})

try {
  const result = await presentPaymentSheet()
} finally {
  telemetrySubscription.remove()
}

The app receives the finalized order ID from your backend. A secret Inttegro API key must never be included in the application bundle.

See it in a complete app

The React Native and Expo storefront demo shows a shopper choosing a product and paying through Inttegro's native payment sheet. Follow the guide to run the development build with its Next.js demo backend and see the full boundary between the mobile experience and server-owned commerce.

Observability

The payment sheet emits ordered lifecycle and Checkout network events for each presentation. Subscribe before presenting the sheet so you do not miss its first event. Your app decides whether to translate those events into spans, logs, or another diagnostic signal.

You can pass the active W3C trace context traceparent and optional tracestate when initializing the sheet. Inttegro does not install an exporter or send the event stream anywhere by itself.

Event data-safety contract

Events contain bounded status and correlation metadata. They never contain order or payment IDs, customer or payer data, payment-method details, request or response bodies, redirect URLs, or raw error messages. Do not use flowId or requestId as metric labels.

Continue