[TUTORIAL] STRIPE CHECKOUT - I made it work!

Community resources Webflow Tips
1

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!

33 Likes
2

Hey @saravssantiago

Thanks for sharing with the community!

1 Like
3

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
4

@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:

1 Like
5

Love your designer to leader page. :ok_hand:

1 Like
6

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

7

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:

1 Like
8

I can’t get this to work.

Can anyone help me?

9

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

10

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

11

Thanks a lot for sharing @saravssantiago !

The button works but I can’t get the styling I want. Can you detail how you add the class to the code?

Thanks
Thibault

1 Like
12

Hi @saravssantiago ! I’m trying to integrate Stripe to take variable payment amounts. My site is not ecommerce, but needs to be able to take variable payments to be credited to client account balances. Do you know how to do this? Will your process work for variable client specified amounts? Thank you!

13

Thank you so much for the tutorial. You saved my day. Is there a way to send payment links via email as well?

1 Like
14

Im creating a marketplace at the moment and want to create a button that would boast some items (this would mean pushing it on social media and other platforms). would i be able to use this for it??

15

I’m having the same issue

16

I have tried all these but the button does nothing after I click on it, please help me

17

@THINA_Beats @Bobby_Sha @Ndulue_Emeka

I hope I’m not replying too late!

The styling needs to be added manually in the HTML element.

When you copy and paste the code in Webflow, you do so on an HTML Embed element. Once you paste the code, the styling area is on the top part of the code. Like this:

Webflow_-_Designer_to_Leader
Webflow_-_Designer_to_Leader1712Ă—1372 346 KB

The first arrow indicates where styling in CSS should go, and the second arrow where your button text can be customized.

I hope this helps!

1 Like
18

Hi @AlbersAsh and sorry for the delay!

I don’t think you can do that with this feature since it’s quite simplified and as far as I know you can do it just by creating products on Stripe, which requires specific prices.

Did you find a way to achieve variable payments in Webflow?

19

You’re very welcome! Sorry for the delay, you probably have this solved by now but here my 2 cents.

I’m not sure what you mean by sending the payment links via email. If you just mean sending an email to someone to gather the payment, I would suggest creating individual product pages that you can send or see if you can directly link that checkout page. That’s surely the cleanest and easiest way.

20

Sorry, I don’t understand what you’re trying to do. If you just want to link the product in social media then sure, you would just create one page per product. If you want to sell in social media directly you need to use each platform’s specific show feature.