Custom Style for Payment Wall
Deprecated
Important: PayPal Plus for Mexico is not available for new integrations. PayPal provides this documentation to support existing integrations.
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 selector | Applicable element(s) in payment wall | Supported attributes |
---|---|---|
pppTextInput | Credit Card Input:
|
|
pppDropdown |
|
|
pppDropdownHover |
|
|
pppDropdownMenu |
|
|
pppLabel |
|
|
pppCheckboxLabel | Labels present beside checkboxes |
|
pppAlertMessage | Warning message div |
|
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 |
---|---|
| Any valid HEX pair, short HEX, RBG, or color name. For example,
|
font-size | Any size in these ranges:
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 |
Note: Any other value will be ignored and reverted to the default. Default is Arial. |
font-style |
|
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"
}
}