How to use list of elements for Stripe confirmCardPayment

Question

As per Stripe Doc, payment_method.card accepts an object as value, which the documentation uses cardElement.

stripe
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      card, // Uses the mounted card element
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });

How can I replicate the same method, using a list of elements instead of a single cardElement?

Instead of...

const card = elements.create('card');
card.mount('#card-element');

I'd like to use...

const cardNumber = elements.create('cardNumber')
cardNumber.mount('#card-number')

const cardExpiry = elements.create('cardExpiry')
cardExpiry.mount('#card-expiry')

const cardCvc = elements.create('cardCvc')
cardCvc.mount('#card-cvc')

Answer 1

As long as you use the same instance of elements to create and mount all of the separate card elements, you can pass any of the mounted card parts to confirmCardPayment(). Stripe.js will group them together automatically. So for example:

stripe
  .confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {
    payment_method: {
      cardNumber, // Uses the mounted card element
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });