matthias_01085

[worn shale]

Hi there!

Yes screenshots/videos or even better a reproduction link would help better understand the issue.

[mossy crest]

Before

After 2nd time we mount stripe elements

functionality wise everything works it just looks its disabled the 2nd time

[worn shale]

So the Element works even in the second screenshot? Do you see any errors in your browser console? Can you share the code you use to mount the element?

[mossy crest]

Yes, it works in the 2nd screenshot too. We dont have any errors in the console.

            // Add an instance of the stripe elements into the `stripe-elements` <div>
            this.$nextTick(() => {
                this.stripeElementsPayment.mount('#stripe-elements');
            });
        },````

[chrome vortex]

👋 Do you have any code that changes the appearance of the element anywhere?

Also, can you share the code where you unmount the element?

[mossy crest]

Hi, yes we change the appearance: some, variables and rules. Should I provide the code? Its a bit.
We dont really unmount StripeElements. Basically we just remove the DOM Element where stripe was mounted. Is there a function to unmount StripeElements?

I cant provide a specific code for that because we change between different vue components (for every payment option we have an own vue component)

[chrome vortex]

We do have specific function for unmount
https://stripe.com/docs/js/element/other_methods/unmount

I'd recommend using that function instead and see if it makes any difference

[mossy crest]

Ah nice, I will try that and see if it makes a difference. Thanks 🙂

[chrome vortex]

👍

[mossy crest]

sadly nothing changed. Its still the same :/

@chrome vortex

[chrome vortex]

If you disable all the appearence related code, does that change anything?

[mossy crest]

yes, if I disable every appearance it works. Strange that it works the first time but not the second time.

[chrome vortex]

Strange that it works the first time but not the second time.
Not sure what you mean by that.

[mossy crest]

its strange that the it works fine when I first mount the element and when I change the payment options as described above and mount stripe a second time then the UI bug happens

[chrome vortex]

But you said that after disabling appearances, it works each time correct?

yes, if I disable every appearance it works

[mossy crest]

yes, and we also managed to figure out why. It seems to be the fontFamily. We use a custom font face.

                    {
                        cssSrc: 'https://www.customer.com/styles/fonts.css',
                    },
                ],````

[chrome vortex]

Ah interesting

[mossy crest]

and in the appearance: ```fontFamily: 'Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',````

really strange tbh

[chrome vortex]

Yeah not sure, this might need a deeper investigation.

Can you raise a support ticket via
https://support.stripe.com/?contact=true

And provide as much information as you can along with a sample app that can help our team reproduce the issue?

[mossy crest]

okay thanks, I hope I can find the time today to do it. Otherwise it will be tomorrow. Thanks for the help to track down the issue 🙂

[chrome vortex]

No worries, happy to help

[mossy crest]

@chrome vortex fast follow up question: should I use chat or email for support ticket?

[chrome vortex]

Email would be better

[mossy crest]

okay 👍

[chrome vortex]

chat folks would convert it to email for technical support