Payment Element FAQ

The Payment Element is a secure, embeddable UI component that allows you to accept local payment methods from around the globe.

To help users of both one-time and recurring payments accept multiple different payment methods, the Payment Element supports 3 main integration paths:

FAQ

What are the core features of Payment Element?

With Payment Element, Stripe is launching a new generation of Elements (see: https://stripe.com/payments/elements). Previous to the Payment Element, merchants would need to build and maintain a new integration for each separate payment method. Because this is no longer necessary, you would save significant time and resources by utilizing the Payment Element.

See some core features of Payment Element below:

- Support for multiple payment methods via a single Elements integration
- It surfaces relevant payment options to each buyer through sorting logic based on customer country location (derived from IP address) and preferred language (derived from browser locale)
- It is localized for 42 locales: https://stripe.com/docs/js/appendix/supported_locales
- It can be styled to merchant brand (font, colors, spacing, etc.)
- It is mobile responsive
- It has in-built input validations
- It is PCI-DSS Compliant
- It works with PaymentIntents/SetupIntents

How does the Payment Element relate to Stripe Elements and how are they different from each other?

Stripe Elements is a set of prebuilt UI components, like inputs and buttons, for building your checkout flow. For each payment method (credit cards, debit cards, etc.), there’s an associated Element. The Payment Element is a new component that combines individual payment method Elements into a single Element.

Here's how Stripe Elements and Payment Element differ from each other:

When using Elements previously, a merchant would need to build and maintain a currency/country/payment method mapping and associated logic for when to call Stripe APIs on the backend and to show/hide the Elements on the user interface (UI). This would require integrating each Element one by one.

With the Payment Element, it would be possible to remove the need for a merchant to build and maintain these aspects. The integration experience starts to look like a single Element integration, the mappings, logic, presentation, and behavior are pre-built by Stripe. The trade off is slightly less customization within the UI layer than is possible today with Stripe Elements but more control than what Stripe Checkout offers.

More specifically, the main differences are:

- The Payment Element requires nearly the same amount of effort to integrate as another Element (e.g., the Card Element), but requires far less effort to maintain, since payment methods can be added without needing to integrate with another Element for each one.
- The ability to customize styling is more limited compared to Elements today, with only our JavaScript styling API supported (not CSS). However, the majority of styling capabilities are still supported.
- Because server-side confirmation isn't supported, credit cards will need to use webhooks (not the case with Elements today). However we are going to support a bypass for this on Cards.
- A redirect to an order confirmation page is required for most payment methods accepted via the Payment Element, so single page web-apps will need to add a separate page for order confirmation. However, the checkout experience is still fully embedded within the merchant's site (unlike Stripe Checkout).

How does the Payment Element relate to Checkout?

The Payment Element is a new UI component that can be placed within a merchant website, styled and branded to the merchant experience. It allows you to offer multiple payment methods (18+ and growing) with drastically less effort automatically collecting the necessary information from consumers (except shipping address). The Payment Element uses Stripe’s payment APIs (PaymentIntents/SetupIntents) to function and is built on top of our SDK, Stripe.js. This product is designed for merchants who want control over the payment experience offered. More specifically, if you’re looking to fully integrate payments within your web application (i.e. multi-step flows, brand conscious, high need for control, present special terms at checkout), then Payment Element is the product for you. Payment Element allows you to collect any information you need during checkout and design the experience you want.

On the other hand, Stripe Checkout is our fully hosted payment page that also makes it easy to offer LPMs (25+) which your site would redirect to, but comes with limited styling options (color/logo). Stripe Checkout uses Checkout Sessions to operate and does not use Payment Intent/Setup Intent. It is designed for simpler use cases i.e. single step flow with less need for control / customization / branding. Stripe Checkout offers and collects more info, including shipping address collection and shows a product list / order total and submit button, which the Payment Element does not.

How much effort is to implement the Payment Element?

The Payment Element requires nearly the same amount of effort to integrate as a single Element (e.g., the Card Element), but requires less effort to maintain. When you want to offer more payment methods, you don’t have to integrate an Element for each option.

What is the cost for using Payment Element?

The Payment Element comes at no additional cost to users. The only costs associated are the costs for each payment method they accept (see https://stripe.com/pricing/local-payment-methods).

What APIs are supported by the Payment Element?

Payment Element is supported by PaymentIntents and SetupIntents. Other legacy APIs like Charges and Sources are not supported.

Do I need to use webhooks?

Yes, you need to use webhooks with the Payment Element because server-side confirmation isn’t supported.

However, we are able to support a bypass for this on Payment methods that do not require redirects such as Cards. The code for how to do this is here : https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect

How do I use the Payment Element to offer all the payment methods Stripe supports?

To use the Payment Element to offer all the payment methods Stripe supports, you can pass an array of payment methods to payment_method_types when you create a PaymentIntent. However, you can’t pass all supported payment methods at the same time because some payment methods require different currencies. You can only create a PaymentIntent with payment methods that support the same currency. Please see the Payment method and product support table here:https://stripe.com/docs/payments/payment-methods/integration-options

What is the Mobile Payment Element? How does it compare to the Payment Element?

The mobile Payment Element, or Payment Sheet class in code, is a secure pre-built UI component that displays multiple payment methods from around the globe (Cards, Wallets, Bank Debits, Bank Redirects, BNPL, etc). It is similar to the Payment Element on web, but for use within mobile apps. The payment interface presents as a "bottom sheet" (similar to Apple/Google Pay) and is built into Stripe's Mobile SDK. This product will help Stripe merchants increase conversion and reduce payments cost, while moving Stripe’s company goals around non-card payment method adoption. For more information, check out: https://stripe.com/docs/payments/accept-a-payment?platform=ios