UpGate is a world-class payment orchestration platform. Our mission is to simplify payments and make it easier for merchants to reach global customers. We use the latest technologies to help you achieve better conversions and global user monetization.
https://docs.upgate.com/_mock/openapi/
https://api.sandbox.upgate.com/v1/
taxOverride
object was added to Checkout requestpaymentFormOverride
object was added to Checkout requestVariable | Description |
---|---|
maxWidth | Maximum width of the container or component. |
primaryColorHover | Primary color when hovered. |
primaryColorActive | Primary color when active. |
payBtnColor | Color of the payment button. |
payBtnColorDisabled | Color of the payment button when disabled. |
payBtnFontSize | Font size for the payment button. |
payBtnLineHeight | Line height for the payment button. |
payBtnPadding | Padding for the payment button. |
textColor | Default color for text. |
formBorderColor | Border color for forms. |
formPadding | Padding inside forms. |
formBorderRadius | Border radius for forms. |
m_formPadding | Mobile-specific padding for forms. |
inputBackground | Background color for input fields. |
inputBorderColor | Border color for input fields. |
inputBorderColorHover | Border color for input fields when hovered. |
inputBorderColorFocus | Border color for input fields when focused. |
inputBorderColorError | Border color for input fields in error state. |
inputBorderWidth | Border width for input fields. |
inputBorderWidthHover | Border width for input fields when hovered. |
inputBorderWidthFocus | Border width for input fields when focused. |
inputBorderWidthError | Border width for input fields in error state. |
borderRadius | Border radius applied across components. |
inputPadding | Padding for input fields. |
inputFontSize | Font size for input fields. |
inputLineHeight | Line height for input fields. |
inputFontWeight | Font weight for input fields. |
placeHolderColor | Color for placeholder text in input fields. |
cardBackground | Background color for cards. |
cardBorderColor | Border color for cards. |
cardBorderRadius | Border radius for cards. |
cardPadding | Padding for cards. |
cardSelectColorSelected | Color of selected card during selection. |
inputIconColor | Color of icons inside input fields. |
descriptionColor | Color for descriptive text. |
dividerColor | Color of dividers or separators. |
fontSizeXl | Font size for extra-large text. |
fontSizeLg | Font size for large text. |
fontSizeSm | Font size for small text. |
fontSizeXs | Font size for extra-small text. |
fontSize2Xs | Font size for ultra-small text. |
lineHeight | Line height for text. |
fontCss | Custom CSS applied to fonts. |
lineHeightXl | Line height for extra-large text. |
lineHeightLg | Line height for large text. |
fontWeight | General font weight for text. |
buttonPadding | Padding for buttons. |
buttonFontWeight | Font weight for button text. |
buttonBackground | Background color for buttons. |
buttonFontSize | Font size for buttons. |
buttonLineHeight | Line height for button text. |
buttonColor | Text color for buttons. |
buttonBackgroundHover | Background color for buttons when hovered. |
buttonColorHover | Text color for buttons when hovered. |
buttonBackgroundActive | Background color for buttons when active. |
buttonColorActive | Text color for buttons when active. |
linkColor | Color for hyperlinks. |
fontWeightLight | Font weight for lighter text styles. |
fontWeightMedium | Font weight for medium text styles. |
fontWeightBold | Font weight for bold text styles. |
labelFontSize | Font size for labels. |
labelLineHeight | Line height for labels. |
labelFontWeight | Font weight for labels. |
labelColor | Color for labels. |
errorColor | Color for error messages or indicators. |
selectBackgroundHover | Background color for select elements when hovered. |
selectBackgroundActive | Background color for select elements when active. |
cardSelectDeleteColor | Color for delete option in card selection. |
transitionDuration | Duration for transition effects. |
transitionStyle | Style for transition effects. |
buttonOutlineColor | Outline color for buttons. |
buttonOutlineBorderColor | Border color for button outlines. |
buttonOutlineBorderWidth | Border width for button outlines. |
buttonOutlineBackgroundHover | Background color for outlined buttons when hovered. |
buttonOutlineBackgroundActive | Background color for outlined buttons when active. |
tabBorderRadius | Border radius for tabs. |
tabPadding | Padding for tabs. |
tabHeight | Height for tabs. |
tabColor | Text color for tabs. |
tabBackground | Background color for tabs. |
tabBorderColor | Border color for tabs. |
tabBorderColorActive | Border color for tabs when active. |
tabBackgroundActive | Background color for tabs when active. |
tabColorSelected | Text color for selected tabs. |
tabBackgroundSelected | Background color for selected tabs. |
tabBorderColorSelected | Border color for selected tabs. |
tabBorderColorHover | Border color for tabs when hovered. |
tabBackgroundHover | Background color for tabs when hovered. |
tabBorderWidth | Border width for tabs. |
tabBorderWidthHover | Border width for tabs when hovered. |
tabBorderWidthActive | Border width for tabs when active. |
tabBorderWidthSelected | Border width for selected tabs. |
tabFontWeight | Font weight for tabs. |
tabFontWeightSelected | Font weight for selected tabs. |
languageSelectColor | Color for language selection dropdown. |
subscriptionColor | Color used for subscription-related text or buttons. |
subscriptionFontSize | Font size for subscription-related text. |
subscriptionLineHeight | Line height for subscription-related text. |
subscriptionFontWeight | Font weight for subscription-related text. |
buttonColorDisabled | Text color for disabled buttons. |
buttonBackgroundDisabled | Background color for disabled buttons. |
footerColor | Color of text in the footer. |
footerIconColor | Color of icons in the footer. |
footerFontWeight | Font weight for text in the footer. |
footerFontSize | Font size for text in the footer. |
footerLineHeight | Line height for text in the footer. |
footerPadding | Padding for the footer. |
m_footerPadding | Mobile-specific padding for the footer. |
badgeFontSize | Font size for badges. |
badgeBackground | Background color for badges. |
badgeColor | Text color for badges. |
methodIconWidth | Width for payment method icons. |
methodIconHeight | Height for payment method icons. |
iconSize | General size for icons. |
searchInputBackground | Background color for search inputs. |
searchInputBackgroundHover | Background color for search inputs when hovered. |
messageInfoColor | Text color for informational messages. |
messageInfoBorderColor | Border color for informational messages. |
messageInfoBackground | Background color for informational messages. |
messageErrorColor | Text color for error messages. |
messageErrorBorderColor | Border color for error messages. |
messageErrorBackground | Background color for error messages. |
currencySelectBackground | Background color for the currency select. |
currencySelectBorderColor | Border color for the currency select. |
currencySelectIndicatorBackground | Background color for the indicator in the currency select. |
currencySelectIndicatorBorderRadius | Border radius for the indicator in the currency select. |
The theme_rules
option is a mapping of CSS-like selectors to CSS properties, enabling precise customization of individual components. Once you’ve defined your theme and variables, you can use these rules to seamlessly align the payment form with your website’s design.
Selectors in a rule can target any public class names within the payment form, as well as supported states, pseudo-classes, and pseudo-elements associated with each class. For example, the following are valid selectors: .form-control > input