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

3
votes

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}

2
node.jsstripe-payments
Did you manage to find a solution? – Raman Haivaronski
I ended up using the same code supplied by stripe but i managed to style it – Ahmed
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 – Raman Haivaronski

2 Answers

9
votes

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

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