Customization

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>

Detailed documentation:


https://primeiropay.docs.oppwa.com/tutorials/integration-guide/customisation

Merchant Support

Customization

Analytics

Style Options

Card Number and CVV placeholder styles

Related content