Next.jsとStripeで定期課金を実装する
Next.jsで構築中のフロントエンドアプリケーションに定期課金を実装したかった。読んですぐ実装できるように実装方法をメモする。
定期課金の実装にはStripeを使用する。
※以下では、Next.jsを使った開発環境での実装について記述する。StripeのAPIにシークレットキーを使うため、本番環境ではAPIを叩く処理をサーバーサイド側に実装する必要がある。
Stripe側の設定
まずはStripeのアカウントを作成する。作成したらダッシュボードに移動する。「本番環境」と「テスト環境」があり、アカウント作成直後は「テスト環境」のダッシュボードが開く。テスト環境は実際の支払いは行われず、練習に使用できる。
認証情報をメモする
テスト環境のダッシュボードに移動したら、以下の情報をメモする。以下は後ほど環境変数に設定する。
- 公開可能キー
- シークレットキー
顧客を作成する
支払いをする「顧客」の情報を作成する。今回はテストのためダッシュボードから作成する。
※プロダクトに実装する際には、ユーザーの作成のタイミングでStripe上の顧客をスクリプトから作成できる。
ダッシュボードで「顧客」タブを開き「+顧客を追加」をクリックする。
以下のようなフォームが表示される。
「テストユーザー」などの名前で顧客を追加する。
商品を作成する
次に「商品」を作成する。これが定期課金のプランになる。
ダッシュボードで「商品」タブを開き「+商品を追加」をクリックする。
以下のような画面に遷移する。
以下のように設定する（記載がないものは初期設定のままで問題ない）。
- 「名前」を「テストプラン」
- 「料金」を「標準の料金体系」
- 「継続」を選択（これで定期課金になる）
- 「価格」を任意の価格に設定する（1000円とした）
- 「請求期間」を「月次」で選択
上記を設定したあと「商品を保存」をクリックする。
商品を保存すると以下のように商品の詳細画面が表示される。
画面の下の方にある「料金」セクションの「API ID」をコピーする。
この「API ID（Price ID）」と先述の「シークレットキー」があれば、定期課金を実装できる。
Next.js側の実装
次にNext.js側を実装する。
設定値を変えるだけで、ロジックはほとんど変更せずに同じ手順で使えるようになる。
Stripe.js ES Moduleをインストールする
Stripe.js ES Moduleをインストールする。
npm install --save stripe @stripe/stripe-js
pages/api以下にcheckout.jsを作成する
以下は、本番環境ではクライアント側ではなく、APIサーバーへの実装になる。作成済みのNext.jsプロジェクトで/pages/apiディレクトリ以下にcheckout.js(またはcheckout.ts)を作成する。
- nextjs_app
- pages
- api
- checkout.js // <-追加
_app.js
index.js
checkout.jsには以下を記述する。line_itemsのpriceプロパティに先ほど取得した「API ID」を設定する。実プロダクトではベタ書きにせず定数におくと良い。
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
export default async function handler(req, res) {
if (req.method === 'POST') {
try {
const session = await stripe.checkout.sessions.create({
line_items: [
{
price: "[ここにAPI ID（PriceID）を入力]",
quantity: 1,
},
],
mode: 'subscription',
success_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
res.redirect(303, session.url);
} catch (err) {
res.status(500).json(err.message);
}
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Method Not Allowed');
}
}
環境変数を設定する
env.local等のファイルを作成し環境変数を設定する。Next.jsのローカルサーバー環境変数については日本語ドキュメントを参考にするか、表にまとまっている記事を参考にすると良い。
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="公開可能キー"
STRIPE_SECRET_KEY="シークレットキー"
環境変数を更新するためNext.jsのローカルサーバーを再起動する。
index.jsに支払画面への導線を追加
index.jsに支払画面に遷移するボタンを作成する。同様のことができればどんな形でも問題ない。
<form action="/api/checkout" method="POST">
<section>
<button type="submit" role="link">
支払画面へ
</button>
</section>
</form>
作成したSubmitボタンをトップページでクリックする。
上手くできていれば、以下のように支払画面が表示され、テスト環境での支払いができるようになる。
支払いを試す
テスト用のカード番号として「4242 4242 4242 4242」が使える。
「MM/YY」と「CVC」は形式があっていれば何でも申込みができる。
参考
Discussion