Sign in
An image of the Stripe logo
Create account
Sign in
Home
Payments
Business operations
Financial services
Developer tools
No-code
All products
Home
Payments
Business operations
Home
Payments
Business operations
Financial services
Developer tools
Support
Overview
Online payments
Products and prices
Invoicing
Subscriptions
    Overview
    How subscriptions work
    Recurring pricing models
    Get started
    Quickstart
    Integrate a SaaS business
    Embed a pricing table
    Design an integration
    Build a subscriptions integration
    Migrate subscriptions to Stripe
    Billing resources
    Coupons
    Customers
    Subscriptions
    Subscription invoices
    Manage subscriptions
    Change subscriptions
    Usage-based billing
    Use trial periods
    Set payment methods
    Subscriptions with multiple products
    Set subscription quantities
    Subscription webhooks
    Schedule subscriptions
    Tax
    Sales-led B2B billing
    Integrate with Salesforce
    Manage recurring revenue
    Revenue recognition
    Revenue recovery
    Subscription metrics
    Customer management
    Overview
    Set up the the no-code customer portal
    Set up the customer portal with the API
    Configure the customer portal
    Testing
    Test your integration
    Test clocks
    Strong Customer Authentication (SCA)
    Invoices API updates
Quotes
In-person payments
Multiparty payments
After the payment
Add payment methods
Payment Links
Stripe Checkout
Stripe Elements
About the APIs
Regulation support
Implementation guides
Testing
Billing
·
HomePaymentsSubscriptions

Embeddable pricing table for SaaS businesses

Display a 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 checkout 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

In the Dashboard, go to Products > pricing tables > + Create pricing table. There, you select:

  • Up to four products per pricing interval, with a custom name, description, pricing, and features for each.
  • A highlight option to attract customers to your preferred pricing plan.
  • Brand colors, button colors, button shapes, and fonts to match your website.
  • A language to match your website’s language.
step 1 of creating a pricing table

Customize your pricing table

The next step is customizing checkout.

Step 2 of creating a pricing table

Choose your 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 detail 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.

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
<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 webhook that you can use for fulfillment and reconciliation. Make sure to listen to additional webhooks if you enable payment methods like bank debits or vouchers, which can take 2-14 days to confirm the payment. For more information, see the guide for fulfilling orders after a customer pays.

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.

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

pricing-page.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=
"pk_test_TYooMQauvdEDq54NiTphI7jx"
client-reference-id="{{CLIENT_REFERENCE_ID}}" >
</stripe-pricing-table> </body>

OptionalAdd product features

OptionalAdd a custom call-to-action

OptionalPass the customer email

OptionalCustomize the post-purchase experience

OptionalUpdate pricing table

OptionalConfigure free trials

OptionalContent Security Policy

OptionalLet customers manage their subscriptions
No code

OptionalPresent local currencies

OptionalAdd custom fields

Limitations

  • 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.
  • 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.
Was this page helpful?
Questions? Contact us.
Watch our developer tutorials.
Check out our product changelog.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Overview
Create pricing table
Embed pricing table
Track subscriptions
Add product features
Add a custom call-to-action
Pass the customer email
Customize the post-purchase experience
Update pricing table
Configure free trials
Content Security Policy
Let customers manage their subscriptions
Present local currencies
Add custom fields
Limitations
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Login to your Stripe account and press Control + Backtick on your keyboard to start managing your Stripe resources in test mode. - View supported Stripe commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g. )
The Stripe Shell is best experienced on desktop.
$