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}

I ended up using the same code supplied by stripe but i managed to style it — Ahmed, Jan 22 '20 at 13:39
can you share the code sample or github page, there is close to no info besides docs. I really need to split the elements or at least be able to style it according to business requirements. Thanks in advance — Roman Haivaronski, Jan 22 '20 at 13:44

score 9 · Answer 1 · answered Feb 19 '20 at 03:14

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

Thank you for this answer. I believe the Stripe documentation is very poor. When it comes to learning as beginner. https://github.com/stripe/react-stripe-elements/issues/451 Anyways, thanks for this answer. — Faizi, Aug 29 '20 at 09:32
@Sayyamabbasi Here's an example with card number, expiry date and CVC elements: https://jsfiddle.net/AleFelix/pk4chy86/1/ — Ale Felix, Aug 27 '21 at 15:43

score 1 · Accepted Answer · edited Jan 22 '20 at 15:35

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

Thank you, it seems there is no opportunity to get card data from different card elements for now. — Roman Haivaronski, Jan 22 '20 at 13:58

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

2 Answers2