CODEWITHSUNDEEP

javascriptstripe-payments

Kalyani Pande

Reputation: 1

How to get value entered in stripe element input?

I am new to Stripe element integration. Everything works fine but I'm having trouble with styling. Here is my code:

cardNumElement.on('focus', function(event) {
$('#card_num_label').addClass('active');
      if (event.empty) { //HERE GETTING EVENT.EMPTY UNDEFINED
         $('#card_num_label').removeClass('active');
     }
});
cardNumElement.on('blur', function(event) {
if (event.empty) {
         $('#card_num_label').removeClass('active');
     }
});

What I want to achieve is:

Add active class selector to the label when user focuses on that element
If the user enters a value, do not remove the active class selector
If the user didn't enter a value and focus out from the element, remove the active class selector I can't detect whether user entered a value or not and I'm not getting a result event.

Upvotes: 0

Views: 1810

Answers (1)

Paul Asjes

Reputation: 5847

event.empty isn't available on either the focus or blur events. The only valid property for those events is event.elementType.

If you want to get the status of the contents of the element, you'd use the change event instead: https://stripe.com/docs/js/element/events/on_change?type=cardElement#element_on_change-handler

Alternatively, you could use the private fields of the element, but bear in mind that these are subject to change at any time and are probably not reliable:

cardNumElement.on('focus', function(event) {
  $('#card_num_label').addClass('active');
  if (cardNumElement._implementation._empty) {
    $('#card_num_label').removeClass('active');
  }
});

Upvotes: 1

Related Questions