Making sense of Stripe Checkout, Payment Links, and the Payment Element
Tags: stripe, webdev, tutorial, stripefundamentals
Published: 2022-02-01 22:18:21

*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](https://dev.to/t/stripefundamentals), we tackle an essential topic in each article and explain the topic in simple terms.*

*This week, [Charles Watkins](https://twitter.com/charlesw_dev) 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](https://dev.to/stripe/fundamentals-of-the-paymentintents-and-paymentmethods-apis-3646) of this series, you should check that out first to get a grasp of the API that powers all three paths: the 
[PaymentIntents API](https://stripe.com/docs/payments/payment-intents).*

{% link https://dev.to/stripe/fundamentals-of-the-paymentintents-and-paymentmethods-apis-3646 %}

---

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](https://stripe.com/payments/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](https://stripe.com/docs/api/payment_links/payment_links) for developers.


![Payment Links example payment page with static link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xga5clasyk0mgtt7y4p1.png)

With [Payment Links,](https://stripe.com/payments/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](https://stripe.com/docs/payments/payment-links). 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](https://stripe.com/docs/payments/payment-methods/integration-options#payment-method-product-support), all which can be enabled via the Stripe Dashboard. Additional features include support for [splitting funds between businesses](https://stripe.com/docs/connect/collect-then-transfer-guide?platform=no-code) and [customizing the payment page](https://dashboard.stripe.com/account/branding) 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](https://stripe.com/docs/api/payment_links/payment_links) available that lets you automatically create links from your integration or through [easy-to-use no code tools like Zapier](https://zapier.com/help/doc/how-to-use-stripe-payment-links-with-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](https://stripe.com/payments/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](https://stripe.com/docs/payments/checkout/upsells), [promotion codes](https://stripe.com/docs/payments/checkout/discounts), and [shipping options](https://stripe.com/docs/payments/checkout/shipping)—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](https://stripe.com/docs/payments/checkout/pricing-table) that directs customers to a Checkout page to complete their purchase.

![Stripe Checkout page for example product Pay Powdur in Test Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pit50gcggpwo6b8mowd.png)

###Getting started with Stripe Checkout
To use Checkout, you’ll need to build a server-side integration that uses [Stripe’s Checkout API](https://stripe.com/docs/payments/accept-a-payment). 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](https://stripe.com/docs/payments/dashboard-payment-methods#view-dash) to provide customers with 40+ options for payment. If you’re selling internationally, you can enable [automatic currency conversion](https://stripe.com/docs/payments/checkout/present-local-currencies) 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](https://stripe.com/docs/payments/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](https://stripe.com/docs/elements/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](https://stripe.com/docs/libraries#client-side-and-ui-libraries). You can update the appearance to match the look and feel of your website using the [Appearance API,](https://stripe.com/docs/stripe-js/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](https://stripe.com/docs/payments/elements)  on the client and the [Payment Intents API](https://stripe.com/docs/payments/payment-intents) 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](https://stripe.com/docs/payments/external-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](https://www.youtube.com/watch?v=ypH78KUu4Jk), [Stripe Checkout](https://www.youtube.com/watch?v=bvQVPoRvbj0&list=PLy1nL-pvL2M4bDg02XQr_Y68h4um-vLk3&index=23), or the [Payment Element](https://www.youtube.com/watch?v=MfFCg7kYCa4&t=1s).

Stripe’s [integration builder](https://stripe.com/docs/checkout/quickstart) 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](https://www.youtube.com/c/StripeDevelopers).

---

## Related resources

###Docs

- [Getting started with Payment Links](https://stripe.com/docs/payments/accept-a-payment)
- [Accept a payment with Stripe Checkout](https://stripe.com/docs/payments/accept-a-payment)
- [Accept a payment with the Payment Element](https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements)

###Video guides
{% youtube ypH78KUu4Jk %}
{% youtube bvQVPoRvbj0 %}
{% youtube MfFCg7kYCa4 %}

---

## 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](https://twitter.com/stripedev)
💬 [Join the official Discord server](https://stripe.com/go/developer-chat)
📺 Subscribe to our [Youtube channel](https://www.youtube.com/stripedevelopers)
📧 [Sign up for the Dev Digest](https://go.stripe.global/dev-digest)