サブスクリプションの埋め込み可能な料金表
ウェブサイトにサブスクリプションの料金表を表示し、顧客を Stripe Checkout に直接誘導します。
Stripe ダッシュボードを使用して、顧客がさまざまなサブスクリプション料金を確認できる料金表を作成します。料金表を作成または埋め込むためにカスタムコードを記述する必要はありません。このガイドでは、次の方法について説明します。
- Stripe ダッシュボードを使用して UI コンポーネントを設定する方法
- 生成されたコードをダッシュボードからコピーする方法
- ウェブサイトにコードを埋め込んで顧客に価格情報を表示し、顧客を決済ページに誘導する方法
概要
ウェブサイトに料金表を埋め込んで価格情報を表示し、顧客を決済フローに誘導します。
料金表は埋め込み可能な UI で、以下の機能を備えています。
- 価格情報を表示し、事前構築済みの決済フローに顧客を誘導します。決済フローでは、Stripe Checkout を介して購入を完了します。
- 定額料金、ユーザー単位、段階制料金、無料トライアルなどの一般的なサブスクリプションビジネスモデルに対応しています。
- コードを記述することなく、ダッシュボードで直接商品と価格の情報を設定、カスタマイズ、更新できます。
<script>タグとウェブコンポーネントを使用してウェブサイトに埋め込みます。Stripe によってタグが自動的に生成されます。タグをコピーしてウェブサイトのコードに貼り付けます。
以下の図は、顧客が料金表を表示してから決済フローを完了するまでのプロセスをまとめたものです。
料金表を作成
- ダッシュボードで、商品カタログ > 価格表に移動します。
- + 料金表を作成をクリックします。
- 顧客に関連する商品を追加します (価格帯ごとに最大 4 つ)。必要に応じて、無料トライアルを追加してください。
- 表示設定でデザインを調整します。商品を選択し、言語、色、フォント、ボタンデザインをカスタマイズしたら、続行をクリックします。
- 収集する顧客情報、顧客に提示するオプション、購入後のアクション (購入完了後に確認ページを表示するか、または顧客をサイトにリダイレクトするか) を選択して、支払い設定を構成します。
最大数量を確認する
デフォルトの最大値 (99) を超える数量に対応している段階制料金の場合は、 顧客が数量を調整できるようにするプロパティをオンにし、それに応じて最大値を増やします。最大数量を超える段階制料金のオプションは、セレクターに表示されません。
- 続行をクリックしてカスタマーポータルを設定します。
- コードをコピーをクリックして、生成されたコードをコピーし、ウェブサイトに埋め込みます。
料金表をカスタマイズする
支払い設定を構成する
料金表を埋め込む
料金表を作成すると、Stripe は <script> タグと <stripe-pricing-table> ウェブコンポーネントで構成される埋め込みコードを自動的に返します。コードをコピーボタンをクリックしてコードをコピーし、ウェブサイトに貼り付けます。
料金表のコードをコピーして、ウェブサイトに埋め込みます。
HTML を使用している場合は、埋め込みコードを HTML に貼り付けます。React を使用している場合は、index. ページに script タグを含めて、<stripe-pricing-table> コンポーネントをマウントします。
注意
料金表には、アカウントの公開 API キーが使用されます。API キーを取り消す場合は、新しい公開 API キーで埋め込みコードを更新する必要があります。
サブスクリプションを追跡する
顧客がサブスクリプションを購入すると、ダッシュボードのサブスクリプションページにその情報が表示されます。
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 文字の任意の値にすることが可能です。無効な値は通知なしに削除され、料金表は引き続き正常に機能します。
注意
料金表はウェブサイトに埋め込まれており、誰でもアクセスできる性質を持ちます。パスワードや API キーなどの機密情報やシークレットが client-reference-id に含まれていないことを確認してください。
制限事項
- ビジネスモデル: 料金表は、定額料金、ユーザー単位、段階制料金、トライアルなどの一般的なサブスクリプションビジネスモデルに対応しています。その他の高度な料金モデルはサポートされていません。
- 商品と価格の制限: 最大 4 つの商品 (商品 1 つにつき最大 3 通りの価格) を表示するように料金表を設定できます。すべての商品で固有の価格帯を 3 つのみ設定することが可能です。
- アカウント作成: 料金表の行動喚起により、顧客は直接決済フローに誘導されます。現在、中間ステップの追加 (たとえば、決済前にウェブサイトでアカウントを作成するよう顧客に要求するなどのアクション) はサポートされていません。
- レート制限: 料金表には、読み取り操作のレート制限 (毎秒最大 50 回) が適用されます。料金表が複数ある場合、同じ設定のレート制限が共有されます。
- Checkout リダイレクト: ウェブサイトプロバイダーが
allow-top-navigation属性を有効化することなく iframe の埋め込みコードをサンドボックス化している場合、料金表は顧客を決済フローにリダイレクトしません。この設定を有効にする場合は、ウェブサイトプロバイダーにお問い合わせください。 - 料金表をローカルでテストする: 料金表を表示するには、ウェブサイトのドメインが必要です。料金表をローカルでテストするには、ローカルの HTTP サーバーを実行して、
localhostドメイン経由でウェブサイトのindex.ファイルをホストします。ローカル HTTP サーバーを実行するには、Python の SimpleHTTPServer または http-server npm モジュールを使用します。html - Connect: 料金表は Connect と連携するようには設計されておらず、またプラットフォームによる手数料徴収などの機能もサポートしていません。
顧客のサブスクリプションを 1 つに制限する
すでにサブスクリプションに加入している顧客を、カスタマーポータルや、サブスクリプションを管理しているウェブサイトにリダイレクトすることができます。顧客のサブスクリプションを 1 つに制限する方法については、こちらのページをご覧ください。