Skip to main content
The onramp embedded checkout component supports extensive customization through the appearance prop, allowing you to match the look and feel of your application.

​
Quick Start

<CrossmintEmbeddedCheckout
    orderId={order.orderId}
    clientSecret={order.clientSecret}
    appearance={{
        fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" }],
        variables: {
            fontFamily: "Inter, system-ui, sans-serif",
            colors: {
                backgroundPrimary: "#ffffff",
                textPrimary: "#000000",
                accent: "#0074D9",
            },
        },
    }}
/>

​
Customization Options

​
Background

The embedded checkout component has a transparent background by default. The backgroundPrimary color only affects internal components (inputs, cards, etc.) within the iframe, not the iframe body itself. To customize the overall background, wrap the component: 
<div style={{ backgroundColor: "#1a1a1a" }}>
    <CrossmintEmbeddedCheckout {...props} />
</div>

​
Custom Fonts

Load custom fonts using the fonts array: 
appearance={{
    fonts: [
        { cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" }
    ]
}}

​
Global Variables

Control the overall look and feel: 
appearance={{
    variables: {
        fontFamily: "Inter, system-ui, sans-serif",
        fontSizeUnit: "16px",
        spacingUnit: "1rem",
        borderRadius: "8px",
        colors: {
            borderPrimary: "#E0E0E0",
            backgroundPrimary: "#FFFFFF",
            textPrimary: "#000000",
            textSecondary: "#666666",
            danger: "#FF0000",
            warning: "#FFA500",
            accent: "#0074D9"
        }
    }
}}

​
Component Rules

Control the visibility of specific inputs:
appearance={{
    rules: {
        DestinationInput: {
            display: "hidden"
        },
        ReceiptEmailInput: {
            display: "hidden"
        }
    }
}}
When hiding inputs, make sure to provide the corresponding values via props:
  • For hidden DestinationInput, provide recipient.walletAddress
  • For hidden ReceiptEmailInput, provide payment.receiptEmail
Customize label styling:
appearance={{
    rules: {
        Label: {
            font: {
                family: "Inter",
                size: "14px",
                weight: "500",
            },
            colors: {
                text: "#333333",
            },
        },
    },
}}
Style input fields:
appearance={{
    rules: {
        Input: {
            borderRadius: "8px",
            font: {
                family: "Inter",
                size: "16px",
                weight: "400",
            },
            colors: {
                text: "#000000",
                background: "#FFFFFF",
                border: "#E0E0E0",
                boxShadow: "none",
                placeholder: "#999999",
            },
            hover: {
                colors: {
                    border: "#0074D9",
                },
            },
            focus: {
                colors: {
                    border: "#0074D9",
                    boxShadow: "0 0 0 2px rgba(0,116,217,0.2)",
                },
            },
        },
    },
}}
Customize tab appearance:
appearance={{
    rules: {
        Tab: {
            borderRadius: "4px",
            font: {
                family: "Inter",
                size: "14px",
                weight: "500",
            },
            colors: {
                text: "#666666",
                background: "transparent",
            },
            selected: {
                colors: {
                    text: "#000000",
                    background: "#F5F5F5",
                },
            },
            hover: {
                colors: {
                    background: "#F0F0F0",
                },
            },
        },
    },
}}
Style primary buttons:
appearance={{
    rules: {
        PrimaryButton: {
            borderRadius: "8px",
            font: {
                family: "Inter",
                size: "16px",
                weight: "600"
            },
            colors: {
                text: "#FFFFFF",
                background: "#0074D9"
            },
            hover: {
                colors: {
                    background: "#0063B8"
                }
            },
            disabled: {
                colors: {
                    text: "#FFFFFF",
                    background: "#CCCCCC"
                }
            }
        }
    }
}}

​
Common Examples

​
Modern Dark Theme

appearance={{
    variables: {
        fontFamily: "Inter, system-ui, sans-serif",
        colors: {
            backgroundPrimary: "#1A1A1A",
            textPrimary: "#FFFFFF",
            textSecondary: "#A0A0A0",
            borderPrimary: "#333333",
            accent: "#7928CA"
        }
    },
    rules: {
        Input: {
            colors: {
                background: "#2D2D2D",
                border: "#404040",
                text: "#FFFFFF",
                placeholder: "#666666"
            }
        },
        PrimaryButton: {
            colors: {
                background: "#7928CA",
                text: "#FFFFFF"
            },
            hover: {
                colors: {
                    background: "#6B24B2"
                }
            }
        }
    }
}}

​
Minimal Light Theme

appearance={{
    variables: {
        fontFamily: "system-ui, sans-serif",
        borderRadius: "4px",
        colors: {
            backgroundPrimary: "#FFFFFF",
            textPrimary: "#000000",
            borderPrimary: "#E0E0E0",
            accent: "#000000"
        }
    },
    rules: {
        Input: {
            borderRadius: "4px",
            colors: {
                background: "#F5F5F5",
                border: "transparent"
            },
            focus: {
                colors: {
                    border: "#000000",
                    boxShadow: "none"
                }
            }
        },
        PrimaryButton: {
            borderRadius: "4px",
            colors: {
                background: "#000000",
                text: "#FFFFFF"
            }
        }
    }
}}