Skip to main content

Accept Payments in React Native Apps

· 5 min read
Beniamin Marcu
Full Stack Developer
Last updated on May 18, 2026

accept-payments-react-native-app-template

React Native payment integrations have changed a lot since early checkout packages wrapped a few native payment APIs. For production apps today, Stripe's React Native SDK and PaymentSheet are the safer default for card payments, Apple Pay, Google Pay, saved payment methods, and multi-method checkout.

The mobile app should never own payment secrets. It presents checkout, receives client-safe values, and shows status. A secure backend creates PaymentIntents, validates amounts, handles webhooks, and finalizes orders.

Quick Answer​

Use Stripe's React Native SDK, configure the app with a publishable key, create PaymentIntents on your backend, initialize PaymentSheet in the app, present the sheet, and finalize orders only after Stripe confirms payment through your backend or webhook flow.

corepack yarn add @stripe/stripe-react-native

For Instamobile apps, start with:

Store Policy Comes First​

Before adding Stripe or any external payment provider, classify what the app sells.

Use Stripe, Apple Pay, Google Pay, PayPal, or another payment provider for physical goods, bookings, delivery, marketplace orders, services consumed outside the app, and similar commerce flows.

For digital goods, subscriptions, premium app features, coins, content access, or other in-app digital value, check Apple App Review Guidelines and Google Play Payments policy before building. Store billing or in-app purchase may be required depending on the product, region, and storefront rules.

Keep the Payment Boundary Clear​

Runs in React NativeRuns on backend
Stripe publishable keyStripe secret key
PaymentSheet presentationPaymentIntent creation
Apple Pay / Google Pay sheetAmount and currency validation
Client secret received from backendCustomer and ephemeral key creation
Checkout success UIWebhook handling and order finalization

If a value starts with sk_ or is a webhook signing secret, it does not belong in the mobile app.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Initialize Stripe in the App​

Wrap payment screens with StripeProvider or initialize Stripe at startup:

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

export function CheckoutRoot() {
  return (
    <StripeProvider
      publishableKey="pk_test_your_publishable_key"
      merchantIdentifier="merchant.com.yourcompany.yourapp"
    >
      <CheckoutScreen />
    </StripeProvider>
  );
}

Use test keys during development and live keys only after the full release checklist passes.

Create PaymentSheet From Backend Values​

The app calls your backend to create a PaymentIntent and return client-safe values:

type PaymentSheetConfig = {
  paymentIntentClientSecret: string;
  customerId?: string;
  customerEphemeralKeySecret?: string;
};

async function fetchPaymentSheetConfig(cartId: string): Promise<PaymentSheetConfig> {
  const response = await fetch('https://api.example.com/payments/sheet', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cartId }),
  });

  return response.json();
}

The backend should calculate the payable amount from trusted cart/order data, not from a total sent by the app.

What the Backend Should Validate​

Every checkout endpoint should treat the mobile app as an untrusted client. The app can choose a cart, shipping option, coupon, or address, but the backend should verify the final payable amount before creating a PaymentIntent.

Validate:

  • the signed-in user owns the cart or order;
  • item IDs and quantities are still valid;
  • inventory or booking availability has not changed;
  • discounts and coupons are allowed;
  • tax, delivery, service fees, and currency are calculated server-side;
  • the order cannot be paid twice;
  • the PaymentIntent metadata links back to the internal order ID.

Use idempotency on the backend when a user taps Pay multiple times or a mobile network retries the same request. A clean checkout system prevents duplicate charges and duplicate paid orders.

Present PaymentSheet​

import { useStripe } from '@stripe/stripe-react-native';

export function useCheckout(cartId: string) {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();

  async function checkout() {
    const config = await fetchPaymentSheetConfig(cartId);

    const initResult = await initPaymentSheet({
      merchantDisplayName: 'Your Store',
      paymentIntentClientSecret: config.paymentIntentClientSecret,
      customerId: config.customerId,
      customerEphemeralKeySecret: config.customerEphemeralKeySecret,
      allowsDelayedPaymentMethods: true,
    });

    if (initResult.error) {
      throw initResult.error;
    }

    const paymentResult = await presentPaymentSheet();

    if (paymentResult.error) {
      throw paymentResult.error;
    }

    await refreshOrderStatus(cartId);
  }

  return { checkout };
}

After the sheet closes, verify the order state from your backend. Do not mark an order paid only because the client screen returned successfully.

Production Checklist​

  • Stripe secret keys are only on the backend.
  • Payment amount and currency are calculated server-side.
  • Webhooks finalize orders and handle delayed payment methods.
  • Duplicate taps cannot create duplicate paid orders.
  • Apple Pay and Google Pay are tested if enabled.
  • Payment failure, cancellation, and retry states are tested.
  • Refund and dispute workflows are understood by the business team.
  • Store policy is reviewed for digital goods or subscriptions.
Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

FAQ​

Is the old React Native Checkout package still the best option?​

No for new production work. Use Stripe's maintained React Native SDK and the patterns in the official Stripe docs.

Can I put the Stripe secret key in React Native?​

No. Secret keys, webhook secrets, refunds, and order finalization belong on a trusted backend.

Should I use Stripe for digital subscriptions?​

Do not assume that. Review Apple and Google payment rules for the exact product and storefront before implementing checkout.