search

recurly / recurly-js

Simple subscription billing in the browser
https://js.recurly.com/
MIT License
647 stars 139 forks source link

CardElement isn't transparent if color-scheme is set in parent page #878

Open Aycarambo opened 5 months ago

Aycarambo commented 5 months ago

At least using google Chrome, iframes are not transparent if they do not contain the same color-scheme tag value as the parent page.

So when implementing a dark theme on a website, it is impossible to style the background-color of the CardElement to match the user's current theme.

Potential solution : add a new optionnal object key to the CardElement({}) constructor for passing in the value of the color-scheme tag.

jritterbush commented 1 month ago

I think another option could be if Recurly could add <meta name="color-scheme" content="light dark"> to the head of the iframed page so that if the parent page is set to dark or light either should work.

jritterbush commented 1 month ago

My workaround was to add .recurly-hosted-field-card iframe { color-scheme: light } to my CSS.

That forces the iframe to light mode, which makes the iframe transparent so your site will control the background color at least. The fontColor prop can then be set based on your site's color-scheme/theme. That is working for me until a more permanent fix can be set up