Transparent Checkout background in iframe?

Allan Delmare

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

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

Thanks.

Allan Delmare

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

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

I'll keep digging and report back. Thanks!

Alex Wong

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

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