Node.jsとStripeでサブスク決済を作る方法

TL;DR

Expressで申込フォームのPOST先を作り、Stripe APIで価格一覧とCheckout Sessionを生成して、そのURLへ303リダイレクトすればサブスク決済を導入できる。Stripeの商品は継続課金として登録し、テスト環境で決済情報、成功先、キャンセル先を確認する。

Transcript

はい今回はですね道土 js と ストライプというものを連携して決済 システムを作ってみようという動画になり ます掲載システムというのは要はあなたの ですね web アプリケーションとか ウェブサイトこれから構築してその中に 商品だったりとかサブスクリプション システムですね月額で例えばブログ見放題 とか月額払うことによって例えば動画見 放題みたいなそういう掲載システム構築 する時って多分あると思うんですよねそう いうときにどういう掲載システムの api を使っていけばいいのかというとこちら ストライプと呼ばれているサービスこちら の api を使うことによってその県債 システムを簡単に構築することができます なのでこれからですねその掲載しても商品 を販売したりとかサブスクシステムを導入 した... Read More

Key Insights

• Node.js側の役割は、申込フォームからPOSTリクエストを受け、Stripe APIでCheckout Sessionを作成し、決済ページへ利用者を転送することである。
• Stripe Checkoutは、カード情報などを入力する決済画面の既定フォーマットを提供するため、動画の例では決済画面のHTMLやCSSを独自に作成していない。
• 申込フォームは、actionにCheckout Session作成用エンドポイントを指定し、methodをPOST、ボタンをsubmitにすることでサーバー処理を呼び出す。
• Stripeの商品設定は、一括を選ぶと単品販売、継続を選ぶとサブスクリプションになり、動画の例では月額2000円の商品をテスト環境で作成する。
• 秘密鍵はStripe APIとの連携に必要であり、サーバー側でStripeライブラリを初期化するために使う。講師は誰にも見られない形で扱うよう注意している。
• Checkout Sessionのline_itemsには価格IDと数量を設定し、modeにはsubscriptionを指定することで、対象商品をサブスクリプションとして処理する。
• 成功URLとキャンセルURLはCheckout Session作成時に指定し、成功URLにはCheckout Session IDを付加して、決済後の遷移先へ渡す構成にしている。
• テスト時のエラーは設定不足から発生し、例ではローカルURLの形式を修正し、Stripe側にビジネス名を追加した後、Checkout画面へ正常に遷移している。
• 🎬 このチャンネルの他の動画:
  • Next.jsでストリーミングとPPRを実装する方法
  • 個人開発に役立つClaude Codeスキル5選
  • Gemini 3 Proで高品質なWebサイトを作る方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Node.jsとStripeでサブスク決済を作る方法は？

Expressで申込フォームのPOST先を用意し、Stripe APIから価格情報を取得してCheckout Sessionを作成します。Sessionには価格ID、数量1、subscriptionモード、成功URL、キャンセルURLを設定し、生成されたSessionのURLへ303リダイレクトすれば、Stripeの決済画面へ移動できます。

Q: Stripeのサブスクリプション商品を登録する方法は？

Stripe管理画面のテスト環境で商品を追加し、商品名、説明、価格を入力して、価格設定を一括ではなく継続にします。動画の例では「プログラミングチュートリアルプラン」を月額2000円に設定しています。保存後に作られる価格情報は、Checkout Sessionのline_itemsで利用します。

Q: Stripe Checkoutの申込フォームを作る方法は？

HTMLのform要素に、Checkout Sessionを作成するサーバー側エンドポイントをactionとして指定し、methodをPOSTにします。申込ボタンにはsubmit属性を付けます。クリックするとNode.jsサーバーへPOSTリクエストが送られ、Stripe Checkoutを開始する処理が実行されます。

Q: Stripe Checkout Sessionとは何ですか？

Checkout Sessionは、顧客が何を購入するのか、数量はいくつか、サブスクリプションとして処理するのか、成功後やキャンセル後にどこへ移動するのかといった決済状態をまとめるものです。動画ではstripe.checkout.sessions.createを使って作成しています。

Q: Checkout Sessionに必要な設定項目は何ですか？

動画の実装では、line_itemsに対象商品の価格IDと数量1を設定し、modeにsubscriptionを指定します。さらにsuccess_urlとcancel_urlを設定し、成功時にはsuccess.htmlへ移動させます。成功URLにはCHECKOUT_SESSION_IDを付加する構成も示されています。

Q: Stripeの価格IDをNode.jsで取得する方法は？

Stripeライブラリを秘密鍵で初期化し、非同期処理としてstripe.prices.listを呼び出します。返された価格一覧のdata配列から、動画では0番目の要素のidを取得し、Checkout Sessionのline_itemsにあるpriceへ渡しています。API処理はasync、awaitとtry-catchで記述しています。

Q: Stripe CheckoutでURLエラーが出るのはなぜですか？

動画の例では、ローカル環境のドメイン指定が正しいURL形式になっていなかったため、無効なURLとしてエラーになりました。ドメインをhttp://localhost:3000の形式に修正し、その値をsuccess_urlとcancel_urlの基礎として使うことで、次の処理へ進めています。

Q: Stripe Checkoutでビジネス名エラーを直す方法は？

Stripeの画面で新規ビジネスを選び、企業名を追加してビジネスアカウントを設定します。動画ではCheckoutを使うためにビジネス名が必要というエラーが表示され、名前を登録した後に申込ボタンを再度押すと、Stripeが用意した決済画面へ正常に移動しました。

Summary & Key Takeaways

• 最初にNode.jsプロジェクトを初期化し、Express、nodemon、Stripeを導入する。Expressの静的ファイル配信でpublic内のindex.htmlとCSSを表示し、申込ボタンを含むformのactionをCheckout Session作成用エンドポイント、methodをPOSTに設定する。

• Stripeのテスト環境でアカウントとビジネス名を設定し、商品名、説明、価格、課金方式を登録する。サブスクでは一括ではなく継続を選び、月額などの周期を指定する。取得した秘密鍵はStripeライブラリの初期化に使い、他人に見られないよう扱う。

• サーバーのPOST処理ではasync関数とtry-catchを使い、価格一覧から対象価格IDを取得する。Checkout Sessionにはline_items、数量1、subscriptionモード、成功URL、キャンセルURLを渡し、生成されたURLへ303で転送する。テスト決済後は成功ページへ遷移する。