Skip to main content

Link Stripe to React Native

Use this guide after you create a Stripe account and deploy your own payments backend.

Quick Answer​

Update the app config with your backend URL, your Stripe publishable key, your Apple Pay merchant ID if used, and Google Pay mode if used. Keep Stripe secret keys on the backend only.

1. Find the Payment Config​

Depending on your app, the payment config is usually in one of these places:

  • the app-specific config file under src/;
  • src/config/index.ts or src/config/index.tsx;
  • src/core/payments/api/local/paymentMethods.ts.

Search the project for STRIPE_CONFIG, stripe_ENV, PUBLISHABLE_KEY, or ANDROID_PAYMENT_MODE.

2. Update the Backend URL​

Point the app to your own payments backend:

stripe_ENV: {
  API: {
    baseURL: 'https://your-payments-backend.example.com/',
    timeout: 9000,
  },
},

This URL should be your hosted server, Firebase Function, Cloud Run service, or Heroku app.

3. Update Stripe Client Config​

STRIPE_CONFIG: {
  PUBLISHABLE_KEY: 'pk_test_your_publishable_key',
  MERCHANT_ID: 'merchant.com.yourcompany.yourapp',
  ANDROID_PAYMENT_MODE: 'test',
},

Use:

  • pk_test_... while developing;
  • pk_live_... only for production;
  • your Apple Merchant ID when Apple Pay is enabled;
  • test or the production value expected by your app for Google Pay.

4. Confirm Secret Keys Are Not in the App​

The React Native app must not contain:

  • sk_test_...
  • sk_live_...
  • whsec_...
  • PayPal client secrets
  • Braintree private keys

Those values belong in backend environment variables.

5. Test Checkout​

In Stripe test mode:

  1. Start the payments backend.
  2. Start the React Native app.
  3. Place a test order.
  4. Confirm the payment appears in the Stripe Dashboard.
  5. Confirm the order status is updated in your app backend.
  6. Test payment cancellation and payment failure.

Use Stripe's official test cards from the Stripe documentation when testing. Do not use real card numbers in development.

Troubleshooting​

ProblemFix
App calls the wrong backendCheck stripe_ENV.API.baseURL and rebuild the app.
Payment sheet does not openConfirm the backend returns the expected client secret and customer values.
Payment succeeds but order is not updatedCheck webhook handling and order finalization on the backend.
Live payment failsConfirm live publishable and secret keys are both configured for live mode.
Apple Pay does not appearConfirm the merchant ID, Apple capability, Stripe Apple Pay setup, and real device testing.

Next Steps​