従量課金モデルを採用する AI スタートアップ向けに、サブスクリプションソリューションを構築する

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

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

本番取引を処理する前に、サンドボックスやテストクロックなど、Stripe のテストツールを使用して導入をテストします。これらのツールを早期に設定することで、本番環境へ移行前に導入の反復と調整を行うことができます。

サンドボックスを作成する

まず、サンドボックスを作成します。本番環境の構成に合わせてサンドボックスを構成し、変更を継続的にテストおよびステージングできるようにします。

テストクロックを作成します

次に、サンドボックスで時間の進行をシミュレーションするテストクロックを作成します。テストクロックを増分すると、Subscriptions などのリソースの状態が変化し、Webhook イベントがトリガーされます。

1. Stripe ダッシュボードで、テストクロックページに移動します。
2. + 新しいシミュレーション をクリックします。
3. 新しいシミュレーションの作成 モーダルで、シミュレーションの名前を入力します。Annual renewal や Free trial など、この名前を使用して、テストするシミュレーションを説明することができます。
4. クロックの凍結時刻を設定します。これは、シミュレーションの開始点です。この時刻は過去または未来に設定できますが、設定後は進行のみが可能になります。

サブスクリプションシナリオをシミュレーションするには、追加 ドロップダウンをクリックし、顧客 を選択します。顧客の名前のみを入力する必要がありますが、税金回収や計算などの一部のシナリオでは、請求書や配送先住所などの他の情報を追加する必要があります。

次に、追加 ドロップダウンをクリックし、サブスクリプション を選択します。シナリオに合わせてサブスクリプションを設定します。

このガイドの残りの部分に従って、さらに顧客とサブスクリプションを追加できます。

この例では、Hypernian が 定額と超過料金 を組み合わせた料金モデルを用いて、顧客に LLM サービスの利用料を以下のように請求しています。

このモデルを実装するには、利用状況を記録するためのメーター、貴社サービスを表すための商品と価格、顧客情報、顧客のサブスクリプションを作成します。

メーターを作成する

メーターは、請求期間中のメーターイベントを集計する方法を指定するものです。メーターイベントは、顧客がシステムで実行するすべてのアクション (API リクエストなど) を表します。メーターは料金に関連付けられており、請求内容の基礎になります。

Hypernian の例では、メーターイベントは、顧客がクエリで使用するトークンの数です。メーターは、1 か月間のトークンの合計です。

Stripe ダッシュボードまたは API を使用してメーターを設定できます。Stripe CLI で API を使用してメーターを作成するには、Stripe CLI を始める を参照してください。

価格モデルを作成する

Stripe ダッシュボードまたは API を使用して、商品 とその料金オプションを含む 料金体系モデル を作成します。価格 は、単価、通貨、請求期間を定義します。

Hypernian の例では、100 ユニットあたり 0.04 USDの従量制価格で、月単位で請求される製品を作成します。前の手順で作成したメーターを使用します。

次に、100 USD 月額料金を作成します。

プロモーションコードを設定するには、クーポンとプロモーションコードを作成してから、サブスクリプションにプロモーションコードを適用します。

クーポンを作成

クーポンは、ダッシュボードまたは API で作成します。

対象の商品を設定する

サブスクリプションに 変更を加えた 場合、Stripe は日割額を計算し既存の割引がある場合はそれを適用します。作成された請求書上でこの日割項目にさらに割引を適用することはできません。

サブスクリプションにクーポンを適用する

クーポンを作成したら、サブスクリプションにクーポンを適用して割引を作成します。サブスクリプションを作成する際、または顧客の既存のサブスクリプションを更新する際にクーポンを適用できます。

クーポンの適用後に 即時決済が不要 であれば、顧客が支払い方法を保存していない場合でも引き続きサブスクリプションを作成できます。

Checkout にクーポンを適用する

Checkout セッションでサブスクリプションにクーポンを適用する場合、API の discounts パラメーターを設定します。適用された割引でセッションを作成するには、discounts 配列の coupon パラメーターにクーポン ID を渡します。

curl https://api.stripe.com/v1/checkout/sessions \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"=card \
  -d "line_items[][price]"=
"{{PRICE_ID}}" \
  -d "line_items[][quantity]"=1 \
  -d mode=subscription \
  -d "discounts[][coupon]"="{{COUPON_ID}}" \
  -d success_url="https://example.com/success" \

Stripe Elements と Checkout セッション API を使用して、完全にカスタマイズされたサブスクリプション導入の一環として決済ページを構築します。

サブスクリプションを設定するには、を作成する必要があります。住所と決済の詳細は Express Checkout Element で収集し、その情報を使用して Checkout セッション API でサブスクリプションを作成できます。

Stripe をセットアップする

任意の Stripe クライアントをインストールします。

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

次に Stripe CLI をインストールします。CLI は Webhook のテストを提供します。これを実行すると Stripe への API コールを実行できます。このガイドでは、CLI を使った料金体系モデルの設定方法を紹介します。

# Install Homebrew to run this command: https://brew.sh/
brew install stripe/stripe-cli/stripe

# Connect the CLI to your dashboard
stripe login

その他のインストールオプションについては、Stripe CLI を使ってみるをご覧ください。

顧客を作成する

Stripe では、各サブスクリプションに 顧客 が必要です。アプリケーションのフロントエンドでユーザーから必要な情報を収集し、それをバックエンドに渡します。

住所の詳細を収集する必要がある場合は、Address Element を使用することで顧客の配送先住所または請求先住所を収集できます。Address Element の詳細については、Address Element ページをご覧ください。

<form id="signup-form">
  <label>
    Email
    <input id="email" type="email" placeholder="Email address" value="test@example.com" required />
  </label>

  <button type="submit">
    Register
  </button>
</form>

const emailInput = document.querySelector('#email');

fetch('/create-customer', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: emailInput.value,
  }),
}).then(r => r.json());

サーバー上で、Stripe Customer オブジェクトを作成します。

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d email={{CUSTOMER_EMAIL}} \
  -d name={{CUSTOMER_NAME}} \
  -d "shipping[address][city]"=Brothers \
  -d "shipping[address][country]"=US \
  -d "shipping[address][line1]"="27 Fredrick Ave" \
  -d "shipping[address][postal_code]"=97712 \
  -d "shipping[address][state]"=CA \
  -d "shipping[name]"={{CUSTOMER_NAME}} \
  -d "address[city]"=Brothers \
  -d "address[country]"=US \
  -d "address[line1]"="27 Fredrick Ave" \
  -d "address[postal_code]"=97712 \
  -d "address[state]"=CA

決済手段を有効にする

デフォルトでは、Stripe は 決済手段設定 を使用して、Express Checkout Element で有効になっている決済手段を決定します。payment_method_types 属性を使用して、Checkout Session で特定の決済手段を設定することもできます。

サポートされている決済手段

決済手段タイプ card を使用すると、Apple Pay と Google Pay が自動的に有効になります。Link を使用する場合は、必ず card 決済手段タイプも渡します。

Checkout セッションを作成する

アプリケーションのバックエンドで、フロントエンドが呼び出すセッションを作成するエンドポイントを定義します。顧客が登録するサブスクリプションの価格 ID が必要です。フロントエンドはこの値を渡します。

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d ui_mode=custom \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d return_url={{RETURN_URL}} \
  -d mode=subscription

Checkout を初期化する

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}

<div id="checkout-container"></div>

トライアル期間を設定する

サービスの 7 日間の無料トライアル期間を提供するには、Checkout セッションの作成時に trial_period_days を渡します。

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d ui_mode=custom \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d return_url={{RETURN_URL}} \
  -d mode=subscription \
  -d "subscription_data[trial_period_days]"=7

Stripe Elements を設定する

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckout({
  clientSecret
});

Express Checkout Element を作成してマウントする

Express Checkout Element には、HTTPS 接続を介して決済情報を Stripe に安全に送信する iframe が含まれています。導入を機能させるには、決済ページのアドレスの先頭を https://, ではなく http://, にする必要があります。

<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>

// Create and mount the Express Checkout Element
const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.mount('#express-checkout-element');

顧客の詳細情報を収集してラインアイテムを表示する

サーバーで作成した Checkout Session によって、項目、合計金額、利用可能な決済手段が自動的に決定されます。Express Checkout Element はこの情報を使用して、適切なインターフェイスを表示します。

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  expressCheckoutElement.on('confirm', (event) => {
    loadActionsResult.actions.confirm({expressCheckoutConfirmEvent: event});
  });
}

expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: event.address
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: event.shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

決済を送信

<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

バックエンドのロジックを設定するには、Stripe から送信される Webhook イベントをリッスンできるエンドポイントを設定する必要があります。これらのイベントは、サブスクリプションの新しい請求書が生成されるなど、Stripe でステータスが変更されるたびに発生します。お客様のアプリケーション側では、Webhook イベントを含む POST リクエストを受け取るための HTTP ハンドラーを設定して、イベントの署名を検証してください。

開発中は、ワークベンチのイベントタブを使用して、イベントを監視およびフィルタリングします。

本番環境では、ダッシュボードで Webhook エンドポイント URL を設定するか、Webhook Endpoints API を使用します。

サブスクリプション固有の Webhook の詳細については、Subscription イベントを参照してください。

決済の成功時に、顧客にサービスへのアクセスを許可します。ほとんどの場合、以下の場合にサービスへのアクセスを提供できます。

• invoice.paid イベントを受信します。
• サブスクリプションのステータスは active です。ステータスは、ダッシュボードの Subscriptions ページで、または API を使用してサブスクリプションを取得し、ステータスフィールドを確認することで確認できます。

サブスクリプション固有の Webhook、Subscription イベントの詳細については、

本番環境へ移行する前に、導入内容をテストします。

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

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