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.

Respirable

I found an example at github.com/stripe/react-stripe-js/blob/… – Parisparish

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

Scrimmage

This is not a good answer, look at the other answers. – Strangury

Blows my mind that they don't explain this somewhere in the docs (that it automatically picks up the other fields). – Basile

Answer 2

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
       }
    }
  }
});

Devlin

It was astonishingly hard to find this anywhere else on the Internet! – Stovall

Answer 3

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.

Parthinia

I can't find any official docs stating this. And in my testing, it seems that there is no validation preventing me from passing an Amex card number but a 3-digit (and therefore invalid) CVC. So my form tries to submit. But of course no payment method gets created. – Parisparish

A Stripe rep told me on Discord that Amex can sometimes have 3-digit CVC. I have found no documented proof of this online, but maybe it's true. – Parisparish

Answer 4

My answer might be outdated, but I still want to mention that Stripe’s official personnel metioned this in a YouTube video. karllekko's answer is correct, values other elements will be fetched although only CardNumberElement is explicitly passed in.

Homogenesis