Pay Button CSS - How to improve the styling

[pavlenex]

On our community call #0 we had a representative from HRF who talked a bit about their experience with BTCPay Server.

One problem they faced is messed up CSS in our payment button. I've been noticing this problem for years as well, it's very hard for CSS to work properly when people embed it into their website.

There are way too many examples of a weird CSS embeds, some prominent one:

• Andreas A. donation page
• The Tor Project donation page

It took some improvements to make them look okay. It's been suggested by @Kukks that we should look into iframe embed and @Zaxounette had a nice idea of us looking into how PayPal does their buttons.

I am opening this discussion so that we can figure out the best course of action towards making buttons easier to embed without crazy amount of tweaking. It's a bit sad to see all those broken buttons people have on their pages.

[bolatovumar]

Having an iframe wrap your custom embed widget to avoid styling/JS collision is pretty standard. That's how PayPal does it as well. See here for example: https://developer.paypal.com/docs/checkout/

[pavlenex]

Thought so, I guess it makes sense to do this for our buttons as well. I believe there shouldn't be breaking changes for the existing users if we go this route.

[dennisreimann]

It would not break existing users setup, but might also introduce other set up problems for new users. Depending on how their webserver is configured, the X-Frame-Options or Content-Security-Policy headers might prevent the iframe content from showing up. Other than that, appropriately sizing iframes is a nightmare, especially in the context of responsive sites.

I think the best way to tackle this would be to look at the cases that don't work and make the CSS more bulletproof by setting the properties that otherwise leak into the component. Right now we just set the basics, which works well for cases where we want to adapt to the site it gets used in (e.g. reuse their fonts). If we want to provide some finished styles like in the PayPal example mentioned above, we could definitely improve the CSS and fixate it more, so that 90% of the usual embedding problems wouldn't occur.

[pavlenex]

I remember that when we had iframe embed into crowdfunding, the major problem was that it was blocked (due to domain being different, example a shop on woo is using a third-party btcpay host or just has a different domain as a self-hosted server), so that's a good point Dennis.

[bolatovumar]

I guess we could have two options: pay button in iframe AND pay button without iframe.

[Kukks]

Maybe we could use something like `#my_div * { all: initial; }` to reset any styles interfering with btcpay pay buttons?

…

On Mon, Dec 14, 2020 at 10:05 AM Dennis Reimann ***@***.***> wrote: It would not break existing users setup, but might also introduce other set up problems for new users. Depending on how their webserver is configured, the X-Frame-Options <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options> or Content-Security-Policy <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy> headers might prevent the iframe content from showing up. I think the best way to tackle this would be to look at the cases that don't work and make the CSS more bulletproof by setting the properties that otherwise leak into the component. Right now we just set the basics, which works well for cases where we want to adapt to the site it gets used in (e.g. reuse their fonts). If we want to provide some finished styles like in the PayPal example mentioned above, we could definitely improve the CSS and fixate it more, so that 90% of the usual embedding problems wouldn't occur. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2136 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN357V7X277V3RERGDSU5DSUXIPJANCNFSM4UZKIGOQ> .

[bolatovumar]

This might work.

[dennisreimann]

Yes, there are at least two approaches we can take and I would strongly encourage this to be a CSS-based solution rather than trying our luck with iframes, because as mentioned above that involves its own set of drawbacks.