Stripe Elementsとは？安全で美しい決済フォームを5分で実装する方法

    
    
    


    

        

            
        
        

        支払う
    

    

# 必要なパッケージをインストール
npm install @stripe/stripe-js @stripe/react-stripe-js

// App.js
import React from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import CheckoutForm from './CheckoutForm';

// Stripeオブジェクトを初期化
const stripePromise = loadStripe('pk_test_YOUR_PUBLISHABLE_KEY_HERE');

function App() {
    return (
        
            
        
    );
}

export default App;

// CheckoutForm.js
import React, { useState } from 'react';
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

const CARD_ELEMENT_OPTIONS = {
    style: {
        base: {
            color: '#424770',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#9e2146',
            iconColor: '#fa755a'
        }
    }
};

function CheckoutForm() {
    const stripe = useStripe();
    const elements = useElements();
    const [error, setError] = useState(null);
    const [processing, setProcessing] = useState(false);

    const handleSubmit = async (event) => {
        event.preventDefault();

        if (!stripe || !elements) {
            return;
        }

        setProcessing(true);

        const card = elements.getElement(CardElement);
        const result = await stripe.createToken(card);

        if (result.error) {
            setError(result.error.message);
            setProcessing(false);
        } else {
            setError(null);
            console.log('Token created:', result.token);
            // サーバーにトークンを送信
            setProcessing(false);
        }
    };

    return (
        

            
            {error && 
{error}
}
            
                {processing ? '処理中...' : '支払う'}
            
        
    );
}

export default CheckoutForm;

// 詳細なスタイル設定例
const cardElementOptions = {
    style: {
        base: {
            fontSize: '16px',
            color: '#424770',
            fontFamily: 'system-ui, sans-serif',
            fontSmoothing: 'antialiased',
            lineHeight: '20px',
            '::placeholder': {
                color: '#aab7c4',
            },
            // ボーダーのカスタマイズ
            border: '1px solid #e6ebf1',
            borderRadius: '8px',
            padding: '12px',
        },
        invalid: {
            color: '#dc3545',
            iconColor: '#dc3545',
            // エラー時のスタイル
            borderColor: '#dc3545',
        },
        complete: {
            color: '#28a745',
            iconColor: '#28a745',
            // 入力完了時のスタイル
            borderColor: '#28a745',
        }
    },
    // フィールドの表示をカスタマイズ
    hidePostalCode: true, // 郵便番号フィールドを非表示
    iconStyle: 'solid',    // アイコンスタイル
};

// 個別フィールドでの実装
const elements = stripe.elements();

// カード番号のみのフィールド
const cardNumber = elements.create('cardNumber', {
    style: cardElementOptions.style,
    placeholder: 'カード番号を入力'
});

// 有効期限フィールド
const cardExpiry = elements.create('cardExpiry', {
    style: cardElementOptions.style,
    placeholder: 'MM/YY'
});

// CVCフィールド
const cardCvc = elements.create('cardCvc', {
    style: cardElementOptions.style,
    placeholder: 'CVC'
});

cardNumber.mount('#card-number-element');
cardExpiry.mount('#card-expiry-element');
cardCvc.mount('#card-cvc-element');

// 包括的なエラーハンドリング例
const handlePayment = async (event) => {
    event.preventDefault();
    setProcessing(true);
    setError(null);

    if (!stripe || !elements) {
        setError('決済システムの読み込み中です。しばらくお待ちください。');
        setProcessing(false);
        return;
    }

    try {
        const card = elements.getElement(CardElement);
        
        // カード情報の事前バリデーション
        const {error: cardError} = await stripe.createToken(card);
        
        if (cardError) {
            // カード情報のエラーをユーザーフレンドリーに変換
            const friendlyMessage = getFriendlyErrorMessage(cardError.code);
            setError(friendlyMessage);
            setProcessing(false);
            return;
        }

        // Payment Intent の作成（サーバー側で実装が必要）
        const {error: paymentError, paymentIntent} = await stripe.confirmCardPayment(
            clientSecret, // サーバーから取得
            {
                payment_method: {
                    card: card,
                    billing_details: {
                        name: customerName,
                        email: customerEmail,
                    },
                }
            }
        );

        if (paymentError) {
            setError(getFriendlyErrorMessage(paymentError.code));
        } else if (paymentIntent.status === 'succeeded') {
            // 決済成功
            console.log('Payment succeeded:', paymentIntent);
            // 成功ページにリダイレクトまたは成功メッセージ表示
        }
    } catch (error) {
        setError('予期しないエラーが発生しました。しばらく時間をおいて再度お試しください。');
        console.error('Payment error:', error);
    } finally {
        setProcessing(false);
    }
};

// エラーメッセージの日本語化
const getFriendlyErrorMessage = (errorCode) => {
    const errorMessages = {
        'card_declined': 'カードが承認されませんでした。別のカードをお試しください。',
        'expired_card': 'カードの有効期限が切れています。',
        'incorrect_cvc': 'セキュリティコード（CVC）が正しくありません。',
        'insufficient_funds': '残高不足です。',
        'invalid_number': 'カード番号が正しくありません。',
        'invalid_expiry_month': '有効期限の月が正しくありません。',
        'invalid_expiry_year': '有効期限の年が正しくありません。',
        'invalid_cvc': 'セキュリティコード（CVC）が正しくありません。',
        'processing_error': '決済処理中にエラーが発生しました。',
    };
    
    return errorMessages[errorCode] || 'エラーが発生しました。入力内容をご確認ください。';
};