Custom Style for Payment Wall

To create a customized payment form experience that matches existing styles and layout, merchants can pass a set of specified CSS selectors and their respective attributes in the form of a JSON string.

Available CSS selectors

The following selectors are optional and can be passed based on requirement, and only specific attributes can be modified.

CSS selector Applicable element(s) in payment wall Supported attributes
pppTextInput Credit Card Input:
  • FirstName
  • LastName
  • CVV
  • background color
  • color
  • border-color
  • border-width
  • font-size
  • font-family
  • font-style
pppDropdown
  • Expiry Date dropdown button
  • Installments dropdown button upon hover
  • background color
  • color
  • border-color
  • border-width
  • font-size
  • font-family
  • font-style
pppDropdownHover
  • Expiry Date dropdown button
  • Installments dropdown button upon hover
  • background color
  • color
  • border-color
  • border-width
  • font-size
  • font-family
  • font-style
pppDropdownMenu
  • Expiry Date dropdown button
  • Installments dropdown button upon hover
  • background color
  • color
  • border-color
  • min-width
pppLabel
  • Expiry label
  • CVV label
  • color
  • font-size
  • font-family
  • font-style
pppPrivacyPolicyLabel Privacy Policy label - Brazil only
  • color
  • font-size
  • font-family
  • font-style
pppCheckboxLabel Labels present beside checkboxes
  • color
  • font-size
  • font-family
  • font-style
pppAlertMessage Warning message div
  • background color
  • color
  • border-color
  • border-width
  • font-size
  • font-family
  • font-style
pppErrorFields Error message div border-color

Attribute Values

The attributes defined above accept the following values. Any invalid or unaccepted values will result in schema validation errors.

CSS attribute Accepted values
  • background-color
  • border-color
  • color
Any valid HEX pair, short HEX, RBG, or color name. For example,
  • #ff0000
  • #f00
  • rgb(255, 0, 0)
  • red
font-size Any size in these ranges:
  • 12-16px
  • 0.75-1.0em
Note: Any font size less than the minimum will be increased to the minimum. Any font size larger than the maximum will be reduced to the maximum.
font-family
  • Arial
  • Helvetica
  • Times New Roman
  • Times
  • Courier New
  • Courier
  • Sans Serif
Note: Any other value will be ignored and reverted to the default. Default is Arial.
font-style
  • normal
  • italic
border-width Any font size in px or em units.

Example

{
    "pppTextInput": {
        "background-color": "#f2f2f2",
        "color": "rgb(80, 80, 80)",
        "border-color": "#bbc",
        "border-width": "1px",
        "font-size": "15px",
        "font-family": "Arial",
        "font-style": "normal"
    },
    "pppDropdown": {
        "background-color": "#f2f2f2",
        "color": "rgb(80, 80, 80)",
        "border-color": "#bbc",
        "border-width": "1px",
        "font-size": "15px",
        "font-family": "Arial",
        "font-style": "normal"
    },
    "pppDropdownHover": {
        "background-color": "#f2f2f2",
        "color": "rgb(80, 80, 80)",
        "border-color": "#bbc",
        "border-width": "1px",
        "font-size": "15px",
        "font-family": "Arial",
        "font-style": "normal"
    },
    "pppDropdownMenu": {
        "background-color": "#fff",
        "color": "#505050",
        "font-size": "15px",
        "min-width": "0px"
    },
    "pppLabel": {
        "color": "#505050",
        "font-size": "15px",
        "font-family": "Arial",
        "font-style": "italic"
    },
    "pppPrivacyPolicyLabel": {
        "color": "#505050",
        "font-size": "14px",
        "font-family": "Arial",
        "font-style": "italic"
    },
    "pppCheckboxLabel": {
        "color": "#505050",
        "font-size": "13px",
        "font-family": "Arial",
        "font-style": "italic"
    },
    "pppAlertMessage": {
        "background-color": "#ccc",
        "color": "rgb(255, 0, 0)",
        "border-color": "#700",
        "border-width": "1px",
        "font-size": "13px",
        "font-family": "Arial",
        "font-style": "normal"
    },
    "pppErrorFields": {
        "border-color": "#d00"
    }
}
Feedback