Welcome to Zuora Product Documentation

Explore our rich library of product information

Integrate Advanced Hosted Payment pages

Learn how to customize the Hosted Payment Pages by changing iframe size, modifying error messages, and appending extra parameters.

After performing the Basic Hosted Payment Pages Integration, you can further customize the reference implementation, including:

  • Changing the size of the iframe
  • Changing the error message text
  • Appending extra parameters to the iframe URL
  1. Change the Size of the Hosted Payment Pages iframe.

    You can change the size Hosted Payment Pages iframe by modifying the width and height of the iframe in the HPMSample page:

    <iframe id="z_hppm_iframe" name="z_hppm_iframe" width="100%"
    		  height="420" src="{!iframeSrc}" frameborder="0">
    		  </iframe>
    
  2. Change the Error Message Text.
    The error code and error message mapping is listed in the Apex class ErrorCodeMapping. You can modify the message text in this class.
    Note:

    Do not change the error code.

  3. Append Extra Parameters to the iframe URL.
    You can customize the Hosted Payment Pages iframe functionality by providing extra Hosted Payment Pages parameters. To do this, you must specify the parameters and their values in Apex method HPMSampleController.getExtraParameters():
    HPMSampleController.getExtraParameters()
    			/**
    			 * Specify extra HPM parameters that can be used to (1) Preload field values (2)        Override default HPM properties.  Please see
    			 * HPM Implementation Guide for a complete list of HPM parameters.
    			 */
    			public Map<String, String> getExtraParameters() {
    			  return new Map<String, String> {
    			  'field_maxConsecutivePaymentFailures' => '1',
    			  'field_maxConsecutivePaymentFailures' => '1',
    			  'field_creditCardType' => 'Visa'
    			  };
    			}