Jo-Ld - Payment Element Styling | Stripe Developers | Page 1

hollow onyx Feb 8, 2022, 6:27 PM

#

Are you using any themes, custom configuration, or the Appearance API?

#

https://stripe.com/docs/stripe-js/appearance-api

elder verge Feb 8, 2022, 6:33 PM

#

No to all 3. Made it as simple as possible.

//Parent
<Elements stripe={stripePromise} options={{ clientSecret: stripePaymentIntent?.clientSecret }}>
<Outlet context={stripePaymentIntent} />
</Elements>

//Form

        <form>
            <PaymentElement />
        </form>

#

It looks very similar to this:

#dev-help message

But I'm using React not Angular.

hollow onyx Feb 8, 2022, 6:37 PM

#

I would recommend trying out the Appearance API to enforce a universal style, sometimes Chrome can get weird.
I'll check for any angry messages

elder verge Feb 8, 2022, 6:40 PM

#

You mean just to do this?
options={{
clientSecret: stripePaymentIntent?.clientSecret,
appearance: {
theme: 'stripe',
},
}}

hollow onyx Feb 8, 2022, 6:40 PM

#

Or you could get more customizable if you wanted. we do have a few different pre-built themes

elder verge Feb 8, 2022, 6:42 PM

#

But I can't set the height can I?

#

I added this in, to log whats happening.

   <PaymentElement
                onReady={(x) => {
                    const y = x as unknown as IStripeDev;
                    console.log(y._parent.clientHeight);
                    setTimeout(() => {
                        console.log(y._parent.clientHeight);
                    }, 100);
                }}
            />

Which gives this output as I click in and out of the page.

instrument.ts:130 2
instrument.ts:130 228
instrument.ts:130 Unmounting component
instrument.ts:130 2
instrument.ts:130 2
instrument.ts:130 Unmounting component
instrument.ts:130 2
instrument.ts:130 228
instrument.ts:130 Unmounting component
instrument.ts:130 2
instrument.ts:130 2
instrument.ts:130 Unmounting component
instrument.ts:130 2
instrument.ts:130 228
instrument.ts:130 Unmounting component
instrument.ts:130 2
instrument.ts:130 228

In looks like after onReady something in the Stripe library resizes the iFrame? But as you can see, it occasionally doesn't work.

#

So the 2nd and 4th ones stayed at 2px. The rest resized to 228

hollow onyx Feb 8, 2022, 6:54 PM

#

🤔

#

Yeah I do see what you mean

hollow onyx Feb 8, 2022, 7:21 PM

#

I'm still checking on this FY

elder verge Feb 8, 2022, 7:48 PM

#

Ok thanks.

hollow onyx Feb 8, 2022, 7:49 PM

#

Oh great, quick quesiton

#

Are you using just Stripe.js or react-stripe-js?

hollow onyx Feb 8, 2022, 8:20 PM

#

Hi @elder verge ? Can we get some more information from you?

#

In doing some digging there have been some previous issues with Firefox resulted in similar issues with iFrames

#

In this case I would like to know:

Your version of Chrome as well as your OS and version
A simple example so we can try to reproduce the error on our end
If it's possible, a dump of the Performance tab on your browser as the element renders and the bug occurs.

#

If you could provide some or all of that information it would really help us track down where the error is occurring.

elder verge Feb 8, 2022, 8:42 PM

#

Thanks. We've done it in multiple versions of Chrome on MacOS & Windows 11. I can send over the performance tab. Can I email it to you? I'd rather not share on here.

hollow onyx Feb 8, 2022, 9:01 PM

#

If you can email it to support https://support.stripe.com/contact and please reference my screenname I can grab the ticket and make sure we get moving on it.

#

And if you could include which versions of Chrome you tested with that would be helpful

#Jo-Ld - Payment Element Styling