Style your checkout

You can customize the look and feel of your embedded checkout to match your brand and improve the buyer experience. Use these styling options to adjust colors, fonts, and buttons so your checkout feels consistent with the rest of your site.

In the FastSpring app, go to Checkouts > Embedded Checkouts, select Settings on the checkout you want to edit, then click the Styling tab to view configuration options.

The sections below describe each area of checkout styling. Select a section or use the TOC on the right to jump ahead.

General styling

Adjust the base appearance of your checkout, including background colors, fonts, and input field styles.

Setting	Description	Available options
Background color	Select a color for your checkout’s background.	Color picker
Font	Select the font applied to all text in your checkout. If the chosen font isn’t available, FastSpring falls back to a default system font.	Helvetica Neue, Arial, sans-serif. These fonts degrade gracefully if are not available Droid Sans Fira Sans Lato Open Sans Open Sans Condensed PT Sans Roboto Roboto Condensed Source Sans Pro Ubuntu Ubuntu Condensed Montserrat
Body text color	Applies to all text within the checkout, except for pricing text.	Color picker
Input field background color	Sets the background color for all input fields, including payment method buttons, checkboxes, free-text fields, and dropdowns.	Color picker
Input field border color	Defines the border color for all input fields.	Color picker
Input field border color (on focus)	Sets the border color for an input field when it’s clicked or selected.	Color picker
Payment method logos light/dark mode	Choose whether payment method logos display in light or dark mode to stand out against your chosen input field background color. The default is Auto-detect.	Auto-detect (default): Automatically switches logos between light and dark based on background brightness. Light mode: Logos optimized for light backgrounds. Dark mode: Logos optimized for dark backgrounds.

Tip: After saving styling updates, use Save and Preview on your embedded checkout to confirm readability and contrast in both light and dark conditions.

Accessibility best practices

Accessible design ensures your checkout is usable and readable for all buyers.
Follow these guidelines when customizing colors, fonts, and other visual elements.

• Maintain a minimum 4.5:1 contrast ratio between text and background colors.
• Keep button heights above 40px for mobile-friendly tap targets.
• Use Auto-detect for payment logos to ensure visibility across backgrounds.
• Avoid using color alone to indicate interaction or state changes (pair with outlines or hover effects).
• Select clear, legible fonts that render well across devices.

Link styling

Control how hyperlinks appear within your checkout.

Setting	Description	Available options
Link text color	Applies to all links within the checkout.	Color picker
Link text color (on hover)	Defines the color applied to links when a buyer hovers over them.	Color picker

Pricing text

Adjust how pricing text appears within the checkout.

Setting	Description	Available options
Pricing text color	Applies to the total amount displayed at the top of checkout.	Color picker
Pricing text font size	Sets the size of the pricing text.	12px–25px
Pricing text font weight	Controls whether pricing text appears in normal or bold style.	Normal, Bold

Payment method options

Control the appearance and behavior of the payment-method accordion (labels, borders, backgrounds, and motion).

Labels and typography

Setting	Description	Available options
Label text color	Sets the color of payment-method labels.	Color picker
Label text color (selected)	Sets the label color when a payment method is selected.	Color picker
Font size	Sets the size of payment-method label text.	12px–25px

Tile colors and states

Setting	Description	Available options
Border color (unselected)	Sets the border color of an unselected payment-method tile.	Color picker
Border color (selected)	Sets the border color of the selected payment-method tile.	Color picker
Background color	Sets the tile background color.	Color picker
Background color (on hover)	Sets the tile background color on hover.	Color picker
Background color (selected)	Sets the tile background color when selected.	Color picker
Background hover color (selected)	Sets the selected tile’s background color on hover.	Color picker
Accordion background (expanded)	Sets the background color of the expanded accordion panel.	Color picker

Shape and motion

Setting	Description	Available options
Corner radius	Controls the roundness of payment-method tiles.	0px–25px
Accordion animation speed	Controls how quickly the payment-method accordion opens and closes.	0.2s–2s

Payment button

Customize the primary payment button at the bottom of the checkout page.

Setting	Description	Available options
Button color	Sets the background color of the payment button.	Color picker
Text color	Sets the payment button text color.	Color picker
Button color (on hover)	Sets the payment button background color on hover.	Color picker
Text color (on hover)	Sets the payment button text color on hover.	Color picker
Button height	Sets the vertical size of the payment button.	35px–50px

Corner radius

Adjust the roundness of all call-to-action (CTA) buttons in the checkout process.

Setting	Description	Available options
CTA buttons corner radius	Sets the border radius value for all CTA buttons. Use 0px for square corners. Default: 1px.	0px–25px

Completion page

Control the appearance of the completion page that displays after a successful order.

Setting	Description	Available options
Button color	Sets the background color of call-to-action buttons (for example, “View Quote,” “View Invoice,” or “Download”).	Color picker
Text color	Defines the text color for call-to-action buttons.	Color picker
Button color (on hover)	Sets the background color of call-to-action buttons when hovered.	Color picker
Text color (on hover)	Defines the text color of call-to-action buttons when hovered.	Color picker
Color of the successful order check mark on the completion page	Sets the color of the check mark displayed at the top of the completion page after a successful order.	Color picker