SaaS ビジネスのための埋め込み可能な料金表
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 であり、以下を行えます。
- 料金情報を表示し、顧客を構築済みの決済フローに移動します。決済フローでは Stripe Checkout を使用して購入が完了されます。
- 定額料金、ユーザー毎、段階制料金、無料トライアルなどの一般的なサブスクリプションのビジネスモデルに対応します。
- コードを記述せずに、ダッシュボードで直接、商品と価格の情報を設定、カスタマイズ、更新できます。
- 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 つまで) 追加します。必要に応じて無料トライアルを含めます。
- 表示設定でデザインを調整します。特定の商品を強調表示して、言語、カラー、フォント、ボタンのデザインをカスタマイズできます。
- 続けるをクリックして決済の設定を行います。決済ページで顧客に表示される項目と、購入に成功した後で確認ページを表示するか、顧客をサイトにリダイレクトするかをカスタマイズします。
- 続けるをクリックして、カスタマーポータルを設定します。
- コードをコピーするをクリックして生成されたコードをコピーし、ウェブサイトに埋め込みます。
料金表をカスタマイズする
決済設定を構成する
料金表の埋め込み
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.html
ページに script
タグを組み込んで <stripe-pricing-table>
コンポーネントをマウントします。
注意
料金表はアカウントの公開可能な API キーを使用します。API キーを取り消す場合は、埋め込みコードを新しい公開可能な API キーで更新する必要があります。
サブスクリプションを追跡する
顧客がサブスクリプションを購入すると、それがダッシュボードのサブスクリプションページに表示されます。
Stripe API を使用してフルフィルメントを処理する
料金表コンポーネントは、Stripe Checkout を使用して、構築済みのオンライン決済ページを表示します。Checkout を使用して支払いが完了すると、フルフィルメントと消し込みに使用できる checkout.session.completed
Webhook が Stripe から送信されます。口座引き落としや店舗支払いのように、支払い確定までに 2 ~ 14 日かかる決済手段を有効化する場合、必ず追加の Webhook をリッスンします。詳細については、顧客の支払い後に注文のフルフィルメントを実行するためのガイドをご覧ください。
<stripe-pricing-table>
ウェブコンポーネントは、client-reference-id
プロパティの設定をサポートしています。プロパティを設定すると、料金表はお客様の内部システムで Checkout セッションを照合できるように、プロパティを Checkout セッションの client_reference_id
属性に渡します。これには、認証済みユーザー ID または類似の文字列を設定できます。client-reference-id
は、英数字、ダッシュ、アンダースコアで構成され、最大 200 文字までの任意の値を指定することができます。無効な値は通知なく破棄され、料金表は引き続き正常に機能します。
注意
料金表はウェブサイトに埋め込まれ、誰でもアクセスできるため、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 種類の固有の料金間隔は全商品に対してのみ設定できます。
- アカウント作成: 料金表での行動喚起により、顧客を決済画面に直接誘導できます。現時点では、中間ステップを追加することはできません (決済前にウェブサイトでアカウント作成するよう顧客に求めるなど)。
- レート制限: 料金表には 1 秒当たり最大 50 件の読み込み操作というレート制限があります。料金表が複数ある場合、レート制限は共有されます。
- Checkout リダイレクト: 料金表では、ウェブサイトプロバイダーが、
allow-top-navigation
属性を有効にせずに埋め込みコードを iframe にサンドボックス化している場合には、顧客をチェックアウトにリダイレクトすることはできません。この設定を有効にするには、ウェブサイトプロバイダーにお問い合わせください。 - 料金表をローカルでテストする: 料金表を表示するためには Web サイトのドメインが必要です。料金表をローカルでテストするには、ローカル HTTP サーバーを実行し、
localhost
ドメインで Web サイトのindex.html
ファイルをホストします。ローカル HTTP サーバーを実行するには、Python のSimpleHTTPServer
または http-server npm モジュールを使用します。
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.