Custom styling

You can customize the appearance of LoopCheckout using CSS custom properties. These can be set globally via the customStyles config, or per-widget via the customStyles prop/attribute.

Example

<LoopCryptoCheckout
    customStyles={`
        --loop-crypto-checkout-color-primary: #4A3AF8;
        --loop-crypto-checkout-radius: 12px;
        --loop-crypto-checkout-font: 1rem 'Poppins', sans-serif;
    `}
/>

Available CSS Variables

Variable	CSS property/type	Description
`--loop-crypto-checkout-color-primary`	`color`	Accent color
`--loop-crypto-checkout-color-on-primary`	`color`	Text color on primary
`--loop-crypto-checkout-radius`	`border-radius`	Widget and input border radius
`--loop-crypto-checkout-color-text`	`color`	Main text color
`--loop-crypto-checkout-font`	`font`	Main font
`--loop-crypto-checkout-widget-border`	`border`	Widget border
`--loop-crypto-checkout-widget-radius`	`border-radius`	Widget border radius (overrides `--loop-crypto-checkout-radius`)
`--loop-crypto-checkout-widget-padding`	`padding`	Widget padding
`--loop-crypto-checkout-widget-shadow`	`box-shadow`	Widget shadow
`--loop-crypto-checkout-widget-background`	`background`	Widget background
`--loop-crypto-checkout-input-border`	`border`	Input border
`--loop-crypto-checkout-input-background`	`background`	Input background

💡
Set these variables in the customStyles string or in your global CSS for full theming control.