Skip to main content

Move a Stripe Payment Module Between React Native Apps

This page is for advanced teams that want to reuse an Instamobile Stripe payment module inside another React Native app. If you only need to configure payments in the app you purchased, start with the main Stripe setup pages instead.

Quick Answer

Copy the payment module only together with its backend contract, configuration, native Stripe setup, checkout integration, and security rules. The mobile app must contain only publishable Stripe configuration. Secret keys, webhooks, refunds, PaymentIntent creation, and order finalization must run on a secure backend.

Before You Start

Review these pages first:

Do not move the module by copying only one screen. Payment flows usually touch cart state, order creation, backend functions, native configuration, and release settings.

1. Identify the Payment Source Files

In current apps, payment code usually lives under src/core/payments and may be used by app-specific checkout screens.

Common files and folders:

src/core/payments/
api/
hooks or usePaymentRequest files
payment methods
payment processor clients

Search the source app before copying:

rg "Stripe|PaymentIntent|usePayment|PaymentSheet|payments" src

Copy only the files that are actually used by the checkout flow.

2. Copy the Backend Contract

Stripe mobile SDK flows require backend endpoints or Firebase Functions for secure operations such as:

  • creating a PaymentIntent;
  • creating or retrieving a customer;
  • creating ephemeral keys;
  • handling webhooks;
  • finalizing orders after confirmed payment;
  • issuing refunds or cancellations.

Move or recreate the backend code before enabling the checkout UI in the target app.

3. Configure Stripe Provider

Wrap the app or checkout area with Stripe provider configuration using your publishable key.

Example:

import React from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';
import App from './App';

export default function AppWrapper() {
return (
<StripeProvider
publishableKey="pk_test_your_publishable_key"
merchantIdentifier="merchant.com.example.app"
>
<App />
</StripeProvider>
);
}

Use production publishable keys only in production builds. Never place sk_test_, sk_live_, webhook secrets, or private API keys in the mobile app.

4. Connect Checkout State

The target app must provide the data the payment module expects:

  • cart items or booking total;
  • currency;
  • customer email or user id;
  • shipping or service address, if required;
  • order id or booking id;
  • success and failure handlers.

If these fields differ from the source app, adapt the module instead of forcing the target app into the old data model.

5. Configure Native Payment Options

Depending on the app, configure:

  • Apple Pay merchant identifier on iOS;
  • Google Pay environment on Android;
  • URL schemes or return URLs if required by the payment flow;
  • app store disclosures and privacy policy content.

Reinstall pods after changing native Stripe configuration:

cd ios
bundle exec pod install
cd ..
corepack yarn ios

6. Test the Flow

Test in Stripe test mode:

  1. load checkout with a realistic cart/order;
  2. initialize the PaymentSheet or payment request;
  3. complete a test payment;
  4. verify the backend receives the payment result;
  5. verify the order status changes in the app database;
  6. verify failed and canceled payments do not create completed orders.

Migration Checklist

  • Payment source files copied from src/core/payments or app-specific checkout.
  • Backend endpoints or Firebase Functions deployed.
  • Stripe publishable key configured in the app.
  • Stripe secret key configured only on the backend.
  • Apple Pay or Google Pay configured if used.
  • Order creation and status updates are idempotent.
  • Failed payments show a user-friendly error.
  • Webhooks are verified server-side.
  • Test mode passes before live keys are used.

Troubleshooting

ProblemFix
PaymentSheet does not openCheck publishable key, backend response, and native Stripe setup.
Payment succeeds but order stays pendingCheck backend order finalization and webhook handling.
Backend rejects payment requestCheck amount, currency, customer id, and secret configuration.
Apple Pay does not appearCheck merchant id, Apple Developer setup, device support, and region.
Google Pay does not appearCheck Google Pay environment and Android configuration.

Next Steps