CSS customization

You can alter the look of our checkout to match your branding!

// Pass in the appearance prop into the WinterCheckout component
<WinterCheckout appearance={{
        // The checkout is split into two halves
        leftBackgroundColor, - The left background will also be applied to inputs & the wallet buttons
        rightBackgroundColor, - The right background will also be applied to the section with all of the numbers
        fontFamily, - The font family for the entirety of the checkout modal
        borderColor, - There's a border around the wallet buttons & input fields
        primaryTextColor, 
        secondaryTextColor,
        buttonColor, - This will be applied to the quantity buttons, the “pay with card”, and the “submit order” button 
        buttonTextColor, - The color of the text in the "pay with card", "submit order", and "here" button
        quantityButtonPlusMinusSvgFilter, - The color for the svg plus, minus nft quantity buttons, & arrows > at the top of the right side of the checkout 
        buttonClipLoaderColor, - This is the color of the spinning loader when you click "submit order" inside of the button
        buttonAndInputBoxShadow,
        buttonAndInputFocusBoxShadow,
        // If you want to add more customization to the payment component you can use the values below
        // By default it will grab the customization from above unless these are altered
        paymentInputBackgroundColor,
        paymentTextColor,
        paymentPlaceholderColor,
        paymentInputBoxShadow,
        paymentInputFocusBoxShadow
    }} 
/>

// Color's accept any css color
// BoxShadow's need to be in this format "0 3px 6px 1px rgba(56, 177, 247, 0.15)"
// SvgFilter should look like this "invert(100%) sepia(100%) saturate(1%) hue-rotate(135deg) brightness(105%) contrast(101%)"
// You can go here https://codepen.io/sosuke/pen/Pjoqqp to see what a specific color's svg filter would look like

Here's an example appearance prop
  
const appearance = {
        leftBackgroundColor: "#131317",
	rightBackgroundColor: "#22222d",
	buttonTextColor: "black",
	buttonColor: "#f59e0c",
	primaryTextColor: "white",
	secondaryTextColor: "#85868a",
	fontFamily: "Montserrat,sans-serif",
	buttonAndInputBoxShadow: "0 3px 6px 1px rgba(217, 119, 6, 0.2)",
	buttonAndInputFocusBoxShadow: "0 3px 6px 1px rgba(217, 119, 6, 0.8)",
        quantityButtonPlusMinusSvgFilter: "invert(100%) sepia(100%) saturate(1%) hue-rotate(135deg) brightness(105%) contrast(101%)",
        inputBackgroundColor: "#131317",
        buttonClipLoaderColor: "white",
        borderColor: "rgba(245,158,11)"
        }