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

メモ

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

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

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

Stripe ダッシュボードを使用して、埋め込み可能な料金表を作成し、以下を実行できます。

  • 料金情報を表示し、顧客を構築済みの決済フローに移動します。決済フローでは Stripe Checkout を使用して購入が完了します。
  • 定額、ユーザー毎、段階制料金体系、無料トライアルなどの一般的なサブスクリプションビジネスモデルをサポートしています。
  • コードを記述せずに、ダッシュボードで直接、商品と価格の情報を設定、カスタマイズ、更新できます。
  • 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.

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

料金表を作成する

  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>

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

オプションで、料金表をカスタマイズできます。

商品のマーケティング機能を追加する 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"

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

料金表には、任意の URL にリダイレクトされるカスタムの行動喚起を設定できます。いずれかの商品にカスタムの料金体系やハイタッチ営業プロセスがある場合、これを利用できます。カスタムの行動喚起ボタンを設定できるのは 1 つの商品のみです。

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 と顧客のメールアドレスが設定されます。{CUSTOMER_EMAIL} パラメーターを機能させるには、顧客のメールアドレスを渡す必要があります。

カスタムフィールドを追加する Optional

料金表の商品と価格のそれぞれにカスタムフィールドを追加すると、顧客から追加情報を収集できます。この情報は、決済完了後に使用できるようになり、購入のフルフィルメントに利用できます。

注意

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

次のタイプのフィールドを追加できます。

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

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

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

現地通貨で表示する 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 で指定した国 (この場合はフランス) のデフォルト通貨と一致します。

購入後の体験をカスタマイズする Optional

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

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

無料トライアルを設定 Optional

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

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

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

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

顧客のメールを渡す 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>

既存顧客を渡す 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 の有効期限

30 分 以内に、料金表に Client Secret を含める必要があります。料金表を表示した後、顧客セッションの期限が切れる 30 分以内に決済を完了する必要があります。顧客セッションの期限が切れた決済セッションを作成すると、Client Secret は破棄され、顧客に関連付けられていない決済セッションが作成されます。

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

料金表を更新する

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

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

サブスクリプションの管理

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

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 つに制限する方法については、こちらのページをご覧ください。

顧客がサブスクリプションを管理できるようにする

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

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

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

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

制限事項

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