> For the complete documentation index, see [llms.txt](https://developers.primeiropay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.primeiropay.com/getting-started/hosted-checkout/copy-and-pay-1/customization.md).

# Customization

You can customize the look and feel of the PrimeiroPay payment form using the options below.

![](/files/-MGjoClmulpUEEXyai2y)

html

```
<form action="https://primeiropay.docs.oppwa.com/tutorials/integration-guide/customisation" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
```

css

```
body {background-color:#f6f6f5;}
```

js

```
var wpwlOptions = {style:"card"}
```

[Click here for Mozilla's CSS reference guide](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

### Style Options

The style of the payment form can be changed by setting the **style** option in the wpwlOption object before the payment widget is loaded. Valid options are:

* plain
* card

```
<script>
    var wpwlOptions = {
        style: "card"
    }
</script>
<script async src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={checkoutId}"></script>
```

#### Card Number and CVV placeholder styles

In order to change the style of the placeholders inside card-number and cvv, please use the option iframeStyle, according to the example below:

```
<script>
var wpwlOptions = {
    iframeStyles: {
        'card-number-placeholder': {
            'color': '#ff0000',
            'font-size': '16px',
            'font-family': 'monospace'
        },
            'cvv-placeholder': {
            'color': '#0000ff',
                'font-size': '16px',
                'font-family': 'Arial'
        }
    }
}</script>
<script async src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={checkoutId}"></script>
```

(Please note that only Web Safe fonts are supported)

### Language Options

The language of the labels on the payment form can be changed by setting the **locale** option in the wpwlOption object before the payment widget is loaded.

```
<script>
    var wpwlOptions = {
        locale: "en"
    }
</script>
<script async src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId={checkoutId}"></script>
```

&#x20;Show all supported locales

### Brands Options

Payment options can be selected manually by entering the options in the `<form>` tag.

```
<form action="" class="paymentWidgets" data-brands="VISA MASTER"></form>
```

&#x20;Show all supported brands

### CSS Reference

As you have seen above, you can override any of the form's CSS simply by adding custom CSS in your stylesheet. For advanced style we recommend using a default style of plain, however custom stylesheets can be combined with any of the default style options.

#### Base CSS Classes

For performance reasons, all elements have a base CSS class and individual CSS class, e.g. the credit card payment form container has a base `.wpwl-container` class and an individual `.wpwl-container-card` class to specify the card payment form container.

**Container**

`.wpwl-container` wraps the payment form. Use this to apply, for example, margins between your page elements and the payment form.

```
<div class="wpwl-container">
    ...
</div>
```

Individual classes:

`.wpwl-container-card`

**Form**

`.wpwl-form` styles all payment forms. Use this to change the look and feel of the payment form, including backgrounds or shadows.

```
<form class="wpwl-form wpwl-clearfix" action="https://test.oppwa.com/v1/checkouts/{checkoutId}/payment" method="POST" target="cnpIframe" lang="en">
    ...
</form>
```

Individual classes:

`.wpwl-form-card`

**Groups**

`.wpwl-group` wraps the label and the wrapper of the input element. Use this to style labels and inputs together, i.e. position or width.&#x20;

```
<div class="wpwl-group">
    <div class="wpwl-label">...</div>
    <div class="wpwl-wrapper">...</div>
</div>
```

Individual classes:

`.wpwl-group-brand`&#x20;

`.wpwl-group-cardNumber`&#x20;

`.wpwl-group-expiry`&#x20;

`.wpwl-group-cardHolder`&#x20;

`.wpwl-group-cvv`&#x20;

`.wpwl-group-submit` styles the ""Pay now" button.

`.wpwl-group-button` styles the buttons containing the brand

**Labels**

`.wpwl-label` holds the label of an input element.

```
<div class="wpwl-label">
    Card Number
</div>
```

Individual classes:

`.wpwl-label-brand`

`.wpwl-label-cardNumber`

`.wpwl-label-expiry`

`.wpwl-label-cardHolder`

`.wpwl-label-cvv`

**Input and Select Wrappers**

Input and select elements are wrapped in a div to gain more control over their styles, especially their width.&#x20;

`.wpwl-wrapper` holds an input or select element. Use this to set the width of the containing input or select element.

```
<div class="wpwl-wrapper">
    ...
</div>
```

Individual classes:

`.wpwl-wrapper-brand`&#x20;

`.wpwl-wrapper-cardNumber`&#x20;

`.wpwl-wrapper-expiry`&#x20;

`.wpwl-wrapper-cardHolder`&#x20;

`.wpwl-wrapper-cvv`&#x20;

`.wpwl-wrapper-submit`&#x20;

**Input and Select Elements**

All textual `<input>`, `<textarea>`, and `<select>` elements have a base `.wpwl-control` class and are set to `width: 100%;` by default.  The width of these elements should be set via `.wpwl-wrapper`.

`.wpwl-control` styles the borders, backgrounds or paddings of all `<input>` and `<select>` elements.&#x20;

```
<input class="wpwl-control wpwl-control-cardNumber" name="card.number" autocomplete="off" type="tel" placeholder="Card Number">
```

```
<select class="wpwl-control wpwl-control-brand" name="paymentBrand">
    <option value="MASTER">Mastercard</option>
    <option value="VISA">Visa</option>
</select>
```

Individual classes:

`.wpwl-control-brand`&#x20;

`.wpwl-control-cardNumber`&#x20;

`.wpwl-control-expiry`&#x20;

`.wpwl-control-cardHolder`&#x20;

`.wpwl-control-cvv` &#x20;

**Buttons**

`.wpwl-button` styles the submit buttons.

```
<button type="submit" name="pay" class="wpwl-button wpwl-button-pay">Pay now</button>
```

Individual classes:

`.wpwl-button-pay` styles the "Pay now" button.

`.wpwl-button-brand` styles the buttons containing a brand.

**Brands**

`.wpwl-brand` styles the brand icons.

```
<div class="wpwl-brand wpwl-brand-MASTER"></div>
```

Individual classes:

`.wpwl-brand-card` styles the card brands

`.wpwl-brand-BRAND` styles the specific brand.

**Error Hints**

`.wpwl-has-error` adds a red background, border and color to the input element and a red color to the next `.wpwl-hint` element.

```
<input autocomplete="off" type="tel" name="card.number" class="wpwl-control wpwl-control-cardNumber wpwl-has-error" placeholder="Card Number">
<div class="wpwl-hint wpwl-hint-cardNumberError">
    Invalid card number or brand
</div>
```

Individual classes:

`.wpwl-hint-cardNumberError`

`.wpwl-hint-expiryError`

`.wpwl-hint-cardHolderError`

`.wpwl-hint-cvvError`

**Helpers**

`.wpwl-clearfix` allows elements to contain floats without re-sorting. Assuming that .wpwl-label and .wpwl-wrapper are floated, .wpwl-group needs .wpwl-clearfix.

```
<div class="wpwl-group wpwl-clearfix">
    <div class="wpwl-label">...</div>
    <div class="wpwl-wrapper">...</div>
</div>
```

#### Credit Card HTML and CSS Classes

Here is an example HTML output of the credit card payment form:

```
<div id="card_220921339056" class="wpwl-container wpwl-container-card">
    <form class="wpwl-form wpwl-form-card wpwl-clearfix" action="https://test.oppwa.com/v1/checkouts/{checkoutId}/payment" method="POST" target="cnpIframe" lang="en">
        <div class="wpwl-group wpwl-group-brand wpwl-clearfix">
            <div class="wpwl-label wpwl-label-brand">Brand</div>
            <div class="wpwl-wrapper wpwl-wrapper-brand">
                <select class="wpwl-control wpwl-control-brand" name="paymentBrand">
                    <option value="MASTER">Mastercard</option>
                    <option value="VISA">Visa</option>
                </select>
            </div>
            <div class="wpwl-brand wpwl-brand-card wpwl-brand-MASTER"></div>
        </div>
        <div class="wpwl-group wpwl-group-cardNumber wpwl-clearfix">
            <div class="wpwl-label wpwl-label-cardNumber">Card Number</div>
            <div class="wpwl-wrapper wpwl-wrapper-cardNumber">
                <input autocomplete="off" type="tel" name="card.number" class="wpwl-control wpwl-control-cardNumber" placeholder="Card Number">
            </div>a
        </div>
        <div class="wpwl-group wpwl-group-expiry wpwl-clearfix">
            <div class="wpwl-label wpwl-label-expiry">Expiry Date</div>
            <div class="wpwl-wrapper wpwl-wrapper-expiry">
                <input autocomplete="off" type="tel" name="card.expiry"b class="wpwl-control wpwl-control-expiry" placeholder="MM / YY">
            </div>
        </div>
        <div class="wpwl-group wpwl-group-cardHolder wpwl-clearfix">
            <div class="wpwl-label wpwl-label-cardHolder">Card holder</div>
            <div class="wpwl-wrapper wpwl-wrapper-cardHolder">
                <input autocomplete="off" type="text" name="card.holder" class="wpwl-control wpwl-control-cardHolder" placeholder="Card holder">
            </div>
        </div>
        <div class="wpwl-group wpwl-group-cvv wpwl-clearfix">
            <div class="wpwl-label wpwl-label-cvv">CVV</div>
            <div class="wpwl-wrapper wpwl-wrapper-cvv">
                <input autocomplete="off" type="tel" name="card.cvv" class="wpwl-control wpwl-control-cvv" placeholder="CVV">
            </div>
        </div>
        <div class="wpwl-group wpwl-group-submit wpwl-clearfix">
            <div class="wpwl-wrapper wpwl-wrapper-submit">
                <button type="submit" name="pay" class="wpwl-button wpwl-button-pay">Pay now</button>
            </div>
        </div>
        <input type="hidden" name="shopperResultUrl" value="https://test.oppwa.com/v1/checkouts/{checkoutId}/payment">
        <input type="hidden" name="card.expiryMonth" value="">
        <input type="hidden" name="card.expiryYear" value="">
    </form>
</div>
```