Styling
The Croissant Pay component uses Shadow DOM for style isolation. Customize the look and feel using CSS custom properties — no need to fight specificity or worry about style leakage.
Interactive Playground
Adjust the controls to customize the component, then copy the generated CSS into your stylesheet.
Live Preview (Sandbox)
Generated CSS
css
/* Using defaults — no overrides needed */Presets
CSS Custom Properties Reference
| Property | Default | Description |
|---|---|---|
--croissant-font-family | inherit | Font family for all text |
--croissant-card-padding | 16px 0 | Padding around the card container |
--croissant-heading-font-size | 1em | Heading font size |
--croissant-heading-color | inherit | Heading text color |
--croissant-incentive-font-size | 0.875em | Incentive text font size |
--croissant-incentive-color | inherit | Incentive text color |
--croissant-btn-bg | #171717 | Button background color |
--croissant-btn-color | #fff | Button text color |
--croissant-btn-border | none | Button border |
--croissant-btn-border-radius | 8px | Button border radius |
--croissant-btn-padding | 12px 24px | Button padding |
--croissant-btn-font-size | 1em | Button font size |
--croissant-btn-width | 100% | Button width |
Usage
Set CSS custom properties on the croissant-pay-card element or any parent. Properties pierce the Shadow DOM boundary.
Presets
Copy one of these presets as a starting point for matching your brand's checkout style.
Outline / Minimal
css
croissant-pay-card {
--croissant-btn-bg: transparent;
--croissant-btn-color: #171717;
--croissant-btn-border: 1px solid #d4d4d4;
--croissant-btn-border-radius: 6px;
--croissant-btn-padding: 10px 20px;
--croissant-btn-font-size: 0.875em;
}Rounded Pill
css
croissant-pay-card {
--croissant-btn-bg: #171717;
--croissant-btn-color: #fff;
--croissant-btn-border: none;
--croissant-btn-border-radius: 9999px;
--croissant-btn-padding: 14px 32px;
--croissant-btn-font-size: 1em;
}Luxury / Serif
css
croissant-pay-card {
--croissant-font-family: "Times New Roman", "Georgia", serif;
--croissant-btn-bg: #1a1a1a;
--croissant-btn-color: #f5f0eb;
--croissant-btn-border: none;
--croissant-btn-border-radius: 2px;
--croissant-btn-padding: 14px 28px;
--croissant-btn-font-size: 0.9375em;
--croissant-heading-color: #1a1a1a;
}Compact
css
croissant-pay-card {
--croissant-card-padding: 8px 0;
--croissant-btn-bg: #171717;
--croissant-btn-color: #fff;
--croissant-btn-border: none;
--croissant-btn-border-radius: 4px;
--croissant-btn-padding: 8px 16px;
--croissant-btn-font-size: 0.8125em;
--croissant-heading-font-size: 0.875em;
--croissant-incentive-font-size: 0.75em;
}