埋め込み可能な料金表を作成する
Web サイトに料金表を表示し、顧客を Stripe Checkout に直接移動します。
You can use the Stripe Dashboard to create a table that displays different subscription pricing levels to your customers. You don’t need to write any custom code to create or embed a pricing table. This guide describes how to:
- Use the Stripe Dashboard to configure the UI component
- Copy the generated code from the Dashboard
- Embed the code on your website to show your customers pricing information and take them to a checkout page
概要
料金表をウェブサイトに埋め込み、料金の詳細を表示して、顧客の購入を促進します。
料金表は埋め込み可能な UI であり、以下を行えます。
- Displays pricing information and takes customers to a prebuilt checkout flow. The checkout flow uses Stripe Checkout to complete the purchase.
- Supports common subscription business models like flat-rate, per-seat, tiered pricing, and free trials.
- コードを記述せずに、ダッシュボードで直接、商品と価格の情報を設定、カスタマイズ、更新できます。
- Embeds 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.
以下の図では、顧客が料金表を閲覧してから決済を完了するまでの流れをまとめています。
料金表を作成する
- ダッシュボードで、その他 > 商品カタログ > 料金表に移動します。
- +料金表を作成をクリックします。
- 顧客に関連する商品を (料金期間ごとに 4 つまで) 追加します。必要に応じて無料トライアルを含めます。
- Adjust the look and feel in Display settings. Highlight a specific product and customize the language, colors, font, and button design, then click Continue.
- Configure Payment settings to select the customer information to collect, options to present to the customer, and whether to display a confirmation page or redirect customers back to your site after a successful purchase.
Confirm maximum quantity
If you have tiered pricing that supports quantities greater than the default maximum of 99, check the Let customers adjust quantity property and increase the Max value accordingly. Tiered pricing options for quantities above the maximum don’t appear in the selector.
- 続行をクリックして、カスタマーポータルを設定します。
- コードをコピーをクリックして生成されたコードをコピーし、ウェブサイトに埋め込みます。
料金表をカスタマイズする
決済設定を構成する
料金表の埋め込み
After creating a pricing table, Stripe automatically returns an embed code composed of a <script> tag and a <stripe-pricing-table> web component. Click the Copy code button to copy the code and paste it into your website.
料金表のコードをコピーして、ウェブサイトに埋め込みます。
HTML を使用している場合は、HTML に埋め込みコードを貼り付けます。React を使用している場合は、index. ページに script タグを組み込んで <stripe-pricing-table> コンポーネントをマウントします。
注意
The pricing table uses your account’s publishable API key. If you revoke the API key, you need to update the embed code with your new publishable API key.
サブスクリプションを追跡する
顧客がサブスクリプションを購入すると、それがダッシュボードのサブスクリプションページに表示されます。
Stripe API を使用してフルフィルメントを処理する
The pricing table component uses Stripe Checkout to render a prebuilt, hosted payment page. When a payment is completed using Checkout, Stripe sends the checkout.session.completed event. Register an event destination to receive the event at your endpoint to process fulfillment and reconciliation. See the Checkout fulfillment guide for more details.
The <stripe-pricing-table> web component supports setting the client-reference-id property. When the property is set, the pricing table passes it to the Checkout Session’s client_reference_id attribute to help you reconcile the Checkout Session with your internal system. This can be an authenticated user ID or a similar string. client-reference-id can be composed of alphanumeric characters, dashes, or underscores, and be any value up to 200 characters. Invalid values are silently dropped and your pricing table will continue to work as expected.
注意
料金表はウェブサイトに埋め込まれ、誰でもアクセスできるため、client-reference-id にパスワードや API キーなどの機密情報が含まれていないことを確認してください。
制限
- Business models—The pricing table supports common subscription business models like flat-rate, per-seat, tiered pricing, and trials. Other advanced pricing models aren’t supported.
- 商品と料金の制限: 料金表には最大 4 つまでの商品が表示され、商品ごとに最大 3 種類まで料金を設定できます。3 種類の固有の料金間隔は全商品に対してのみ設定できます。
- アカウント作成: 料金表での行動喚起により、顧客を決済画面に直接誘導できます。現時点では、中間ステップを追加することはできません (決済前にウェブサイトでアカウント作成するよう顧客に求めるなど)。
- 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 リダイレクト: 料金表では、ウェブサイトプロバイダーが、
allow-top-navigation属性を有効にせずに埋め込みコードを iframe にサンドボックス化している場合には、顧客をチェックアウトにリダイレクトすることはできません。この設定を有効にするには、ウェブサイトプロバイダーにお問い合わせください。 - 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.file over thehtml localhostdomain. To run a local HTTP server, use Python’s SimpleHTTPServer or the http-server npm module.
Limit customers to one subscription
You can redirect customers that already have a subscription to the customer portal or your website to manage their subscription. Learn more about limiting customers to one subscription.