How to Connect Stripe Checkout to Webflow

I was recently helping a friend hook up Stripe to a new Webflow-based subscription ecommerce site, and found that the documentation wasn't particularly straightforward. So, in this guide, I'll walk through the exact steps required to integrate Stripe Checkout with Webflow, without implementing code or using any 3rd party integrations, for one-time payments or subscription products.

❓Much of this guide was inspired by the excellent tutorial at https://forum.webflow.com/t/tutorial-stripe-checkout-i-made-it-work/93238. This guide expands on that post with additional detail and screenshots.

Contents

Step 1: Create Your Plan in Stripe

  1. While logged into Stripe, click Products on the left-hand menu. The exact location of this menu item will vary depending on whether or not you've created products before.
    stripe-webflow-img1
  2. From here, click New to add a new product. Note that if you've already created subscriptions, you'll only get the option to create a new subscription product, and likewise with one-time payment products. If you want to create a product type that you haven't created before, navigate to https://dashboard.stripe.com/products instead.
    stripe-webflow-img2
  3. Give your product a name and click Create product.
    stripe-webflow-img3
  4. If you're creating a subscription product, you'll now be prompted to add a pricing plan. Fill in the name, currency, price, and billing interval, and click Add pricing plan.
    stripe-webflow-img4

Step 2: Get Your Stripe Code

  1. Navigate to https://dashboard.stripe.com/settings/checkout and toggle on the Checkout client-only integration.
    stripe-webflow-img5
  2. You'll be prompted to allow checkout to read product information. Click Allow.
    stripe-webflow-img6
  3. Now, navigate back to https://dashboard.stripe.com/products and click on your new product.
    stripe-webflow-img7
  4. Under the pricing plans section, click the Use with Checkout button
    stripe-webflow-img8
  5. You'll now see a checkout snippet generator. Click the button to copy the snippet to your clipboard.
    stripe-webflow-img9
  6. That's it for Stripe! We can now head over to Webflow.

Step 3: Create your Webflow Element

  1. Now in Webflow, click Add > Elements > Components > Embed from your Webflow project screen.
    stripe-webflow-img10
  2. This will automatically launch the HTML Embed Code Editor
    stripe-webflow-img11
  3. Paste in the code you got from Stripe and click Save & Close
    stripe-webflow-img12

Step 4: Publish your Site

  1. You'll see a block notifying you that "This <script> embed will only appear on the published/exported site"
    stripe-webflow-img13
  2. At the top of your screen, click Publish and choose your destination domain. Click Publish to selected domain.
    stripe-webflow-img15
  3. You should now see your Stripe button visible on your page.
    stripe-webflow-img14
  4. Click the button and you'll be taken to the Stripe-hosted checkout page, where your customers can complete their transactions.
    stripe-webflow-img16

Comments:1

Leave a Reply

Your email address will not be published.