Stripeでサブスクリプションを実装する方法

先日Stripeでサブスクリプションを実装する機会がありました。 今回はStripeのサブスクリプションを実装した時に調べたことをまとめようと思います。

技術スタック

• Next.js(フロントエンド)
• Express.js(バックエンド)

要件

要件は以下のものでした。

1. サブスクリプションとは別に初期費用が発生する
2. サブスクリプション、初期費用の引き落としは翌月の1日に行う

費用の引きおとすタイミングが翌日の1日にしたいという要件があったため、Stripe CheckoutというStripeが作った支払いフォームを使うことができませんでした。 そのため、Stripeの決済フォームはStripe Elementsを使用しました。

大まかな流れ

1. 顧客セッションを作成
2. Stripe Elementsを使ってクレジットカード情報を入力するフォームを作成
3. クレジットカード情報を入力したら、初期費用を支払う

実装

必要なライブラリのインストール

フロントエンド

バックエンド

顧客セッションの作成

Stripeでは、Stripeの処理をする前に顧客セッションを作成する必要があります。 顧客セッションを作成することで、Stripeのライフサイクルを管理することができます。

顧客セッションを作成する方法は2つあります。

1. PaymentIntents PaymentIntentsは、支払いのためのセッションを作成するAPIです。
2. SetupIntents SetupIntentsは、支払い方法を追加するためのセッションを作成するAPIです。

今回は支払いフォームを入力したらそのまま支払いをするということではなく、支払いフォームを入力したら初期費用と、サブスクリプションを作成するという流れにしたかったため、SetupIntentsを使用しました。

Stripe Elementsをフロントエンドに表示

Stripe Elementsを使って、クレジットカード情報を入力するフォームを作成します。 Stripe Elementsを使うことで、クレジットカード情報を入力するフォームを簡単に作成することができます。

初期費用、サブスクリプションを作成するエンドポイントを作成

フォームを入力したら、初期費用、サブスクリプションを作成するエンドポイントを作成します。

初期費用は、以下のように請求書作成のAPIを使って作成します。

• auto_advance: trueにすることで、automatically_finalizes_atで指定した日になると自動的に請求書を確定することができます。 デフォルトだとfalseで、請求書を自動で確定することができないため、注意が必要です。
• collection_method: charge_automaticallyとすることで、請求日に請求書を自動で支払うことができます。 ただ、自動で支払うためにはAユーザーのデフォルトのクレジットカード情報を登録しておく必要があります。

サブスクリプションは、以下のようにサブスクリプションを作成するAPIを使って作成します。

• billing_cycle_anchor: サブスクリプションの開始日を指定することができます。
• proration_behavior: サブスクリプションの料金を更新した時に、差額をどうするかを指定することができます。 今回はnoneにすると、差額を請求しません。

作成したAPIをフロントエンドから呼び出す

これでStripeを使って初期費用、サブスクリプションを実装することができました。