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

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

ウェブ

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 のように表示されます。

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

複数の請求期間を提供している場合は、決済を使用して、請求期間の長い顧客をアップセルし、より多くの収入を前払いで徴収します。

その他の料金体系モデルについては、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/basil/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 セッションの 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 に呼び出しを行わなくても、そのライフサイクルのどの時点でも変更される可能性があります。たとえばクレジットカードの有効期限切れで更新ができなかった場合、サブスクリプションは past due のステータスになります。または、お客様が customer portal を実装している場合、顧客はお客様のアプリケーションに直接アクセスせずにサブスクリプションをキャンセルする可能性があります。ハンドラーを正しく実装することで、お客様のアプリケーションのステータスを 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 の導入テストをご覧ください。

注