コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要
Billing
概要Billing API について
サブスクリプション
税金
概要
レポート機能
概要複数のアカウントのレポート
データ
概要

メモ

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

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

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

オンライン決済フォームのプレビューオンライン決済フォームのプレビュー
togethere.work

導入作業

ローコード

UI のカスタマイズ

外観をカスタマイズします。

実装タイプ

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

サーバーを設定する

Stripe をセットアップする

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

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

商品と価格を作成する

Recurring pricing models represent the products or services you sell, how much they cost, what currency you accept for payments, and the service period for subscriptions. To build the pricing model, create products (what you sell) and prices (how much and how often to charge for your products).

This example uses flat-rate pricing with two different service-level options: Basic and Premium. For each service-level option, you need to create a product and a recurring price. To add a one-time charge for something like a setup fee, create a third product with a one-time price.

Each product bills at monthly intervals. The price for the Basic product is 5 USD. The price for the Premium product is 15 USD. See the flat rate pricing guide for an example with three tiers.

商品を追加ページに移動し、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 を使用します。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d mode=subscription \
  -d "line_items[0][price]"=
"{{PRICE_ID}}"
 \
  -d "line_items[0][quantity]"=1 \
  -d ui_mode=embedded \
  --data-urlencode return_url="https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}"

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

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 値をオプションで渡して、サブスクリプションの管理を終えた顧客をこのページにリダイレクトします。

server.rb
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
サンプル全体を表示
# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


# This is the URL that users are redirected to after they're done
# managing their billing.
return_url = 
'{{DOMAIN_URL}}'

customer_id = 
'{{CUSTOMER_ID}}'


session = Stripe::BillingPortal::Session.create({
  customer: customer_id,
  return_url: return_url,
})

# Redirect to the URL for the session
#   redirect session.url, 303

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

フロントエンドで、カスタマーポータルへのリンクを提供するボタンを 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 オブジェクトが渡され、その中のオブジェクトには、サブスクリプションが有効か、期日経過か、キャンセルされたかを示す status フィールドが含まれます。ステータスの一覧については、サブスクリプションライフサイクルを参照してください。製品の機能へのアクセスを管理するにはエンタイトルメントの統合を参照してください。

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

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

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

導入をテストする

支払い方法をテストする

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

決済手段シナリオテスト方法
BECS ダイレクトデビット顧客が BECS ダイレクトデビットによる支払いに成功します。アカウント番号900123456と BSB000000を使用して、フォームに入力します。確定された 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 導入テスト の詳細を参照してください。