Custom Style for Payment Wall

Last updated: Aug 15th, 7:02am

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: 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`
`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

1{
2    "pppTextInput": {
3        "background-color": "#f2f2f2",
4        "color": "rgb(80, 80, 80)",
5        "border-color": "#bbc",
6        "border-width": "1px",
7        "font-size": "15px",
8        "font-family": "Arial",
9        "font-style": "normal"
10    },
11    "pppDropdown": {
12        "background-color": "#f2f2f2",
13        "color": "rgb(80, 80, 80)",
14        "border-color": "#bbc",
15        "border-width": "1px",
16        "font-size": "15px",
17        "font-family": "Arial",
18        "font-style": "normal"
19    },
20    "pppDropdownHover": {
21        "background-color": "#f2f2f2",
22        "color": "rgb(80, 80, 80)",
23        "border-color": "#bbc",
24        "border-width": "1px",
25        "font-size": "15px",
26        "font-family": "Arial",
27        "font-style": "normal"
28    },
29    "pppDropdownMenu": {
30        "background-color": "#fff",
31        "color": "#505050",
32        "font-size": "15px",
33        "min-width": "0px"
34    },
35    "pppLabel": {
36        "color": "#505050",
37        "font-size": "15px",
38        "font-family": "Arial",
39        "font-style": "italic"
40    },
41    "pppPrivacyPolicyLabel": {
42        "color": "#505050",
43        "font-size": "14px",
44        "font-family": "Arial",
45        "font-style": "italic"
46    },
47    "pppCheckboxLabel": {
48        "color": "#505050",
49        "font-size": "13px",
50        "font-family": "Arial",
51        "font-style": "italic"
52    },
53    "pppAlertMessage": {
54        "background-color": "#ccc",
55        "color": "rgb(255, 0, 0)",
56        "border-color": "#700",
57        "border-width": "1px",
58        "font-size": "13px",
59        "font-family": "Arial",
60        "font-style": "normal"
61    },
62    "pppErrorFields": {
63        "border-color": "#d00"
64    }
65}