End-to-End Guide to Apple Pay and Google Pay in React Native using Stripe

Nov 12, 2025 |

14 minutes read

Why Integrating Apple Pay and Google Pay Matters for React Native Apps

Accepting in-app payments seamlessly across iOS and Android is a key milestone for most mobile apps today. Whether you’re building an e-commerce app, a service platform, or a subscription-based product, providing users with secure, frictionless payments is essential. Stripe makes this process remarkably smooth with its robust SDK for React Native, offering full support for both Apple Pay and Google Pay.

This article is a comprehensive, beginner-to-professional level guide that explains how to integrate Apple Pay and Google Pay using Stripe in React Native. We’ll go beyond the basic setup, exploring the flow, configuration nuances, and best practices to ensure your payment experience is production-ready.

Why Use Stripe for Mobile Payments?

Stripe’s React Native SDK is built to simplify payment integrations without compromising security. It handles encryption, tokenization, and compliance, ensuring that sensitive payment details never touch your app’s servers. With Apple Pay and Google Pay support, you can now:

Enable seamless one-tap checkout using trusted digital wallets.
Improve conversion rates by reducing payment friction.
Use the same backend integration for both platforms.
Expand worldwide with support for diverse currencies and payment options.

Step 1: Install and Configure Stripe

To begin, add the Stripe SDK to your project:


npm install @stripe/stripe-react-native

If you’re using iOS, you’ll need to install CocoaPods dependencies as well:


cd ios && pod install && cd ..

Initialize Stripe

Next, initialize Stripe in your app’s entry point (App.tsx or App.js). The StripeProvider wraps your app and provides context for payment components.


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

export default function App() {
  return (
    
      
    
  );
}

Replace pk_test_12345 with your Stripe publishable key found in the Stripe Dashboard under Developers → API Keys.

Tip: Never expose your secret key in the frontend. Use only the publishable key client-side.

Step 2: Activate Apple Pay for iOS devices.

Setting up Apple Pay requires certain configurations in both your Apple Developer account and the Stripe Dashboard.

i Apple Pay Activation in Apple Developer Portal.

Log in to Apple Developer account.
Then Go to Certificates, Identifiers & Profiles.
Choose your app identifier and turn on the Apple Pay feature.
In Xcode, go to your target’s Signing & Capabilities tab → click + Capability → add Apple Pay.

ii. Add Apple Pay Domain in Stripe

In your Stripe Dashboard → Settings → Payments → Apple Pay.
Click on Add new domain button, then follow following verification step:.

iii. Add Permissions in Info.plist


<key>NSAppleMusicUsageDescription</key>
<string>We use Apple Pay to securely process your payment.</string>

Step 3: Enable Google Pay (Android)

Google Pay is much easier to set up for testing.

1. Ensure you have Google Play Services installed.

2. Open your android/app/build.gradle file and add:


dependencies {
  implementation 'com.google.android.gms:play-services-wallet:19.1.0'
}

3. Verify your app’s country supports Google Pay (Stripe Docs).

4. No additional configuration is needed for testing Stripe handles the environment setup automatically.

Step 4: Build a Secure Backend for PaymentIntents

Stripe’s API requires a backend to create PaymentIntents, which define the amount, currency, and status of the transaction. Using Express.js, you can set up a minimal backend as follows:


import express from 'express';
import Stripe from 'stripe';

const app = express();
const stripe = new Stripe('sk_test_12345');

app.post('/create-payment-intent', async (req, res) => {
  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: 5000, // $50.00
      currency: 'usd',
    });
    res.send({ clientSecret: paymentIntent.client_secret });
  } catch (error) {
    res.status(500).send({ error: error.message });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

This backend securely interacts with Stripe using your secret key. The client_secret returned here will be used by your React Native app to present the payment sheet.

Pro Tip: Always keep API keys in environment variables using .env files — never embed them directly in your source code.

Step 5: Implement the Payment Sheet in React Native

The Stripe Payment Sheet provides a unified interface for Apple Pay, Google Pay, and card payments.


import React, { useEffect } from 'react';
import { Button } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function PaymentScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  const fetchPaymentIntent = async () => {
    const response = await fetch('http://localhost:3000/create-payment-intent', {
      method: 'POST',
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  const initializePaymentSheet = async () => {
    const clientSecret = await fetchPaymentIntent();
    await initPaymentSheet({
      paymentIntentClientSecret: clientSecret,
      merchantDisplayName: 'My React Native Shop',
      applePay: true,
      googlePay: true,
      style: 'automatic',
    });
  };

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();
    if (error) {
      alert(`Payment failed: ${error.message}`);
    } else {
      alert('Payment successful!');
    }
  };

  return

This snippet initializes Stripe’s Payment Sheet, fetches a clientSecret from your backend, and displays Apple Pay or Google Pay as available options.

Step 6: Testing Your Integration

For Apple Pay

Use a sandbox Apple ID on your device.
Add test card details in your Wallet app.
When testing, make sure you’re using a real device (Apple Pay does not work in simulators).

For Google Pay

Use a test card in your Google account.
On Android emulators, make sure Google Play Services are installed.
On physical devices, Google Pay must be enabled and linked to a valid account.

Common Pitfalls and How to Avoid Them

Apple Pay not showing up → Verify that Apple Pay is enabled in both your developer portal and Xcode.
Google Pay unavailable → Ensure Play Services are installed and region supports it.
Invalid publishable key → Always use the correct key (test vs. live).
Server error 403/401 → Confirm your backend uses the secret key and not the publishable key.

Step 7: Going Live

When your integration is ready for production:

Switch to your live publishable key in the app.
Update your backend to use the live secret key.
Verify your Apple Pay domain in Stripe.
Test real transactions with a small amount first.
Monitor transactions in Stripe Dashboard → Payments.

Once your app is approved by Apple and Google, you can begin accepting real payments securely across platforms.

Best Practices for Payment UX

Display a loading indicator while initializing the Payment Sheet.
Provide clear success and failure messages.
Log payment attempts for customer support.
Handle cancellations gracefully don’t log them as failed payments.
Offers diversified payment methods to enhance user experience.

Simplify Mobile Payments with Stripe Integration in React Native!

The Way Forward

Integrating Apple Pay and Google Pay using Stripe in React Native is a powerful way to deliver seamless and secure payment experiences to users worldwide. With a few lines of configuration and careful setup, you can enable one-tap payments and boost conversion rates.

This guide covered the end-to-end process from SDK setup and backend creation to testing React Native apps online and deployment, giving you a solid foundation for handling mobile payments confidently.

Next step: Explore advanced flows like saving payment methods, handling subscriptions, or integrating 3D Secure authentication for maximum protection.