Rork Max × Stripe で Apple Pay / Google Pay を実装する — ワンタップ決済で購入転換率を劇的に改善する実践手法

// バックエンド（Cloudflare Workers）
// /.well-known/apple-developer-merchantid-domain-association
export default {
  async fetch(request) {
    const url = new URL(request.url);
 
    if (url.pathname === '/.well-known/apple-developer-merchantid-domain-association') {
      // Stripe ダッシュボードからダウンロードしたファイルの内容を返す
      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 = 'jpy', customerId } = await request.json();
 
    // Stripe API へのリクエスト
    // env.STRIPE_SECRET_KEY は Cloudflare Workers の Secrets で管理
    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 || '',
        // Apple Pay / Google Pay を含むすべての支払い方法を許可
        'payment_method_types[]': 'card',
        '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();
 
    // クライアントには clientSecret のみ返す（秘密鍵は絶対に返さない）
    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 または _layout.tsx に相当するファイル
import { StripeProvider } from '@stripe/stripe-react-native';
 
export default function RootLayout() {
  return (
    <StripeProvider
      publishableKey="pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXX" // 本番の Publishable Key
      merchantIdentifier="merchant.net.dolice.myapp" // Apple Pay の Merchant ID
      urlScheme="yourapp" // ディープリンク用スキーム
    >
      {/* アプリのコンポーネント */}
    </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; // 金額（最小通貨単位: 円の場合は整数）
  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 () => {
    try {
      // バックエンドから clientSecret を取得
      const response = await fetch('https://your-api.workers.dev/create-payment-intent', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amount, currency: 'jpy' }),
      });
 
      if (!response.ok) throw new Error('サーバーエラーが発生しました');
 
      const { clientSecret, paymentIntentId } = await response.json();
 
      // Payment Sheet を初期化
      const { error } = await initPaymentSheet({
        merchantDisplayName: 'Dolice Apps',
        paymentIntentClientSecret: clientSecret,
        // Apple Pay / Google Pay の設定
        applePay: {
          merchantCountryCode: 'JP',
          // 購入アイテムの表示（Apple Pay のシート上に表示される）
          cartItems: [
            {
              label: productName,
              amount: String(amount),
              paymentType: 'Immediate',
            },
          ],
        },
        googlePay: {
          merchantCountryCode: 'JP',
          testEnv: false, // 本番時は false
          currencyCode: 'jpy',
          centAmount: amount, // Google Pay は最小通貨単位
        },
        // 住所入力は不要な場合は省略（デジタルコンテンツなど）
        billingDetailsCollectionConfiguration: {
          name: 'never',
          email: 'never',
          phone: 'never',
          address: 'never',
        },
        style: 'alwaysDark', // または 'alwaysLight', 'automatic'
      });
 
      if (error) throw new Error(error.message);
 
      return paymentIntentId;
    } catch (err) {
      throw err;
    }
  }, [amount, productName, initPaymentSheet]);
 
  const handlePayment = useCallback(async () => {
    setLoading(true);
    try {
      const paymentIntentId = await initializePaymentSheet();
 
      // Payment Sheet を表示（Apple Pay / Google Pay ボタンを含む）
      const { error } = await presentPaymentSheet();
 
      if (error) {
        if (error.code === PaymentSheetError.Canceled) {
          // ユーザーがキャンセル — エラーとして扱わない
          return;
        }
        throw new Error(error.message);
      }
 
      // 決済成功
      onSuccess(paymentIntentId || '');
    } catch (err) {
      const message = err instanceof Error ? err.message : '決済に失敗しました';
      onError?.(message);
      Alert.alert('エラー', 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' }}>
          {amount.toLocaleString()}円 を支払う
        </Text>
      )}
    </TouchableOpacity>
  );
}

// Webhook ハンドラー（Cloudflare Workers）
export async function handleStripeWebhook(request, env) {
  const signature = request.headers.get('stripe-signature');
  const body = await request.text();
 
  try {
    // Stripe の署名検証（改ざん防止）
    // 実際の実装では 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) {
          // Supabase や KV でユーザーの権限を更新
          await grantPremiumAccess(userId, env);
        }
        break;
      }
      default:
        // 未処理のイベントは無視
        break;
    }
 
    return new Response(JSON.stringify({ received: true }), {
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (err) {
    console.error('Webhook error:', err);
    return new Response('Webhook handler failed', { status: 400 });
  }
}

# Stripe CLI のインストール後
stripe listen --forward-to localhost:8787/webhook
 
# 別ターミナルで決済イベントをトリガー
stripe trigger payment_intent.succeeded

curl https://your-api.workers.dev/.well-known/apple-developer-merchantid-domain-association
# ファイルの内容が返ってくれば OK

// 画面表示時に事前初期化
useEffect(() => {
  // バックグラウンドで Payment Sheet を初期化
  initializePaymentSheet().catch(console.error);
}, []);