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

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

ウェブ

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 Session を作成

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

Checkout Sessionを作成する際に、次のパラメーターを渡します。

組み込み決済フォームを使用するには、ui_modeをembeddedに設定します。
顧客の購入時にサブスクリプションを作成するには、mode をsubscriptionに設定します。
決済を完了または試行した際に顧客が戻るページを定義するには、return_url を指定します。URL に {CHECKOUT_SESSION_ID} のテンプレート変数を含めます。Checkout はこの変数を Checkout Session ID に置き換えてから、顧客をリダイレクトします。Web サイトに戻り先ページを作成してホストしてください。
サブスクリプションとキャンセルの規約、および顧客がサブスクリプションを更新またはキャンセルできるリンクを含めるには、オプションでカスタムテキストを使用します。サブスクリプション登録者にはメールリマインダーと通知を設定することをお勧めします。

Checkout をマウントするには、レスポンスで返される Checkout Session の 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/clover/stripe.js"></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 Session の client secret を取得する

サーバーに Checkout Session の作成をリクエストする非同期の fetchClientSecret 関数を作成し、client secret を取得します。

Checkout を初期化する

fetchClientSecret 関数を使用して Checkout を初期化し、決済フォームのプレースホルダー にマウントします<div>支払いフォームで。決済は 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 Session の作成時に return_url パラメーターで指定した URL です。

注

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

エンドポイントを作成して Checkout Session を取得する

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

Checkout Session を取得する

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

セッションを処理する

セッションステータスに基づく結果の処理:

complete: 決済が成功しました。Checkout Session の情報を使用して成功ページを表示します。
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
  });
});

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

カスタマーポータルを設定すると、顧客が各自の既存のサブスクリプションと請求書を直接管理できるようになります。

ポータルはダッシュボードで設定できます。解約を減らすには、決済が失敗した場合に、顧客が決済手段を各自で更新できるようにポータルを設定してください。

顧客がサブスクリプションを各自で管理できるよう、カスタマーポータルにリダイレクトするボタンをウェブサイト上の見つけやすい位置に追加します。このボタンをクリックすると、顧客は Stripe がホストするカスタマーポータルページにリダイレクトされます。

カスタマーポータルとその他の顧客管理オプションの詳細をご確認ください。

ポータルセッションを作成する

カスタマーポータルを追加するには、フロントエンドが呼び出すカスタマーポータルセッションを作成するエンドポイントを定義します。CUSTOMER_ID は、Checkout Session で作成されたものであり、checkout.session.completed Webhook の処理中に保存した顧客 ID です。ダッシュボードで、ポータルのデフォルトのリダイレクトリンクを設定することもできます。

サイトのページを示す return_url 値をオプションで渡して、サブスクリプションの管理を終えた顧客をこのページにリダイレクトします。

顧客をカスタマーポータルに移動させる

フロントエンドで、カスタマーポータルへのリンクを提供するボタンを success_url のページに追加します。

success.html
サンプル全体を表示
<html>
  <head>
    <title>Manage Billing</title>
  </head>
  <body>
    <form action="/customer-portal" method="POST">
      <!-- Note: If using PHP set the action to /customer-portal.php -->
      <button type="submit">Manage Billing</button>
    </form>
  </body>
</html>

顧客がカスタマーポータルから退出すると、return_url に指定された Web サイトに戻ります。引き続きイベントを監視することで、顧客のサブスクリプションのステータスを追跡することができます。

サブスクリプションのキャンセルなどのアクションを許可するようにカスタマーポータルを設定する場合は、必ず追加イベントを監視してください。

アクセスを提供

サブスクリプションが有効になったら、ユーザーにサービスへのアクセスを許可します。これを行うには、customer.subscription.created、customer.subscription.updated、customer.subscription.deleted の各イベントをリッスンします。これらのイベントは Subscriptionオブジェクトを渡します。このオブジェクトには、サブスクリプションが有効か、期日経過か、キャンセルされたかを示す ステータス フィールドが含まれます。ステータスの一覧については、サブスクリプションライフサイクルを参照してください。製品の機能へのアクセスを管理するには、エンタイトルメントの統合を参照してください。

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

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

サブスクリプションのステータスは、申し込みから直接 Stripe に呼び出しを行わなくても、そのライフサイクルのどの時点でも変更される可能性があります。たとえばクレジットカードの有効期限切れで更新ができなかった場合、サブスクリプションは期日経過のステータスになります。または、カスタマーポータルを実装している場合、ユーザーは、申し込みに直接アクセスせずにサブスクリプションをキャンセルする可能性があります。ハンドラーを正しく実装することで、申し込みのステータスを Stripe と同期した状態に維持することができます。

導入をテストする

支払い方法をテストする

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

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

イベントを監視する

Webhook を設定して、アップグレードやキャンセルなどのサブスクリプション変更イベントをリッスンします。サブスクリプション Webhook イベントは、ダッシュボードまたは Stripe CLI で表示できます。

Billing 導入テストの詳細を参照してください。

注