Advanced Options

Advanced Options

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

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

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

Have card holder mandatory

By default the card holder is optional. Some integrations would like to have it mandatory. In order to achieve this we can implement the check on the onBeforeSubmitCard event, like below:

1. Prepare the checkout

2. Using the wpwlOptions API onBeforeCardSubmit event, check if the holder contains 2 or more characters.

html

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

css

body {background-color:#f6f6f5;}

js

var wpwlOptions = {
  style:"card", 
  onReady: function(e){
    $('.wpwl-form-card').find('.wpwl-button-pay').on('click', function(e){
      validateHolder(e);
    });
  },
  onBeforeSubmitCard: function(e){
    return validateHolder(e);
  }
}
function validateHolder(e){
  var holder = $('.wpwl-control-cardHolder').val();
  if (holder.trim().length < 2){
    $('.wpwl-control-cardHolder').addClass('wpwl-has-error').after('<div class="wpwl-hint wpwl-hint-cardHolderError">Invalid card holder</div>');
    return false;
  }
  return true;
}

Result

Add custom fields

You can add additional parameters to the payment form using the wpwlOptions variable, prior to loading Primeiro Pay. 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

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

css

body {background-color:#f6f6f5;}

js

  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

Change label

You can change a label in the payment form using the wpwlOptions variable, prior to loading the Primeiro Pay 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

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

css

body {background-color:#f6f6f5;}

js

  var wpwlOptions = {
    onReady: function() {
      $('.wpwl-label-brand').html('Card Brand');  
    }
}

Result