Automatic payment methods with the Stripe Payment Element

Introduction

In the first post in this series, we learned how to use Vite, Rect Stripe, and the Payment Element to accept card and Bancontact payments. If you haven’t seen that post, you can read through it here or checkout and run the main branch of the GitHub repo to see the project in action.

In this post, we’ll see how to add additional payment methods in two ways:

• By specifying more payment methods when creating a Payment Intent
• By using Stripe’s automatic payment methods

Follow along

The completed demo is available on GitHub on the branch 02-automatic-payment-methods. Once you have cloned the project, you can check out this branch using git checkout 02-automatic-payment-methods and run it as described in the README.

Prerequisites

This demo was built using Node version 16.10.0, and npm version 7.24.0. You also need a basic understanding of React components, useState, useEffect, and a Stripe account which you can sign up for here.

What you’ll learn

In this post you’ll learn how to automatically configure payment methods in your dashboard which will then be offered to your customers in the Payment Element without changing any code in your integration.

Quick recap

The Payment Element is an embeddable UI component that allows your integration to:

• Leverage more than 18 payment methods with a single integration
• Customize the look and feel of the element to match your design requirements
• Dynamically optimize the ordering and presentation of payment methods to increase conversion

And the focus of this post, the Payment Element, also supports automatic payment methods. Which means your single integration can support more and more payment methods as we release them by simply toggling them on in your dashboard.

Software stack

This project uses Vite as a build and development server, React for a frontend framework, React Stripe to accept payments, and the Payment Element to present and confirm payments on the frontend. You can read a deep dive end-to-end integration in the first post here.

Specifying payment methods explicitly

While explicitly specifying payment methods requires very little work — by changing the list of methods when creating a Payment Intent — it does require you to test and redeploy your backend code when that list changes. Here’s an example of explicit payment method declaration:

const paymentIntent = await stripe.paymentIntents.create({
  amount: 1099,
  currency: 'eur',
  payment_method_types: [
    'bancontact',
    'card',
    'eps',
    'giropay',
    'ideal',
    'p24',
    'sepa_debit',
    'sofort',
  ],
});

Here we’re specifying lots of European payment methods that will be presented to customers in the EU.

Alternatively, if we use automatic payment methods, we can instruct the Payment Intent and Payment Element to determine the set of payment methods by looking at your dashboard settings. Therefore you can simply enable payment methods with a click of a button, which means less technical maintenance of your integration. By lowering the complexity of your integration to add more methods, it will lead to:

• Increased conversion of your customers
• Larger addressable customer base due to local payment method support
• Access to digital wallets like Apple Pay and Google Pay for an optimized checkout experience

Here’s how we can specify automatic payment methods:

  const paymentIntent = await stripe.paymentIntents.create({
    amount: 1099,
    currency: "eur",
    automatic_payment_methods: {
      enabled: true
    },
  });

Dashboard settings

In the dashboard under Settings -> Payment methods, we can see all of the methods that are available to your Stripe account based on your country. Methods are grouped by cards, wallets, and bank redirects, and you can expand each method to read more about its details such as supported currencies. Turning payment methods on or off for your integration is as simple as a click of a button.

If you enable more payment methods and then reload the page with the Payment Element, the element will automatically display those payment methods if they are available to the user.

Testing

Stripe provides shortcut values for many payment method types that you can use in test mode. For example, to force a 3D Secure challenge, you can supply a card number of 4000002760003184, and for a declined card payment you can use 4000000000000002. Those values will be listed in the testing section of the particular method. For example, for Klarna, the test values are listed on the Klarna detail page. For bank redirect payment methods, we’ll be redirected to a Stripe hosted test page where we can pass or fail the payment.

Conclusion

Using a single integration, the Payment Element lets you access the growing number of supported payment methods on Stripe. We’re excited to see what you build, so don’t hesitate to reach out and let us know about your work!

Subscribe to our feed to learn more from our series on using the Payment Element.

About the author

Matthew Ling (@mattling_dev) is a Developer Advocate at Stripe. Matt loves to tinker with new technology, adores Ruby and coffee and also moonlighted as a pro music photographer. His photo site is at matthewling.com and developer site is at mattling.dev.

Stay connected

In addition, 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

Comments

[gerke]

Using reactjs in the form, if you don’t want to display country and postalCode in the front-end UI interface, how should you set it?