Skip to main content

Use Case: Create a Payment Page Button

Zuora

Use Case: Create a Payment Page Button

  1. Last updated
  2. Save as PDF

This use case walks you through the process of creating a sample Payment Page button on the Quote Detail page.

To create a Payment Page button on the Quote Detail page:​

  1. Create a Payment Page in Zuora
  2. Retrieve Payment Page Settings in Zuora Quotes
  3. Create a Apex Controller for Payment Page
  4. Create a Visualforce Page for Payment Page
  5. Register the New Component
  6. Create a Visualforce Page for Payment Page Callback
  7. Create the Payment Page Button
  8. ​Add the Payment Page Button to the Quote Detail Page
  9. Test Payment Page Submission

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:

  • 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​. 

  • Callback Path: /apex/myPaymentPageCallback

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>

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

​Add the Payment Page Button to the Quote Detail Page

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.

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.