Advanced Integration of Payment Pages 2.0

This guide details the advanced integration of Payment Pages 2.0, focusing on implementing an inline Payment Page form with an external submit button for enhanced control over payment submissions and interactions with Zuora.

If you want to have full control over the submission of payments and interaction with Zuora, you can implement a separate function in your client for Payment Page submission. Then you tie this function to an external submit button to invoke the function when the button is clicked. The response from payment creation is redirected to the configured callback page that you specified during the Payment Pages 2.0 configuration.

This advanced integration is supported only for the inline style Payment Page forms.

Below is an additional checklist to implement an inline Payment Page form with the external submit button. See Integrate Payment Pages 2.0 for the standard implementation steps.

During Payment Pages 2.0 configuration, set the Hosted Domain and Callback Path fields to form the callback URL.
Implement the callback page at the callback URL specified in the Callback Path.
Validate the digital signature returned from Zuora. For more detailed information, see Validate the Digital Signature for Payment Pages 2.0.
Set the client parameters as mentioned below. For more detailed information, see client parameter.
- For Z.render function, style , to " inline ".
- For Z.render function, submitEnabled , to " false ".
In your client, implement your Submit button that invokes a call to the Z.submit function to submit the Payment Page form. See Inline_ButtonOut_CITMIT.jsp in the Payment Pages 2.0 sample code suite on Zuora GitHub site for a sample implementation of a Submit button. For the button-outside integration for processing on-session payments, to avoid double charge, it is highly recommended to implement logic in your code to disable the submit button once it is clicked.

The following is a modified sample code from Integrate Payment Pages 2.0 to Website. The code was updated to render an inline Payment Page form with the external submit button.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Zuora Public javascript library -->
<script type="text/javascript" src="https://static.zuora.com/Resources/libs/hosted/1.0.0/zuora-min.js"/></script>
<script>
<!-- optional params in case prepopulation of certain fields is desired-->
var prepopulateFields = {
   creditCardAddress1:"123 Any Street",
   creditCardAddress2:"Suite #999",
   creditCardCountry:"USA",
   creditCardHolderName:"John Doe"
};
// Sample params for rendering iFrame on the client side
var params = {
   tenantId:123,
   id:"ff80808145b3bf9d0145b3c6812b0008", <!-- pageId-->
   token:"qJ52b1iCyPXyZTcuQbfZa2qmKhD4qBGz",
   signature:"MjJmYjBmNTY3ZWI3ZjcyZTRmMjZlZWVhMTJhZDhiYWI1ZjUyMGRkNQ==",
   style:"inline",
   key:"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC59DglWlsd82ooSVYyXoniF5rln3edz+5tdPLVBXXPDVXDCI9w7sneaj+XQs5LFaHZby117XzE8CFmoskVd2tsGLvXr83gEQ7eCXUrY0NDBFlAs0t+ChkB18VXG2DBbeUCI2poZJpCbpQm4rSvqUeY+8H/+/Stf4hXFWVPEEWyjwIDQAB",
   submitEnabled:"false", 
   locale:"fr_FR", 
   url:"http://www.zuora.com/apps/PublicHostedPageLite.do",
   paymentGateway: "DefaultGateway" //payment gateway name
};
function forwardCallbackURL(response) {
   var callbackUrl = "<%=request.getContextPath()%>/callback?";
   for(id in response) {
      callbackUrl = callbackUrl+id+"="+encodeURIComponent(response[id])+"&";
   }
   window.location.replace(callbackUrl);
}
var callback = function (response) {
   if(!response.success) {
      // Requesting Payment Page failed. Error handling code should be added here. Simply forward to the callback url in sample code.
      forwardCallbackURL(response);
   }
};
function loadHostedPage() {
   Z.render(
      params,
      prepopulateFields,
      callback
   );
}
//External button: function to submit form
function submitPage() {
    Z.submit();
}
</script>
</head>
<body onload="loadHostedPage();">
   <div id="zuora_payment" ></div>
   <!--Add additional form fields as needed→
   <!--External button: button to submit form→
   <button onclick="submitPage()">Submit</button>
</body>

Event Handler for UK Direct Debit Payment Method

When you implement a Payment Page with an external Submit button to accept the UK Direct Debit payment method, you can use the event handler function Z.setEventHandler to trigger an event to enable the Submit button only when users select the Agreement checkbox.

The following is a sample code with the event handler:

Z.setEventHandler('agreement_checked', function(response){
   alert('agreement_checked');
});
Z.setEventHandler('agreement_unchecked', function(response) {
   alert('agreement_uncheked');
});

In the version 1.20 of zuora.js , it is not possible to respond to the click event on the Agreement Checkbox for the external Submit button.

Welcome to Zuora Product Documentation

Explore our rich library of product information

Advanced Integration of Payment Pages 2.0

Event Handler for UK Direct Debit Payment Method

zuora-footer