Empty payment element iframe, possible race condition

[EML]

I seem to have a race condition which means that the client occasionally sees an empty payment form. I'm not sure exactly when this happens, but I can make it happen frequently by single-stepping through my JavaScript code. When it does happen, the iframe containing the payment info (the card number input, and so on) is empty (the iframe document body is simply '<div id="root"></div>').

I'd appreciate any feedback on how this could be possible.

This is how I create and mount the payment element:

let element = stripeFuncs.getElements(client_secret);
element.mount('#userModalMPStripeElement');

And this is the 'getElements' function:

stripeFuncs.getElements = function(csecret) {
  const foo = {};
  foo.clientSecret = csecret;
  const { clientSecret } = foo;

  const appearance = { theme: 'flat' };
  elements = stripe.elements({ appearance, clientSecret });

  const paymentElementOptions = {
    layout  : 'tabs',
    fields  : {
      billingDetails : {
        email   : 'auto',
        address : { country : 'never' }
      }
    }
  };

  paymentElement = 

    elements.create('payment', paymentElementOptions);
  return paymentElement;
};

[Remi J.]

Hello,

The code you shared seems reasonable enough to me. As long as it runs after Stripe.js has already been initialized and the div element with the id `userModalMPStripeElement` is already loaded and rendered then it should just work. You mentioned that you can reproduce through your debugger but there isn't much more details such as whether you see anything in the JS console or a way to reproduce.

My advice would be to add clear logs to your code around when you initialize Stripe.js and around the `getElements()` function to better track when you enter/leave that function. This should help you confirm that you are calling things in the right order.

If you're still blocked, I'd recommend that you reach out to either our support team at https://support.stripe.com/contact or talk to our developers on our Discord server at https://stripe.com/go/developer-chat They can look at your full code and hopefully a hosted URL where they can reproduce to help you narrow this down.

Best,

Remi

--
To unsubscribe from this group and stop receiving emails from it, send an email to api-discuss...@lists.stripe.com.