はじめに

今回、watnowアドベントカレンダー8日目を担当させていただきます。
この記事では、StripeのAPIを用いたシンプルな決済処理を実装していきます。

使用するツールや言語

Next.js
MUI
Stripe

実装するもの

名前、値段選択ができるフォームからStripeを用いて決済処理を行う。

フォルダ構造

.
├── pages/
│   ├── api/
│   │   └── create-payment-intent.ts
│   ├── settlement.tsx
│   └── checkoutForm.tsx
└── .env.local

実装

Stripeのセットアップ

新規登録

Stripeのアカウントを作成します。
リンクはこちら

keyの取得

アカウント設定が終わると、新しいビジネスとして下のような管理者ページに遷移すると思います。今回はこのテスト環境で実装していきます。

上記の画像の右にある公開可能キー、シークレットキーをコピーしてenvファイルに保存しておいてください。

.env.local

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY= "pk_test_***************************************"
STRIPE_SECRET_KEY="sk_test_*********************************************"

API

Stripeのインストール

npm install stripe

create-payment-intent.ts

create-payment-intent.ts

import { NextApiRequest, NextApiResponse } from 'next';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", { apiVersion: '2024-11-20.acacia' });

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method !== 'POST') {
        return res.status(405).json({ error: 'Method not allowed' });
    }

    const { amount } = req.body;
    if (!amount) {
        return res.status(400).json({ error: 'Amount is required' });
    }

    try {
        const paymentIntent = await stripe.paymentIntents.create({
            amount: parseInt(amount, 10),
            currency: 'jpy',
        });

        res.status(200).json({ clientSecret: paymentIntent.client_secret });
    } catch (error) {
        res.status(500).json({ error: (error as Error).message });
    }
}

17行目のpaymentIntentではamount、currencyの値は必ず指定する必要があります。詳しくはこちらを参照してください。

フロントエンド

Stripeのインストール

npm install @stripe/react-stripe-js @stripe/stripe-js

MUIのインストール

npm install @mui/material @emotion/react @emotion/styled

settlement.tsx

settlement.tsx

import React, { useEffect, useState } from 'react';
import { Elements } from '@stripe/react-stripe-js';
import { CheckoutForm } from './checkoutForm';
import { loadStripe, StripeElementsOptions } from '@stripe/stripe-js';
import { Box, TextField, MenuItem, Select, FormControl, InputLabel } from '@mui/material';

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "");

export default function Settlement() {
    const [clientSecret, setClientSecret] = useState<string>("");
    const [amount, setAmount] = useState<string>("");
    const [name, setName] = useState<string>("");

    useEffect(() => {
        const createPaymentIntent = async () => {
            if (!amount) return;
            const response = await fetch('/api/create-payment-intent', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ amount }),
            });
            const data = await response.json();
            setClientSecret(data.clientSecret);
        };
        createPaymentIntent();
    }, [amount]);

    const options: StripeElementsOptions = {
        appearance: { theme: 'stripe' },
        clientSecret,
    };

    return (
        <Box sx={{ p: 3, backgroundColor: '#0A2540', color: 'white', minHeight: '100vh' }}>
            <TextField
                fullWidth
                label="名前"
                value={name}
                onChange={(e) => setName(e.target.value)}
                sx={{ mb: 3 }}
                InputLabelProps={{ sx: { color: 'white' } }}
                InputProps={{ sx: { color: 'white' } }}
            />
            <FormControl fullWidth sx={{ mb: 3 }}>
                <InputLabel id="amount-label" sx={{ color: 'white' }}>値段</InputLabel>
                <Select
                    labelId="amount-label"
                    value={amount}
                    onChange={(e) => setAmount(e.target.value as string)}
                    displayEmpty
                    sx={{ backgroundColor: '#212D63', color: 'white', '.MuiSelect-icon': { color: 'white' } }}
                >
                    <MenuItem value=""></MenuItem>
                    <MenuItem value="5000">5,000円</MenuItem>
                    <MenuItem value="10000">10,000円</MenuItem>
                    <MenuItem value="30000">30,000円</MenuItem>
                </Select>
            </FormControl>

            {clientSecret && (
                <Elements stripe={stripePromise} options={options}>
                    <CheckoutForm name={name} amount={Number(amount)} clientSecret={clientSecret} />
                </Elements>
            )}
        </Box>
    );
}

loadStripe : Stripeオブジェクトを非同期で読込み、初期化する関数です。公開可能キーを渡すことに注意してください。
StripeElementsOptions : カード情報を入力するフォームのカスタマイズを行うことができます。

checkoutForm.tsx

checkoutForm.tsx

import React, { useState } from 'react';
import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
import { Box, Button } from '@mui/material';

interface CheckoutFormProps {
    name: string;
    amount: number;
    clientSecret: string;
}

export const CheckoutForm: React.FC<CheckoutFormProps> = ({ name, amount, clientSecret }) => {
    const stripe = useStripe();
    const elements = useElements();
    const [loading, setLoading] = useState(false);

    const handleSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
        if (!stripe || !elements || !clientSecret) {
            console.error('Stripe, Elements, or clientSecret is not available.');
            return;
        }

        const cardElement = elements.getElement(CardElement);
        if (!cardElement) return;

        setLoading(true);
        
        const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
            payment_method: {
                card: cardElement,
                billing_details: { name },
            },
        });

        setLoading(false);

        if (error) {
            console.error('Error:', error);
            alert('支払いに失敗しました');
        } else if (paymentIntent?.status === 'succeeded') {
            alert('支払いが成功しました');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <Box sx={{ mb: 3, p: 2, backgroundColor: '#212D63', borderRadius: '8px' }}>
                <CardElement options={{ style: { base: { color: 'white' } } }} />
            </Box>
            <Button 
                type="submit" 
                variant="contained" 
                color="primary" 
                fullWidth 
                disabled={!stripe || loading}
            >
                {loading ? '処理中...' : `支払う (${amount}円)`}
            </Button>
        </form>
    );
};

useStripe : 支払いのリクエストの送信に使います。
useElements : 入力したカード情報の取得に使います。
CardElement : カード情報入力フォームを作成します。

実行結果

上記のように名前、値段、カード情報を入力することができます。
ダミーカードに関してはこちらを参照して下さい。

stripeの管理者ページの取引の欄を見ると先ほどの決済情報が反映されていることが分かります。

参考資料

まとめ

最後まで読んでいただきありがとうございました。
少しでも参考になれば幸いです。
また、今回の実装では決済作成のAPIしか用いなかったので値段を変えた際に前の決済処理が未完了となり新しく決済が作成されてしまいます。

興味を持った方はupdateの部分の実装に挑戦してみてください！