Apple Pay and Google Pay in React Native Apps

Apple Pay and Google Pay turn checkout into a glance or a fingerprint. No typing card numbers on a small screen, no addresses to fill in, and fewer abandoned carts. For apps selling physical goods or real-world services, they're often the highest-converting payment methods available.

This guide shows how to add Apple Pay and Google Pay to a React Native app using Stripe's SDK: the one-time setup with Apple and Google, the platform pay button, confirming payments on the server, testing, and the store rules about what you can sell with them.

Key takeaways

• The easiest route is Stripe's React Native SDK, either through the Payment Sheet (Apple Pay and Google Pay appear automatically) or a dedicated platform pay button.
• Apple Pay needs a merchant ID and a payment processing certificate; Google Pay needs to be enabled and approved for production.
• Your server still creates the PaymentIntent and confirms the result by webhook. The wallet only replaces typing card details.
• Use them for physical goods and real-world services. Digital content in iOS apps still requires Apple's in-app purchase.
• Follow each platform's button guidelines, because reviewers notice custom-made wallet buttons.

Option 1: through the Payment Sheet

If you already use Stripe's Payment Sheet, wallets are a configuration option:

await initPaymentSheet({
  merchantDisplayName: "Your Studio",
  paymentIntentClientSecret: clientSecret,
  applePay: { merchantCountryCode: "US" },
  googlePay: { merchantCountryCode: "US", testEnv: __DEV__ },
});

The sheet shows Apple Pay or Google Pay at the top when the device supports them. This is the least work and covers most apps.

Option 2: a dedicated platform pay button

For a one-tap "Buy with Apple Pay" or "Buy with Google Pay" button on your product or booking screen, use the platform pay APIs:

import { PlatformPay, PlatformPayButton, usePlatformPay } from "@stripe/stripe-react-native";

export function WalletButton({ clientSecret, label, amount }: Props) {
  const { isPlatformPaySupported, confirmPlatformPayPayment } = usePlatformPay();
  const [supported, setSupported] = useState(false);

  useEffect(() => {
    isPlatformPaySupported({ googlePay: { testEnv: __DEV__ } }).then(setSupported);
  }, []);

  if (!supported) return null;

  const pay = async () => {
    const { error } = await confirmPlatformPayPayment(clientSecret, {
      applePay: {
        cartItems: [{ label, amount, paymentType: PlatformPay.PaymentType.Immediate }],
        merchantCountryCode: "US",
        currencyCode: "USD",
      },
      googlePay: {
        testEnv: __DEV__,
        merchantName: "Your Studio",
        merchantCountryCode: "US",
        currencyCode: "USD",
      },
    });
    if (!error) {
      // ask your server for the order status before showing "paid"
    }
  };

  return (
    <PlatformPayButton
      type={PlatformPay.ButtonType.Buy}
      onPress={pay}
      style={{ width: "100%", height: 50 }}
    />
  );
}

Check isPlatformPaySupported before showing the button, and fall back to a card form or the Payment Sheet when wallets aren't available.

One-time setup: Apple Pay

1. Create a merchant identifier (for example merchant.com.yourcompany.app) in your Apple Developer account.
2. Create a payment processing certificate for that merchant ID. Stripe's dashboard generates the signing request and lets you upload the certificate.
3. Enable the Apple Pay capability in your app. In Expo, add merchantIdentifier to the Stripe config plugin and rebuild.
4. Pass the same merchant identifier to StripeProvider.

One-time setup: Google Pay

1. Enable Google Pay in the Stripe config plugin (enableGooglePay: true) and rebuild.
2. Test with testEnv: true while developing.
3. Request production access through Google's Pay and Wallet Console with your business details and screenshots of your checkout before going live.

Collecting shipping and contact details

Wallets can return the customer's shipping address, email and phone number from their saved details, which removes an entire form from checkout. Ask only for the fields you actually need: a class booking may need nothing beyond the payment, while a physical delivery needs an address. Validate whatever comes back on your server, because a wallet address can still be outdated or outside your delivery area.

Design rules for wallet buttons

• Use the official buttons. Apple and Google publish button styles, labels and minimum sizes, and reviewers notice home-made versions.
• Pick the label that matches the action: "Buy", "Book", "Subscribe" or "Donate", rather than a generic "Pay".
• Give wallets prominence where they're available, typically above or beside other payment options.
• Don't show a wallet button that can't work. Hide it when the device or region isn't supported, and offer cards instead.
• Keep the total visible next to the button, so the wallet sheet confirms a number the user has already seen.

The server side doesn't change

Wallets change how the customer authorises payment, not how you confirm it. Your server still:

• creates the PaymentIntent with the amount from your own order,
• listens for payment_intent.succeeded on a verified webhook,
• marks the order paid once, idempotently, and fulfils it.

From the field: On Floey, Apple Pay and Google Pay sat alongside KNET and cards, all on the same idempotent, webhook-driven billing on the server. Adding a wallet should never mean adding a second definition of "paid"; it's one more way into the same flow.

Do Apple Pay and Google Pay cost extra?

Not for you as a merchant. Apple and Google don't add a fee on top for in-app wallet payments of physical goods or services; your payment provider charges its normal card rate, because a wallet payment is a card payment underneath. What wallets usually add is conversion: no typing card numbers, and fewer abandoned checkouts. (This is separate from the store commission on digital goods, which go through in-app purchase instead.)

Testing wallets

• iOS: add a sandbox tester account and a test card to Wallet on a real device, or use the simulator's Apple Pay sheet for basic checks.
• Android: use Google Pay's test environment with a real Google account on a device; test cards are provided in the test environment.
• Both: test cancelling the sheet, failed authorisations, and the fallback when wallets aren't supported.
• Production check: after going live, make one small real payment with each wallet and refund it, to confirm live keys, certificates and webhooks are all correct.

What you can and can't sell with Apple Pay in an app

Apple's guideline 3.1.3(e) explicitly names Apple Pay as a valid way to pay for "physical goods or services that will be consumed outside of the app".

FAQ

How do I add Apple Pay to a React Native app?

Create an Apple merchant ID and payment processing certificate, enable the Apple Pay capability (in Expo, via the Stripe config plugin), then use Stripe's Payment Sheet with the applePay option or the platform pay button. Your server creates the PaymentIntent and confirms the payment by webhook.

Do Apple Pay and Google Pay work in Expo?

Yes, in a development build. Add the @stripe/stripe-react-native config plugin with your merchant identifier and enableGooglePay, then build with EAS. Expo Go doesn't include the native payment code.

Can I use Apple Pay for subscriptions in my app?

Only for subscriptions to physical goods or real-world services, like a gym membership or a meal-kit delivery. Subscriptions to digital content or app features on iOS must use Apple's in-app purchase.

Why isn't the Apple Pay button showing?

Usually because the device has no supported cards in Wallet, the merchant identifier isn't configured in the build, or the payment isn't eligible. Check isPlatformPaySupported, confirm the Apple Pay capability is in the build, and test on a real device with a card added.

Next steps

If you want Apple Pay and Google Pay in your app with checkout, webhooks and fallbacks done properly, I can set up and test the whole flow. Get in touch, or see how I work as a React Native developer.

Sources

• Apple Pay (React Native), Stripe
• Google Pay (React Native), Stripe
• Stripe React Native SDK, GitHub
• Apple Pay Human Interface Guidelines, Apple
• App Review Guidelines (3.1.3(e)), Apple