Stripeで、クレジットカード情報の入力なしにサブスクリプションのトライアルを開始する

新しいサービスを試すとき、ユーザーは無料でテストしたいと考えます。

また、無料であっても、カード情報の入力が必要な場合、カード情報の入力画面で顧客が離脱するケースも存在します。

Stripeでサブスクリプションのトライアルを開始する場合、Checkoutセッション作成時の引数を２つ変更するだけで、カード情報の入力をスキップできます。

## Checkoutでサブスクリプションのトライアルを設定する

Stripe Checkoutでトライアル付きのサブスクリプションを開始する場合、`subscription_data`にトライアルの設定を追加します。

```diff_javascript
    const session = await stripe.checkout.sessions.create({
      line_items: [{
        price: 'price_xxxxx',
        quantity: 1
      }],
      mode: 'subscription',
      success_url: 'https://example.com',
      cancel_url: 'https://example.com',
+      subscription_data: {
+        trial_period_days: 30
+      },
    })
```

`trial_period_days`の数字が、トライアルの日数です。
設定が完了すると、以下のように「30日間無料」や「トライアル後の合計額」などが表示されます。

![スクリーンショット 2022-09-07 12.37.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/642b9b7a-5c64-31a0-acb4-7cfba8ef5f7c.png)

ただし顧客は、トライアルを開始する時点でカード情報を入力する必要があります。

## Checkoutのトライアルで、カード情報の入力を省略する

トライアル開始時点ではカード情報の入力をさせたくない場合、`payment_method_collection`を追加しましょう。

```diff_javascript
    const session = await stripe.checkout.sessions.create({
      line_items: [{
        price: 'price_xxxxx',
        quantity: 1
      }],
      mode: 'subscription',
      success_url: 'https://example.com',
      cancel_url: 'https://example.com',
      subscription_data: {
        trial_period_days: 30
      },
+      payment_method_collection: 'if_required',
    })
```

この設定を追加することで、カード情報の入力フォームを非表示にできます。

![スクリーンショット 2022-09-07 12.40.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/397e3682-725e-871f-74f7-8a8ae5f000ee.png)

## Customer Portalを利用して支払い情報の登録を受け付ける

もちろんこのままでは、トライアル終了後の請求が行えません。

Customer Portalなどを利用して決済情報の入力画面を用意しましょう。

```js
    const session = await stripe.billingPortal.sessions.create({
      customer: 'cus_xxx',
    })
```
![スクリーンショット 2022-09-07 12.55.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/11a12fcc-2e9d-0534-0a58-7745e95cef7f.png)

### ダッシュボードで、「支払い方法の更新を許可」する

Customer Portalで支払い方法を登録するには、Dashboardの設定から「支払い方法の更新を許可」しましょう。

![スクリーンショット 2022-09-07 12.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/f8dd5654-6046-8e8f-2c91-cc0318cab4b3.png)

## トライアル終了時に、カード未登録のサブスクリプションをキャンセルする

サービスによっては、トライアル終了時に支払い情報を登録していない場合、自動でアカウントをクローズする場合もあります。

その場合は、`customer.subscription.trial_will_end`のWebhookイベントを利用しましょう。


```js
if (event.type === 'customer.subscription.trial_will_end') {
  if (!event.data.object.default_payment_method) {
    // トライアル終了時点で、支払い情報を登録していない顧客の処理
  }
}
```

## 支払い方法の登録URL付きメールなどは、Billing Scaleへ

Stripeでは、有料のオプションとして支払い情報を入力できる専用ページなどを提供しています。

![hosted-recovery-experience.c69b54b239be9941f074cadcd690ca63.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/81bf167d-634c-6d94-2a79-51b47eff0892.gif)
https://stripe.com/docs/billing/revenue-recovery/customer-emails#link-to-a-stripe-hosted-page-

ダッシュボードから、アップグレードで利用できる機能が確認できますので、こちらもぜひお試しください。

https://dashboard.stripe.com/settings/billing/plans?utm_source=docs-link-to-stripe-hosted-page

## Documents

https://stripe.com/docs/payments/checkout/free-trials

https://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-payment_method_collection