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

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

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

- *料金情報* (The pricing model consists of the products or services you sell, how much they cost, what currency you accept for payments, and the service period to charge (for subscriptions). To build the pricing model, you use Products—what you sell—and Prices—how much and how often to charge for your products)を表示し、顧客を構築済みの決済フローに移動します。決済フローでは [Stripe Checkout](https://docs.stripe.com/payments/checkout.md) を使用して購入が完了します。
- [定額](https://docs.stripe.com/products-prices/pricing-models.md#flat-rate)、[ユーザー毎](https://docs.stripe.com/products-prices/pricing-models.md#per-seat)、[段階制料金体系](https://docs.stripe.com/products-prices/pricing-models.md#tiered-pricing)、無料トライアルなどの一般的なサブスクリプションビジネスモデルをサポートしています。
- コードを記述せずに、ダッシュボードで直接、商品と価格の情報を設定、カスタマイズ、更新できます。
- `<script>` タグとウェブコンポーネントを使用して、ウェブサイトに埋め込みます。Stripe が自動的にタグを生成するので、それをコピーしてウェブサイトのコードに貼り付けます。

以下の図は、顧客が料金表を表示してから決済フローを完了するまでのプロセスをまとめたものです。
料金表 (See full diagram at https://docs.stripe.com/payments/checkout/pricing-table)
## 料金表を作成する

1. ダッシュボードで、**商品カタログ** > [価格表](https://dashboard.stripe.com/pricing-tables)に移動します。
1. **+ 料金表を作成**をクリックします。
1. 顧客に関連する商品を追加します (価格帯ごとに最大 4 つ)。必要に応じて、無料トライアルを追加してください。
1. **表示設定**でデザインを調整します。商品を選択し、言語、色、フォント、ボタンデザインをカスタマイズしたら、**続行**をクリックします。
1. 収集する顧客情報、顧客に提示するオプション、購入後のアクション (購入完了後に確認ページを表示するか、または顧客をサイトにリダイレクトするか) を選択して、**支払い設定**を構成します。
   > #### 最大数量を確認する
   > 
   > デフォルトの最大値 (99) を超える数量に対応している段階制料金の場合は、 **顧客が数量を調整できるようにする**プロパティをオンにし、それに応じて**最大**値を増やします。最大数量を超える段階制料金のオプションは、セレクターに表示されません。
1. **続行**をクリックして[カスタマーポータル](https://docs.stripe.com/no-code/customer-portal.md)を設定します。
1. **コードをコピー**をクリックして、生成されたコードをコピーし、ウェブサイトに埋め込みます。

## 料金表を埋め込む

料金表を作成すると、Stripe は `<script>` タグと `<stripe-pricing-table>` ウェブコンポーネントで構成される埋め込みコードを自動的に返します。**コードをコピー**ボタンをクリックしてコードをコピーし、ウェブサイトに貼り付けます。

HTML を使用している場合は、埋め込みコードを HTML に貼り付けます。React を使用している場合は、`index.html` ページに `script` タグを含めて、`<stripe-pricing-table>` コンポーネントをマウントします。

> 料金表には、アカウントの[公開 API キー](https://docs.stripe.com/keys.md)が使用されます。API キーを取り消す場合は、新しい公開 API キーで埋め込みコードを更新する必要があります。

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"
  >
  </stripe-pricing-table>
</body>
```

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

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

### 商品のマーケティング機能を追加する (Optional)

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

API を使用して商品を作成または更新するときに、マーケティング機能を追加することもできます。

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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. **支払い設定**セクションで**カスタムフィールドを追加**をクリックします。
1. 追加するフィールドタイプを選択します。
1. フィールドのラベルを入力します。
1. (オプション) 必要に応じて、フィールドにマークを付けることができます。

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

カスタムフィールドは、支払い完了後に [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) イベントでも送信されます。[イベントの送信先](https://docs.stripe.com/event-destinations.md)を登録して、エンドポイントでイベントを受信します。

### 現地通貨で表示する (Optional)

[多通貨価格](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) を設定することで、料金表または決済フローに顧客の現地通貨で価格を自動的に表示します。[customer-email](https://docs.stripe.com/payments/checkout/pricing-table.md#customer-email) 属性を使用して、料金表と決済ページがさまざまな国の顧客に対してどのように表示されるかをテストします。

`Stripe-pricing-table`で、[customer_email](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-customer_email)プロパティーを設定し、メールのローカル部分に`+location_XX`という形式のサフィックスを含めます。`XX`は、有効な[2文字のISO国コード](https://www.nationsonline.org/oneworld/country_code_list.htm)である必要があります。

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"customer-email="test+location_FR@email.com"
  >
  </stripe-pricing-table>
</body>
```

料金表に表示される通貨は、`customer_email` で指定した国 (この場合はフランス) のデフォルト通貨と一致します。

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

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

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

### 無料トライアルを設定 (Optional)

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

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

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

トライアル期間が終了する前に、必ず[メールリマインダーを設定](https://docs.stripe.com/payments/checkout/free-trials.md#collect-payment)して、顧客から決済手段の情報を収集するようにしてください。この手続きを行わなかった場合、Stripe はトライアルを一時停止します。

### 顧客のメールを渡す (Optional)

`<stripe-pricing-table>` ウェブコンポーネントは、`customer-email` プロパティの設定をサポートしています。プロパティが設定されると、料金表はそれを Checkout セッションの [customer_email](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-customer_email) 属性に渡し、支払いページにメールアドレスを自動入力します。

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"customer-email="{{CUSTOMER_EMAIL}}"
  >
  </stripe-pricing-table>
</body>
```

### 既存顧客を渡す (Optional)

You can provide an existing customer-configured [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer) or [Customer](https://docs.stripe.com/api/customers.md) to Checkout Sessions created from the pricing table. Create a customer session for a user you’ve already authenticated server-side and return the [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) to the client.

> #### Accounts v2 API を使用した顧客の表現
> 
> Accounts v2 API では、Connect ユーザーには一般提供され、その他の Stripe ユーザーには公開プレビューで提供されます。Accounts v2 プレビューの一部である場合は、コードで[プレビューバージョン](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning)を指定する必要があります。
> 
> Accounts v2 プレビューへのアクセスをリクエストするには、
> 
> ほとんどのユースケースでは、[Customer](https://docs.stripe.com/api/customers.md) オブジェクトを使用するのではなく、[顧客を顧客設定の Account オブジェクトとしてモデル化する](https://docs.stripe.com/connect/use-accounts-as-customers.md)ことをお勧めします。

#### Accounts v2

```curl
curl https://api.stripe.com/v1/customer_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "components[pricing_table][enabled]=true"
```

#### Customers v1

```curl
curl https://api.stripe.com/v1/customer_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "components[pricing_table][enabled]=true"
```

`<stripe-pricing-table>` ウェブコンポーネントの `customer-session-client-secret` 属性を顧客セッションの [client_secret](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-client_secret) に設定します。

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"customer-session-client-secret="{{CLIENT_SECRET}}"
  >
  </stripe-pricing-table>
</body>
```

#### 顧客の client secret の有効期限

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

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

## 料金表を更新する

料金表は、ダッシュボードの詳細ページから更新できます。**商品カタログ** ページで、[価格表タブ](https://dashboard.stripe.com/pricing-tables)を選択し、編集する価格表を見つけて選択します。

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

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

顧客がサブスクリプションを購入すると、ダッシュボードの[サブスクリプションページ](https://dashboard.stripe.com/subscriptions)にその情報が表示されます。

### Stripe API でフルフィルメントを処理する

料金表コンポーネントは、Stripe Checkout を介して、事前構築済みのオンライン決済ページを表示します。Checkout を介して支払いが完了すると、Stripe は [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) イベントを送信します。[イベントの送信先](https://docs.stripe.com/event-destinations.md)を登録してエンドポイントでイベントを受信し、フルフィルメントと照合を処理できます。詳しくは、[Checkout フルフィルメントガイド](https://docs.stripe.com/checkout/fulfillment.md)をご覧ください。

`<stripe-pricing-table>` ウェブコンポーネントは、`client-reference-id` プロパティの設定をサポートしています。プロパティが設定されると、料金表から Checkout セッションの [client_reference_id](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_reference_id) 属性に渡され、Checkout セッションと内部システムの照合に使用されます。これは、認証済みユーザー ID または類似のストリングにすることができます。`client-reference-id` は、英数字、ダッシュ、またはアンダースコアで構成され、最大 200 文字の任意の値にすることが可能です。無効な値は通知なしに削除され、料金表は引き続き正常に機能します。

> 料金表は Web サイトに組込まれ、誰でもアクセスできるため、`client-reference-id`にパスワードや API キーなどの機密情報が含まれていないことを確認してください。

#### HTML

```html
<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="<<YOUR_PUBLISHABLE_KEY>>"client-reference-id="{{CLIENT_REFERENCE_ID}}"
  >
  </stripe-pricing-table>
</body>
```

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

すでにサブスクリプションに加入している顧客を、*カスタマーポータル* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details)や、サブスクリプションを管理しているウェブサイトにリダイレクトすることができます。[顧客のサブスクリプションを 1 つに制限する](https://docs.stripe.com/payments/checkout/limit-subscriptions.md)方法については、こちらのページをご覧ください。

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

*カスタマーポータル* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details)へのリンクを共有します。顧客はメールアドレスでログインして、サブスクリプションの管理や決済手段の更新などを行うことができます。[カスタマーポータルリンク](https://docs.stripe.com/customer-management/activate-no-code-customer-portal.md)を作成して共有する方法については、こちらのページをご覧ください。

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

*コンテンツセキュリティポリシー* (Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks)を導入している場合、料金表に必要なポリシーディレクティブは次のとおりです。

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

## 制限事項

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