Custom Style for Payment Wall

Last updated: Aug 15th, 7:11am

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

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}

Custom Style for Payment Wall

Available CSS selectors

Attribute Values

Example

If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more