How should I pass `cardNumberElement`, `cardExpiryElement` and `cardCvcElement` into `stripe.confirmCardPayment`'s `payment_method.card`?

Question

In stripe docs, I can easily create a card like this

var cardElement = elements.create("card");

And I simpliy pass the cardElement to confirmCardPayment

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardElement,
  },
});

However, for visual style css reason, I have to split cardElement in to three pieces like this:

var cardNumberElement = elements.create("cardNumber");
var cardExpiryElement = elements.create("cardExpiry");
var cardCvcElement = elements.create("cardCvc");

Then I want to call stripe.confirmCardPayment, what should I do right now?

The doc only shows cardElement method, no splitted example.

Answer 1

You can pass the CardNumber Element in. As long as they were all created from the same instance of the Elements object, the confirmCardPayment function will pull the relevant information from all of the mounted Elements to get the expiry/CVC too and it will just work.

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardNumberElement,
  },
});

https://stripe.com/docs/js/setup_intents/confirm_card_setup#stripe_confirm_card_setup-with_element-payment_method-card