Use Case: Create a Payment Page Button

Retrieve Payment Page Settings in Zuora Quotes

To retrieve the 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. 

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;
        }
    }
}

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>

Test Class for Payment Page Controller

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);
    }
}

Register the New Payment Page Component

To 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.

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>

Create the Payment Page Button

To create the New Payment button:

1. Navigate to Setup > Create > Objects > Quote.
2. Create a new button, New Payment, with:
   • Content Source: Visualforce Page
   • Content: myCreatePaymentMethod

To add the New Payment 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.