How to Integrate Apple Pay and Google Pay in React Native Apps

Introduction

Mobile wallets have transformed how users pay for goods and services, and integrating Apple Pay and Google Pay into your React Native application is one of the most effective ways to reduce friction at checkout. By offering a one‑touch payment experience that leverages device‑level authentication (Face ID, Touch ID, or fingerprint), you can increase conversion rates and build trust with your customers. This guide provides a comprehensive, production‑ready walkthrough for adding both Apple Pay and Google Pay to your React Native app, covering everything from environment setup and payment request configuration to handling errors, testing, and meeting platform‑specific security requirements.

Prerequisites

Before starting the integration, ensure you have the following in place:

• React Native development environment – A working React Native project (CLI, not Expo managed workflow, because native wallet features require custom native modules).
• Apple Developer account – An active Apple Developer Program membership ($99/year) to create merchant identifiers and register your app for Apple Pay.
• Google Pay API access – A Google Pay merchant ID and a Google Cloud project with the Google Pay API enabled.
• Support devices – An iPhone with NFC (iPhone 6 or later) for Apple Pay testing, and an Android device with NFC and Google Play Services (Android 5.0+) for Google Pay testing. Simulators can be used for limited testing, but real payments require physical hardware.
• Payment gateway – A supported payment processor (e.g., Stripe, Braintree, Adyen, Square) that offers tokenization and can handle the payment data returned by the wallets.
• NPM/Yarn packages – react-native-payments (or tipsi-stripe for Apple Pay) and react-native-google-pay (or the payment gateway’s own React Native plugin).

Integrating Apple Pay in React Native

Apple Pay integration requires careful configuration on the Apple Developer portal, Xcode, and within your JavaScript code. Below we break each step into manageable pieces.

Step 1: Set Up Apple Pay on the Apple Developer Portal

1. Log in to the Apple Developer Portal and navigate to Certificates, Identifiers & Profiles > Identifiers.
2. Create a new Merchant ID. This is a unique identifier (e.g., merchant.com.yourcompany.appname) that links your app to the payment capability.
3. Enable the Apple Pay Payment Processing capability for your App ID. Associate the Merchant ID with your App ID.
4. Download and install the appropriate Apple Pay Certificate (the one provided by your payment gateway) to your Keychain.

Step 2: Configure Xcode Project

• Open your React Native project’s ios folder in Xcode.
• Select your app target, go to Signing & Capabilities, and click + Capability. Add Apple Pay.
• In the Apple Pay section, click + to add your merchant ID (the one you created in the portal).
• Ensure the development team is set and a provisioning profile with Apple Pay support is selected.

Step 3: Install and Configure react-native-payments

The react-native-payments library abstracts the complexities of Apple Pay and Google Pay into a unified JavaScript API. Install it and then run pod install:

npm install react-native-payments
cd ios && pod install

For Apple Pay only, you might use tipsi-stripe which has a more mature Apple Pay interface. react-native-payments supports both wallets with the same code pattern, which is why we recommend it for dual‑wallet integrations.

Step 4: Create the Payment Request

In your React Native component, define the payment method data and the transaction details. The following example shows a minimal Apple Pay request:

import { PaymentRequest, PaymentResponse } from 'react-native-payments';

const METHOD_DATA = [
  {
    supportedMethods: ['apple-pay'],
    data: {
      merchantIdentifier: 'merchant.com.yourcompany.appname',
      countryCode: 'US',
      currencyCode: 'USD',
      supportedNetworks: ['visa', 'mastercard', 'amex', 'discover'],
      merchantCapabilities: ['supports3DS'],
    },
  },
];

const DETAILS = {
  id: 'order-12345',
  displayItems: [
    { label: 'Item 1', amount: { currency: 'USD', value: '25.00' } },
    { label: 'Shipping', amount: { currency: 'USD', value: '5.00' } },
  ],
  total: { label: 'Total', amount: { currency: 'USD', value: '30.00' } },
};

const paymentRequest = new PaymentRequest(METHOD_DATA, DETAILS);

Important: The total amount must exactly match the sum of displayItems (or be the final charge). Apple Pay will display the total to the user before authorization.

Step 5: Display the Apple Pay Sheet and Handle the Response

async function handleApplePay() {
  try {
    const paymentResponse = await paymentRequest.show();
    // Send paymentResponse.details.paymentToken to your backend for processing
    const token = paymentResponse.details.paymentToken;
    // … forward token to your payment gateway
    await paymentResponse.complete('success');
  } catch (err) {
    console.error('Payment failed', err);
    // Optionally call paymentResponse.complete('fail') if already shown
  }
}

User experience tips: Call paymentRequest.show() only after the user taps a “Buy with Apple Pay” button. Never pre‑trigger the sheet. If the user cancels, the promise rejects, and you should revert the UI state. Always call paymentResponse.complete() to dismiss the sheet and inform Apple of the outcome.

Step 6: Adding Shipping and Contact Information (Optional)

You can request shipping addresses and email/phone by adding options to the PaymentRequest constructor:

const OPTIONS = {
  requestPayerName: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestShipping: true,
  shippingType: 'shipping', // or 'delivery' or 'pickup'
};
const paymentRequest = new PaymentRequest(METHOD_DATA, DETAILS, OPTIONS);

Listen for shipping address changes to recalculate tax or shipping costs by attaching an event handler (the library’s API may vary; check documentation).

Integrating Google Pay in React Native

Google Pay follows a similar pattern but requires different merchant setup and uses the react-native-google-pay package (or the gateway‑specific modules).

Step 1: Set Up Google Pay Merchant ID

• Go to the Google Pay & Wallet Console and sign in with your merchant account.
• Create a new merchant profile if you don’t have one. Accept the terms of service.
• Note your Merchant ID. You’ll need it when configuring the payment request.
• In the Google Cloud Console, enable the Google Pay API for your project.

Step 2: Install react-native-google-pay

npm install react-native-google-pay
cd android && ./gradlew clean

No additional Android manifest changes are required if your app targets API 19+. The library handles runtime permission checks for NFC and network features.

Step 3: Check Device Readiness

Before showing the Google Pay button, verify that the device supports Google Pay and that the user has a saved card:

import { GooglePay } from 'react-native-google-pay';

GooglePay.isReadyToPay(
  ['VISA', 'MASTERCARD', 'AMEX', 'DISCOVER'],
  ['PAN_ONLY', 'CRYPTOGRAM_3DS']
).then(isReady => {
  if (isReady) {
    // Show Google Pay button
  } else {
    // Hide the button or show alternative payment methods
  }
}).catch(error => console.warn('isReadyToPay error', error));

PAN_ONLY means a card stored with Google, while CRYPTOGRAM_3DS indicates network tokenization (more secure).

Step 4: Build the Payment Request

Define the request data following Google Pay’s specification. The library expects a JavaScript object with specific fields:

const requestData = {
  cardPaymentMethod: {
    type: 'CARD',
    tokenizationSpecification: {
      type: 'PAYMENT_GATEWAY',
      parameters: {
        gateway: 'stripe',          // e.g., 'stripe', 'braintree', 'adyen'
        gatewayMerchantId: 'your-stripe-account-id', // not the Google Merchant ID
      },
    },
    parameters: {
      allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX', 'DISCOVER'],
      allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
      billingAddressRequired: true,
      billingAddressParameters: {
        format: 'FULL',
        phoneNumberRequired: true,
      },
    },
  },
  transaction: {
    totalPrice: '30.00',
    totalPriceStatus: 'FINAL',
    currencyCode: 'USD',
  },
  merchantName: 'Your Merchant Name',
};

Important: The gatewayMerchantId is the identifier your payment processor gives you, not the Google Merchant ID. If you use a processor like Stripe, this is the Stripe account ID (e.g., acct_xxxx).

Step 5: Request Payment

GooglePay.requestPayment(requestData)
  .then(paymentData => {
    // paymentData contains the token (e.g., paymentData.token)
    console.log('Payment success', paymentData);
    // Send token to your backend for processing
  })
  .catch(error => {
    console.error('Payment failed', error);
    // Handle cancellation or error
  });

The paymentData.token is a base64‑encoded JSON object that your backend can decrypt with your payment processor’s keys. The exact structure depends on the tokenizationSpecification gateway you chose.

Step 6: Handling Google Pay Button Visibility

Google Pay guidelines require that you display the payment button only if isReadyToPay returns true. Also, use the official Google Pay button assets (provided by the library or downloadable from Google’s design guide). The react-native-google-pay library does not include a pre‑made button component, so you’ll need to add one manually:

import { TouchableOpacity, Image } from 'react-native';
import googlePayButton from './assets/google-pay-button.png';

{isGooglePayReady && (
  
    
  
)}

For Apple Pay, use the system‑provided PKPaymentButton if you want Apple’s native styling (requires a bridge or a native component).

Common Issues and Solutions

• Apple Pay sheet not showing: Verify the merchant ID is correctly added to Xcode capabilities and that the provisioning profile includes Apple Pay. Also ensure your device has a card added to Wallet.
• Google Pay fails with “Developer error”: Check that your gatewayMerchantId matches the merchant ID from your payment gateway. Also ensure the gateway value (e.g., stripe) is exactly as the processor expects.
• Payment token not accepted by backend: Tokenization specifications must match between the client and the server. If you use PAYMENT_GATEWAY on the client, your server must decrypt with the gateway’s keys, not Google’s.
• Library compatibility: Sometimes react-native-payments and react-native-google-pay conflict with each other because both modify the Android manifest. Use only one library for cross‑platform payments or isolate them via platform‑specific files.
• NFC not enabled on Android emulator: The Android emulator can’t simulate Google Pay payments. Test on a physical device.

Security and Compliance Best Practices

Both Apple Pay and Google Pay provide tokenized payment data, meaning the actual card number is never transmitted to your server. However, you still need to handle the token securely:

• Never store the raw payment token on the client. Forward it directly to your backend over HTTPS.
• Use SSL pinning in your React Native app to prevent MITM attacks on the token transmission.
• Implement server‑side verification of the transaction amount and currency. Do not trust the client‑side total to be the final charge.
• For PCI DSS compliance, using wallet payments reduces your scope because you never handle primary account numbers. But you must still follow SAQ A guidelines if you process tokenized data.
• Add a nonce or idempotency key to prevent duplicate charges.

Testing Your Integration

Apple Pay Test Environment

Apple provides a sandbox environment. To test:

• Create a test user (sandbox tester) in the Apple Developer portal (App Store Connect > Users & Access > Sandbox Testers).
• Sign into that tester account on your device (Settings > App Store > Sandbox Account).
• Add a test card to Wallet (the sandbox will show test card numbers).
• Run your app and attempt a payment. The sheet should appear and the transaction should return a token.

Google Pay Test Card

• Use the Google Pay test card suite from the developer documentation. These cards will work only when your app is signed with a debug keystore or when you add the test card to your Google Pay Wallet.
• Alternatively, use the Google Pay Test Suite app to simulate payment without a real card.
• Check the Google Pay console for sandbox transaction logs.

End‑to‑End Validation

Create a staging endpoint that echoes the token, then decode and verify its structure. For Stripe, you can use the stripe.tokens.retrieve() API to confirm the token was generated correctly. For other gateways, use their respective test APIs.

Conclusion

Integrating Apple Pay and Google Pay into your React Native app dramatically improves the checkout experience by eliminating manual card entry and reducing friction. While the setup involves several configuration steps—merchant registration, Xcode/Android Studio settings, and careful code implementation—the payoff in conversion rates and user trust is substantial. By following the detailed instructions in this guide and adhering to platform‑specific security requirements, you can offer a smooth, secure, and wallet‑based payment flow that works seamlessly across iOS and Android. Remember to test thoroughly on real devices using sandbox environments, keep your payment gateway tokens up to date, and always validate the transaction on your backend before fulfilling the order. With these pieces in place, your app will be ready to accept modern mobile payments from day one.