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

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

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

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

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

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

    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日間無料」や「トライアル後の合計額」などが表示されます。

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

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

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

    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',
    })

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

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

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

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

    const session = await stripe.billingPortal.sessions.create({
      customer: 'cus_xxx',
    })

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

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

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

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

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

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

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

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

https://stripe.com/docs/billing/revenue-recovery/customer-emails#link-to-a-stripe-hosted-page-

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

Documents