How to Embed a Stripe Payment Form on Your Website
2 min read

How to Embed a Stripe Payment Form on Your Website

How to Embed a Stripe Payment Form on Your Website

When you're looking to set up a payment form to sell a product or service, Stripe Checkout is a quick and easy way to make this happen. Stripe now even gives you the ability to create simple payment links for those without a website.

One thing that may be bugging you though is that the actual checkout page is hosted by Stripe. So when a customer clicks your payment button or link on your website, they're sent to Stripe.com for the actual checkout form. After they complete the transaction they're sent back to your website.

It looks like something like this:

This could be a problem for a couple of reasons:

  1. Maybe you just think it's more professional and polished to have your payment form on your website so you can have full control over the design and experience.
  2. It can make tracking sales conversions a little difficult with Google Analytics since the default attribution model is 'last click'. This means that when customers are sent back to your website's 'thank you' page after going through the Stripe hosted checkout Google Analytics will attribute the conversion to Stripe.com. Of course, you can use Google Analytic's model comparison tool to get the full picture on attribution but some would prefer not having to do this.

Wouldn't it be great if you could just set up Stripe Payments ON your website instead of visitors having to bounce over to a Stripe-hosted checkout page and then back to your website?

This is what Stripe Elements provides. The problem is, your typical set up would require a full-stack web application with backend server code to process the transaction. Fortunately, there's an easier way to achieve this using a tool called Formspree.

You can see their guide for creating a Custom Stripe Form with no server code here.

You just follow that guide to sync your Formspree form to Stripe, embed your form on your website, and style it to match your site! That's basically it.

You could also probably achieve something similar with Jotforms but Formspree is a cheaper more custom solution for this.

The only downside to this Formspree/Stripe Elements setup vs just using Stripe Payment Links is that it doesn't work with Apple Pay or Google Pay. As somebody who uses Apple Pay a lot, this is kind of a bummer but not that big of a deal. It just depends on what kind of tradeoffs you want to make.

Enjoying these posts? Subscribe for more!