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

Answer 2

karllekko's answer works.

In case you are using the CardNumberElement, CardExpiryElement, CardCvcElement, components from '@stripe/react-stripe-js'

you can simply do:

payment_method: {
        card: elements.getElement(CardNumberElement), 
        .
        .
}

and it will automatically fetch the other component's values.

Answer 3

Cardholder name and ZIP / postal code can be submitted the following way (using regular input elements):

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardNumberElement,
    billing_details: {
       name: document.getElementById("inputCardholderName").value,
       address: {
          postal_code: document.getElementById("inputZip").value
       }
    }
  }
});