Customization

Quick links

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

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

Click here for Mozilla's CSS reference guide

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:

(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.

Brands Options

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

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.

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.

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.

Individual classes:

.wpwl-group-brand

.wpwl-group-cardNumber

.wpwl-group-expiry

.wpwl-group-cardHolder

.wpwl-group-cvv

.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.

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.

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

Individual classes:

.wpwl-wrapper-brand

.wpwl-wrapper-cardNumber

.wpwl-wrapper-expiry

.wpwl-wrapper-cardHolder

.wpwl-wrapper-cvv

.wpwl-wrapper-submit

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.

Individual classes:

.wpwl-control-brand

.wpwl-control-cardNumber

.wpwl-control-expiry

.wpwl-control-cardHolder

.wpwl-control-cvv

Buttons

.wpwl-button styles the submit buttons.

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.

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.

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.

Credit Card HTML and CSS Classes

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

PreviousCOPYandPAYNextAdvanced Options

Last updated