Rork Max × Stripe: Apple Pay & Google Pay — Boost Purchase Conversion with One-Tap Checkout

// Cloudflare Workers — serve the domain verification file
export default {
  async fetch(request) {
    const url = new URL(request.url);
 
    if (url.pathname === '/.well-known/apple-developer-merchantid-domain-association') {
      // Return the content downloaded from Stripe Dashboard
      return new Response(APPLE_PAY_DOMAIN_VERIFICATION_CONTENT, {
        headers: { 'Content-Type': 'text/plain' }
      });
    }
 
    return handleRequest(request);
  }
};

// workers/payment-intent.js
const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
  'Access-Control-Allow-Methods': 'POST, OPTIONS',
};
 
export async function handleCreatePaymentIntent(request, env) {
  if (request.method === 'OPTIONS') {
    return new Response(null, { headers: corsHeaders });
  }
 
  try {
    const { amount, currency = 'usd', customerId } = await request.json();
 
    // env.STRIPE_SECRET_KEY is stored as a Cloudflare Workers Secret
    // — never hardcode secrets in source code
    const response = await fetch('https://api.stripe.com/v1/payment_intents', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${env.STRIPE_SECRET_KEY}`,
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: new URLSearchParams({
        amount: String(amount),
        currency,
        customer: customerId || '',
        'automatic_payment_methods[enabled]': 'true',
      }),
    });
 
    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error?.message || 'Stripe API error');
    }
 
    const paymentIntent = await response.json();
 
    // Only return clientSecret to the client — never the secret key
    return new Response(
      JSON.stringify({
        clientSecret: paymentIntent.client_secret,
        paymentIntentId: paymentIntent.id,
      }),
      {
        headers: {
          ...corsHeaders,
          'Content-Type': 'application/json',
        },
      }
    );
  } catch (error) {
    console.error('PaymentIntent creation error:', error);
    return new Response(
      JSON.stringify({ error: error.message }),
      {
        status: 500,
        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      }
    );
  }
}

// App.tsx or _layout.tsx
import { StripeProvider } from '@stripe/stripe-react-native';
 
export default function RootLayout() {
  return (
    <StripeProvider
      publishableKey="pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXX"
      merchantIdentifier="merchant.net.dolice.myapp" // Apple Pay Merchant ID
      urlScheme="yourapp" // Deep link scheme for 3D Secure redirects
    >
      {/* Rest of your app */}
    </StripeProvider>
  );
}

// components/PaymentButton.tsx
import React, { useState, useCallback } from 'react';
import { View, Text, TouchableOpacity, Alert, ActivityIndicator } from 'react-native';
import { useStripe, PaymentSheetError } from '@stripe/stripe-react-native';
 
interface PaymentButtonProps {
  amount: number; // Amount in smallest currency unit (cents for USD)
  productName: string;
  onSuccess: (paymentIntentId: string) => void;
  onError?: (error: string) => void;
}
 
export function PaymentButton({
  amount,
  productName,
  onSuccess,
  onError,
}: PaymentButtonProps) {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);
 
  const initializePaymentSheet = useCallback(async () => {
    const response = await fetch('https://your-api.workers.dev/create-payment-intent', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount, currency: 'usd' }),
    });
 
    if (!response.ok) throw new Error('Failed to initialize checkout');
 
    const { clientSecret, paymentIntentId } = await response.json();
 
    const { error } = await initPaymentSheet({
      merchantDisplayName: 'Your App Name',
      paymentIntentClientSecret: clientSecret,
      applePay: {
        merchantCountryCode: 'US',
        cartItems: [
          {
            label: productName,
            amount: (amount / 100).toFixed(2), // Convert cents to dollars
            paymentType: 'Immediate',
          },
        ],
      },
      googlePay: {
        merchantCountryCode: 'US',
        testEnv: false, // Set to false for production
        currencyCode: 'usd',
        centAmount: amount,
      },
      // Minimize friction for digital goods
      billingDetailsCollectionConfiguration: {
        name: 'never',
        email: 'never',
        phone: 'never',
        address: 'never',
      },
      style: 'automatic', // Respects system dark/light mode
    });
 
    if (error) throw new Error(error.message);
    return paymentIntentId;
  }, [amount, productName, initPaymentSheet]);
 
  const handlePayment = useCallback(async () => {
    setLoading(true);
    try {
      const paymentIntentId = await initializePaymentSheet();
      const { error } = await presentPaymentSheet();
 
      if (error) {
        if (error.code === PaymentSheetError.Canceled) {
          // User dismissed the sheet — not an error
          return;
        }
        throw new Error(error.message);
      }
 
      // Payment succeeded
      onSuccess(paymentIntentId || '');
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Payment failed';
      onError?.(message);
      Alert.alert('Payment Error', message);
    } finally {
      setLoading(false);
    }
  }, [initializePaymentSheet, presentPaymentSheet, onSuccess, onError]);
 
  return (
    <TouchableOpacity
      onPress={handlePayment}
      disabled={loading}
      style={{
        backgroundColor: '#000',
        borderRadius: 12,
        padding: 16,
        alignItems: 'center',
        opacity: loading ? 0.6 : 1,
      }}
    >
      {loading ? (
        <ActivityIndicator color="#fff" />
      ) : (
        <Text style={{ color: '#fff', fontSize: 16, fontWeight: '600' }}>
          Pay ${(amount / 100).toFixed(2)}
        </Text>
      )}
    </TouchableOpacity>
  );
}

// Webhook handler (Cloudflare Workers)
export async function handleStripeWebhook(request, env) {
  const signature = request.headers.get('stripe-signature');
  const body = await request.text();
 
  try {
    // Verify webhook signature to prevent tampering
    // In production, use stripe.webhooks.constructEvent
    const event = JSON.parse(body);
 
    switch (event.type) {
      case 'payment_intent.succeeded': {
        const paymentIntent = event.data.object;
        const userId = paymentIntent.metadata?.userId;
 
        if (userId) {
          await grantPremiumAccess(userId, env);
        }
        break;
      }
      default:
        break;
    }
 
    return new Response(JSON.stringify({ received: true }), {
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (err) {
    return new Response('Webhook handler failed', { status: 400 });
  }
}

# Forward webhook events to your local development server
stripe listen --forward-to localhost:8787/webhook
 
# Trigger a test event from another terminal
stripe trigger payment_intent.succeeded

curl https://your-api.workers.dev/.well-known/apple-developer-merchantid-domain-association
# Should return the verification file content

// Pre-initialize when the screen mounts
useEffect(() => {
  initializePaymentSheet().catch(console.error);
}, []);