New Elements features to help you increase conversion at checkout

Abhi Tiwari Checkout Experiences Product Team

One of the biggest challenges global businesses face is how to build a frictionless and relevant checkout experience without adding significant development work. These days, buyers expect to be able to pay with their preferred payment option—whether that be a card, local payment method, or installment plan—and complete the checkout process in a matter of seconds. Not providing a seamless experience can significantly impact your bottom line—52% of customers say they would abandon a website if they couldn’t complete their purchase within two minutes.1

We launched the Payment Element last year to make it easier for your business to accept global payment methods with a single integration. Since then, more than 65,000 businesses have integrated the Payment Element, and businesses that have migrated from an older Stripe integration have seen a 7% average increase in sales.2 Behind the scenes, we continue to obsess over every opportunity to reduce friction across the entire checkout experience.

Today, we’re adding a set of improvements to Stripe Elements—and introducing the new Address Element—to help you adapt to customer preferences without adding costly development cycles.

With Stripe’s Payment Element, we were able to integrate and launch Affirm, Afterpay, and Klarna within one day. More than 25% of purchases are now being paid through buy now, pay later, and our conversion rate continues to improve as customers have more payment flexibility.

Ignacio Flores, Technical Lead Engineer, Orchard Mile

Accelerate checkout with frictionless address collection

Address collection is one of the most error-prone stages in online checkout flows worldwide, with 15% of Asia Pacific websites3 and 19% of European ecommerce sites4 containing at least one error in their address fields. With our new Address Element, billing and shipping addresses are autofilled using Google autocomplete, increasing conversion by an average of 1%5 by reducing errors and speeding up the checkout process. You also won’t need to pay for, build, and maintain your own Google integration. Here’s what else you can do with the Address Element:

  • Localize for 42 languages and 236 regional address formats, including right to left.
  • Automatically adjust address fields based on shipping or billing mode. In shipping mode, customers have the option to use their shipping address as their billing address. In billing mode, billing fields are hidden in the Payment Element so that customers only have to fill in their details once. 
  • Customize colors, fonts, borders, and padding to match your brand using the Appearance API.

Dynamically surface the right payment methods at checkout

As payment methods diversify across regions and business models, businesses can struggle to display the preferred payment methods for each individual customer. Our payment method ordering algorithm takes the guesswork out of payment methods, dynamically surfacing the most relevant options based on your customer’s device and location. We’ve recently made major improvements to our algorithm, resulting in an average 3% lift in conversion and a 7% increase in transaction value for businesses on the Payment Element. We built this algorithm into all our payment UIs, including Checkout and Payment Links.

Launch payment methods on your platform with no code

Previously, platforms using Connect had to manage a complex process to roll out new payment methods to their businesses, consisting of making several API calls, querying business information in their databases, and writing custom code. With the Payment Element, you can now distribute and manage 25+ of the most popular payment methods to businesses on your platform in minutes—no code required—which can save months of development time. Platforms will now be able to: 

  • See business eligibility: See which payment methods are most relevant for your platform based on how many of your businesses are eligible.
  • Automatically enable payment methods: New businesses can add payment methods if they have the necessary verification requirements.
  • Access granular controls: You can enable payment methods for all businesses, give businesses the option to turn on payment methods themselves, or block access to certain payment methods.

Stripe keeps adding new payment methods, and we reveal those as quickly as possible so merchants can configure their checkouts to include the ones most relevant to them.

Brent Bellm, CEO and Chairman, BigCommerce

Get started 

The Payment Element is available in React or Javascript for web integrations and in iOS, Android, or React Native SDKs for mobile apps. Read the docs to get started. For existing Stripe users on our Card Element integration, you can now migrate to the Payment Element with only a few code changes.

The Address Element is available in Web and Stripe iOS, Android, and React Native mobile SDKs. Visit the Address Element docs page for more information and instructions on how to integrate. 

As always, please let us know if you have any questions or feedback—we’d love to hear from you.

Like this post? Join our team.

Stripe builds financial tools and economic infrastructure for the internet.

Have any feedback or questions?

We’d love to hear from you.