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

サブスクリプションの埋め込み可能な料金表

ウェブサイトにサブスクリプションの料金表を表示し、顧客を Stripe Checkout に直接誘導します。

Stripe ダッシュボードを使用して、顧客がさまざまなサブスクリプション料金を確認できる料金表を作成します。料金表を作成または埋め込むためにカスタムコードを記述する必要はありません。このガイドでは、次の方法について説明します。

  • Stripe ダッシュボードを使用して UI コンポーネントを設定する方法
  • 生成されたコードをダッシュボードからコピーする方法
  • Web サイトにコードを組み込み、顧客に料金情報を表示して、決済ページに誘導します

概要

料金表は、価格情報を表示し、顧客を決済フローに誘導する埋め込み UI です。

ウェブサイトに料金表を埋め込んで価格情報を表示し、顧客を決済フローに誘導します。

料金表は埋め込み可能な UI で、以下の機能を備えています。

  • 価格情報を表示し、事前構築済みの決済フローに顧客を誘導します。決済フローでは、Stripe Checkout を介して購入を完了します。
  • 定額料金、ユーザー単位、段階制料金、無料トライアルなどの一般的なサブスクリプションビジネスモデルに対応しています。
  • コードを記述することなく、ダッシュボードで直接商品と価格の情報を設定、カスタマイズ、更新できます。
  • <script> タグとウェブコンポーネントを使用してウェブサイトに埋め込みます。Stripe によってタグが自動的に生成されます。タグをコピーしてウェブサイトのコードに貼り付けます。

以下の図は、顧客が料金表を表示してから決済フローを完了するまでのプロセスをまとめたものです。

料金表を作成

  1. ダッシュボードで、商品カタログ > 価格表に移動します。
  2. + 料金表を作成をクリックします。
  3. 顧客に関連する商品を追加します (価格帯ごとに最大 4 つ)。必要に応じて、無料トライアルを追加してください。
  4. 表示設定でデザインを調整します。商品を選択し、言語、色、フォント、ボタンデザインをカスタマイズしたら、続行をクリックします。
  5. 収集する顧客情報、顧客に提示するオプション、購入後のアクション (購入完了後に確認ページを表示するか、または顧客をサイトにリダイレクトするか) を選択して、支払い設定を構成します。

    最大数量を確認する

    デフォルトの最大値 (99) を超える数量に対応している段階制料金の場合は、 顧客が数量を調整できるようにするプロパティをオンにし、それに応じて最大値を増やします。最大数量を超える段階制料金のオプションは、セレクターに表示されません。

  6. 続行をクリックしてカスタマーポータルを設定します。
  7. コードをコピーをクリックして、生成されたコードをコピーし、ウェブサイトに埋め込みます。
料金表のカスタマイズ

料金表をカスタマイズする

支払い設定を構成する

支払い設定を構成する

料金表を埋め込む

料金表を作成すると、Stripe は <script> タグと <stripe-pricing-table> ウェブコンポーネントで構成される埋め込みコードを自動的に返します。コードをコピーボタンをクリックしてコードをコピーし、ウェブサイトに貼り付けます。

料金表の詳細ページ

料金表のコードをコピーして、ウェブサイトに埋め込みます。

HTML を使用している場合は、埋め込みコードを HTML に貼り付けます。React を使用している場合は、index.html ページに script タグを含めて、<stripe-pricing-table> コンポーネントをマウントします。

注意

料金表には、アカウントの公開 API キーが使用されます。API キーを取り消す場合は、新しい公開 API キーで埋め込みコードを更新する必要があります。

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

  >
  </stripe-pricing-table>
</body>

サブスクリプションを追跡する

顧客がサブスクリプションを購入すると、ダッシュボードのサブスクリプションページにその情報が表示されます。

Stripe API でフルフィルメントを処理する

料金表コンポーネントは、Stripe Checkout を介して、事前構築済みのオンライン決済ページを表示します。Checkout を介して支払いが完了すると、Stripe は checkout.session.completed イベントを送信します。イベントの送信先を登録してエンドポイントでイベントを受信し、フルフィルメントと照合を処理できます。詳しくは、Checkout フルフィルメントガイドをご覧ください。

<stripe-pricing-table> ウェブコンポーネントは、client-reference-id プロパティの設定をサポートしています。プロパティが設定されると、料金表から Checkout セッションの client_reference_id 属性に渡され、Checkout セッションと内部システムの照合に使用されます。これは、認証済みユーザー ID または類似のストリングにすることができます。client-reference-id は、英数字、ダッシュ、またはアンダースコアで構成され、最大 200 文字の任意の値にすることが可能です。無効な値は通知なしに削除され、料金表は引き続き正常に機能します。

注意

料金表は Web サイトに組込まれ、誰でもアクセスできるため、client-reference-idにパスワードや API キーなどの機密情報が含まれていないことを確認してください。

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    client-reference-id="{{CLIENT_REFERENCE_ID}}"
  >
  </stripe-pricing-table>
</body>

オプション商品にマーケティング機能を追加する

料金表に商品のマーケティング機能が表示され、顧客は購入すべき商品を決めやすくなります。料金表の商品にマーケティング機能を追加するには、機能リスト> その他のオプションに移動します。

商品にマーケティング機能を追加する

商品にマーケティング機能を追加する

API を使用して商品を作成または更新するときに、マーケティング機能を追加することもできます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/products \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name=Professional \
  -d "marketing_features[0][name]"="Unlimited boards" \
  -d "marketing_features[1][name]"="Up to 20 seats"

オプションカスタムの行動喚起を追加する

料金表の商品には、任意の URL にリダイレクトするカスタムの行動喚起を設定することが可能です。これは、商品にカスタム価格やハイタッチセールスプロセスが設定されている場合に適用できます。

Add product with custom call-to-action button をクリックして、商品とカスタムの行動喚起を選択し、URL を設定します。

カスタムの行動喚起を追加する

カスタムの行動喚起を追加する

カスタムの行動喚起では、次の形式がサポートされています。

  • https://wwww.stripe.com などの絶対的リンク。
  • /contact などの相対リンク。料金表を wwww.stripe.com/pricing-table に埋め込むと、/contact の URL が wwww.stripe.com/pricing-table/contact に移動します。
  • mailto と tel を使用する連絡先専用リンク。たとえば、URL を mailto:email@yourcompany.com または tel:xxx-xxx-xxx に設定することができます。
  • {PRODUCT_ID} と {CUSTOMER_EMAIL} の 2 つの変数を含むリンク。顧客が行動喚起ボタンをクリックすると、Stripe は対応する製品 ID と顧客のメールアドレスを入力します。

注意

現時点では、カスタムの行動喚起ボタンを持つ商品は 1 つのみ設定することができます。入力したリンクが正しいことを確認してください。{CUSTOMER_EMAIL} パラメーターを機能させるには、顧客のメールアドレスを渡す必要があります。

オプション顧客のメールアドレスを渡す

<stripe-pricing-table> ウェブコンポーネントは、customer-email プロパティの設定をサポートしています。プロパティが設定されると、料金表はそれを Checkout セッションの customer_email 属性に渡し、支払いページにメールアドレスを自動入力します。

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    customer-email="{{CUSTOMER_EMAIL}}"
  >
  </stripe-pricing-table>
</body>

オプション既存の顧客を渡す

料金表から作成された Checkout セッションには、既存の Customer オブジェクトを指定することができます。サーバー側で既に認証済みのユーザーの顧客セッションを作成し、その client_secret を顧客に返します。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/customer_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d "components[pricing_table][enabled]"=true

<stripe-pricing-table> ウェブコンポーネントの customer-session-client-secret 属性を顧客セッションの client_secret に設定します。

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    customer-session-client-secret="{{CLIENT_SECRET}}"
  >
  </stripe-pricing-table>
</body>

顧客の client secret の有効期限

30 分以内に client secret を料金表に含めてください。料金表を表示した後、顧客セッションの有効期限が切れる 30 分以内に支払いを完了する必要があります。

期限切れの顧客セッションで Checkout セッションを作成すると、client secret は破棄され、顧客が関連付けられていない Checkout セッションが作成されます。

Checkout セッションの作成後、確認前に顧客セッションの期限が切れた場合、支払いの確認は失敗します。

オプション購入後体験をカスタマイズする

支払いが成功すると、購入への感謝を示す現地語の確認メッセージが顧客に表示されます。ここで確認メッセージのカスタマイズや、任意のリダイレクト URL の設定を行えます。料金表の確認動作を変更するには、料金表を作成または更新するときに確認ページセクションをクリックします。

顧客を自社固有の確認ページにリダイレクトする場合、リダイレクト URL に {CHECKOUT_SESSION_ID} を含めることで、顧客の現在の Checkout セッション ID が動的に渡されます。これは、Checkout セッションの情報に基づいてウェブサイトの成功メッセージを調整したい場合に役立ちます。

オプション料金表を更新する

料金表は、ダッシュボードの詳細ページから更新できます。商品カタログ ページで、価格表タブを選択し、編集する価格表を見つけて選択します。

価格表の詳細ページで、価格表の編集 をクリックします。表示する商品と価格を変更したり、支払いページの設定を行ったりすることができます。変更を保存すると、Stripe が料金表の UI を自動的に更新します。

オプション無料トライアルを設定する

料金表に無料トライアルを設定するには、無料トライアルを含めるを選択し、料金表の作成時または編集時にトライアル期間を設定します。顧客が支払い情報の確認を終えると、トライアルを開始するためのページにリダイレクトされます。新しいページは Checkout セッションの一部です。

製品の無料トライアルを設定する

決済手段なしでトライアルを設定する

決済手段の詳細を入力することなく、顧客がサブスクリプションに登録できるようにするには、無料トライアルを含めるを選択し、続行をクリックします。次に、必要な場合にのみ決済手段の情報を収集するを選択します。

トライアル期間が終了する前に、必ずメールリマインダーを設定して、顧客から決済手段の情報を収集するようにしてください。この手続きを行わなかった場合、Stripe はトライアルを一時停止します。

オプションコンテンツセキュリティポリシー

コンテンツセキュリティポリシーを導入している場合、料金表に必要なポリシーディレクティブは次のとおりです。

  • frame-src、https://js.stripe.com
  • script-src、https://js.stripe.com

オプション顧客自らサブスクリプションを管理できるようにする
ノーコード

カスタマーポータルへのリンクを共有します。顧客はメールアドレスでログインして、サブスクリプションの管理や決済手段の更新などを行うことができます。カスタマーポータルリンクを作成して共有する方法については、こちらのページをご覧ください。

オプション現地通貨を表示する

多通貨の価格を設定することで、料金表と Checkout には顧客の現地通貨での価格が自動的に表示されます。customer-email 属性を使用して、料金表と支払いページがそれぞれの国の顧客にどのように表示されるかをテストします。

stripe-pricing-table で customer_emailプロパティを設定し、メールアドレスのローカル部分に +location_XX という形式のサフィックスを含めます。XX は有効な 2 文字の ISO 国コードにする必要があります。

pricing-page.html
HTML
React
No results
<body>
  <h1>We offer plans that help any business!</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/pricing-table.js">
  </script>
  <stripe-pricing-table
    pricing-table-id=
'{{PRICING_TABLE_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    customer-email="test+location_FR@email.com"
  >
  </stripe-pricing-table>
</body>

料金表に表示される通貨は、customer_email で指定した国 (この場合はフランス) のデフォルト通貨と一致します。

オプションカスタムフィールドを追加する

注意

カスタムフィールドは、個人情報、保護データ、機密データ、または法律で制限されている情報の収集には使用しないでください。

料金表の商品と価格にそれぞれカスタムフィールドを追加して、顧客から追加情報を収集します。この情報は支払いが完了した後に表示され、購入のフルフィルメントに役立ちます。次のフィールドタイプを追加できます。

タイプ説明
テキスト最大 255 文字の自由形式のテキストを収集する場合に使用します。
数値のみ最大 255 桁の数値を収集する場合にのみ使用します。
ドロップダウン選択可能なオプションのリストが顧客に表示されます。10 個までオプションを追加することができます。
  1. 支払い設定セクションでカスタムフィールドを追加をクリックします。
  2. 追加するフィールドタイプを選択します。
  3. フィールドのラベルを入力します。
  4. (オプション) 必要に応じて、フィールドにマークを付けることができます。

顧客が支払いを完了すると、ダッシュボードの支払い情報ページでフィールドが表示されます。

カスタムフィールドは、支払い完了後に checkout.session.completed イベントでも送信されます。イベントの送信先を登録して、エンドポイントでイベントを受信します。

制限事項

  • ビジネスモデル: 料金表は、定額料金、ユーザー単位、段階制料金、トライアルなどのサブスクリプションビジネスモデルに対応しています。使用量ベースの料金モデルには対応していません。
  • 商品と価格の制限: 最大 4 つの商品 (商品 1 つにつき最大 3 通りの価格) を表示するように料金表を設定できます。すべての商品で固有の価格帯を 3 つのみ設定することが可能です。
  • アカウント作成: 料金表の行動喚起により、顧客は直接決済フローに誘導されます。現在、中間ステップの追加 (たとえば、決済前にウェブサイトでアカウントを作成するよう顧客に要求するなどのアクション) はサポートされていません。
  • レート制限: 料金表には、読み取り操作のレート制限 (毎秒最大 50 回) が適用されます。料金表が複数ある場合、同じ設定のレート制限が共有されます。
  • Checkout リダイレクト: ウェブサイトプロバイダーが allow-top-navigation 属性を有効化することなく iframe の埋め込みコードをサンドボックス化している場合、料金表は顧客を決済フローにリダイレクトしません。この設定を有効にする場合は、ウェブサイトプロバイダーにお問い合わせください。
  • 料金表をローカルでテストする: 料金表を表示するには、ウェブサイトのドメインが必要です。料金表をローカルでテストするには、ローカルの HTTP サーバーを実行して、localhost ドメイン経由でウェブサイトの index.html ファイルをホストします。ローカル HTTP サーバーを実行するには、Python の SimpleHTTPServer または http-server npm モジュールを使用します。
  • Connect: 料金表は Connect と連携するようには設計されておらず、またプラットフォームによる手数料徴収などの機能もサポートしていません。

顧客のサブスクリプションを 1 つに制限する

すでにサブスクリプションに加入している顧客を、カスタマーポータルや、サブスクリプションを管理しているウェブサイトにリダイレクトすることができます。顧客のサブスクリプションを 1 つに制限する方法については、こちらのページをご覧ください。

このページはお役に立ちましたか。
はいいいえ