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
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
- Get the code that it’s given (step 3 on their guide).
- On Webflow, go to the page and area where you want to button to appear and add an Embed element.
- On that Embed element, paste the entire code they give you right there.
- 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.
- 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:
- Go to your Project Settings in Webflow
- Go to Hosting and scroll until you find “Advanced Publishing Options” as a title
- There, switch on “Enable SSL”
- Click on the Save button, and then publish your site again
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!
- 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
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!