DEV Community

Cover image for Using the embeddable Pricing Table to build a pricing page
CJ Avilla for Stripe

Posted on

Using the embeddable Pricing Table to build a pricing page

What you’ll learn

In this episode, you'll learn about the brand new embeddable pricing table. Now you can configure a pricing page directly from the Stripe Dashboard, copy a snippet and paste it into any site that supports HTML embeds. Building a SaaS app has never been easier. We'll look at a few no-code and low-code examples, then dive deeper to see a full integration with a Ruby on Rails application.

Topics:
(00:53) Review and update Products and Prices
(01:12) Update the feature list for Product
(02:33) Create a pricing table
(05:50) Copy the embeddable widget into codepen, bubble, and typedream
(07:33) Integrate the pricing table with Ruby on Rails
(09:33) Associate pricing table with current user using client-reference-id
(11:17) Review webhook automations
(13:37) Integrate the customer portal

Who this video is for

This video guide is primarily for developers new to Stripe, but developers familiar with Stripe might learn some new things as well. This is a great video for learning how to create a pricing page using the embeddable pricing table.

How to follow along

If you want to work alongside the video, you’ll need a Stripe account and a Ruby on Rails environment to work in.

Resources

What to watch next

Stay connected

You can stay up to date with Stripe Developer updates in a few ways:

Top comments (3)

Collapse
 
boarder22lb profile image
boarder22lb

I see the stripe pricing table goes automatically to monthly/yearly. Is it possible to switch this and have
Product one (Basic/Advanced) and then show
Basic: monthly / bi-yearly / yearly subscription
Advanced (Seller): with the same?

The idea is that are two seperate "niches" for the product. 1 for those who want to leaern how to use the products and second are sellers. The thing is I cannot highlight "yearly" for basic "user".

Thanks.

Collapse
 
jeremyrajan profile image
Jeremy Rajan

Great Article CJ!

If you would like to have more dedicated pricing table generators with stripe built-in integrations checkout planprice.io :).

Collapse
 
alligatore3 profile image
Mattia Zanella

Hey CJ, nice tutorial!

Have you ever tried by the way to implement also a color theme change (classic dark-light mode) with the web component ?

<stripe-pricing-table>
Enter fullscreen mode Exit fullscreen mode