DEV Community

Cover image for 🍏 Integrating Apple Pay with Stripe in a React Native CLI Project (iOS)
arif chaudhary
arif chaudhary

Posted on

🍏 Integrating Apple Pay with Stripe in a React Native CLI Project (iOS)

Integrating Apple Pay with Stripe in a React Native CLI project involves configuring your Apple Developer account, setting up Stripe, installing dependencies, and implementing the payment flow.

This guide uses the @stripe/stripe-react-native SDK and is iOS-focused, as Apple Pay is available only on Apple devices.

✅ Prerequisites

Before starting, ensure you have the following:

  • A React Native CLI project (not Expo).
  • A valid Apple Developer Program account.
  • A Stripe account (test keys available).
  • Xcode installed on macOS.
  • A physical iOS device (real Apple Pay testing).
  • Node.js, npm or yarn.
  • A code editor like VS Code.

🔧 Step-by-Step Integration

Step 1: Set Up Apple Developer Account for Apple Pay

1. Enroll in the Apple Developer Program

You must be enrolled in the Apple Developer Program to use Apple Pay.

2. Create a Merchant ID

  1. Sign in to the Apple Developer Console.
  2. Go to Certificates, Identifiers & Profiles > Identifiers.
  3. Click the + button.
  4. Select Merchant IDs and create a new one, e.g., merchant.com.yourappname.
  5. Add a description and register the ID.

3. Generate an Apple Pay Certificate

  1. In the Stripe Dashboard, go to: 
   Developers > iOS Certificate Settings
Enter fullscreen mode Exit fullscreen mode
  1. Click Add new application.
  2. Select your Merchant ID.
  3. Download the CSR (Certificate Signing Request).
  4. In the Apple Developer portal, go to Merchant IDs.
  5. Enable Apple Pay and upload the CSR.
  6. Download the generated certificate and upload it back to Stripe.

4. Enable Apple Pay in Xcode

  1. Open your React Native project in Xcode: 
   ios/YourAppName.xcodeproj
Enter fullscreen mode Exit fullscreen mode
  1. Select your target → Signing & Capabilities.
  2. Click + Capability → Add Apple Pay.
  3. Select your Merchant ID.
  4. Ensure the Bundle ID matches what is configured in Apple.

Step 2: Set Up Stripe Account

1. Create a Stripe Account

Create a free account at https://stripe.com.

2. Obtain API Keys

In the Stripe Dashboard:

  • Go to Developers > API Keys.

  • Copy:

    • Publishable Key (for client-side)
    • Secret Key (for server-side)

⚠️ Keep your secret key secure! Use it only on the backend.

3. Create a Backend Server for Payment Intents

Apple Pay requires a PaymentIntent, which must be created on the server. Here’s an example using Node.js:

// server.js
const express = require('express');
const Stripe = require('stripe');
const stripe = Stripe('sk_test_YourSecretKey');

const app = express();
app.use(express.json());

app.post('/create-payment-intent', async (req, res) => {
  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: 1099, // amount in cents
      currency: 'usd',
      payment_method_types: ['card'], // includes Apple Pay
    });

    res.send({ clientSecret: paymentIntent.client_secret });
  } catch (err) {
    res.status(500).send({ error: err.message });
  }
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));
Enter fullscreen mode Exit fullscreen mode

You can host this on Glitch, Render, Vercel, AWS, or any backend provider.

🔗 Configuring URL Scheme for Apple Pay (3D Secure)

Some Stripe flows (like 3D Secure) require a custom URL scheme to redirect back into your app.

Step 1: Add URL Scheme to Info.plist

Open ios/YourAppName/Info.plist and add the following:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>com.yourappname</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>yourapp</string>
    </array>
  </dict>
</array>
Enter fullscreen mode Exit fullscreen mode

Replace yourapp and com.yourappname with your actual values.

Step 2: Verify in Xcode

  1. Open the project in Xcode.
  2. Go to Info > URL Types.
  3. Make sure:
  • Identifier: com.yourappname
  • URL Schemes: yourapp
  • Role: Editor

🧪 StripeProvider Setup in React Native

In your App.js or main entry component, wrap your app in the StripeProvider:

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

<StripeProvider
  publishableKey="pk_test_YourPublishableKey"
  merchantIdentifier="merchant.com.yourappname"
  urlScheme="yourapp://stripe-redirect"
>
  <YourPaymentComponent />
</StripeProvider>
Enter fullscreen mode Exit fullscreen mode

Make sure urlScheme matches the one you registered in Info.plist.

🔪 Testing Apple Pay Integration

  1. Run your app on a physical iOS device: 
   npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode
  1. Test a payment with Apple Pay.
  2. Use a test card (e.g., 4000 0027 6000 3184) that requires 3D Secure to test the redirect and return flow.

📝 Notes & Troubleshooting

  • Replace all yourapp strings with your actual app scheme.
  • Ensure Bundle ID, Merchant ID, and URL schemes are all consistent.

  • If Stripe fails to redirect after authentication, check:

    • URL scheme in StripeProvider
    • CFBundleURLSchemes in Info.plist

  • Always test Apple Pay on a physical iOS device. Simulators do not fully support the flow.

📚 Resources

If this helped you integrate Apple Pay, please leave a ❤️ or drop your questions below. Happy coding!

Top comments (0)