â–Ľ
Streaming live at 10am (PST)

[TUTORIAL] STRIPE CHECKOUT - I made it work!

Hi everyone!

I was trying for weeks to make Stripe work, considering other platforms and being super disappointed by the lack of help here on Webflow since surely Stripe is important enough!

So, since I made it work (check it out here), I came back to share with you how EASY it is to make it work :slight_smile:

Disclaimer: Stripe is a very comprehensive product, and there is a ton of custom code that can be done. However, I’ll be sharing with you here the 5 min checkout process, not a full-fledged fancy and complex version. It only shows a checkout page, no cart or anything like that.

Let’s do this!


STEP 1. Prepare Stripe

  • Enable Checkout on your Dashboard
  • Create products (one-time payment or subscription)
    The details on how to do this are in Stripe’s guide (steps 1 and 2).

STEP 2. Get the code into Webflow

  1. Get the code that it’s given (step 3 on their guide).
  2. On Webflow, go to the page and area where you want to button to appear and add an Embed element.
  3. On that Embed element, paste the entire code they give you right there.
  4. I’d recommend you Save it now. Then, come back, and on top, you’ll find the Button Style. Go ahead and add your classes there to make the button align with the rest of your site.
  5. Save the code and publish your site (it won’t work on preview mode)

STEP 3. Enable your domain on Stripe
If your domain is not enabled, your button won’t work. Go to Stripe. Click on Settings > Checkout and find the option Domains which should be right on top. Add there your domain and click SAVE.

STEP 4. Make sure you’re using SSL on Webflow
Essentially, checking if you’re using https:// instead of http:// If you don’t:

  1. Go to your Project Settings in Webflow
  2. Go to Hosting and scroll until you find “Advanced Publishing Options” as a title
  3. There, switch on “Enable SSL”
  4. Click on the Save button, and then publish your site again

:partying_face: This should make it work!

If it doesn’t, here some more things to try:

  • Go to your Project Settings, to Custom Code, and delete all the Custom Code (copy it so you won’t lose it!). Publish your site and see if it works now. If this made it work, you’re going to have to add pieces of code back one by one, since one of them might be blocking Stripe for some reason.
  • Are you using your live key on Stripe? On Stripe, go to Developers > API Keys. The Publishable Key Token is the one that should appear on your Webflow embed code snippet. If it is, you’re good here.
  • Not working yet? Go to Stripe. Click on Developers > Log and there, on Filters, select “Success/Failure” and a drop-down will appear. Select “request failures” there, and click on Done. This will show you a list of all the failing requests (i.e. all the times you clicked the button and it didn’t work). Open the last one, and scroll to the bottom. It will tell you there what’s the error and what you can do about it.
  • If all of this fails, go to Stripe’s support page, and start a chat. You’ll have it solved in no time!

:point_right: More things!

  • The checkout page needs a success and an error page. By default, Stripe considers those yourdomain.com/success and yourdomain.com/failure Create those pages on Webflow yourself so it redirects users there.
    A couple of UX tips: when successful, make a cool page that makes them happy they bought this. When a failure, make sure you’re adding a way for them to try again.
  • If you want to edit those URLs, go to the place where you copied the code in Stripe, you’ll have the option to edit the URLs, there. Make sure you edit those on your embed code in Webflow too!
  • The checkout page can’t be really edited since it’s hosted on Stripe. You can only add a logo and change the highlight color. To do this, go to Stripe. Click on Settings > Checkout > Appearance and you’ll get the options there.
  • In that screen, you can send a test email to yourself, to see how it will look like for your users, which I found really nice.
  • Make sure your business details, the ones your customers’ will see, are right. Go to Stripe. Click on Settings > Checkout > Public Information and double-check it all there.
  • In some countries, customer addresses are mandatory data to collect when invoicing someone. To add the address to the form, follow the steps on their guide (it’s the very last step on the page).

This is literally all you have to do to start collecting payments :slight_smile:

The next step would be to hook up Stripe with the service you want to provide. You can easily use Zapier for that or use your own webhooks, but that’s another topic.

I hope this was helpful for anyone like me that was struggling with this!

6 Likes

Hey @saravssantiago

Thanks for sharing with the community!

1 Like

Good stuff. Is this solution compatible with new SCA requirements in the European Economic Area (EEA)? I’m assuming it is as it takes you to the Stripe Checkout page but in Europe there is a fair bit of confusion over this!

1 Like

@manofdogs From what I read here, Stripe is fully aware of this and has created this guide to offer help on it. From what I get from it (I’m also in EU) it seems that the responsibility in terms of security features is on the bank side. Something called 3D Secure 2 will be prompted when paying with a EU card, and ask the customer to perform an extra step provided by their bank. Stripe is fully ready to allow that new feature (i.e. redirect the user to that extra step, and then bring them back to the flow).

If you select other systems like Apple Pay, iDeal, or anything that is not a card, you’ll have to check those separately and see if they are compliant already.

On top of all this, it seems that Stripe also has some logic implemented for exemptions (such as payments under 30 euros or recurring subscriptions) to fully comply and make things easier.

In terms of privacy (GDPR), since this checkout is fully hosted on Stripe, it should be as secure as it gets. Nothing is hosted directly on your site at all, so the responsibility to secure that data is on them - and that’s their core business. You can read about that here.

Hope this helps :slight_smile:

Love your designer to leader page. :ok_hand:

1 Like

Can this be used without the need for e-commerce functionality on webflow or woo-commerece??

Thank you @Sebasgaes! :slight_smile:

@Hobbitrock83 Yes, this is a direct implementation with stripe and does need e-commerce additions :slight_smile:

However, please notice with this quick checkout you can not have a full e-commerce experience: you won’t get a shopping cart to add more products for example. Also, you’ll have to check what product you’re offering and how are you going to make it happen: how do you deliver it? How do you know someone paid?

I’m using Zapier to connect Stripe with Slack so I get a notification and also to directly add the person that paid to a private Slack channel. If you’re offering a downloadable, you might want to use Zapier to connect stripe with Mailchimp for example so you send out an email with the link to the resources.

I’m any case, back to the start: no e-commerce add ons needed :partying_face:

I can’t get this to work.

Can anyone help me?

What’s up @Steezie? What are the steps that you followed? What part is not working?

Hi,

Thanks for getting back so quick, I managed it in the end. :smile:

Thanks for sharing this tutorial it really helped.

I’m trying to implement bank transfers and other payment methods. Do you by any chance know how to do this?

Thanks in advance.

Steve