0

I have a signup/registration page that uses JQuery.steps. On page load the following code is executed.

var elements = stripe.elements();
var card = elements.create('card');
card.mount('#card-element');

So Once the page is loaded and I get to the payment step, I see the element show up on my page with CC field, Expiry, etc.

what I need is once the user gets to the payment step, I need the card info to get sent to my Nodejs server code so that the customer info and payment info is created. My goal is to be able to get the last 4 digits of the credit card so I can show it the user prior to Submitting. In order to do that, I am calling the createToken function which supplies the last 4 digits.

So prior to the last step, (the user has entered the credit card info and has pressed Next (current Index=0, nextIndex 1)) I have the following code:

onStepChanging: function(event, currentIndex, newIndex) {
   if (currentIndex == 0 && newIndex == 1) {
      stripe.createToken(card).then(function(result) { // <-- this is where the error happens
      if (result.error) {
         var errorElement = document.getElementById('card-errors');
         errorElement.textContent = result.error.message;
         return false;
      },
   }
onFinishing: function(event, currentIndex) {
   stripe.createPaymentMethod({
       type: 'card',
       card: card,
   })
   .then((result) => {
       if (result.error) {
          displayError(error);
       } else {
          var fd = new FormData();
          fd.append('customerId', customerId);
          fd.append('paymentMethodId', paymentMethodId);
          ...

Unfortunately, as soon as stripe.createToken(card) is called I get the following error:

IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

I am basically having problem getting the card info sent to my nodejs server.

Any advice?

Sean D
  • 356
  • 5
  • 20
  • What is 'card' in this call stripe.createToken(card)? Is it a global var or is it scopped to this function? – proxim0 Apr 26 '21 at 23:31
  • It's global and so is stripe which is why the error isn't "createToken isn't a function" or something like that. – Sean D Apr 26 '21 at 23:51
  • It looks like you might have a carousel or slideshow type system here, in which case when a "slide" is no longer in view it might destroy/unmount all elements on it. When you do this all the data in the Stripe element is lost, which is what causes that error. You could look into keeping the Stripe Element and this code block on the same slide to avoid this error. – Paul Asjes Apr 27 '21 at 02:25

0 Answers0