ilamathi-paymentmethod

[thin orbit]

hi! no, it's not.

the PaymentElement is optimised/designed for confirming Payment/Setup Intents only, not creating PaymentMethod tokens

[woeful oar]

Basically i want to create the paymentMethod for the details entered in the paymentElement before confirming the payment

Is it possible to show the card element in the multiple line as similar to the PaymentElement look and feel?

[thin orbit]

makes sense, but not a use case we support today

[thin orbit]

sure, you'd use the separate CardNumber/CardExpiry Elements and place them as you need

quick example https://jsfiddle.net/cdt43qL1/

[woeful oar]

With this separate Element we can able to create paymentMethod right before confirming the payment?

[thin orbit]

yes, see https://stripe.com/docs/payments/accept-a-payment-synchronously

[woeful oar]

here, stripe.createPaymentMethod({
type: 'card',
card: cardElement,
billing_details: {
// Include any additional collected billing details.
name: 'Jenny Rosen',
},
}).then(stripePaymentMethodHandler);

instead of card element i need to pass all the elements in object to create card paymentMethod?

Basically we need all these details right,
const paymentMethod = await stripe.paymentMethods.create({
type: 'card',
card: {
number: '4242424242424242',
exp_month: 6,
exp_year: 2023,
cvc: '314',
},
});

as we are using separate element for each field, then instead of cardElement we need to pass all the other element

[thin orbit]

no you can't do that as it's not PCI compliant

[thin orbit]

nope just pass any of them

like pass the cardNumberElement, it works

[woeful oar]

oh ok... by passing single element it will take all other value from other element like Exp, CVC and create paymentMethod?

[thin orbit]

yep

[woeful oar]

ok great...