How to customize the payment method in payment intent example in stripe

Question

I am trying to follow the example shown in the following link https://stripe.com/docs/payments/accept-a-payment .

I have the following code in the client side

 var cardNumber = elements.create('cardNumber', {
    placeholder:'',
    style: style
});
var cardexpiry = elements.create('cardExpiry',{
    placeholder:'',
    style:style
});
var cardCVV = elements.create('cardCvc',{
    placeholder:'',
    style:style
});


// Add an instance of the card Element into the `card-element` <div>.
cardNumber.mount('#card-element');
cardexpiry.mount("#card-expiry")
cardCVV.mount("#card-cvv")

instead of this

var card = elements.create("card", { style: style });
card.mount("#card-element");

Because the I wanted to some UI manipulation. According to the code posted in the link I should do the following

var submitButton = document.getElementById('submit');

submitButton.addEventListener('click', function(ev) {
 stripe.confirmCardPayment(clientSecret, {
   payment_method: {card: card}
 }).then(function(result) {
 if (result.error) {
  // Show error to your customer (e.g., insufficient funds)
  console.log(result.error.message);
 } else {
  // The payment has been processed!
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
    }
 }
});
});

However in the example above in the payment_method the card object is passed, which is not the case in my code. How can I pass my card number and exp/date as well CVC separately in the stripe.confirmCardPayment(clientSecret, { payment_method: {card: card}

Answer 1

There was a similar question about how to call stripe.createToken() when you aren't using a card element .

According to the Stripe documentation for createToken :

The cardNumber Element you wish to tokenize data from. If applicable, the Element pulls data from other elements you've created on the same instance of Elements to tokenize—you only need to supply one Element as the parameter.

Now, for this case in particular, the section for confirmCardPayment says:

Use stripe.confirmCardPayment with payment data from an Element by passing a card or cardNumber Element as payment_method[card] in the data argument.

Basically you just have to pass the cardNumber element to payment_method["card"] and it will pull the data from the other elements you've created.

...
stripe.confirmCardPayment(clientSecret, {
  payment_method: {card: cardNumber}
})
...

Answer 2

I ended up using this code

var stripe = Stripe('#YOUR KEY');
var elements = stripe.elements();

/// STYLE HERE
var style = {
    base: {
        fontSize: '16px',
        color: "#32325d",
        '::placeholder': {
            color: '#CFD7E0',
            fontSize: '12px'
        }
    }
};

// Create an instance of the card Element.
var card = elements.create('card', {
    hidePostalCode: true,
    placeholder: '',
    style: style,



});
card.mount('#card-element');

card.addEventListener('change', function (event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
        displayError.textContent = '';
    } else {
        displayError.textContent = '';
    }
});