Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Revenue
Platforms and marketplaces
Money management
Developer resources
Overview
Billing
OverviewAbout the Billing APIs
Subscriptions
    Overview
    How subscriptions work
    Get started
    Quickstart
    Plan an integration
    Build an integration
    Use cases
    About subscriptions
    Enable billing mode
    Configure subscription events
    Entitlements
    Subscription invoices
    Subscription schedules
    Recurring pricing models
    Strong Customer Authentication (SCA)
    Set up subscriptions
    Configure collection methods
    Embed a pricing table
    Set billing cycles
    Manage subscriptions
    Migrate subscriptions to Stripe
    Set product or subscription quantities
    Mixed interval subscriptions
    Backdate subscriptions
    Set trial periods
    Handle subscriptions with deferred payment
    Apply coupons
    Modify subscriptions
    Manage subscription payment methods
    Analytics
    Manage subscriptions on iOS
Invoicing
Usage-based billing
Quotes
Customer management
Billing with other products
Revenue recovery
Automations
Test your integration
Tax
Overview
Use Stripe tax
Manage compliance
Reporting
Overview
Select a report
Configure reports
Reports API
Reports for multiple accounts
Revenue recognition
Data
OverviewSchema
Custom reports
Data Pipeline
Data management
HomeRevenueSubscriptions

Embeddable pricing table for subscriptions

Display a subscription pricing table on your website and take customers directly to 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 payment page

Overview

The pricing table is an embedded UI that displays pricing information and takes customers to checkout.

Embed a pricing table on your website to display pricing details and convert customers to checkout.

A pricing table is an embeddable UI that:

  • 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.
  • Lets you configure, customize, and update product and pricing information directly in the Dashboard, without needing to write any code.
  • 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.

The diagram below summarizes how the customer goes from viewing a pricing table to completing checkout.

Create pricing table

  1. In the Dashboard, go to Product catalog > pricing tables.
  2. Click +Create pricing table.
  3. Add products relevant to your customers (up to four per pricing interval). Optionally, include a free trial.
  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.
  5. 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.

  6. Configure the customer portal by clicking Continue.
  7. Click Copy code to copy the generated code and embed it into your website.
Customizing a pricing table

Customize your pricing table

Configure payment settings

Configure payment settings

Embed pricing table

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.

Pricing table details page

Copy the pricing table’s code and embed it on your website.

If you’re using HTML, paste the embed code into the HTML. If you’re using React, include the script tag in your index.html page to mount the <stripe-pricing-table> component.

Caution

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.

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>

Track subscriptions

When a customer purchases a subscription, you’ll see it on the subscriptions page in the Dashboard.

Handle fulfillment with the 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.

Caution

Since the pricing table is embedded on your website and is accessible to anyone, check that client-reference-id doesn’t include sensitive information or secrets, such as passwords or API keys.

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>

OptionalAdd product marketing features

The pricing table can display your products’ marketing features to help your customers decide what to purchase. To add marketing features to a product in your pricing table, go to Additional options > Feature list.

Add product marketing features

Add product marketing features

You can also add marketing features when creating or updating products with the 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"

OptionalAdd a custom call-to-action

The pricing table allows you to configure a product with a custom call-to-action that redirects to any URL. You can use this if you have custom pricing or a high-touch sales process for one of your products.

Click Add product with custom call-to-action button to choose a product and a custom call-to-action, and to set the URL.

Add custom call-to-action

Add custom call-to-action

Custom call-to-action supports these formats:

  • Absolute links, like https://wwww.stripe.com.
  • Relative links like /contact. If you embed your pricing table on wwww.stripe.com/pricing-table, a URL of /contact navigates to wwww.stripe.com/pricing-table/contact.
  • Contact-specific links that use mailto and tel. For example, you can configure the URL to be mailto:email@yourcompany.com or tel:xxx-xxx-xxx.
  • Links that include two variables,{PRODUCT_ID} and {CUSTOMER_EMAIL}. Stripe populates the relevant product ID and the customer email when a customer clicks the call-to-action.

Caution

You can only set one product to have a custom call-to-action button at this time. Ensure that the link you provide is correct. You must pass in the customer email for the {CUSTOMER_EMAIL} parameter to work.

OptionalPass the customer email

The <stripe-pricing-table> web component supports setting the customer-email property. When the property is set, the pricing table passes it to the Checkout Session’s customer_email attribute, automatically entering the email address on the payment page.

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>

OptionalPass an existing customer

You can provide an existing Customer object 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 to the client.

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

Set the customer-session-client-secret attribute on the <stripe-pricing-table> web component to the client_secret from the Customer Session.

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>

Customer client secret expiration

You have 30 minutes to include the client secret in the pricing table. After rendering the pricing table, you have an additional 30 minutes to complete a payment before the customer session expires.

If you create a Checkout Session with an expired customer session, we discard the client secret and create the Checkout Session with no associated customer.

If the customer session expires after Checkout Session creation, but before confirmation, payment confirmation fails.

OptionalCustomize the post-purchase experience

After a successful payment, your customer sees a localized confirmation message thanking them for their purchase. You can customize the confirmation message or redirect to a URL of your choice. To change the confirmation behavior on a pricing table, click the Confirmation page section when creating or updating the pricing table.

If you redirect your customers to your own confirmation page, you can include {CHECKOUT_SESSION_ID} in the redirect URL to dynamically pass the customer’s current Checkout Session ID. This can be helpful if you want to tailor the success message on your website based on the information in the Checkout Session.

OptionalUpdate pricing table

You can update a pricing table from its details page in the Dashboard. On the Product catalog page, select the Pricing tables tab, then find and select the pricing table you want to edit.

On the pricing table details page, click Edit pricing table. You can change which products and prices you display and configure the payment page settings. When you save your changes, Stripe automatically updates the pricing table UI.

OptionalConfigure free trials

To offer a free trial for a price, select Include a free trial and set the length of the trial when you create or edit a pricing table. After customers confirm their payment details, they’re redirected to a page where they can start their trial. The new page is part of a Checkout Session.

Configure a free trial for your products

Configure trials without payment methods

To allow customers to sign up for a subscription without providing their payment method details, select Include a free trial, then click Continue. Next, select Only collect payment method information if required.

Make sure to set up email reminders to collect payment method information from customers before their trial ends. Otherwise, Stripe pauses the trial.

OptionalContent Security Policy

If you’ve deployed a Content Security Policy, the policy directives that pricing table requires are:

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

OptionalLet customers manage their subscriptions
No code

Share a link to your customer portal, where customers can log in with their email to manage subscriptions, update payment methods, and so on. Learn how to create and share your customer portal link.

OptionalPresent local currencies

Automatically display prices in the pricing table and Checkout in your customers’ local currency by configuring Multi-currency prices. Use the customer-email attribute to test how your pricing table and payment page appear to customers in different countries.

In the stripe-pricing-table, set the customer_email property and include a suffix of the form +location_XX in the local part of the email. XX must be a valid two-letter ISO country code.

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>

When you view the pricing table, the currency matches the default currency of the country you specify in the customer_email (in this case, France).

OptionalAdd custom fields

Caution

Don’t use custom fields to collect personal, protected, or sensitive data, or information restricted by law.

You can add custom fields on each of your products and prices in your pricing table to collect additional information from your customers. The information is available after the payment is complete and is useful for fulfilling the purchase. You can add the following types of fields.

TypeDescription
TextUsed to collect freeform text, up to 255 characters.
Numbers onlyUsed to collect only numerical values, up to 255 digits.
DropdownPresents your customers with a list of options to select from. You can add up to 10 options.
  1. Click Add custom fields in the Payment settings section.
  2. Select a type of field to add.
  3. Enter a label for the field.
  4. (Optional) Mark your field as required.

After your customer completes the payment, you can view the fields on the payment details page in the Dashboard.

The custom fields are also sent in the checkout.session.completed event after payment completion. Register an event destination to receive the event at your endpoint.

Limitations

  • Business models—The pricing table supports subscription business models such as flat-rate, per-seat, tiered pricing, and trials. It doesn’t support usage-based pricing models.
  • Product and price limits—You can configure the pricing table to display a maximum of four products, with up to three prices per product. You can only configure three unique pricing intervals across all products.
  • Account creation—The pricing table call-to-action takes customers directly to checkout. It doesn’t currently support adding an intermediate step (for example, asking the customer to create an account on your website before checking out).
  • 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 redirect—The pricing table can’t redirect customers to checkout if your website provider sandboxes the embed code in an iframe without the allow-top-navigation attribute enabled. Contact your website provider to enable this setting.
  • 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.html file over the localhost domain. To run a local HTTP server, use Python’s SimpleHTTPServer or the http-server npm module.
  • Connect—The pricing table isn’t designed to work with Connect and doesn’t support features like a platform collecting fees.

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.

Was this page helpful?
YesNo
  • Need help? Contact Support.
  • Join our early access program.
  • Check out our changelog.
  • Questions? Contact Sales.
  • LLM? Read llms.txt.
  • Powered by Markdoc