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

arif chaudhary — Wed, 21 May 2025 16:55:22 +0000

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

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

3. Generate an Apple Pay Certificate

In the Stripe Dashboard, go to:

   Developers > iOS Certificate Settings

Click Add new application.
Select your Merchant ID.
Download the CSR (Certificate Signing Request).
In the Apple Developer portal, go to Merchant IDs.
Enable Apple Pay and upload the CSR.
Download the generated certificate and upload it back to Stripe.

4. Enable Apple Pay in Xcode

Open your React Native project in Xcode:

   ios/YourAppName.xcodeproj

Select your target → Signing & Capabilities.
Click + Capability → Add Apple Pay.
Select your Merchant ID.
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'));

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>

Replace yourapp and com.yourappname with your actual values.

Step 2: Verify in Xcode

Open the project in Xcode.
Go to Info > URL Types.
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>

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

🔪 Testing Apple Pay Integration

Run your app on a physical iOS device:

   npx react-native run-ios

Test a payment with Apple Pay.
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!

Deploy a Node.js App on EC2 and Keep It Running Forever with PM2

arif chaudhary — Sat, 17 May 2025 16:40:39 +0000

🌥️ Node.js Hello World on EC2 — Keep It Running Forever with PM2

Great for testing simple deployments on any cloud (AWS EC2, DigitalOcean, etc.).

✅ Full Setup Guide (Step-by-Step)

🧱 Step 1: Install Node.js and NPM Using NVM

# Become root
sudo su -

# Install NVM (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

# Activate NVM
. ~/.nvm/nvm.sh

# Install latest Node.js
nvm install node

# Verify installation
node -v
npm -v

🔧 Step 2: Install Git and Clone the Repository

# Update packages
sudo apt-get update -y

# Install Git
sudo apt-get install git -y

# Verify Git version
git --version

# Clone the Node.js sample repo
git clone https://github.com/yeshwanthlm/nodejs-on-ec2.git

# Move into the project directory
cd nodejs-on-ec2

# Install dependencies
npm install

🚀 Step 3: Start the Application (For Testing)

npm start

Your app will now serve "A Monk in Cloud" — but it will stop when the terminal is closed or the server reboots. To fix that, let’s keep it running with PM2 👇

🔁 Step 4: Install and Use PM2 to Keep App Alive

📥 Install PM2 globally:

npm install -g pm2

▶️ Start the App with PM2:

pm2 start index.js --name BackendAPI

📝 Replace index.js with the name of your main JS file if different.

♻️ Step 5: Keep App Running After Reboot

pm2 startup

Copy and run the command it outputs (something like this):

sudo env PATH=$PATH:/root/.nvm/versions/node/vXX/bin /root/.nvm/versions/node/vXX/lib/node_modules/pm2/bin/pm2 startup systemd -u root --hp /root

Then save the PM2 process list:

pm2 save

📋 Step 6: PM2 Useful Commands

pm2 list              # Show running apps
pm2 logs              # Show app logs
pm2 restart monk-app  # Restart the app
pm2 stop monk-app     # Stop the app
pm2 delete monk-app   # Remove it from PM2

✅ Final Result

Node.js is installed with NVM
App is deployed and running
PM2 keeps it alive forever
App auto-starts after reboot

✨ Optional

You can also:

Use NGINX as a reverse proxy for clean domain access
Add HTTPS with Let’s Encrypt
Connect a CI/CD pipeline

Let me know in the comments if you'd like a guide for any of those! 🙌

DEV Community: arif chaudhary