Customization

 Quick links
​Style Options​
​Language Options​
​Brand Options​
​CSS Reference​
You can customize the look and feel of the COPYandPAY payment form using the options below.
html
css
js
result
Example Custom Style
Example Card Style
Example  Plain Style
Example Default
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/customisation" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
body {background-color:#f6f6f5;}
var wpwlOptions = {style:"card"}
css
    .cnpBillingCheckoutWrapper {position:relative;}
    .cnpBillingCheckoutHeader {width:100%;border-bottom: 1px solid #c0c0c0;margin-bottom:10px;}
    .cnpBillingCheckoutLeft {width:240px;margin-left: 5px;margin-bottom: 10px;border: 1px solid #c0c0c0;display:inline-block;vertical-align: top;padding:10px;}
    .cnpBillingCheckoutRight {width:50%;margin-left: 5px;border: 1px solid #c0c0c0;display:inline-block;vertical-align: top;padding:10px;}
    .cnpBillingCheckoutOrange {font-size:110%;color: rgb(255, 60, 22);font-weight:bold;}
    div.wpwl-wrapper, div.wpwl-label, div.wpwl-sup-wrapper { width: 100% }
    div.wpwl-group-expiry, div.wpwl-group-brand { width: 30%; float:left }
    div.wpwl-group-cvv { width: 68%; float:left; margin-left:2% }
    div.wpwl-group-cardHolder, div.wpwl-sup-wrapper-street1, div.wpwl-group-expiry { clear:both }
    div.wpwl-sup-wrapper-street1 { padding-top: 1px }
    div.wpwl-wrapper-brand { width: auto }
    div.wpwl-sup-wrapper-state, div.wpwl-sup-wrapper-city { width:32%;float:left;margin-right:2% }
    div.wpwl-sup-wrapper-postcode { width:32%;float:left }
    div.wpwl-sup-wrapper-country { width: 66% }
    div.wpwl-wrapper-brand, div.wpwl-label-brand, div.wpwl-brand { display: none;}
    div.wpwl-group-cardNumber { width:60%; float:left; font-size: 20px;  }
    div.wpwl-group-brand { width:35%; float:left; margin-top:28px }
    div.wpwl-brand-card  { width: 65px }
    div.wpwl-brand-custom  { margin: 0px 5px; background-image: url("https://oppwa.com/v1/paymentWidgets/img/brand.png") }
​
js
var wpwlOptions = {
      style: "plain",
      billingAddress: {
        country: "US",
        state: "NY",
        city: "New York",
        street1: "111 6th Avenu",
        street2: "",
        postcode: "12312"
      },
      forceCardHolderEqualsBillingName: true,
      showCVVHint: true,
      brandDetection: true,
      onReady: function(){ 
        $(".wpwl-group-cardNumber").after($(".wpwl-group-brand").detach());
        $(".wpwl-group-cvv").after( $(".wpwl-group-cardHolder").detach());
        var visa = $(".wpwl-brand:first").clone().removeAttr("class").attr("class", "wpwl-brand-card wpwl-brand-custom wpwl-brand-VISA")
        var master = $(visa).clone().removeClass("wpwl-brand-VISA").addClass("wpwl-brand-MASTER");
        $(".wpwl-brand:first").after( $(master)).after( $(visa));
      },
      onChangeBrand: function(e){
        $(".wpwl-brand-custom").css("opacity", "0.3");
        $(".wpwl-brand-" + e).css("opacity", "1"); 
      }
    }
css
body {background-color:#8e44ad;}
js
var wpwlOptions = {style:"card"}
css
body {background-color:#16a085;}
js
var wpwlOptions = {style:"plain"}
css
body {background-color:#f6f6f5;}
js
var wpwlOptions = {style:"card"}
 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:
<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>
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>
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. 
<div class="wpwl-group">
    <div class="wpwl-label">...</div>
    <div class="wpwl-wrapper">...</div>
</div>
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.
<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. 
.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 
.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. 
<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 
.wpwl-control-cardNumber 
.wpwl-control-expiry 
.wpwl-control-cardHolder 
.wpwl-control-cvv  
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>
Integration guide - Previous
COPYandPAY
Advanced Options
Last modified 3yr ago
Copy link
Outline
Quick links
Style Options
Card Number and CVV placeholder styles
Language Options
Brands Options
CSS Reference
Credit Card HTML and CSS Classes