How to use stripe.js in Webflow

At the time of writing, Webflow eCommerce was always below its potential. A forgotten child. This post attempts to revive Webflow's eCommerce potential with full use of Stripe's javascript library. This should enable fully custom eCommerce experiences that are beautiful, secure and responsive, all on the Webflow CMS plan. Thanks to Stripe's pricing model, this is effectively the most affordable and scalable eCommerce solution on the market. All code is rendered client-side or via the Stripe server. No backends are required (which is usually difficult with Webflow).

(Still under development as of March 15th 2023)

‍

At the time of writing, Webflow eCommerce was always way below its potential. A forgotten child.

This post attempts to revive Webflow's eCommerce potential with full use of Stripe's javascript library.

‍
This should enable fully custom eCommerce experiences that are beautiful, secure and responsive, all on the Webflow CMS plan.

Thanks to Stripe's pricing model, this is effectively the most affordable and scalable eCommerce solution on the market.

‍
All code is rendered client-side or via the Stripe server. No backends are required (which is usually difficult with Webflow).

‍

Step 1:

‍

<!-- Start of stripe script -->
<script src='https://js.stripe.com/v3'></script>
<script>
  const STRIPE = Stripe('pk_live_xxx_your_public_stripe_key_here_xxx')
</script>
<!-- End of stripe script -->

Add this snippet to the Header Code of your project settings. <span style="opacity: 50%;">(To increase your websites loading speed, it is possible to insert this snippet into the Footer Code of your project settings)</span>

‍

‍

Step 2:

‍

‍

‍

Step 3:

‍

Set up a checkout button with these attributes:

Name: ***bmg_stripe***

Value: ***button***

‍

Step 4:

Write your own script or use my example:

‍

<script>
var Webflow = Webflow || []
Webflow.push(function () // Run all the code after the site is fully loaded.  
{

/* Start of stripe code */

// Global elements
const $_CHECKOUT_BUTTON = $('[bmg_stripe = "button"]')

// Main function
$_CHECKOUT_BUTTON.click(function()
{
    STRIPE.redirectToCheckout(
    {
        lineItems:
        [{
            price: 'price_xxx_your_price_id_here_xxx', // <-- Your key here
            quantity: 1
        }],
        mode: 'payment',
        successUrl: 'https://www.google.com/search?q=success',
        cancelUrl: 'https://www.google.com/search?q=cancel'
    })
})

/* End of stripe code */
  
}) // The end.
</script>

<span style="opacity: 50%;">(Paste this code into the embed of your choice on the page where you want to use it)</span>

‍