Custom Style for Payment Wall


Note: For PayPal Plus for Brazil, see the Brazilian integration guide.

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 selectorApplicable element(s) in payment wallSupported attributes
pppTextInputCredit 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
pppCheckboxLabelLabels present beside checkboxes
  • color
  • font-size
  • font-family
  • font-style
pppAlertMessageWarning message div
  • background color
  • color
  • border-color
  • border-width
  • font-size
  • font-family
  • font-style
pppErrorFieldsError message divborder-color

Attribute Values

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

CSS attributeAccepted 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-sizeAny 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-widthAny 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"
    }
}