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>
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
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
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
Last modified 2yr ago