SaaS Plus a Boxモデルなど、サブスクリプションと1回きりの請求をStripeで同時に処理する方法

この記事では、物理的なアイテムを提供したり、初期設定を完了したりする必要がある場合に、顧客にサービスを提供する方法について説明します。Stripe Billing と Checkout を使用して新しいサブスクリプションを作成し、同時に 1 回限りの支払いを処理する方法を学習します。

## ハードウェアとサービスの両方を提供する 「SaaS Plus a Box」モデルとは

近年、デバイスやハードウェアとサービスの両方を提供するサブスクリプションビジネスモデルが増加しつつあります。例えば2023年の[日本サブスクリプションビジネス大賞](https://subscription-japan.com/award2023/)では、猫用のトイレとそこで取得したデータを元にサービスを提供する[トレッタ](https://jp.tolettacat.com/)がグランプリを受賞しています。このようなデバイスがデータを収集してクラウド上に送信し、そのデータを活用した価値提供を行うサービスは、IoT(Internet of Things)やクラウドサービスの普及によってさまざまな場面で登場・成長しています。

このようなサービスと連動するハードウェアを提供するサブスクリプションモデルのことを、「[SaaS Plus a Box](https://xtech.nikkei.com/atcl/nxt/column/18/01689/111600013/)」モデルと呼びます。このモデルでは、サブスクリプションサービスの提供に加えて買い切りの商品も顧客に提供し、ハードウェアとサービスそれぞれの収益化とコスト回収を試みます。

[SaaS Plus a Box]モデルを実現するには、自社のシステムがサブスクリプションの請求管理と買い切り商品の決済処理の両方をサポートする必要があります。そして顧客のカゴ落ちによるCVR低下を避けるため、両方の決済を1度のフローで実現することが重要です。

## 初期費用の支払いとサブスクリプション契約を同時に処理する

[SaaS Plus a Box]モデルの決済フローを実現するには、1回きりの請求とサブスクリプションの申し込み処理を同時に処理する必要があります。StripeではCheckout / Elements / Payment Linksなど多くの製品でこのモデルに対応した決済フローを簡単に実装できます。

ここからはそれぞれの実装方法を確認していきましょう。

### Stripe Checkoutではどちらも`line_items`で登録する

Stripe Checkoutを利用する場合、`line_items`に登録する料金データは1回きりの決済とサブスクリプションの決済を区別しません。そのため、どちらの請求内容についても、`line_items`に対応するStripeのPrice IDと数量を設定するだけで、SaaS Plus a boxモデルの申し込みフォームが作れます。

```js
const session = await stripe.checkout.sessions.create({
  line_items: [
    {
      price: '{{RECURRING_PRICE_ID}}',
      quantity: 1,
    },
    {
      price: '{{ONE_TIME_PRICE_ID}}',
      quantity: 1,
    },
  ],
  mode: 'subscription',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});
```

作成したCheckout Sessionを[サイトに埋め込む](https://docs.stripe.com/checkout/embedded/quickstart)か、[リダイレクト遷移する](https://docs.stripe.com/checkout/quickstart)と、両方の決済処理をまとめて実行できるフォームが表示されます。

![スクリーンショット 2024-12-11 15.48.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6b16d6da-6031-40d8-f7c8-def25c4ceede.png)

請求内容の明細についても、1回きりの請求と定期的に請求されるものの2つを区別して表記します。これによって、顧客が初期費用・デバイス購入費用についても定期的に請求されるのではないかという不安を感じにくい作りになっています。

![スクリーンショット 2024-12-11 15.47.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/9f510ae0-e4d2-c2af-6047-bdb56fa367c5.png)


### Billings APIでは`add_invoice_items`を利用する

すでに決済手段が登録されている場合や、Stripe Elementsを利用した決済フローを構築している場合は、Billings APIを利用してサブスクリプションを作成します。この場合も、1度のAPI呼び出しで両方の請求を実行することが可能です。

Billings APIを使う場合は、サブスクリプションと1回きりの請求それぞれを設定するパラメータが異なります。サブスクリプションの料金IDは`items`に登録しますが、1回きりの請求については`add_invoice_items`として登録しましょう。

https://docs.stripe.com/api/subscriptions/create#create_subscription-add_invoice_items

```js
const subscription = await stripe.subscriptions.create({
  customer: '{{CUSTOMER_ID}}',
  add_invoice_items: [
    {
      price: '{{ONE_TIME_PRICE_ID}}',
      quantity: 1,
    },
  ],
  items: [
    {
      price: '{{RECURRING_PRICE_ID}}',
      quantity: 1,
    },
  ],
});
```

これによって初回の請求書には両方の請求が記載された状態で発行されます。

![スクリーンショット 2024-12-11 16.03.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/86dd27b4-5acf-328d-3bed-0532f16d63ee.png)

次回以降の請求には1回きりの請求が含まれていないことも、ダッシュボードから確認できます。

![スクリーンショット 2024-12-11 16.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d5a594a7-c576-9159-52a2-5a773f204875.png)

このようにCheckout / Billingsどちらの方法でも、SaaS plus a Boxモデルの申し込みフローを簡単に実装することができます。

### Payment Linksやダッシュボード操作でも処理できる

これらの操作は、ダッシュボードからサブスクリプション請求書を発行する際にも行えます。ダッシュボードで作成した場合、設定した内容を実装するコードの生成機能も用意されていますので、実装方法を確認する場合などにもお使いください。

![スクリーンショット 2024-12-11 16.09.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7c019bbd-0aa9-9194-8f57-f1385b6a5b87.png)

Payment Linksで支払いリンクを発行する場合でも同様の設定が行えます。新規サービスの立ち上げフェーズなどでは、これらのノーコードオプションを活用して初期の開発工数を削減しましょう。

![スクリーンショット 2024-12-11 16.15.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/499af96a-4f78-ed77-2d78-ed446b3e3619.png)

## 同時に決済する場合の割引方法について

マーケティングキャンペーンなどで割引を行う場合、クーポンの設定によってユーザーに表示される明細表記が変わることにご注意ください。対象の商品を指定せずに発行したクーポンを適用した場合は、合計金額から割引が適用されます。

![スクリーンショット 2024-12-11 16.21.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d3d622c1-2f41-3579-2f6e-d6c46fcd727e.png)

一方で特定の商品のみを対象としたクーポンを適用する場合は、対象となる商品に対する割引として適用されます。そのため、同じ10%割引のクーポンであっても、割引後の合計金額が異なる数字となります。

![スクリーンショット 2024-12-11 16.19.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6a20cbe0-3d50-6fda-6122-3cbc6b9f2559.png)

もしElementsやBillings APIを利用している場合は、割引後の金額計算等を[Invoice Preview API](https://docs.stripe.com/api/invoices/create_preview)を使って取得できます。

```js
const invoice = await stripe.invoices.createPreview({
  customer: '{{CUSTOMER_ID}}',
  subscription_details: {
    items: [
      {
        quantity: 1,
        price: '{{RECURRING_PRICE_ID}}',
      },
    ],
  },
  invoice_items: [
    {
      price: '{{ONE_TIME_PRICE_ID}}',
      quantity: 1,
    },
  ],
  discounts: [
    {
      promotion_code: '{{PROMO_CODE_ID}}',
    },
    {
      promotion_code: '{{PROMO_CODE_ID}}',
    },
  ],
});
```

これらのAPIや機能を組み合わせて、新しい形のサブスクリプションサービス提供やオファーの企画などを初めてみましょう。

## まとめ

ハードウェアやデバイスとサービスを提供するSaaS Plus a Boxモデルや、初回の作業費用などを請求するタイプのサブスクリプションサービスでは、サブスクリプション請求と1回きりの請求の同時かつ効率的に処理する必要があります。個別に請求する方が設計上はシンプルかもしれませんが、購入を完了するまでのステップ数が増えることによるカゴ落ちリスク・CVR低下リスクが増加しやすくなります。

Stripeを利用している場合、CheckoutやBillings APIを活用して1度に両方の請求処理を行うことができます。また、請求内容のプレビュー・事前計算についても、[Invoice Preview API](https://docs.stripe.com/api/invoices/create_preview)を利用して実施できます。

多様化するサブスクリプションサービスの請求モデルに対応するため、ぜひStripeのAPIやダッシュボード機能をお試し・ご活用ください。

https://stripe.com/docs/payments/checkout/how-checkout-works#mixed

https://docs.stripe.com/api/invoices/create_preview

## SaaS plus a boxについて知る

https://xtech.nikkei.com/atcl/nxt/column/18/01689/111600013/

https://japan.zdnet.com/article/35213018/