[Tutorial] Build SaaS product Stripe Checkout on Webflow

Hi everyone,

I recently built a Stripe checkout for a SaaS product that needs to combime “flat fee” with “other small feature fees” and was struggling a bit because most people use Standard pricing model.

Then I found a solution for it: create 2 products both using Standard pricing model on Stripe and then combine the 2 pricing model on Payment Link section.

As I got a lot of help from this Community, I also want to contribute a bit to everyone who is new to these tools. I will show you how to do it in the following steps!

(1) Set up Flat Fee:
Log into Stripe Account → go to Product → Add Product
You can add Product information (your pricing plan, image, ect), and Price information.
Choose Standard pricing model and set your price and other details

(2) Set up unit Fee:
Repeat the above steps

(3) Combine them in Payment Links:
Add New payment link → Select both products you created:

  • Flat Fee product: Set Quantity to “1”
  • Unit Fee product: Set Quantity to “1” and check “Let customers adjust quantity” and then edit the maximum if needed.

Moreover, in this payment page, you can choose whether you want to include a free trial, add custom fields or ask customers to accept your terms

(4) Copy the url to your Webflow button

(5) Confirmation Page:
If you want to use Stripe’s confirmation page, just check “show confirmation page” and you can tweak the message if you want.

If you want to redirect customers to your own confirmation page on Webflow, choose “Dont show confirmation page” and paste link.

(6) Additional resources:

  1. @saravssantiago 's post helped me a lot:
    [TUTORIAL] STRIPE CHECKOUT - I made it work!
  2. Pricing table templates: Best Pricing Table Websites | Free Examples & Designs - Webflow