How to Connect Stripe Checkout to Webflow

API Connector Add-On for Google Sheets

Check out my API Connector Add-on to easily connect and pull data from thousands of platforms (e.g. Shopify, Harvest, Mailchimp, ActiveCampaign, VWO, YouTube, etc.) directly into Google Sheets.

Note: a few reports below say that the Stripe button at the end doesn’t reliably take people to the Stripe checkout page. I’ll update this if I find out why. Sorry for the inconvenience.

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

5 thoughts on “How to Connect Stripe Checkout to Webflow”

  1. Thanks so much for this guide! Helped a lot.

    Unfortunately it also doesn’t work for me. The code is embedded and I can customize the styling. When I click the button on the live website, nothing happens.

    Any idea on how to solve that?

    Reply
    • haha, it seems like it didn’t help at all, since it didn’t end up working for you. Very sorry about that. I just updated the post to note that the process might not work after all.

      Unfortunately, I don’t actually know enough about Webflow to help you troubleshoot, since my own site uses WordPress… I was just helping a friend that day and recorded the steps we took to make the Stripe integration work.

      Is there any way you could check with Webflow’s support and ask them how to integrate Stripe?

      Reply

Leave a Comment