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

Note

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

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

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

You can use the Stripe Dashboard to create an embeddable pricing table to:

  • Display pricing information and take customers to a prebuilt checkout flow. The checkout flow uses Stripe Checkout to complete the purchase.
  • Support common subscription business models like flat-rate, per-seat, tiered pricing, and free trials.
  • Configure, customize, and update product and pricing information directly in the Dashboard, without needing to write any code.
  • Embed into your website with a <script> tag and web component. Stripe automatically generates the tag. You copy and paste it into your website’s code.

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

Create a pricing table

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

    最大数量を確認する

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

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

Embed a pricing table

料金表を作成すると、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>

Customize a pricing table

Optionally, you can customize your pricing table.

Add product marketing features Optional

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

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"

Add a custom call-to-action Optional

The pricing table allows you to configure a product with a custom call-to-action that redirects to any URL. You can use this if you have custom pricing or a high-touch sales process for one of your products. You can only set one product to have a custom call-to-action button.

Click Add product with custom call-to-action button to choose a product and a custom call-to-action, and to set the correct 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 に設定することができます。
  • Links that include two variables,{PRODUCT_ID} and {CUSTOMER_EMAIL}. Stripe populates the relevant product ID and the customer email when a customer clicks the call-to-action. You must pass in the customer email for the {CUSTOMER_EMAIL} parameter to work.

Add custom fields Optional

You can add custom fields on each of your products and prices in your pricing table to collect additional information from your customers. The information is available after the payment is complete and is useful for fulfilling the purchase.

注意

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

You can add the following types of fields:

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

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

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

Present local currencies Optional

多通貨価格 を設定することで、料金表または決済フローに顧客の現地通貨で価格を自動的に表示します。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 で指定した国 (この場合はフランス) のデフォルト通貨と一致します。

Customize the post-purchase experience Optional

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

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

Configure free trials Optional

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

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

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

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

Pass the customer email Optional

<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>

Pass an existing customer Optional

料金表から作成された 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 の有効期限

You have 30 minutes to include the client secret in the pricing table. After rendering the pricing table, you have an additional 30 minutes to complete a payment before the customer session expires. If you create a Checkout Session with an expired customer session, we discard the client secret and create the Checkout Session with no associated customer.

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

Update a pricing table

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

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

Manage subscriptions

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

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>

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

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

Let customers manage their subscriptions

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

Content Security Policy

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

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

制限事項

  • Business models: The pricing table supports subscription business models such as flat-rate, per-seat, tiered pricing, and trials. It doesn’t support usage-based pricing models.
  • Product and price limits: You can configure the pricing table to display a maximum of four products, with up to three prices per product. You can only configure three unique pricing intervals across all products.
  • Account creation: The pricing table call-to-action takes customers directly to checkout. It doesn’t currently support adding an intermediate step (for example, asking the customer to create an account on your website before checking out).
  • Rate limit: The pricing table has a rate limit of up to 50 read operations per second. If you have multiple pricing tables, the rate limit is shared.
  • Checkout redirect: The pricing table can’t redirect customers to checkout if your website provider sandboxes the embed code in an iframe without the allow-top-navigation attribute enabled. Contact your website provider to enable this setting.
  • Testing the pricing table locally: The pricing table requires a website domain to render. To test the pricing table locally, run a local HTTP server to host your website’s index.html file over the localhost domain. To run a local HTTP server, use Python’s SimpleHTTPServer or the http-server npm module.
  • Connect: The pricing table isn’t designed to work with Connect and doesn’t support features like a platform collecting fees.
このページはお役に立ちましたか。
はいいいえ