Learn how to integrate the Hosted Payments page with Zuora Quotes by creating VisualForce pages, modifying controllers, updating callback URLs, and adding custom buttons.

1. Create VisualForce Pages.
   1. First, create two Salesforce.com VisualForce pages: PaymentMethodCreation and PaymentMethodSample

      • Create a PaymentMethodCreation page that includes an HPMSampleHPMSample page.

        <apex:page standardController=''zqu__Quote__c''>
        				<apex:include pageName=''HPMSample''/>
        			</apex:page>
        

      • Create a PaymentMethodConfirm page that includes an HPMConfirmHPMConfirm page.

        <apex:page>
        				<apex:include pageName=''HPMConfirm''/>
        				<apex:form>
        					<apex:detail subject=''{!$CurrentPage.parameters.id}''/>
        				</apex:form>
        			</apex:page>
        

2. Modify HPMSampleController.cls.
   1. Modify HPMSampleController.cls to add an extra parameter, field_accountId. This ID is the Zuora Customer Account ID that can be queried from the quote object (after the quote is sent to Zuora successfully).
   2. Add the lines in bold:

      /**
           * Specify extra parameters that can be used to: 
           * (1) Preload field values 
           * (2) Override default properties.
           */
      
          public static Map<String, String> getExtraParameters() {
            String quoteId = ApexPages.currentPage().getParameters().get( 'id' ) ;
            String billingAccountZuoraId = '';
            if (quoteId != null && quoteId.trim() != ''){
              billingAccountZuoraId = (String)[select zqu__ZuoraAccountID__c from
              zqu__Quote__c where id = :quoteId][0].get('zqu__ZuoraAccountID__c');
            }
              return new Map<String, String> {
                  'field_maxConsecutivePaymentFailures' => '1', 
                  'field_maxConsecutivePaymentFailures' => '1', 
                  'field_creditCardType' => 'Visa', 
                  'field_accountId' => billingAccountZuoraId
              }; 
          }

3. Update the Callback URL.
   1. After updating the HPMSampleController.cls, edit the HPMSample VisualForce page to update the callback URL. You must make sure that the id parameter (the Quote ID) is added to the callback URL.
   2. Edit the code highlighted in the following sample:

      function callbacksuccess(pmid) {
                window.location = ''{!$Page.PaymentMethodConfirm}?pmid='' + pmid 
                 + '&id=' + '{!$CurrentPage.parameters.id}'; 
              }
           
              function callbackfailure( paramString ) {            
                  var redirUrl = ''{!$Page.PaymentMethodCreation}'' + paramString + '{!extraParamString}' 
                   + '&id=' + '{!$CurrentPage.parameters.id}';                
                  window.location = redirUrl;
              }

4. Add a Custom Button to the Quote Object.
   1. Navigate to user name > Setup, then select App Setup > Create > Objects in the navigation pane on the left side of the page.
   2. Click Quote in the Custom Objects list.
   3. On the Quote (Managed) detail page, scroll to the Custom Buttons and Links section and click New. Enter the following information in the New Button or Link page:
      • Label: New Payment Method
      • Name: Enter a unique name. For example, the default value will be New_Payment_Method.
      • Display Type: Select Detail Page Button.
      • Behavior: Select Display in existing window with sidebar from the list.
      • Content Source: Select VisualForce Page from the list.
      • Content: Select PaymentMethodCreation from the list.
   4. Click Save, and then click Back to Custom Object: Quote to return to the Quote custom object.
   5. Scroll to the Page Layouts section, and click Edit next to the quote layout that you want to add the button to (for example, Quote Layout - Read-Only V5.0).
   6. In the layout editor, click Buttons to display the list of available buttons, including the button that you added.
   7. Drag the New Payment Method button to the Custom Buttons box on the quote layout page.
   8. Click Save.