GET
/checkout-stylesReturns the inline checkout style settings for your account. These styles also apply to hosted checkouts.
Includes settings shared by light and dark mode (shared), and the colors for each mode (modes.light and modes.dark).
If you haven't changed any styles, the response includes the default styles.
Requires
checkout_settings.read permission.Response (200)
dataobjectrequired
Represents the inline checkout style settings for your account: settings shared by light and dark mode, and the colors for each mode. These styles also apply to hosted checkouts. Each account has one checkout style.
sharedobjectrequired
Settings that apply in both light and dark mode, like font, sizes, borders, and layout.
buttonsobjectrequired
Shared styling of the checkout buttons.
focus_enabledbooleanrequired
Default:
trueWhether the primary and secondary buttons show a focus ring. The ring color can't be changed.
primaryobjectrequired
Shared styling of the primary button.
border_radiusstringrequired
Default:
4pxExample:
4pxPrimary button corner radius.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$border_widthstringrequired
Default:
1pxExample:
1pxPrimary button border width. Set to
0 to turn the border off.Pattern:
^(0|([0-9]|10)px)$font_sizestringrequired
Default:
20pxExample:
20pxPrimary button text size.
Pattern:
^(1[2-9]|2[0-9]|30)px$heightstringrequired
Default:
44pxExample:
44pxPrimary button height.
Pattern:
^([3-5][0-9]|60)px$secondaryobjectrequired
Shared styling of the secondary button.
border_radiusstringrequired
Default:
4pxExample:
4pxSecondary button corner radius.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$border_widthstringrequired
Default:
1pxExample:
1pxSecondary button border width. Set to
0 to turn the border off.Pattern:
^(0|([0-9]|10)px)$font_sizestringrequired
Default:
14pxExample:
20pxSecondary button text size.
Pattern:
^(1[2-9]|2[0-9]|30)px$heightstringrequired
Default:
38pxExample:
44pxSecondary button height.
Pattern:
^([3-5][0-9]|60)px$widthstringrequired
Default:
100%Example:
100%Width of the primary and secondary buttons.
Pattern:
^([7-9][0-9]|100)%$globalsobjectrequired
Font, maximum width, and padding for the whole checkout.
font_familystringrequired
Default:
Lato, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serifFont family for all checkout text.
Values
Lato, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serifArial, Helvetica Neue, HelveticaNeue, Helvetica, sans-serifHelvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serifVerdana, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serifLucida Grande, Lucida Sans Unicode, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif
+ Show all values− Hide values
Georgia, serifTimes New Roman, TimesNewRoman, Times, serif
max_widthstringrequired
Default:
643pxExample:
643pxMaximum width of the checkout container.
Pattern:
^(64[3-9]|6[5-9][0-9]|[7-9][0-9]{2}|[1-9][0-9]{3,})px$use_container_paddingbooleanrequired
Default:
trueWhether the checkout container has side padding.
inputsobjectrequired
Shared styling of the checkout input fields.
border_radiusstringrequired
Default:
4pxExample:
4pxCorner radius of the text and select inputs.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$border_widthstringrequired
Default:
1pxExample:
1pxBorder width of the text and select inputs.
Pattern:
^([1-9]|10)px$box_shadowbooleanrequired
Default:
trueWhether the text and select inputs have a box shadow.
checkboxobjectrequired
Shared styling of checkboxes.
border_radiusstringrequired
Default:
4pxExample:
4pxCheckbox corner radius.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$font_sizestringrequired
Default:
14pxExample:
14pxText size of the text and select inputs.
Pattern:
^(1[2-9]|2[0-6])px$heightstringrequired
Default:
40pxExample:
44pxHeight of the text and select inputs.
Pattern:
^([3-5][0-9]|60)px$labelsobjectrequired
Shared styling of the checkout field labels.
font_sizestringrequired
Default:
15pxExample:
14pxField label text size.
Pattern:
^(1[2-9]|2[0-6])px$font_weightstringrequired
Default:
normalField label weight.
Values
normalbold
positionstringrequired
Default:
leftPosition of field labels. On mobile, labels always show at the top left.
Values
lefttop-left
visiblebooleanrequired
Default:
trueWhether field labels are shown.
linksobjectrequired
Text size of checkout links.
font_sizestringrequired
Default:
12pxExample:
20pxLink text size.
Pattern:
^(1[2-9]|2[0-9]|30)px$notificationsobjectrequired
Shared styling of checkout messages.
containerobjectrequired
Shape of the message container.
border_radiusstringrequired
Default:
4pxExample:
4pxMessage container corner radius.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$textobjectrequired
Text size of checkout messages.
font_sizestringrequired
Default:
12pxExample:
14pxMessage text size.
Pattern:
^(1[2-9]|2[0-6])px$modesobjectrequired
Colors for each mode.
lightobjectrequired
Colors used when inline checkout opens in light mode.
buttonsobjectrequired
Light mode styling of the checkout buttons.
payment_methodobjectrequired
Light mode styling of the payment method selector.
border_colorstringrequired
Default:
#06C668Example:
#06C668Payment method selector border color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$primaryobjectrequired
Light mode styling of the primary button.
background_colorstringrequired
Default:
#06C668Example:
#06C668Primary button background color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$background_color_hoverstringrequired
Default:
#05B25EExample:
#06C668Primary button background color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_colorstringrequired
Default:
#06C668Example:
#06C668Primary button border color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_color_hoverstringrequired
Default:
#06C668Example:
#06C668Primary button border color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$colorstringrequired
Default:
#FFFFFFExample:
#06C668Primary button text color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$color_hoverstringrequired
Default:
#FFFFFFExample:
#06C668Primary button text color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$secondaryobjectrequired
Light mode styling of the secondary button.
background_colorstringrequired
Default:
#FFFFFFExample:
#06C668Secondary button background color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$background_color_hoverstringrequired
Default:
#FFFFFFExample:
#06C668Secondary button background color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_colorstringrequired
Default:
#06C668Example:
#06C668Secondary button border color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_color_hoverstringrequired
Default:
#05B25EExample:
#06C668Secondary button border color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$colorstringrequired
Default:
#06C668Example:
#06C668Secondary button text color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$color_hoverstringrequired
Default:
#05B25EExample:
#06C668Secondary button text color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$globalsobjectrequired
Light mode focus colors for checkout fields.
focus_border_color_activestringrequired
Default:
#0096FFExample:
#06C668Border color of a focused field.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$focus_box_shadow_color_activestringrequired
Default:
#C0E6FFExample:
#06C668Shadow color of a focused field.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$inputsobjectrequired
Light mode styling of the checkout input fields.
background_colorstringrequired
Default:
#FFFFFFExample:
#06C668Background color of the text and select inputs.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_colorstringrequired
Default:
#D2D4DEExample:
#06C668Border color of the text and select inputs.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$checkboxobjectrequired
Light mode styling of checkboxes.
background_colorstringrequired
Default:
#FFFFFFExample:
#06C668Checkbox background color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$colorstringrequired
Default:
#2B2A35Example:
#06C668Text color of the text and select inputs, focused or not.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$textobjectrequired
Light mode styling of text fields.
placeholder_colorstringrequired
Default:
#9393A8Example:
#06C668Text input placeholder color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$labelsobjectrequired
Light mode styling of the checkout field labels.
colorstringrequired
Default:
#2B2A35Example:
#06C668Field label color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$linksobjectrequired
Light mode styling of the checkout links.
colorstringrequired
Default:
#06C668Example:
#06C668Link color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$color_hoverstringrequired
Default:
#06C668Example:
#06C668Link color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$notificationsobjectrequired
Light mode colors of checkout messages.
containerobjectrequired
Light mode colors of the message container.
background_colorstringrequired
Default:
#FFFFFFExample:
#06C668Message background color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_colorstringrequired
Default:
#EBECF0Example:
#06C668Message border color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$darkobjectrequired
Colors used when inline checkout opens in dark mode.
buttonsobjectrequired
Dark mode styling of the checkout buttons.
payment_methodobjectrequired
Dark mode styling of the payment method selector.
border_colorstringrequired
Default:
#06C668Example:
#06C668Payment method selector border color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$primaryobjectrequired
Dark mode styling of the primary button.
background_colorstringrequired
Default:
#06C668Example:
#06C668Primary button background color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$background_color_hoverstringrequired
Default:
#05B25EExample:
#06C668Primary button background color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_colorstringrequired
Default:
#06C668Example:
#06C668Primary button border color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_color_hoverstringrequired
Default:
#06C668Example:
#06C668Primary button border color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$colorstringrequired
Default:
#FFFFFFExample:
#06C668Primary button text color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$color_hoverstringrequired
Default:
#FFFFFFExample:
#06C668Primary button text color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$secondaryobjectrequired
Dark mode styling of the secondary button.
background_colorstringrequired
Default:
#434343Example:
#06C668Secondary button background color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$background_color_hoverstringrequired
Default:
#333333Example:
#06C668Secondary button background color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_colorstringrequired
Default:
#555555Example:
#06C668Secondary button border color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_color_hoverstringrequired
Default:
#555555Example:
#06C668Secondary button border color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$colorstringrequired
Default:
#FFFFFFExample:
#06C668Secondary button text color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$color_hoverstringrequired
Default:
#FFFFFFExample:
#06C668Secondary button text color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$globalsobjectrequired
Dark mode focus colors for checkout fields.
focus_border_color_activestringrequired
Default:
#0096FFExample:
#06C668Border color of a focused field.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$focus_box_shadow_color_activestringrequired
Default:
#C0E6FFExample:
#06C668Shadow color of a focused field.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$inputsobjectrequired
Dark mode styling of the checkout input fields.
background_colorstringrequired
Default:
#333333Example:
#06C668Background color of the text and select inputs.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_colorstringrequired
Default:
#555555Example:
#06C668Border color of the text and select inputs.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$checkboxobjectrequired
Dark mode styling of checkboxes.
background_colorstringrequired
Default:
#434343Example:
#06C668Checkbox background color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$colorstringrequired
Default:
#FFFFFFExample:
#06C668Text color of the text and select inputs, focused or not.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$textobjectrequired
Dark mode styling of text fields.
placeholder_colorstringrequired
Default:
#757A7AExample:
#06C668Text input placeholder color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$labelsobjectrequired
Dark mode styling of the checkout field labels.
colorstringrequired
Default:
#FFFFFFExample:
#06C668Field label color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$linksobjectrequired
Dark mode styling of the checkout links.
colorstringrequired
Default:
#C4C4C4Example:
#06C668Link color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$color_hoverstringrequired
Default:
#C4C4C4Example:
#06C668Link color on hover.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$notificationsobjectrequired
Dark mode colors of checkout messages.
containerobjectrequired
Dark mode colors of the message container.
background_colorstringrequired
Default:
#FFFFFFExample:
#06C668Message background color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$border_colorstringrequired
Default:
#EBECF0Example:
#06C668Message border color.
Pattern:
^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$metaobjectrequired
Information about this response.
request_idstringrequired
Example:
b15ec92e-8688-40d4-a04d-f44cbec93355Unique ID for the request relating to this response. Provide this when contacting Paddle support about a specific request.
{ "data": { "shared": { "buttons": { "focus_enabled": true, "primary": { "border_radius": "4px", "border_width": "1px", "font_size": "20px", "height": "44px" }, "secondary": { "border_radius": "4px", "border_width": "1px", "font_size": "14px", "height": "38px" }, "width": "100%" }, "globals": { "font_family": "Lato, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif", "max_width": "643px", "use_container_padding": true }, "inputs": { "border_radius": "4px", "border_width": "1px", "box_shadow": true, "checkbox": { "border_radius": "4px" }, "font_size": "14px", "height": "40px" }, "labels": { "font_size": "15px", "font_weight": "normal", "position": "left", "visible": true }, "links": { "font_size": "12px" }, "notifications": { "container": { "border_radius": "4px" }, "text": { "font_size": "12px" } } }, "modes": { "light": { "buttons": { "payment_method": { "border_color": "#06C668" }, "primary": { "background_color": "#06C668", "background_color_hover": "#05B25E", "border_color": "#06C668", "border_color_hover": "#06C668", "color": "#FFFFFF", "color_hover": "#FFFFFF" }, "secondary": { "background_color": "#FFFFFF", "background_color_hover": "#FFFFFF", "border_color": "#06C668", "border_color_hover": "#05B25E", "color": "#06C668", "color_hover": "#05B25E" } }, "globals": { "focus_border_color_active": "#0096FF", "focus_box_shadow_color_active": "#C0E6FF" }, "inputs": { "background_color": "#FFFFFF", "border_color": "#D2D4DE", "checkbox": { "background_color": "#FFFFFF" }, "color": "#2B2A35", "text": { "placeholder_color": "#9393A8" } }, "labels": { "color": "#2B2A35" }, "links": { "color": "#06C668", "color_hover": "#06C668" }, "notifications": { "container": { "background_color": "#FFFFFF", "border_color": "#EBECF0" } } }, "dark": { "buttons": { "payment_method": { "border_color": "#06C668" }, "primary": { "background_color": "#06C668", "background_color_hover": "#05B25E", "border_color": "#06C668", "border_color_hover": "#06C668", "color": "#FFFFFF", "color_hover": "#FFFFFF" }, "secondary": { "background_color": "#434343", "background_color_hover": "#333333", "border_color": "#555555", "border_color_hover": "#555555", "color": "#FFFFFF", "color_hover": "#FFFFFF" } }, "globals": { "focus_border_color_active": "#0096FF", "focus_box_shadow_color_active": "#C0E6FF" }, "inputs": { "background_color": "#333333", "border_color": "#555555", "checkbox": { "background_color": "#434343" }, "color": "#FFFFFF", "text": { "placeholder_color": "#757A7A" } }, "labels": { "color": "#FFFFFF" }, "links": { "color": "#C4C4C4", "color_hover": "#C4C4C4" }, "notifications": { "container": { "background_color": "#FFFFFF", "border_color": "#EBECF0" } } } } }, "meta": { "request_id": "aeec8d8e-8db1-4278-a0f5-a17330fb783e" }}