PATCH
/checkout-stylesUpdates the inline checkout style settings for your account. These styles also apply to hosted checkouts.
Send only the fields that you want to change. Fields that you omit keep their current value. You can't set shared, modes, modes.light, or modes.dark to null.
Fields that you omit keep their current value. To change a field back to its default, send its default value. To see the defaults for light and dark mode, see get inline checkout style settings.
If successful, your response includes a copy of the updated inline checkout style settings entity.
Requires
checkout_settings.write permission.Request body
sharedobject
Settings that apply in both light and dark mode, like font, sizes, and borders. Set them here to apply to both modes. Send only the fields that you want to change.
buttonsobject
Shared styling of the checkout buttons.
focus_enabledboolean
Whether the primary and secondary buttons show a focus ring. The ring color can't be changed.
primaryobject
Shared styling of the primary button.
border_radiusstring
Example:
4pxPrimary button corner radius.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$border_widthstring
Example:
1pxPrimary button border width. Set to
0 to turn the border off.Pattern:
^(0|([0-9]|10)px)$font_sizestring
Example:
20pxPrimary button text size.
Pattern:
^(1[2-9]|2[0-9]|30)px$heightstring
Example:
44pxPrimary button height.
Pattern:
^([3-5][0-9]|60)px$secondaryobject
Shared styling of the secondary button.
border_radiusstring
Example:
4pxSecondary button corner radius.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$border_widthstring
Example:
1pxSecondary button border width. Set to
0 to turn the border off.Pattern:
^(0|([0-9]|10)px)$font_sizestring
Example:
20pxSecondary button text size.
Pattern:
^(1[2-9]|2[0-9]|30)px$heightstring
Example:
44pxSecondary button height.
Pattern:
^([3-5][0-9]|60)px$widthstring
Example:
100%Width of the primary and secondary buttons.
Pattern:
^([7-9][0-9]|100)%$globalsobject
Font, maximum width, and padding for the whole checkout.
font_familystring
Font 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_widthstring
Example:
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_paddingboolean
Whether the checkout container has side padding.
inputsobject
Shared styling of the checkout input fields.
border_radiusstring
Example:
4pxCorner radius of the text and select inputs.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$border_widthstring
Example:
1pxBorder width of the text and select inputs.
Pattern:
^([1-9]|10)px$box_shadowboolean
Whether the text and select inputs have a box shadow.
checkboxobject
Shared styling of checkboxes.
border_radiusstring
Example:
4pxCheckbox corner radius.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$font_sizestring
Example:
14pxText size of the text and select inputs.
Pattern:
^(1[2-9]|2[0-6])px$heightstring
Example:
44pxHeight of the text and select inputs.
Pattern:
^([3-5][0-9]|60)px$labelsobject
Shared styling of the checkout field labels.
font_sizestring
Example:
14pxField label text size.
Pattern:
^(1[2-9]|2[0-6])px$font_weightstring
Field label weight.
Values
normalbold
positionstring
Position of field labels. On mobile, labels always show at the top left.
Values
lefttop-left
visibleboolean
Whether field labels are shown.
linksobject
Text size of checkout links.
font_sizestring
Example:
20pxLink text size.
Pattern:
^(1[2-9]|2[0-9]|30)px$notificationsobject
Shared styling of checkout messages.
containerobject
Shape of the message container.
border_radiusstring
Example:
4pxMessage container corner radius.
Pattern:
^([0-9]|[1-3][0-9]|4[0-5])px$textobject
Text size of checkout messages.
font_sizestring
Example:
14pxMessage text size.
Pattern:
^(1[2-9]|2[0-6])px$modesobject
Colors for each mode. Send only the fields that you want to change. To use the same color in both modes, set it under
light and dark separately.lightobject
Colors used when inline checkout opens in light mode.
buttonsobject
Light mode styling of the checkout buttons.
payment_methodobject
Light mode styling of the payment method selector.
border_colorstring
Example:
#06C668Payment method selector border color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$primaryobject
Light mode styling of the primary button.
background_colorstring
Example:
#06C668Primary button background color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$background_color_hoverstring
Example:
#06C668Primary button background color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_colorstring
Example:
#06C668Primary button border color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_color_hoverstring
Example:
#06C668Primary button border color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$colorstring
Example:
#06C668Primary button text color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$color_hoverstring
Example:
#06C668Primary button text color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$secondaryobject
Light mode styling of the secondary button.
background_colorstring
Example:
#06C668Secondary button background color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$background_color_hoverstring
Example:
#06C668Secondary button background color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_colorstring
Example:
#06C668Secondary button border color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_color_hoverstring
Example:
#06C668Secondary button border color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$colorstring
Example:
#06C668Secondary button text color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$color_hoverstring
Example:
#06C668Secondary button text color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$globalsobject
Light mode focus colors for checkout fields.
focus_border_color_activestring
Example:
#06C668Border color of a focused field.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$focus_box_shadow_color_activestring
Example:
#06C668Shadow color of a focused field.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$inputsobject
Light mode styling of the checkout input fields.
background_colorstring
Example:
#06C668Background color of the text and select inputs.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_colorstring
Example:
#06C668Border color of the text and select inputs.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$checkboxobject
Light mode styling of checkboxes.
background_colorstring
Example:
#06C668Checkbox background color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$colorstring
Example:
#06C668Text color of the text and select inputs, focused or not.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$textobject
Light mode styling of text fields.
placeholder_colorstring
Example:
#06C668Text input placeholder color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$labelsobject
Light mode styling of the checkout field labels.
colorstring
Example:
#06C668Field label color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$linksobject
Light mode styling of the checkout links.
colorstring
Example:
#06C668Link color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$color_hoverstring
Example:
#06C668Link color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$notificationsobject
Light mode colors of checkout messages.
containerobject
Light mode colors of the message container.
background_colorstring
Example:
#06C668Message background color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_colorstring
Example:
#06C668Message border color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$darkobject
Colors used when inline checkout opens in dark mode.
buttonsobject
Dark mode styling of the checkout buttons.
payment_methodobject
Dark mode styling of the payment method selector.
border_colorstring
Example:
#06C668Payment method selector border color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$primaryobject
Dark mode styling of the primary button.
background_colorstring
Example:
#06C668Primary button background color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$background_color_hoverstring
Example:
#06C668Primary button background color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_colorstring
Example:
#06C668Primary button border color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_color_hoverstring
Example:
#06C668Primary button border color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$colorstring
Example:
#06C668Primary button text color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$color_hoverstring
Example:
#06C668Primary button text color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$secondaryobject
Dark mode styling of the secondary button.
background_colorstring
Example:
#06C668Secondary button background color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$background_color_hoverstring
Example:
#06C668Secondary button background color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_colorstring
Example:
#06C668Secondary button border color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_color_hoverstring
Example:
#06C668Secondary button border color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$colorstring
Example:
#06C668Secondary button text color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$color_hoverstring
Example:
#06C668Secondary button text color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$globalsobject
Dark mode focus colors for checkout fields.
focus_border_color_activestring
Example:
#06C668Border color of a focused field.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$focus_box_shadow_color_activestring
Example:
#06C668Shadow color of a focused field.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$inputsobject
Dark mode styling of the checkout input fields.
background_colorstring
Example:
#06C668Background color of the text and select inputs.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_colorstring
Example:
#06C668Border color of the text and select inputs.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$checkboxobject
Dark mode styling of checkboxes.
background_colorstring
Example:
#06C668Checkbox background color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$colorstring
Example:
#06C668Text color of the text and select inputs, focused or not.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$textobject
Dark mode styling of text fields.
placeholder_colorstring
Example:
#06C668Text input placeholder color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$labelsobject
Dark mode styling of the checkout field labels.
colorstring
Example:
#06C668Field label color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$linksobject
Dark mode styling of the checkout links.
colorstring
Example:
#06C668Link color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$color_hoverstring
Example:
#06C668Link color on hover.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$notificationsobject
Dark mode colors of checkout messages.
containerobject
Dark mode colors of the message container.
background_colorstring
Example:
#06C668Message background color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$border_colorstring
Example:
#06C668Message border color.
Pattern:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$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.
{ "modes": { "dark": { "buttons": { "payment_method": { "border_color": "#3A3A46" }, "primary": { "background_color": "#06C668", "background_color_hover": "#05B25E", "border_color": "#06C668", "border_color_hover": "#05B25E", "color": "#FFFFFF", "color_hover": "#FFFFFF" }, "secondary": { "background_color": "#1F1F27", "background_color_hover": "#1F1F27", "border_color": "#06C668", "border_color_hover": "#05B25E", "color": "#06C668", "color_hover": "#05B25E" } }, "globals": { "focus_border_color_active": "#258d84", "focus_box_shadow_color_active": "#36cec2" }, "inputs": { "background_color": "#1F1F27", "border_color": "#3A3A46", "checkbox": { "background_color": "#1F1F27" }, "color": "#FFFFFF", "text": { "placeholder_color": "#9393A8" } }, "labels": { "color": "#FFFFFF" }, "links": { "color": "#06C668", "color_hover": "#06C668" }, "notifications": { "container": { "background_color": "#1F1F27", "border_color": "#3A3A46" } } } }}{ "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": "#3A3A46" }, "primary": { "background_color": "#06C668", "background_color_hover": "#05B25E", "border_color": "#06C668", "border_color_hover": "#05B25E", "color": "#FFFFFF", "color_hover": "#FFFFFF" }, "secondary": { "background_color": "#1F1F27", "background_color_hover": "#1F1F27", "border_color": "#06C668", "border_color_hover": "#05B25E", "color": "#06C668", "color_hover": "#05B25E" } }, "globals": { "focus_border_color_active": "#258d84", "focus_box_shadow_color_active": "#36cec2" }, "inputs": { "background_color": "#1F1F27", "border_color": "#3A3A46", "checkbox": { "background_color": "#1F1F27" }, "color": "#FFFFFF", "text": { "placeholder_color": "#9393A8" } }, "labels": { "color": "#FFFFFF" }, "links": { "color": "#06C668", "color_hover": "#06C668" }, "notifications": { "container": { "background_color": "#1F1F27", "border_color": "#3A3A46" } } } } }, "meta": { "request_id": "aeec8d8e-8db1-4278-a0f5-a17330fb783e" }}