[TUTORIAL] STRIPE CHECKOUT - I made it work!

@saravssantiago Hello there.
I’m trying to add product on my website and then pass it in my embed button as parameters. I want to ask if it’s possible or we just have to make plan on stripe?

So I think the issue with styling here is that the Stripe code needs to be changed from

<button
  **style**="button-2"
  id="checkout-button"
  role="link"
>
  Upload
</button>

to

<button
  **class**="button-2"
  id="checkout-button"
  role="link"
>
  Upload
</button>
1 Like

That should work too! I kept style and added my classes inside :slight_smile:

2 Likes

Do you have a read only link to show me how you got Stripe to work? Thanks so much!

Hey…

I thought webflow ecommerce already supported stripe natively no?

What’s this thread about?
Thanks!

@saravssantiago is it possible to add stripe checkout button functionality to a webflow form submission button?

I have a form users need to pay to submit (a job posting form). I would like them to complete the form, then be directed to the payment page. Could I copy the Stripe JS functionality into the page code for the Webflow form button?

1 Like

@saravssantiago

Thanks a lot for an in-depth tutorial! I’ve made the button work and redirect me to the checkout page, but I get an error when trying the Stripe test cards to check if the payment can go through. Once I enter all of the details (correct ones) and submit it, it says that card has been declined and that email is required (which is filled in). Attaching a screenshot as well.

Any help would be appreciated as we really need to nail this down with my client shortly :slight_smile: Thanks!

One word => Wawww

You saved my life :crazy_face:

@saravssantiago will this work even if stripe is not available in my country? thanks.

Hey,

Does anyone know how to enable Google Event Tracking for the HTML Embed for the Stripe Checkout?

My Google Tag Manager is set up correctly and on other places of the website. I have set my google tag manager to trigger on whenever the Embed class is clicked (it’s the only embed class on my site). However, nothing happens.

I can click anywhere around the button (that goes to Stripe) and Google Analytics Realtime shows Activity (since the HTML Embed in its container is larger than the button class i’ve set it to be). But if i click on the button itself, it doesn’t trigger any event.

Any solutions?

EDIT Solved! Set the Click ID in Google Tag Manager to the Stripe Button Checkout ID rather than the ID for the HTML Embed.

3 Likes

I simply cannot get this to work for some reason. Followed all the steps to the letter.
The button shows up but does nothing once published :confused:

has anyone tried this? Can this work with strip checkout?

I am having issues getting this to work. Do you know of any video tutorials?

If you run into the “press button and nothing happens” problem, it may be helpful to double check you’re testing it out on the domain that you’ve enabled within Stripe (unless you add the your-site.webflow.io domain, the button won’t work there)!

You saying the button won’t work with the .webflow.io domain?

Hi everyone! Do I need a Webflow Ecommerce plan to use Stripe Checkout, or can I use a Basic site plan?

This is great. Anyone know how to pass an email from memberstack to stripe checkout using the client code?

@Naitik_Mehta :smiley:

For anyone needing an answer to this:

  1. Follow steps above to create checkout

  2. Edit your Stipe product button snippet to add “customerEmail” listed here

  3. Add a “hidden input” field within an HTML embed and dynamically pull Memberstack member email into that input field (be sure to set the ID of the hidden input field. Example: <input type="hidden" name="Email" id="memberEmail" data-ms-member="email">

  4. Use: customerEmail: document.getElementById("memberEmail").value, under the cancelUrl variable.

Voilà.

Cheers

1 Like

Hi!
Does everyone know is it possible to add recurring payment products from Stripe to Webflow?

Yes. Follow the steps in the tutorial and when creating a product - make it a recurring product.