Advanced Options

Advanced Options

Here you can find some examples of advanced workflow customization for COPYandPAY. Each of the examples provided use the wpwlOptions variable, the full reference for which can be found on our COPYandPAY API Reference.

Please note that JavaScript examples from COPYandPAY can be used only when including jQuery.

<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>

Add custom fields

You can add additional parameters to the payment form using the wpwlOptions variable, prior to loading COPYandPAY. In the example above, we add a custom parameter to the payment form for recording the number of installments requested by the customer. The steps are listed below.

  1. Prepare the checkout
  2. Using the wpwlOptions API onLoad event, add the custom field HTML to the payment form
  3. Set the name of the html input field to your API parameter e.g. recurring.numberOfInstallments


Change label

You can change a label in the payment form using the wpwlOptions variable, prior to loading the COPYandPAY payment widget. In the following example, we'll change the credit card brand label in the payment form.

  1. Prepare the order
  2. Using the wpwlOptions API onLoad event, use a JQuery selector to set the desired value of the label


Create custom UI

You can change the behavior of the payment page when there are multiple types of payment methods using the wpwlOptions variable, prior to loading the COPYandPAY payment widget.

  1. Prepare the checkout
  2. Using the wpwlOptions API onLoad event, iterate through each .wpwl-container adding custom HTML before the container
  3. Create a JQuery click handler to show the container on click.


Summary page

It is possible to use COPYandPAY to temporarily store the payment information after submission, rather than executing it straight away. This can be useful if you want to display an order summary page before committing the payment. This can be done using the wpwlOptions variable, prior to loading the COPYandPAY.

To commit the payment after the summary page has been displayed, you can include the following form on the summary page. When the submit button is pressed, the payment will be executed.

<form action="https://test.oppwa.com/v1/checkouts/{id}/payment" method="POST"> 

<input type="submit" value="Pay now" /> 


Billing Address

It's possible to have the billing address fields available and even have them pre-filled. There are two options to do this:

1. Pre-filled data in the billing address that can be editable

To display the form, use the following option in wpwlOptions:

    var wpwlOptions = {
        billingAddress: {
            country: "US",
            state: "NY",
            city: "New York",
            postcode: "12345",
            street1: "Suite 1234",
            street2: "Some Road"
        },
        mandatoryBillingFields:{
            country: true,
            state: true,
            city: true,
            postcode: true,
            street1: true,
            street2: false
        }
    }


2. Display empty fields in the billing address so the shopper can edit it

To display the form, use the following option in wpwlOptions:

    var wpwlOptions = {
        billingAddress: {},
        mandatoryBillingFields:{
            country: true,
            state: true,
            city: true,
            postcode: true,
            street1: true,
            street2: false
        }
    }


Remarks:
  • Use the mandatoryBillingFields options in order to control if some field will be validated (for empty value) or not.
  • The state will be a dropdown for US and Canada.

MaskCvv page

It is possible to mask cvv on COPYandPAY, which can be done by setting "maskCvv" to true in wpwlOptions variable, prior to loading the COPYandPAY payment widget.

    var wpwlOptions = {
        maskCvv: true
    }


Applying styles to the fields in the payment form

It is possible to fully customise the fields in the payment form, for example by applying the styles of each field.

   window.wpwlOptions = { 
            cardPaymentWidgetStyles : [ 
                   {selector : '.wpwl-group-cardNumber', attributes : {'color':'red', 'width':'100%'}} ,
                   {selector : '.wpwl-button-pay', attributes: {'float':'left', 'background-color':'green', 'color':'white', 'width':'100%', 'font-family':'fantasy'}} ,
                   {selector: '.wpwl-wrapper-submit', attributes: {'text-align':'center', 'width':'100%'}},
                   {selector: '.wpwl-group-brandLogo', attributes: {'width':'100%'}},
                   {selector: '.wpwl-brand-card', attributes: {'float':'none', 'width':'100%'}}, 
                   {selector: '.wpwl-label-cardNumber', attributes: {'text-align':'center', 'width':'100%'}}, 
                   {selector: '.wpwl-label-expiry', attributes: {'color':'green', 'width':'100%'}}, 
                   {selector: '.wpwl-label-cvv', attributes: {'color':'white'}}, 
                   {selector: '.wpwl-label-cardHolder', attributes: {'color':'brown'}}, 
                   {selector: '.wpwl-group-cardHolder', attributes: {'width':'30%'}}, 
                   {selector: '.wpwl-label-brand-v2', attributes: {'color':'violet'}} 
            ], 
            fieldsOrder: ['payButton', 'cardNumber', 'brand', 'expiry', 'cardHolder', 'cvv', 'brandLogo'], 
   };


Changing expiry date editor

How the user enter the expiry date can be customised. The possible values are: oneText, twoDropDowns, twoTexts.

    var wpwlOptions = {
        cardExpiryMode: 'twoDropDowns'
    }