サブスクリプションの実装を構築する

サブスクリプションを作成して、継続支払いを受け付けるように管理します。

ウェブ

iOS

Android

React Native

togethere.work

実装作業

ローコード

UI のカスタマイズ

デザインをカスタマイズします。

システム構築のタイプ

構築済みのオンラインフォームを使用して支払いを回収し、サブスクリプションを管理します。

サーバーを設定する

Stripe を設定する

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

商品と価格を作成する

ダッシュボードまたは Stripe CLI で商品とその価格を作成します。

この例では、「基本」と「プレミアム」という 2 つのサービスレベルオプションがある固定価格のサービスを使用しています。サービスレベルオプションごとに、1 つの商品と 1 つの継続価格を作成する必要があります (初期費用のような 1 回限りの支払いを追加する場合は、1 回限りの価格で 3 つ目の商品を作成します。わかりやすくするために、この例には 1 回限りの支払いを含めていません)。

この例では、各商品が 1 カ月間隔で請求されます。基本商品の価格は 5 USD で、プレミアム商品の価格は 15 USD です。

商品を追加ページに移動し、2 つの商品を作成します。商品ごとに 1 つの価格を追加し、それぞれに毎月の継続請求期間を設定します。

プレミアム商品: 追加機能を備えたプレミアムサービス
- 価格: 標準価格 | 15 USD
基本商品: 最低限の機能を備えた基本サービス
- 価格: 標準価格 | 5 USD

価格を作成したら、価格 ID を記録しておき、他のステップで使用できるようにします。価格 ID は、price_G0FvDp6vZvdwRZ のように表示されます。

準備が完了したら、ページ右上の本番環境にコピーボタンを使用して、テスト環境から本番環境に商品を複製します。

複数の請求期間を提供している場合、Checkout を利用して、より長い請求期間で顧客へのアップセルを行い、多額の売上を前受けで回収できます。

その他の料金体系モデルについては、Billing の例をご覧ください。

Checkout セッションを作成する

Checkout セッションを作成するサーバー上にエンドポイントを追加します。

Checkout セッションの作成時には、以下のパラメーターを渡します。

埋込型決済フォームを使用するには、ui_mode を embedded に設定します。
顧客の購入時にサブスクリプションを作成するには、mode (モード) を subscription に設定します。
決済を完了または試行した際に顧客が戻るページを定義するには、return_url を指定します。URL に {CHECKOUT_SESSION_ID} のテンプレート変数を含めます。Checkout はこの変数を Checkout セッション ID に置き換えてから、顧客をリダイレクトします。お客様のウェブサイトに戻り先ページを作成してホストしてください。

Checkout をマウントするには、レスポンスで返される Checkout セッションの client_secret を使用します。

サブスクリプションページを構築する
クライアント

Checkout をマウントする

Stripe.js を読み込む

PCI 準拠を維持するには、Stripe.js を使用して、支払い詳細がお客様のサーバーを経由せずに直接 Stripe に送られるようにします。Stripe.js を常に js.stripe.com から読み込むことにより、PCI 準拠が維持されます。このスクリプトをバンドルに含めたり、自分でホストしたりしないでください。

支払いフォームを定義する

顧客の情報を安全に収集するには、空のプレースホルダー div を作成します。Stripe はこの div に iframe を挿入します。

Checkout は Stripe.js の一部として利用できます。HTML ファイルのヘッダーに Stripe.js スクリプトを追加してページに含めます。次に、マウンティングに使用する空の DOM ノード (コンテナ) を作成します。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <meta name="description" content="A demo of a payment on Stripe" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <!-- Add the Stripe.js script here -->
    <script src="https://js.stripe.com/v3/"></script>
    <script src="checkout.js" defer></script>
  </head>
  <body>
    <!-- Display a payment form -->
      <div id="checkout">
        <!-- Checkout inserts the payment form here -->
      </div>
  </body>
</html>

Stripe.js を初期化する

公開可能な API キーで Stripe.js を初期化します。

Checkout セッションの client secret を取得する

サーバーに Checkoutセッションの作成をリクエストする非同期の fetchClientSecret 関数を作成し、クライアントシークレットを取得します。

Checkout を初期化する

fetchClientSecret 関数を使用して Checkout を初期化し、支払いフォームのプレースホルダー <div> にマウントします。 Checkout が iframe でレンダリングされ、支払い情報が HTTPS 接続経由で Stripe に安全に送信されます。

一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Checkout を別の iframe 内に配置しないでください。

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

戻り先ページを表示する

顧客は支払いを試行した後、お客様のサイトにホストされている戻り先ページにリダイレクトされます。戻り先ページは、Checkout セッションの作成時に return_url パラメーターで指定した URL です。

注

決済の進行中、支払い方法によっては、銀行のオーソリページなどの中間ページに顧客がリダイレクトされる場合があります。そのページでの操作を完了した顧客は、Stripe によって戻り先ページにリダイレクトされます。

エンドポイントを作成して Checkout セッションを取得する

エンドポイントを追加し、URL で Checkout セッションの ID を指定して Checkout セッションのステータスを取得します。

Checkout セッションを取得する

Checkout セッションの詳細を使用するには、戻り先ページが読み込まれたらすぐに URL のCheckout セッション ID を使用して、サーバー上のエンドポイントに Checkout セッションの取得ステータスをリクエストします。

セッションを処理する

セッションのステータスに応じて結果を処理します。

complete: 決済が成功しました。Checkout セッションの情報を使用して成功ページをレンダリングします。
open: 決済が失敗またはキャンセルされました。顧客がやり直せるように Checkout を再マウントします。

return.js
// Retrieve a Checkout Session
// Use the session ID
initialize();

async function initialize() {
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const sessionId = urlParams.get('session_id');
  const response = await fetch(`/session-status?session_id=${sessionId}`);
  const session = await response.json();
// Handle the session according to its status
  if (session.status == 'open') {
    // Remount embedded Checkout
    window.location.replace('http://localhost:4242/checkout.html')
  } else if (session.status == 'complete') {
    document.getElementById('success').classList.remove('hidden');
    document.getElementById('customer-email').textContent = session.customer_email;
    // Show success page
    // Optionally use session.payment_status or session.customer_email
    // to customize the success page
  }
}

server.js
// Add an endpoint to fetch the Checkout Session status
app.get('/session_status', async (req, res) => {
  const session = await stripe.checkout.sessions.retrieve(req.query.session_id);
  const customer = await stripe.customers.retrieve(session.customer);

  res.send({
    status: session.status,
    payment_status: session.payment_status,
    customer_email: customer.email
  });
});

オプションカスタマーポータルを設定する

アクセスを提供する

ここまででサブスクリプションが有効になりました。次は、ユーザーがサービスにアクセスできるようにします。これには、customer.subscription.created、customer.subscription.updated、customer.subscription.deleted の各イベントをリッスンします。これらのイベントは、Subscription オブジェクトを渡し、このオブジェクトには、サブスクリプションが有効か、期日超過か、キャンセルされたかを示す status フィールドが含まれます。ステータスの一覧については、サブスクリプションのライフサイクルをご覧ください。商品の機能へのアクセスの管理については、エンタイトルメントの組み込みに関するドキュメントをご覧ください。

Webhook ハンドラーで、以下を実行します。

サブスクリプションのステータスを確認します。active の場合、ユーザーは商品の支払いを実行しています。
顧客が登録している商品を確認し、サービスへのアクセス権を付与します。価格ではなく商品を確認することにより、料金体系や請求間隔の変更が必要になった場合に、柔軟に対応できます。
product.id、subscription.id および subscription.status を、すでに保存されている customer.id とともにデータベースに保存します。アプリケーションでユーザーに対して有効にする機能を決定する際に、このレコードを確認します。

サブスクリプションのステータスは、存続期間のどの時点でも変化する可能性があります。アプリケーションが Stripe に直接コールを行っていない場合でも同様です。例えば、クレジットカードの有効期限が切れて更新が失敗した場合、サブスクリプションは期日超過の状態になります。また、カスタマーポータルを導入している場合、ユーザーが直接アプリケーションを開かずにサブスクリプションをキャンセルすることがあります。ハンドラを正しく実装することで、いつでもアプリケーションを Stripe と同期した状態に維持できます。

組み込みをテストする

支払い方法をテストする

次の表を使用して、さまざまな支払い方法とシナリオをテストします。

支払い方法	シナリオ	テスト方法
BECS ダイレクトデビット	顧客が BECS ダイレクトデビットによる支払いに成功します。	口座番号 `900123456` と BSB `000-000` を使用して、フォームに入力します。確定された PaymentIntent のステータスは、まず `processing` に移行し、3 分後に `succeeded` ステータスに移行します。
BECS ダイレクトデビット	顧客の支払いが `account_closed` エラーコードで失敗します。	口座番号 `111111113` と BSB `000-000` を使用して、フォームに入力します。
クレジットカード	カード支払いは成功し、認証は要求されません。	クレジットカード番号 `4242 4242 4242 4242` と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
クレジットカード	カード決済で認証が要求されます。	クレジットカード番号 `4000 0025 0000 3155` と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
クレジットカード	カードが `insufficient_funds` などの拒否コードで支払い拒否されます。	クレジットカード番号 `4000 0000 0000 9995` と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
SEPA ダイレクトデビット	顧客が SEPA ダイレクトデビットによる支払いに成功します。	口座番号 `AT321904300235473204` を使用して、フォームに入力します。確定された PaymentIntent のステータスはまず、processing に移行し、3 分後に succeeded ステータスに移行します。
SEPA ダイレクトデビット	顧客の Payment Intent のステータスが、`processing` から `requires_payment_method` に移行します。	口座番号 `AT861904300235473202` を使用して、フォームに入力します。

イベントを監視する

Webhook を設定して、アップグレードやキャンセルなどのサブスクリプションの変更イベントをリッスンします。サブスクリプションの Webhook の詳細をご覧ください。イベントの表示は、ダッシュボードまたは Stripe CLI を使用して行うことができます。

詳細は、Billing の導入テストをご覧ください。

注