Advanced Options

 Quick links
​Add custom fields​
​Change label​
​Create custom ui - headling​
​Create custom ui - boxing​
​Summary page​
​Store payment details​
​Field order in the payment form​
​Billing Address​
​Mask Cvv​
​Brand Detection​
​Unload/Reload the Widget​
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
Html
css
js
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
​
body {background-color:#f6f6f5;}
  var wpwlOptions = {
      style: "card",
          onReady: function() {
            var numberOfInstallmentsHtml = '<div class="wpwl-label wpwl-label-custom" style="display:inline-block">Number of Installments</div>' +
              '<div class="wpwl-wrapper wpwl-wrapper-custom" style="display:inline-block">' +
              '<select name="recurring.numberOfInstallments"><option value="1">1</option><option value="3">3</option><option value="5">5</option></select>' +
              '</div>'; 
            $('form.wpwl-form-card').find('.wpwl-button').before(numberOfInstallmentsHtml);
          }
    }
​
Result for cards
​
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
html
css
js
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
body {background-color:#f6f6f5;}
​
  var wpwlOptions = {
    onReady: function() {
      $('.wpwl-label-brand').html('Card Brand');  
    }
}
​
Create custom UI - headling
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.
html
css
js
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX PAYPAL IDEAL"></form>
h4.payHead {
      font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
      font-size: 14px;
      color: #09f;
      border: 2px solid #09f;
      border-radius: 4px;
      padding: 5px 8px;
      cursor: pointer;
   }
   .wpwl-container {display:none;}
​
/* create custom UI */
function wrapElement(element) {
  var id = $(element).attr("id");
  var wrapId = "wrap_" + id;
  $(element).wrap('<div id="' +wrapId+'"></div>"'); 
  return $('#'+wrapId);
} 
var methodMapping = {
  "card": " Click to pay with card",
  "prepayment-BOLETO": " Click to pay with Boleto",
  "virtualAccount-PAYPAL": " Click to pay with PayPal",
}
var wpwlOptions = {
    style: "plain",
  onReady: function() {
    $('.wpwl-container').each(function() {
      var id = $(this).attr("id");
      wrapElement(this).hide().before("<h4 class='payHead'>" + methodMapping[id.substring(0, id.lastIndexOf("_"))] + "</h4>");
      $(this).hide();
    });
    $("h4").click(function() {
      $(this).next().slideToggle();
    });
  }
}
​
Result for cards
Create custom UI - Box model
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 onReady event and make some adaptions to the containers.
3.Create a JQuery click handler to show the container on click.
html
css
js
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER GIROPAY"></form>
.wpwl-form {background:#f8f8f8}
.wpwl-label-brand {display:none}
.wpwl-form-card { background: #f8f8f8; border:0px} 
.wpwl-control, input.wpwl-control{
    background: white;
    border: 1px solid #ddd;
    box-shadow: none;
    border-radius: 0px;
    font-family:"ff-good-headline-web-pro-con", "Pathway Gothic One", sans-serif;
    text-transform:none;
    padding:10px;
    font-size: 18px;
    height: 50px;
}
.input-text:focus, input[type=text]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, textarea:focus {background-color: white;}
.wpwl-brand-GIROPAY{cursor:pointer}
.wpwl-brand, .wpwl-img { margin: 0 0 0 auto;}
var wpwlOptions = {
     locale: "en",
    style:"card",
    onReady:function(){
   $(".wpwl-brand-GIROPAY").click(function(){$(".wpwl-form-onlineTransfer-GIROPAY .wpwl-group-accountBankBic, .wpwl-form-onlineTransfer-GIROPAY .wpwl-wrapper-submit").slideToggle()})
   }
}
​
Result for cards
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" /> 
html
css
js
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
body {background-color:#f6f6f5;}
var wpwlOptions = {useSummaryPage: true,
  onSaveTransactionData: function(data) {
    console.log(data);
    location.href = "/opp-example-summary-page?checkoutId={checkoutId}";
  }
}
​
Result for cards
Store payment details
There are two ways to store the payment details used during a checkout:
1.Set the createRegistration parameter to true during step 1 - prepare the checkout
2.Add a checkbox to the COPYandPAY form to let the customer decide whether or not to store the card details.
(Option 2 is demonstrated in the example below).
html
css
js
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
body {background-color:#f6f6f5;}
  var wpwlOptions = {
  onReady: function() {
    var createRegistrationHtml = '<div class="customLabel">Store payment details?</div><div class="customInput"><input type="checkbox" name="createRegistration" value="true" /></div>';
    $('form.wpwl-form-card').find('.wpwl-button').before(createRegistrationHtml);
  }
}
​
Result for cards
Field order in the payment form
COPYandPAY allows you to modify the order of the fields in the payment form. As a result of this reordering, the order in which fields get tabbed will be adjusted accordingly. For details, please take a look at the JavaScript section in the following integration form.
html
css
js
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
body {background-color:#f6f6f5;}
  var wpwlOptions = {
    style:"card",
    autofocus:"card.holder",
    onReady:function(){
      $(".wpwl-group-cardHolder").after($(".wpwl-group-expiry"));
      $(".wpwl-group-cardNumber").before($(".wpwl-group-cardHolder"));
    }
  }
​
Result for cards
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
        }
    }
html
css
js
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
body {background-color:#f6f6f5;}
 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
    }
}
​
Result for cards
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
        }
    }
HTML
CSS
JS
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
body {background-color:#f6f6f5;}
  var wpwlOptions = {
    billingAddress: {},
    mandatoryBillingFields:{
        country: true,
        state: true,
        city: true,
        postcode: true,
        street1: true,
        street2: false
    }
}
​
Result for cards
Remark:
Use the mandatoryBillingFields options in order to control if some field will be validated (for empty value) or not.
​
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
    }
HTML
CSS
JS
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
body {background-color:#f6f6f5;}
var wpwlOptions = {
  maskCvv: true,
}
​
Result for cards
Brand Detection
To influence the brand detection behavior, use the following options in wpwlOptions variable prior to loading the COPYandPAY payment widget.
    var wpwlOptions = {
        // Enable brand detection
        brandDetection: true,
        
        // Use our internal BIN list to precisely detect brands
        brandDetectionType: "binlist",
        
        // Give priority to detected brands
        brandDetectionPriority: ["CARTEBANCAIRE","VISA","MAESTRO","MASTER"]
html
css
js
result
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options#branddetection" class="paymentWidgets" data-brands="VISA MAESTRO MASTER CARTEBANCAIRE"></form>
body { background-color:#f6f6f5; }
var wpwlOptions = {
  brandDetection: true,
  brandDetectionType: "binlist",
  brandDetectionPriority: ["CARTEBANCAIRE","VISA","MAESTRO","MASTER"],
}
​
Hide detected brands
Sometimes you might want to hide some brands when multiple brands are detected. This can guide the shopper to select your preferred brand. There are several options to implement this feature:
1.If you use your own brand images, implement onDetectBrand. This method is called with a list of detected brands. With this information you can choose to show or hide your images.
2.Use COPYandPAY images the "logos" style. By default this style dynamically displays all detected brands as you type the card number. You can implement onChangeBrand to change this behavior.
 The following snippet gives an example how to implement Option 2. Except for the first detected brand, all other brands are hidden behind three dots (...). The hidden brands are shown only after the three dots are clicked.
Try for example the BIN 513678 from which multiple brands are detected.
html
css
js
result
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options#branddetection" class="paymentWidgets" data-brands="VISA MAESTRO MASTER CARTEBANCAIRE"></form>
body { background-color:#f6f6f5; }
.dots { margin-left: 4px; }
.dots-hidden { display: none; }
​
var wpwlOptions = {
  style: "logos",
  
  brandDetection: true,
  brandDetectionType: "binlist",
  brandDetectionPriority: ["CARTEBANCAIRE","VISA","MAESTRO","MASTER"],
  
  // Optional. Use SVG images, if available, for better quality.
  imageStyle: "svg",
  
  onReady: function() {
    ready = true;
  },
  onChangeBrand: function() {
    hideBrands();
  }
};
​
var ready = false;
var dotsClicked = false;
function hideBrands() {
  if (!ready || dotsClicked) {
    return;
  }
  
  // Clears all previous dots-hidden logos, if any
   $(".wpwl-group-card-logos-horizontal > div").removeClass("dots-hidden");
  
  // Selects all non-hidden logos. They are detected brands which otherwise would be shown by default.
  var $logos = $(".wpwl-group-card-logos-horizontal > div:not(.wpwl-hidden)");
  if ($logos.length < 2) {
    return;
  }
  
  // Hides all except the first logo, and displays three dots (...)
  $logos.first().after($("<div>...</div>").addClass("dots"));
  $logos.filter(function(index) { return index > 0; }).addClass("dots-hidden");
  
  // If ... is clicked, un-hides the logos
  $(".dots").click(function() {
    dotsClicked = true;
    $(".dots-hidden").removeClass("dots-hidden");
    $(this).remove();
  });
}
​
​
​
Unload/Reload the Widget
In order to reload the widget, it's not enough to remove it from the page. You need to remove event bindings and stop the iframe communication, otherwise the previous widget will present unwanted error messages. To achieve that, use the wpwl.unload method and remove the static.min.js script.
After doing this, you can insert again the form with the brands and the paymentWidgets.js script in order to reload the widget.
The code below is an example of how to unload the widget.
    var unloadWidget = function() {
        if (window.wpwl !== undefined && window.wpwl.unload !== undefined) {
            window.wpwl.unload();
            $('script').each(function () {
                if (this.src.indexOf('static.min.js') !== -1) {
                    $(this).remove();
                }
            });
        }
    };
html
css
js
result
<form action="https://allpago.docs.oppwa.com/tutorials/integration-guide/advanced-options#branddetection" class="paymentWidgets" data-brands="VISA MASTER AMEX"></form>
​
body {background-color:#f6f6f5;}
var unloadWidget = function() {
    if (window.wpwl !== undefined && window.wpwl.unload !== undefined) {
        window.wpwl.unload();
        $("script").each(function () {
            if (this.src.indexOf("static.min.js") !== -1) {
                $(this).remove();
            }
        });
    }
};
​
var $unloadButton = $("<button>Unload Widget</button>").on("click", unloadWidget);
​
$("body").prepend($unloadButton);
result
Customization
COPYandPAY API
Last modified 1yr ago
Copy link
Outline
Quick links
Add custom fields
Change label
Create custom UI - headling
Create custom UI - Box model
Summary page
Store payment details
Field order in the payment form
Billing Address
1. Pre-filled data in the billing address that can be editable
2. Display empty fields in the billing address so the shopper can edit it
MaskCvv page
Brand Detection
Unload/Reload the Widget