---
title: "React Native Integration"
description: "Integrate KOMOJU payments into your React Native application using the official SDK. Supports multiple payment methods including Konbini, PayPay, and credit cards with minimal PCI burden."
url: "https://docs.priv.staging.komoju-dev.tools/en/docs/integration-guides/react-native-integration"
source_url: "https://docs.priv.staging.komoju-dev.tools/en/docs/integration-guides/react-native-integration.md"
language: en
last_modified: "2026-03-25"
---

The KOMOJU React Native SDK securely processes payments within your mobile application.

If you are using the SDK UI, it communicates directly with our backend when handling credit card information minimizing your PCI-DSS burden.

Additionally, our React Native SDK supports a variety of payment methods, including Konbini and PayPay in Japan, enabling you to cater to your customers' preferred payment options.

The source code is freely available at [GitHub](https://github.com/komoju/mobile-sdk_react-native) and includes a starter application for testing.

![](https://files.readme.io/f29f8c118e6b7b11fd7b824e21e784a2b3245f263ecd5f3c7c86d06093c29640-Screenshot_20241007_102208.png)

# Getting Started

Install the [@komoju/komoju-react-native](https://www.npmjs.com/package/@komoju/komoju-react-native) package into your React Native application

```bash
yarn add @komoju/komoju-react-native
or
npm install @komoju/komoju-react-native

```

# Payment Flow

The payment flow involves four main steps: creating a session, fetching the session and initializing the SDK, handling the payment completion callback, and receiving `payment.captured` [Webhook](https://docs.priv.staging.komoju-dev.tools/en/docs/introduction/webhooks.md).

The diagram below illustrates the overall process,

![](https://files.readme.io/86ac7861d3b61775f861a8287659a69a6e28f6d0a94bd943bf4a668d582a929e-Screenshot_2024-08-26_at_9.33.06.png)

## 1. Creating a session

Setup a secure endpoint and create a [Session Object](https://docs.priv.staging.komoju-dev.tools/en/api-reference#2025-01-28/tag/sessions/POST/sessions) on your backend server (see [example](https://glitch.com/edit/#!/rn-komoju-app?path=server.js%3A14%3A4s)).

When creating the session you will need to set the `redirect_url` to point to your app URL scheme e.g. `myapp://`

[Configure the custom URL scheme](https://reactnative.dev/docs/linking) in your AndroidManifest.xml and Info.plist files. Note: If you're using Expo, set your scheme in the app.json file.

## 2. Fetch the session and create a payment

Call your session endpoint and create a payment by passing `sessionId` to `createPayment` (see the SDK Initialization section below for code examples).

## 3. Setup your completion callback

When initializing the SDK you will need to setup `onComplete` handler. When the customer returns back the handler will be called with the updated session object.

```typescript
const onComplete = (session: SessionShowResponseType) => {
  if (session.status == "completed") {
    console.log(`Thanks! Your payment status is ${session.payment.status}`)
  } else {
    console.error("Sorry! You've had a problem paying.")
  }
}

```

## 4. Handle `payment.captured` webhook

On your backend server we advise setting up a [Webhook](https://docs.priv.staging.komoju-dev.tools/en/docs/introduction/webhooks.md) to listen to the final `payment.captured` status which indicates the payment is paid. There may be a timeout or exception during the payment process so this event ensures the users payment is finalized. Note, this event is sent asynchronously.

# SDK Initialization

In order to use the SDK you will need to initialize `KomojuSDK.KomojuProvider` with the following properties,

| Property | Type | Description |
| --- | --- | --- |
| publishableKey | `string` | The publishable key of your merchant |
| paymentMethods | `Array<PaymentTypes>` | Explicitly set the payment method(s) for purchase. If not, will show all available payment methods on the merchant (optional) |
| language | `string (LanguageTypes)` | Explicitly set the language, if not set language will be picked from your session Id (optional) |

You will then need to wrap the component around your payment screen as shown below,

```typescript
// App.ts
import {
  KomojuSDK,
  PaymentTypes,
  LanguageTypes,
} from "@komoju/komoju-react-native";

function App() {
  return (
    <KomojuSDK.KomojuProvider
      publishableKey={publishableKey}

      // optional properties
      payment_methods={[PaymentTypes.KONBINI]}
      language={LanguageTypes.JAPANESE}
    >
      <PaymentScreen /> // your payment screen component
    </KomojuSDK.KomojuProvider>
  );
}

// PaymentScreen.ts
import { KomojuSDK } from "@komoju/komoju-react-native";

export default function PaymentScreen() {
  const { createPayment } = KomojuSDK.useKomoju();

  const onComplete = (session: SessionShowResponseType) => {
    if (session.status === 'completed') {
      console.log('Thanks! Your payment is ' + session.payment.status)
    } else {
      console.log("Sorry! You must have had a problem paying.")
    }
  }

  const onDismiss = (session: SessionShowResponseType) => {
    console.log("User has closed the payment dialog");
  };

  const checkout = async () => {
    try {
    	createPayment({
      	sessionId, // retrieved from your server
      	onComplete, // invoked with the updated session after user completes or cancels session
      	onDismiss, // invoked when the dialog is closed by the user
    	});
    } catch (error) {
      console.error("Payment initiation failed:", error);
    }
  };

  return (
    <View>
      <Button title="Checkout" onPress={checkout} />
    </View>
  );
}

```