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

SaaS スタートアップとして事前構築済みのサブスクリプションの導入を開始します。

このガイドは、[定額料金体系モデル](https://docs.stripe.com/products-prices/pricing-models.md#flat-rate)を使用して継続課金 (サブスクリプション) を受け付けたい SaaS スタートアップ向けです。つまり、一定期間の初めに、商品またはサービスに対して毎月定額の決済が発生します。

決済フローは、Stripe がオンラインで提供するページに顧客をリダイレクトして支払い詳細を入力させてからお客様のサイトに戻します。[Checkout](https://docs.stripe.com/payments/checkout.md) を使用して、Stripe がオンラインで提供するページを作成します。このページで [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) が呼び出されます。

## Stripe アカウントを作成する

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

1. メールアドレス、氏名、国を入力し、パスワードを作成して[アカウントを作成](https://dashboard.stripe.com/register)します。
1. ビジネスプロフィールを入力します。
1. ダッシュボードで**メールアドレスを確認**をクリックします。Stripe から、アカウントに登録されているメールアドレス宛に確認メールが送信されます。
1. メールアドレスを確認

## テスト商品と価格を作成する

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

1. [ダッシュボードでテスト商品を作成します](https://dashboard.stripe.com/test/products/create)

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

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

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

1. **継続** を選択します。

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

## サブスクリプションの決済を受け付ける

決済を受け付けるには、[Stripe がオンライン](https://docs.stripe.com/payments/checkout.md)で提供する決済 (構築済みの決済ページ) の導入を構築します。

### はじめに

このステップを実行する際は、Stripe がホストする Checkout [クイックスタート](https://docs.stripe.com/checkout/quickstart.md)を参照してください。サンプルアプリをダウンロードするか、VS Code で開くことができます。

### サーバーを設定する

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

1. [クイックスタート](https://docs.stripe.com/checkout/quickstart.md) を開き、フロントエンドで **React**、バックエンドで **Node** を選択します。
1. [Stripe Node ライブラリをインストール](https://docs.stripe.com/checkout/quickstart.md#init-stripe)します。
1. [Checkout Session を作成](https://docs.stripe.com/checkout/quickstart.md#create)できます。[Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) は、顧客の決済フローを定義する Stripe のサーバー側オブジェクトです。エンドポイントパスは、[決済ボタン](https://docs.stripe.com/get-started/use-cases/saas-subscriptions.md#create-your-checkout-page)の `action` 属性と一致している必要があります。
1. [販売する商品を定義します](https://docs.stripe.com/checkout/quickstart.md#line-items)。ダッシュボードで先ほど作成したテスト商品 (「Plus」) を追加します。テスト商品を設定すると、価格 ID 値が生成されます。これは、`Checkout Session` の作成時にフロントエンドで渡す必要があります。
1. [決済モードを選択](https://docs.stripe.com/checkout/quickstart.md#mode)します。サブスクリプションで継続課金を開始するには、`mode` を `subscription` に設定します。
1. [成功 URL を指定](https://docs.stripe.com/checkout/quickstart.md#urls)します。顧客が支払いを完了またはキャンセルした後に、Stripe はこれらのページにリダイレクトします。これらのページをお客様のサイトでホストしてください。
1. [顧客を決済ページの URL にリダイレクトします](https://docs.stripe.com/checkout/quickstart.md#redirect)。これは、`Checkout Session` のレスポンスで返される [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) です。

### 決済ページを作成する

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

1. [注文のプレビューページを追加する](https://docs.stripe.com/checkout/quickstart.md#preview-page)
1. [決済ボタンを追加](https://docs.stripe.com/checkout/quickstart.md#add-button)します。このボタンは、顧客が注文プレビューページでクリックすると、Stripe がホストする決済ページにリダイレクトされます。

### 決済ページのテスト

1. `“proxy”: "<http://localhost:4242>”` をローカル開発中に `package.json` ファイルに追加します。
1. `npm start` を実行し、[http://localhost:3000/checkout](http://localhost:3000/checkout に移動します)。
1. 決済ページで、テストカード `4242424242424242` を入力して、顧客としてテスト決済を送信します。
1. (任意)[Link](https://docs.stripe.com/payments/link.md) アカウントに登録するには、**情報を保存して次回以降の決済をスピードアップ** を選択します。決済手段として Link をテストし、リピーター顧客向けの決済フローを確認できます。

## その他の推奨構成

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

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

カスタムブランディングを決済に適用できます。ダッシュボードで[ブランディング設定](https://dashboard.stripe.com/settings/branding/checkout)に移動して、以下を行います。

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

### 決済手段を追加する

ダッシュボードの[支払い方法](https://dashboard.stripe.com/settings/payment_methods)ページで、顧客から受け付けたい支払い方法を有効にします。チェックアウトは複数の支払い方法をサポートしており、[いくつかの支払い方法](https://docs.stripe.com/payments/payment-methods/payment-method-support.md#product-support)に加えて、[動的な支払い方法](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)もサポートしています。

つまり、Stripe は、各顧客にとって最も関連性が高く、利用可能（eligible）な支払い方法を動的に表示し、コンバージョンを最大化するためのロジックを処理します。Stripe は、顧客の[所在地](https://docs.stripe.com/payments/payment-methods/payment-method-support.md#country-currency-support)や、その支払い方法が[サブスクリプションをサポートする](https://docs.stripe.com/payments/payment-methods/payment-method-support.md#product-support)などの要因に基づいて、顧客が使用できる支払い方法のみを表示します。

### トライアル期間を追加

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

- [subscription_data.trial_period_days](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-subscription_data-trial_period_days): 無料トライアルの期間 (日数)
- [subscription_data.trial_end](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-subscription_data-trial_end): トライアル期間の終了を表す Unix タイムスタンプです。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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"
```

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

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

## サブスクリプションを監視する

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

### Webhook エンドポイントを設定

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

1. ダッシュボードの [Webhook 設定](https://dashboard.stripe.com/webhooks)でこのエンドポイントを登録します。

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

1. [ワークベンチ](https://dashboard.stripe.com/workbench/webhooks)で、必要なイベントを選択します。

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

1. 少なくとも次のイベントを監視します (詳細は、[サブスクリプション Webhook](https://docs.stripe.com/billing/subscriptions/webhooks.md) を参照してください)。

| イベント名                        | 詳細                                          | 対応内容                                                                                                                                                            |
| ---------------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `checkout.session.completed` | 顧客が決済セッションを正常に完了したときに送信され、新しい購入についてお知らせします。 | [エンタイトルメント](https://docs.stripe.com/billing/entitlements.md)を使用してサブスクリプションをプロビジョニングします。                                                                         |
| `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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-subscription_data-billing_cycle_anchor) パラメーターを設定します。このアンカーは、次回の定期決済の請求日より前の将来の UNIX タイムスタンプである必要があります。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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 は、請求サイクルアンカーまでの比例配分が適用された期間ではなく、請求サイクルアンカーから始まる期間全体を表示して請求します。

詳細は、[請求サイクルの日付の設定](https://docs.stripe.com/payments/checkout/billing-cycle.md)を参照してください。

## 本番環境へ移行

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

Learn more about [setting up your Stripe account](https://docs.stripe.com/get-started/account/set-up.md).

## 次のステップ

導入を設定したら、次の機能を実装することを推奨します。

- `Checkout Session` でサブスクリプションに課される[税金の自動徴収を有効にします。](https://docs.stripe.com/tax/checkout.md)
- [決済をキャンセルまたは返金](https://docs.stripe.com/refunds.md)します。決済は、完了前にキャンセルすることも、成功した後に決済の全部または一部を返金することもできます。
- [入金を受け取るための銀行口座を設定](https://docs.stripe.com/payouts.md)します。
- [適応型価格設定を有効](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md)にします。これにより、Stripe は 150 カ国以上で顧客が現地通貨で支払うことができるようにします。