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

user_11169941 0
Viewed 4391

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.

stripe-payments javascript
3 Answers

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

user_97697310

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

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.

user_141186400
Related