Stripe
決済システムを自分で一から設計し、セキュリティも保証するのは大変な作業です。そのため、多くの開発者は Stripe のような決済プラットフォームを利用します。Stripe は使いやすさと堅牢なセキュリティで知られ、多くのビジネスが信頼して利用しています。
今回は、Stripe を用いて、Next.js と TypeScript で決済処理を実装する方法について解説します。まずは、Stripe と Next.js の環境設定から始めます。
Stripe と Next.js の環境設定
まずは、Stripe と Next.js の環境設定から始めましょう。まずは Stripe の公式サイトでアカウントを作成し、API キーを取得します。API キーは.env ファイルに保存します。
STRIPE_SECRET_KEY = your_stripe_secret_key
その後、Stripe Node ライブラリをプロジェクトに追加します。
npm install stripe
Stripe チェックアウトの実装
次に、Stripe のチェックアウト機能を実装していきます。まず、決済処理を行う Checkout コンポーネントを作成します。このコンポーネントでは、ユーザーが商品を選択し、購入ボタンを押すと Stripe のチェックアウトページにリダイレクトされる処理を実装します。
import { loadStripe } from '@stripe/stripe-js'
import { Button } from '@material-ui/core'
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)
type Props = {
priceId: string
}
const Checkout = ({ priceId }: Props) => {
const handleClick = async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
event.preventDefault()
const stripe = await stripePromise
const { error } = await stripe!.redirectToCheckout({
lineItems: [{ price: priceId, quantity: 1 }],
mode: 'payment',
successUrl: `${window.location.origin}/success?session_id={CHECKOUT_SESSION_ID}`,
cancelUrl: `${window.location.origin}/cancel`,
})
if (error) {
console.warn('Error:', error)
}
}
return (
<div>
<Button onClick={handleClick} variant="contained" color="primary">
購入する
</Button>
</div>
)
}
export default Checkout
このコードでは、Stripe の JavaScript ライブラリを用いて、ユーザーが購入ボタンを押した際に Stripe のチェックアウトページにリダイレクトします。また、リダイレクト先の URL には、成功時とキャンセル時に戻る URL も指定します。
サーバーサイドの処理
フロントエンドの準備が整ったら、次はサーバーサイドの処理を設定します。ここでは、Next.js の API ルートを使用して、Stripe のチェックアウトセッションを作成するエンドポイントを作ります。
import { NextApiRequest, NextApiResponse } from 'next'
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2020-08-27',
})
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'POST') {
try {
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
{
price: req.body.priceId,
quantity: 1,
},
],
mode: 'payment',
success_url: `${req.headers.origin}/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${req.headers.origin}/cancel`,
})
res.status(200).json({ sessionId: session.id })
} catch (err) {
res.status(500).json({ statusCode: 500, message: err.message })
}
} else {
res.setHeader('Allow', 'POST')
res.status(405).end('Method Not Allowed')
}
}
このエンドポイントでは、POST リクエストが送られると、Stripe のチェックアウトセッションを作成し、その ID をレスポンスとして返します。それ以外の HTTP メソッドが送られた場合は、405 エラーを返します。
まとめ
以上が Stripe を用いた Next.js と TypeScript での決済処理の実装方法です。Stripe を使うことで、安全性と利便性を両立した決済システムを短時間で実装することが可能です。