One component, 18 payment methods

Stripe’s original Elements library, launched in 2017, simplified building custom checkout flows. But each additional payment method still meant a separate front-end integration, plus custom logic for setup and ongoing maintenance. Multiply that by every checkout surface, and supporting new options could cost weeks or months of engineering time.

The new Payment Element collapses all of that into a single embeddable component. One integration provides access to 18 payment methods spanning cards, mobile wallets, buy now pay laters, vouchers, bank debits, and redirects. It’s available for web and native mobile apps via the iOS, Android, and React Native SDKs.

The mobile Payment Element enables you to build a streamlined payment flow within your mobile app and is available for iOS, Android, and React Native.

Built-in behavior that adapts

Beyond consolidating integrations, the Payment Element handles several checkout optimizations automatically:

  • Automatic input collection: The component dynamically adjusts which fields it collects based on the selected payment method and the customer’s country. For example, SEPA Direct Debit payments trigger full billing address collection when needed.
  • Dynamic sorting and filtering: The display order of payment methods shifts according to the customer’s device and location, helping surface the most relevant options. Methods not supported by the customer’s local currency are filtered out.
  • No-code method management: Merchants can enable or disable individual payment methods directly in the Stripe Dashboard, without touching the front-end code.

As with all Elements, merchants can pick and choose which of these capabilities to adopt, depending on how much control they want to retain over the checkout experience.

Controlling the look without losing optimization

The Payment Element ships with default friction-reduction features: field localization, dynamic collection, input validation with masking, card animations, and built-in styling and error handling for card acceptance. Merchants who want to align the component with their brand can use the Appearance API to adjust colors, fonts, borders, padding, and other visual properties. Stripe also offers pre-built design themes for faster setup, plus the option to build a fully custom theme.

Availability and migration

The Payment Element is available in React and JavaScript for web, and in the iOS, Android, and React Native SDKs for mobile. Stripe reports that existing merchants have migrated to the component in under a day with a single developer, with one citing a 6% increase in checkout conversion after the switch.