[TUTORIAL] STRIPE CHECKOUT - I made it work!

Hey @erikgoins

I’m looking to do this too! Any news on this? Thanks!

for recurrent payment you simply need to adjust the mode key/pair of the stripe object:

const mode = "subscription";

let stripeObject = {
  lineItems: [{ price: priceID, quantity: 1 }],
  mode: mode,
  successUrl: `https://www.${domain}/success`,
  cancelUrl: `https://www.${domain}/canceled`,
  billingAddressCollection: billingAddress ? "required" : "auto"
};
1 Like

Hi could you please confirm if Stripe Checkout does or does not work on the webflow.io domain name? Thank you!

1 Like

@cosmo, I can confirm Stripe does work with webflow.io subdomains. You simply need to whitelist that domain within your stripe dashboard, on your checkout settings.

1 Like

Mil gracias! llevaba ya un par de horas dándome cabezazos con esto…

Is it possible to have a Webflow form that directs to a Stripe Checkout form after submission?

I’d like to do this (with a multi-step form) and pass along quantity, price ID, and other meta data.

hi @seanpritzkau, unfortunately no you can’t pass webflow form data into a Stripe Checkout page as Stripe Checkout product are generated server-side from your Stripe Dashboard. You can redirect your Webflow form to a predefine product Stripe Checkout page, only you won’t be able to update any Product properties from your Weflow form.

Is there a video tutorial on this? I can’t seem to get it to work.

I followed the instructions from both this forum topic and the official One-time payments with Checkout Client-only integration documentation but my Checkout Buttons in Webflow simply does nothing. I do get an error though. Can someone assist me with this?

I am using a custom domain that is also defined in Stripe, with https, products are created with a price and the code is directly copied from the Stripe dashboard. Basically, there is nothing I have not done from the official instructions but my embed button gets the following error (does nothing when you click it, although I get the hand cursor):

Hello,

It means your event listener can’t access the button as it seems to be null or undefined.
I suspect the id you’re trying to target your var checkoutButton is wrong.
Simply add the price id provided by stripe to the id of your button, and not mix it with the checkout-button name.

EDIT:
to verify your button variable is correct you can log it out like so:
console.log(checkoutButton);
simply add the line above after your variable declaration, then have a look at the console.

2 Likes

Thank you for the quick answer ! I did check it by the console but it said my var was simply null. As I mentioned the code is directly copied from Stripe so I am not sure how I could mess up the id’s. I double-checked once again and the price id is the same. Because of the console log results, it made me think and I fixed it like this:

I made my own button with the correct ID and under that button I added an embedded element with the Stripe JS code so by clicking the button it would trigger the script. Copying the entire snippet from Stripe inside an Embed Element did not work for me at all.

The suggestion to use the log was quite helpful. Cheers!

Hello,

To make your stripe implementation work, you need to add your price id from stripe into your webflow button id within the designer.

Thank you sooooo much for this!!

How do I add Sales Tax and a Discount Code Input?

Would love any help! (Not a developer/coder lol)

Unfortunately, when you implement Stripe Checkout, Client-Only Integration (as in this case), discount codes, and tax rates are not supported.

They have a list of limitations on their site you should be aware of:
Check them out here.

3 Likes

Yep, this is super sad. Also just received an email today:

We’re reaching out to inform you of an upcoming change to Stripe Checkout which may impact your integration.

Starting on May 21, 2021, in order to save a payment method for future use you will be required to include the setup_future_usage argument when creating the Stripe Checkout session. Stripe uses this argument to dynamically optimize your payment flow and facilitate compliance with regional legislation and network rules.

Our records indicate your account has previously charged a payment method saved via a Stripe Checkout session that did not include the setup_future_usage argument. We strongly recommend you review your integration and make any changes before the date above to avoid any disruption.

For more detailed information, please refer this section of the Stripe docs on saving payment method details.

Well that’s great, another limitation of the Client-Only Integration is also that it doesn’t seem to support the “setup_future_usage” argument.

Why someone would use this? Well we charge clients a one-time fee for setup, and then once setup is complete, we put them on a subscription model using the credit card they made the one-time payment with. Now we can no longer do that since we can’t use this argument to allow us to keep their CC details.

Has anyone managed to get around this or know if it’ll eventually be available?

1 Like

Hi @saravssantiago, thank you for such an in depth guide! I have a question about the styling. I see from your reply above where to put the styling code, but I don’t know enough about coding to style the button as I would like. I have an existing button style on my site which I created using the tools in the designer, and I’ve tried adding the class of this existing button to the code in the Embed Code Editor but it just makes the standard Stripe button turn from blue to grey. Do you have any advice? Thank you

I copied the URL of the stripe payment page and pasted that in the redirect URL box in form settings. When they submit the form they are redirected to pay.

Great tutorial. Thanks @saravssantiago !

I know you can’t add coupon code field on client-only integration. Does anyone know how to do it another way?

Thanks!

You’re amazing, thank you for saving me 4+ hours of work! :white_heart:

thx u so so so much for sharing! You save me and for sure a ton of others!