# Custom Style for Payment Wall (/archive/paypal-plus/mx/style-payment-wall)



> **Note:** **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](/archive/paypal-plus/br) 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 [#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:FirstNameLastNameCVV                             | `background color``color``border-color``border-width``font-size``font-family``font-style` |
| `pppDropdown`      | Expiry Date dropdown buttonInstallments dropdown button upon hover | `background color``color``border-color``border-width``font-size``font-family``font-style` |
| `pppDropdownHover` | Expiry Date dropdown buttonInstallments dropdown button upon hover | `background color``color``border-color``border-width``font-size``font-family``font-style` |
| `pppDropdownMenu`  | Expiry Date dropdown buttonInstallments dropdown button upon hover | `background color``color``border-color``min-width`                                        |
| `pppLabel`         | Expiry labelCVV 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 [#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-16px0.75-1.0em                  > **Note:** **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`                           | ArialHelveticaTimes New RomanTimesCourier NewCourierSans Serif                  > **Note:** **Note:** Any other value will be ignored and reverted to the default. Default is Arial.                                          |
| `font-style`                            | normalitalic                                                                                                                                                                                                                       |
| `border-width`                          | Any font size in `px` or `em` units.                                                                                                                                                                                               |

## Example [#example]

<div className="pl-[1.625rem]" />

```json lineNumbers
{
    "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"
    }
}
```