DEV Community

Cover image for Making sense of Stripe Checkout, Payment Links, and the Payment Element
Charles Watkins for Stripe

Posted on • Edited on

Making sense of Stripe Checkout, Payment Links, and the Payment Element

Stripe works to make payments as easy as possible, but sometimes all the industry terms and APIs available can overwhelm the best of us. In the Stripe Fundamentals series, we tackle an essential topic in each article and explain the topic in simple terms.

This week, Charles Watkins will explain the differences between three approaches to accepting payments with Stripe: Stripe Checkout, Payment Elements, and Payment Links.

If you haven’t read the previous installment of this series, you should check that out first to get a grasp of the API that powers all three paths: the
PaymentIntents API.


One of the most important decisions you’ll make is deciding how to present payments to your customers.

Consider for a moment: Should you use a prebuilt payment form or build your own payments page? Should you use an API or opt for a no-code solution? Before answering these questions, let’s cover Payment Links, Checkout, and the Payment Element and how they all work.

Payment Links, Checkout, and the Payment Element are all secure, PCI-compliant ways to accept payments using Stripe. Each interface supports payments across multiple currencies, one-time payments, and subscriptions. Additionally, they each give you access to over 40 local payment methods and Link, Stripe’s one-click checkout, with no additional coding work required.

But which one is right for you and your business? To answer these questions, we’re going to do a deep dive into each, starting with the simplest integration: Payment Links.


Payment Links

Payment Links is the fastest (and easiest) way to accept one-time payments and subscriptions with Stripe. It’s no-code by design and also has an API for developers.

Payment Links example payment page with static link

With Payment Links, you create a hyperlink to a Stripe hosted payment page for your product. You can get started setting up the link in seconds. You can also generate a script tag from a payment link that makes it easy to drop in a customizable, embeddable Buy Button on your website.

Once activated, a payment link can be used to accept payments in 195 different countries. To optimize for conversion and user experience, Payment Links supports 40+ global payment methods, all which can be enabled via the Stripe Dashboard. Additional features include support for splitting funds between businesses and customizing the payment page to match your brand’s colors and logo. Once created, Stripe gives you a permalink to share via social media, email, and text that looks like this:

https://buy.stripe.com/test_aEU0418CDaQo4tq4gg

Payment links can be turned into QR codes and used to accept in-person payments. Payment Links work anywhere you would use standard links, including your website.

💡 Payment Links has an API available that lets you automatically create links from your integration or through easy-to-use no code tools like Zapier.

When to use Payment Links?

If you’re bootstrapping a business, building an MVP, or launching without a website, Payment Links are a great option. Integrating a payment link is as simple as creating a product in the Stripe Dashboard and adding the link to your site or anywhere else you need to reach your customer. It’s important to note that a payment link is designed to sell a specific preconfigured product or set of products. If you’re looking to let customers choose and combine multiple products on your website in a cart, a dynamic, API-based solution like Stripe Checkout is a better fit.

👉 Best for:

  • MVPs
  • New startups accepting their first payments
  • Growth companies experimenting with pricing
  • Businesses without websites and/or a limited number of services
  • Established companies selling through new channels

Stripe Checkout

Stripe Checkout is a prebuilt payment form that can be embedded directly on your site or offered as a redirect to a Stripe-hosted page. You can integrate Checkout using Stripe’s APIs so you can dynamically pass in the products you want to show in a Checkout session. This integration is the best balance of engineering effort and customizability for most businesses. Checkout is optimized for conversion and provides a lot of out-of-the-box functionality—like subscription upsells, promotion codes, and shipping options—so that it can evolve with your business. For SaaS businesses, you can use Checkout’s pricing table to easily display one-time and subscription pricing on your website with a customizable, embeddable pricing table that directs customers to a Checkout page to complete their purchase.

Stripe Checkout page for example product Pay Powdur in Test Mode

Getting started with Stripe Checkout

To use Checkout, you’ll need to build a server-side integration that uses Stripe’s Checkout API. The Stripe-hosted version will programmatically create short-lived links that you can redirect your users to. Alternatively, you can configure the Checkout Session on your server and then mount the payment form directly on your website. Once set up, you can customize Checkout’s branding using the [Stripe Dashboard brand settings (https://stripe.com/docs/payments/checkout/customization) to update the background color, button color, font, and more. In addition, you can also add and manage payment methods to provide customers with 40+ options for payment. If you’re selling internationally, you can enable automatic currency conversion which lets you present prices in your customers local currency.

When to use Stripe Checkout?

You can use Checkout to support payments for an online store, a creator platform, a subscription based business, an e-commerce marketplace, and anything in between.

👉 Best for:

  • Most businesses and web apps
  • Platforms that want an extensible and optimized checkout out-of-the box
  • Companies that want built in support for recurring payments and tax collection

Payment Element

The Payment Element is a modular UI component for collecting payments. It’s Stripe’s most customizable payments integration and requires dedicated engineering resources. While Checkout and Payment Links provide the full payments experience—including order summary, address and payment collection—the Payment Element is only designed for payment method collection. You can combine the Payment Element with other components like the Address Element to build a similar checkout experience. While this requires more upfront work, the Payment Element lets you present special terms, build multi-step payment flows, and collect additional information during the checkout process.

The Payment Element offers the most customization and flexibility but does require the most integration effort. To successfully integrate the Payment Element, you’ll need to integrate Stripe on the client and server using Stripe’s SDKs. You can update the appearance to match the look and feel of your website using the Appearance API,, which uses CSS-like selectors.

Getting started with the Payment Element

To use the Payment Element, you’ll need to set it up using the Elements library on the client and the Payment Intents API on the server. Once integrated, you’ll have a payment form that’s hosted on your web app that you can customize. The Payment Element gives you access to 100+payment methods, many of which can be enabled and disabled using the Stripe Dashboard.

When to use the Payment Element?

The Payment Element is best for those businesses that want or need to own the payment experience end-to-end—and is willing to expend engineering effort to do so.

👉 Best for:

  • Payment platforms
  • Mobile apps
  • Web apps collecting additional information
  • Businesses that want end-to-end control of the checkout experience

Learn more

Now that you know the difference between Payment Links, Checkout, and the Payment Element, it’s time to learn how to use them. You can get started by watching our video guides on using Payment Links, Stripe Checkout, or the Payment Element.

Stripe’s integration builder walks through the steps of setting up both Checkout and the Payment Element. You can also watch a tutorial for integrating Checkout and the Payment Element on the Stripe Developers YouTube channel.


Related resources

Docs

Video guides




Next up: SetupIntents

In our next post in the Stripe Payment Fundamentals series, we’ll introduce SetupIntents and how to use them effectively with your billing integration.

In the meanwhile, you can stay up to date with Stripe in a few ways:
📣 Follow us on Twitter
💬 Join the official Discord server
📺 Subscribe to our Youtube channel
📧 Sign up for the Dev Digest

Top comments (4)

Collapse
 
tohodo profile image
Tommy • Edited

Heed my warning: do NOT use Payment Links -- stay far, far away. I made the big mistake of using this solution because I needed to put up a quick checkout page with zero coding. I have been literally paying the price ever since. Within the first month I started to get a trickle of card testing attacks. At first I was delighted, thinking the same person was being so honest, buying one subscription for every employee or something. How naive I was 🙈 ... by the third or fourth month I was getting up to 150 fraudulent card test charges a month.

The attacks were a nightmare, but Stripe's customer support made it worse -- it honestly felt like I was communicating with a bunch of hallucinating AI bots spewing boilerplate responses that didn't address the issue at hand. Eventually they "resolved" my problem by disabling the payment links, so now I have to scramble to update my app and explain to my users why these links are no longer working. 😵

Here are some reasons why Stripe Payment Link checkout pages are a disaster waiting to happen:

  1. There is no unique checkout session ID -- you can bookmark the payment link and come back to it any day to continue card testing attacks.
  2. There is no registration step or email validation, so credit card thieves can enter any email address they want to complete the purchase.
  3. There is no CAPTCHA, which makes it trivial to automate card testing attacks.

Congrats to Stripe, they have invented the most frictionless way for hackers to test charge a stolen credit card number online. Seriously, if I had to do it over again I'd I invest the time & energy into building a proper custom checkout integration with user authentication and reCAPTCHA. Don't make the same mistake I did -- Payment Links just aren't worth the convenience for the price you will eventually pay later. You've been warned.

UPDATE: After many emails with Stripe CS, I learned Payment Links checkout pages actually DO use CAPTCHA, but they are only triggered if a transaction exceeds a fraud threshold. For whatever reason the card tester who attacked me was able to circumvent the protections Stripe put in place. Stripe ultimately added some additional mitigations such as email domain blocking and lowering the threshold required to show the CAPTCHA, and their CS team came together to resolve my case in a way that exceeded my expectations, so hats off to them.

Collapse
 
thintiger profile image
thintiger

To be honest, I don't get the essential difference between Link and Checkout.
Is Link just a simple version of checkout that can be created via dashboard, or is Checkout just a more powerful Link with more API support?
It's too confusing to compare to WechatPay's payment QR-code and checkout process.

Collapse
 
yummikus profile image
yummikus

This type of scam has become very popular and I would not want my store to be subjected to this type of scam. I don't think anyone would want their store to be exposed to this type of fraud.

Collapse
 
yummikus profile image
yummikus • Edited

Can you tell me what a friendly fraud chargeback is. I'm about to open an online store and many people I know warn me about this type of scam.