This task guides you through creating a payment page button in Zuora, including setting up a payment page, retrieving settings, creating an Apex controller, and testing the payment page submission.

1. Create a Payment Page in Zuora
   Set up a Payment Page in Zuora as described in Configure Payment Pages 2.0 . Use the following field values:
   1. Hosted Domain: https://c.<Salesforce server instance>.visual.force.com

      <Salesforce server instance> is the subdomain, the portion of the URL before "salesforce.com".

      For example: https://c.na14.visual.force.com​.

   2. Callback Path: /apex/myPaymentPageCallback
2. Retrieve Payment Page Settings in Zuora Quotes
   1. On the Zuora Config tab, click Payment Pages Settings .
   2. Click Refresh Payment Pages to get the newly created Payment Page settings.
3. Create an Apex Controller for Payment Page

   Create a new Apex class, CreatePaymentMethodController , using the code below. The code uses the Id of the first available Payment Page with the same payment method type as the associated quote.

   public class CreatePaymentMethodController {
       // The Zuora id of the payment page
       public String pageId {
           get {
               if(pageId == null) pageId = '';
               return pageId;
           }
           set;
       }
       // Constructor, determines the Zuora page Id based on payment method of the quote
       public CreatePaymentMethodController(ApexPages.StandardController standardController) {
           // Default payment method type to Credit Card
           String paymentMethodType = 'Credit Card';
           // Ensure the payment method field is populated on the Quote sObject
           if(!Test.isRunningTest()) standardController.addFields(new List < String > {'zqu__PaymentMethod__c'});
           // Retrieve the quote and set the payment method type based on the quote's payment method
           zqu__Quote__c quote = (zqu__Quote__c)standardController.getRecord();
           if(quote != null) {
             if(quote.zqu__PaymentMethod__c == 'ACH') paymentMethodType = 'ACH';
             else if(quote.zqu__PaymentMethod__c == 'Wire Transfer') paymentMethodType = 'Bank Transfer';
           }
           // Query for settings
           List < zqu__HostedPageLiteSetting__c > settingList = [SELECT zqu__PageId__c, zqu__PaymentMethodType__c, zqu__ComponentName__c FROM zqu__HostedPageLiteSetting__c WHERE zqu__PaymentMethodType__c = :paymentMethodType LIMIT 1];
           if(settingList != null && !settingList.isEmpty()) {
               pageId = settingList[0].zqu__PageId__c;
           }
       }
   }

4. Create a Visualforce Page for Payment Page

   Create a Visualforce page, myCreatePaymentMethod , using the following code:

   <apex:page showHeader="true" sidebar="true" StandardController="zqu__Quote__c" 
       extensions="CreatePaymentMethodController">
       <!-- Render the payment page component, -->
       <!-- using the url parameters as attribute values -->
       <zqu:PaymentPage zuoraPageId="{!pageId}" submitEnabled="true" style="inline"/>
   </apex:page>

   The following is an APEX test class code sample for the Payment Page Controller. Use the following code to test the class to achieve code coverage in Salesforce:

   @isTest
   public class CreatePaymentMethodControllerTest {
       @testSetup
       static void setupTestData() {
           // Create a HostedPageLiteSetting__c record for Credit Card
           zqu__HostedPageLiteSetting__c creditCardSetting = new zqu__HostedPageLiteSetting__c(
               zqu__PageId__c = 'CC_PageId',
               zqu__PaymentMethodType__c = 'Credit Card',
               zqu__ComponentName__c = 'CreditCardComponent'
           );
           insert creditCardSetting;
       }
       @isTest
       static void testDefaultPaymentMethod() {
           // Create a Quote__c record with no PaymentMethod__c specified
           zqu__Quote__c quote = new zqu__Quote__c(Name = 'Test Quote');
           insert quote;
           // Create a standard controller for the Quote__c record
           ApexPages.StandardController sc = new ApexPages.StandardController(quote);
           // Instantiate the controller
           Test.startTest();
           CreatePaymentMethodController controller = new CreatePaymentMethodController(sc);
           Test.stopTest();
           // Verify that the pageId is set to the Credit Card setting
           System.assertEquals('CC_PageId', controller.pageId);
       }
       @isTest
       static void testACH() {
           // Create a Quote__c record with PaymentMethod__c set to 'ACH'
           zqu__Quote__c quote = new zqu__Quote__c(Name = 'Test Quote ACH', zqu__PaymentMethod__c = 'ACH');
           insert quote;
           // Create a standard controller for the Quote__c record
           ApexPages.StandardController sc = new ApexPages.StandardController(quote);
           // Instantiate the controller
           Test.startTest();
           CreatePaymentMethodController controller = new CreatePaymentMethodController(sc);
           Test.stopTest();
           // Verify that the pageId is set to the ACH setting
           System.assertEquals('ACH_PageId', controller.pageId);
       }
       @isTest
       static void testWireTransfer() {
           // Create a Quote__c record with PaymentMethod__c set to 'Wire Transfer'
           zqu__Quote__c quote = new zqu__Quote__c(Name = 'Test Quote Wire Transfer', zqu__PaymentMethod__c = 'Wire Transfer');
           insert quote;
           // Create a standard controller for the Quote__c record
           ApexPages.StandardController sc = new ApexPages.StandardController(quote);
           // Instantiate the controller
           Test.startTest();
           CreatePaymentMethodController controller = new CreatePaymentMethodController(sc);
           Test.stopTest();
           // Verify that the pageId is set to the Wire Transfer setting
           System.assertEquals('WireTransfer_PageId', controller.pageId);
       }
   }

5. Register the New Payment Page Component
   1. Navigate to Zuora Config > Component Registeration.
   2. On the Component Registration page, enter the following information in the Register a new component section on the Component Registration page:
      • Name: myCreatePaymentMethod
      • Component Type: Payment Page Component
   3. In the Component Plugins section, click the Plugin Type field and select Go Next Plugin.
   4. For the Go Next Plugin type, type the following:
      • Class Name: zqu.PaymentPageController.DefaultHostedPageLiteGoNextPlugin
   5. Click Register Component.
6. Create a Visualforce Page for Payment Page Callback

   Create a Visualforce page, myPaymentPageCallback , using the following code:

   <apex:page controller="zqu.PaymentPageCallbackController" showHeader="false" sidebar="false">
       <apex:includeScript value="{!$Resource.zqu__jquery_1_9_1}" />
           <script>   
           function callback() {
           // Call the process callback method of the parent frame and pass the serialized callback parameters
           if(parent.processCallback) parent.processCallback('{!JSENCODE(callbackParameterString)}');
         }
         // Execute the callback when the document finishes loading
         var $jq = jQuery.noConflict();
         $jq(function() {
           callback();
         });
       </script>
       <body style="background-color: rgb(248, 248, 248);" />  
   </apex:page>

7. Create the Payment Page Button
   1. Navigate to Setup > Create > Objects > Quote .
   2. Create a new button, New Payment , with:

      • Content Source: Visualforce Page

      • Content: myCreatePaymentMethod

8. ​Add the Payment Page Button to the Quote Detail Page
   1. On the Quote Detail page, click Edit Layout .
   2. On the Quote Layout page, click Buttons .
   3. Drag your custom New Payment button to the Custom Buttons section.
   4. Click Save .
9. ​Test Payment Page Submission

   To test submitting the new Payment Page to Z-Billing :

   1. On the Quote Detail page, click New Payment .
   2. The Payment Page you defined above appears on the page.
   3. Enter valid payment values and click Save .
   4. A confirmation message for a successful processing appears.
   5. Log in to the Zuora application.
   6. Navigate to Z-Payments > Payment Operations .
   7. Verify that a new Credit Card payment method has been created.