You can override the default Frisbii Media checkout styles by supplying your own CSS file. The custom CSS is loaded as the last stylesheet inside the checkout iframe, so your rules take precedence over all default styles using standard CSS cascade rules.
Setting up custom CSS
Pass the full https:// URL to your CSS file via the customCSS config option:
new plenigo.Checkout(purchaseId, {
elementId: "plenigoCheckout",
customCSS: "https://example.com/assets/frisbii-checkout.css"
}).start();
You can also configure a default custom CSS URL per offer in the Frisbii Media backend under Checkout Settings, without needing to pass it via JavaScript every time.
CORS requirements
The CSS file is fetched from inside the checkout iframe, which is served from the Frisbii Media domain. Your web server must therefore send CORS headers that allow the Frisbii Media domain to load the file.
Add the following header to the response for your CSS file:
Access-Control-Allow-Origin: https://checkout.frisbii-media.com
Or, to allow all origins (less restrictive):
Access-Control-Allow-Origin: *
Without this header, the browser will block the CSS file from loading.
Useful CSS overrides
The checkout hides some elements by default that you may want to show. Below are known examples.
Show cancellation policy in the checkout
The cancellation rule row is hidden by default. To make it visible:
.price-list table tr.cancel-rules {
display: inherit;
}
Tips for writing checkout CSS
Use browser developer tools to inspect the checkout iframe and find the class names you want to target. In most browsers you can select the iframe in the Elements panel and inspect its contents.
Keep specificity low — use class selectors rather than
!importantwhere possible, since the custom CSS loads last and should naturally win.Test on both stage and production, as checkout HTML structure may differ slightly between environments during rollouts.