SaaS スタートアップとしてサブスクリプションを販売する

Stripe を導入する前に、Stripe アカウントを作成する必要があります。

1. メールアドレス、氏名、国を入力し、パスワードを作成してアカウントを作成します。
2. ビジネスプロフィールを入力します。
3. ダッシュボードで、メールアドレスを確認する をクリックします。メールアドレスに確認メールが届きます。
4. メールアドレスを確認

ダッシュボードで商品を作成し、価格を設定します。

1. ダッシュボードでテスト商品を作成します

2. 商品と価格の詳細を入力します。

   • 名前: 「Plus」と入力します
   • 価格: 「8」と入力します
   • 通貨: USD を選択します

3. テスト製品の画像をアップロードします。

4. 継続 を選択します。

5. テスト商品を追加 をクリックします。

決済を受け付けるには、Stripe がオンラインで提供する決済 (構築済みの決済ページ) の導入を構築します。

はじめに

このステップを実行する際は、Stripe がホストする Checkout クイックスタートを参照してください。サンプルアプリをダウンロードするか、VS Code で開くことができます。

サーバーを設定する

サーバーは Stripe API と通信して決済プロセスを初期化しますが、実際の決済フォームは Stripe が安全にホストします。サーバーの設定はプログラミング言語によって異なりますが、通常は Stripe ライブラリのインストール、API キーの設定、Checkout Session の作成と決済後のプロセスの処理に必要なエンドポイントの実装が含まれます。

1. クイックスタート を開き、フロントエンドで React、バックエンドで Node を選択します。
2. Stripe Node ライブラリをインストールします。
3. Checkout セッションを作成します。Checkout セッションは、顧客の決済フローを定義する Stripe のサーバー側のオブジェクトです。エンドポイントパスは、Checkout ボタンの action 属性と一致している必要があります。
4. 販売する商品を定義します。ダッシュボードで先ほど作成したテスト商品 (「Plus」) を追加します。テスト商品を設定すると、価格 ID 値が生成されます。これは、Checkout Session の作成時にフロントエンドで渡す必要があります。
5. 決済モードを選択します。サブスクリプションで継続課金を開始するには、mode を subscription に設定します。
6. 成功 URL を指定します。顧客が支払いを完了またはキャンセルした後に、Stripe はこれらのページにリダイレクトします。これらのページをお客様のサイトでホストしてください。
7. 顧客を決済ページの URL にリダイレクトします。これは、Checkout Session のレスポンスで返される URL です。

決済ページを作成する

これは、顧客が決済を完了する前に注文のサマリーを表示するサイト上のページです。顧客は必要に応じて選択内容をレビューおよび変更できます。

1. 注文のプレビューページを追加する
2. 決済ボタンを追加します。このボタンは、顧客が注文プレビューページでクリックすると、Stripe がホストする決済ページにリダイレクトされます。

決済ページのテスト

1. “proxy”: "<http://localhost:4242>” をローカル開発中に package.json ファイルに追加します。
2. npm start を実行し、[http://localhost:3000/checkout](http://localhost:3000/checkout に移動します)。
3. 決済ページで、テストカード 4242424242424242 を入力して、顧客としてテスト決済を送信します。
4. (任意) Link アカウントに登録するには、以降速やかに購入できるように情報を保存する を選択します。決済手段として Link をテストし、リピート顧客の決済フローを確認できます。

決済手段、トライアル期間の追加、カスタマーポータルの設定方法をご紹介します。

決済ページのカスタマイズ

カスタムブランディングを決済に適用できます。ダッシュボードでブランディング設定に移動して、以下を行います。

• ロゴまたはアイコンをアップロードする
• ページの背景色、ボタンの色、フォント、形状をカスタマイズする

決済手段を追加する

ダッシュボードの決済手段ページで、顧客から受け付ける決済手段を有効にします。Checkout は複数の決済手段をサポートし、動的な決済手段も使用できます

つまり、Stripe は、各顧客に最も関連性の高い決済手段を動的に表示してコンバージョンを最大化するロジックを処理します。Stripe は、顧客の店舗や、その決済手段が サブスクリプションをサポートしているかどうかなどの要因に基づいて、顧客が使用できる決済手段のみを表示します。

トライアル期間を追加

Checkout Session を設定して、次のいずれかのパラメーターを渡して、顧客のサブスクリプションに無料トライアルを追加します。

• subscription_data.trial_period_days: 無料トライアルの期間 (日数)
• subscription_data.trial_end: トライアル期間の終了を表す Unix タイムスタンプです。

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d mode=subscription \
  --data-urlencode success_url="https://example.com/success" \
  -d "line_items[0][price]"=
"{{PRICE_ID}}" \
  -d "line_items[0][quantity]"=1 \
  -d "subscription_data[trial_period_days]"=30

カスタマーポータルを追加する

顧客はカスタマーポータルで既存のサブスクリプションと請求書を管理します。ダッシュボードを使用してポータルを作成してください。少なくとも、顧客が決済手段を更新できるように設定してください。

Stripe がホストする決済導入のサブスクリプションを監視するには、サブスクリプションのライフサイクル全体を通じて発生する特定の Webhook イベントをリッスンするようにエンドポイントを設定します。

Webhook エンドポイントを設定

1. サーバーで Webhook エンドポイントを作成して、Stripe からイベント通知を受信します。

2. ダッシュボードの Webhook 設定でこのエンドポイントを登録します。

3. Webhook シークレットを使用して、セキュリティのために Webhook 署名検証を実装します。STRIPE_WEBHOOK_SECRET キーが不明な場合は、ワークベンチの Webhooks のデスティネーション詳細ビューに移動して確認してください。

4. ワークベンチで、必要なイベントを選択します。

5. ダッシュボードでエンドポイントの名前、URL、説明を入力します。

6. 少なくとも次のイベントを監視します (詳細は、サブスクリプション Webhook を参照してください)。

   イベント名	詳細	対応内容
   checkout.session.completed	顧客が決済セッションを正常に完了したときに送信され、新しい購入についてお知らせします。	エンタイトルメントを使用してサブスクリプションをプロビジョニングします。
   invoice.paid	決済が成功すると請求期間ごとに送信されます。	月次の請求では、invoice.paid イベントを受信するたびに毎月サブスクリプションをプロビジョニングします。イベントタイプを調べ、各イベントオブジェクトのペイロードを解析します。確認のために、subscription.id とcustomer.id のイベントオブジェクトをデータベースに保存します。
   invoice.payment_failed	請求期間ごとに、顧客の決済手段に問題がある場合に送信されます。	顧客に通知し、カスタマーポータルに誘導して決済手段を更新してもらいます。

請求サイクルの設定

サブスクリプションの請求サイクルアンカーは、Checkout Session 作成時に明示的に固定日 (翌月 1 日など) に設定できます。請求書サイクルアンカーは、顧客にサブスクリプションの全額が請求される最初の請求書日を決定します。たとえば、5 月 15 日に作成された月次サブスクリプションで、6 月 1 日のアンカーが設定されている場合、最初に請求されるのは 5 月 15 日で、その後は常に毎月 1 日に請求されます。

請求書サイクルのアンカーを設定するには、subscription モードで Checkout Session を作成するときに subscription_data.billing_cycle_anchor パラメーターを設定します。このアンカーは、次回の定期決済の請求日より前の将来の UNIX タイムスタンプである必要があります。

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"=
"{{PRICE_ID}}" \
  -d "line_items[0][quantity]"=1 \
  -d mode=subscription \
  --data-urlencode success_url="https://example.com/success?session_id={CHECKOUT_SESSION_ID}" \
  -d "subscription_data[billing_cycle_anchor]"=1611008505

請求サイクルアンカーがセッションの有効な期間内であり、顧客がその期間を過ぎてから支払おうとした場合、Checkout は、請求サイクルアンカーまでの比例配分が適用された期間ではなく、請求サイクルアンカーから始まる期間全体を表示して請求します。

詳細は、請求サイクルの日付の設定を参照してください。

1. ダッシュボードで、アカウント設定を開きます。
2. 事業形態、税務情報、ビジネス情報、個人確認情報、顧客向け情報 (明細書表記など) を入力します。
3. 銀行口座の詳細を追加して、資金の入金先を確認します。
4. アカウントを保護するための二段階認証を設定します。
5. オプションで、税金の自動回収や収入ベースの気候変動対策への寄付を追加できます。
6. 入力した情報をレビューし、同意して送信する をクリックします。
7. プロファイルを有効にすると、Stripe はサンドボックス環境から本番環境に更新します。

Stripe アカウントの本番環境利用の申請についてリンクからご覧ください。