Transparent Checkout background in iframe?

Allan Delmare · August 13

Apologies if this has been asked elsewhere.

I see that we can provide basic color theme settings to blackbaud checkout. But when I call it from a custom giving form in my app, it launches a full window iframe that is solid white, and I can't figure out how to make this experience more integrated (such as a transparent background as featured in the screenshot from the docs page).

Is it possible? is it just demoing the 'optimized giving forms'…?

Mina Mistry · August 13

Hi Allan - this seems unusual, can you share a screenshot of the full page iframe you are seeing?

Thanks.

Allan Delmare · August 13

That's encouraging! Best news would be to learn that I'm doing something wrong ;)

Hitting the 'complete donation' button launches the modal (as expected) but with the fullscreen white background

Mina Mistry · August 14

Hi Allan

We have not been able to recreate this behavior with the white background with Blackbaud Checkout. We recommend checking whether there is any custom code / CSS that may be causing this issue?

Allan Delmare · August 14

I'll keep digging and report back. Thanks!

Alex Wong · August 15

if you are familiar with webdev, or your org has someone who is, have them take a look at the developer tool in a browser and see what styling (blackbaud styling or your website styling) code is affecting the "white" area

Allan Delmare · August 18

Thanks all, I resolved this — there was a global styling conflict with the Mantine UI library. I overhauled to ShadCN / tailwind and that resolved it right away.

…now lots of styling to fix :D

Transparent Checkout background in iframe?

Answers

Categories