Implement GCash on Adyen Integration v2.0

One-time payment flow

On the hosted payment page, a QR code is displayed. End customers can follow the instructions on the page to complete the authorization. The following table describes the workflows after Zuora receives a successful or failed response from the Adyen asynchronous payment API.

The created GCash payment method can be retrieved through the Zuora UI and API operations. In the Electronic Payment Methods section of the customer account page, you can also retrieve the token information described in the following table. Token ID and Second Token ID will be used in subsequent recurring payments.

Recurring payments flow

Recurring payments are processed with the stored tokens. For details about the recurring payment flow for the end customers, see Adyen's documentation.

Supported and unsupported features

The following table lists the supported and unsupported operations and features for GCash on Adyen Integration v2.0:

Overall implementation procedure 

Overall, complete the following steps to implement a GCash payment flow to support one-time or recurring payments:

1. Prepare for the integration.
2. Set up a Payment Page 2.0.
3. Request a signature from Zuora for the payment page.
4. Set up your client code to integrate the payment page to your web page.
5. Implement the callback response. 

You can find detailed instructions in the following sections.

Step 1. Prepare for the integration

Before implementing the GCash payment method on Adyen, ensure that all prerequisites outlined in the following sections are fulfilled.

Step 2. Create and configure a GCash payment page 

Complete the following steps to create and configure a GCash payment page:

1. In Zuora UI, navigate to Settings > Payments, and click Setup Payment Page and Payment Link.
2. On the Payment Pages tab page, configure the tenant-level settings for the hosted payment page.
3. In the Type dropdown list, select GCash.
4. Click Create New Hosted Page.
5. In the Basic Information section, specify the following fields:

   Field	Description
   Page Name	Enter a name for your hosted payment page. This name is used to identify your payment page in Zuora. It is different from the title displayed on the payment page. You can specify the title in the Page Title field in the Page Configuration section.
   Hosted Domain	Enter the domain address from which your payment page is served. This domain also hosts your callback page. The value must be in the format: https://www.domain.com. Zuora validates this field for you. If the validation fails, an error message is displayed on the payment page. Note that the Overlay Hosted Page mode does not support the hosted domain validation. If you want your hosted payment pages and callback pages to reside in the subdomain of the hosted domain, enable the tenant-level Allow Subdomain Callback for Hosted Pages setting.
   Callback Path	Enter the path on which the callback page file resides. Zuora appends this to the Hosted Domain entry to create the full URL to which the callback is sent. Specify a value in the format: /app/callback_file.jsp. The file extension, such as .jsp or .php, is not required. However, the callback path must begin with a forward slash character ( / ). The Callback Path is only required for the advanced implementation option, which uses the inline style form with an external submit button. This setting is ignored for the basic setup, which uses the overlay form or the inline form with the submit button inside.

6. In the Default Payment Gateway field of the Payment Gateway section, click and select an Adyen Integration v2.0 instance. Note that Zuora does not validate this setting. You can override this default gateway in your request by specifying a gateway through the paymentGateway client parameter.
7. In the Page Configuration section, complete the field configuration.

   Field	Description
   Page Title	Enter a title for the hosted payment page. Select Display to display the Page Title on this payment page.
   Page Description	Enter the description of the payment page. Select Display to display the Page Description on this payment page.
   Submit Button	This field is not applicable to GCash. Skip it.
   Client-Side Validation	This setting is not applicable to GCash. Skip it.
   CSS	This field is not applicable to GCash. Skip it.

8. Click Generate and Save Page.

Subsequently, you can preview the form. 

Step 3. Request a signature for the Payment Page

Follow the instructions in Request a signature for the Payment Page from Zuora. Because the Client-side HPM Parameter Validation feature is enabled, Zuora will validate the additional fields in the request by comparing them with the values specified in the digital signature.

Here are two request examples for the Generate RSA signature REST API operation.

{
    "uri":"https://sandbox.na.zuora.com/apps/Pu...tedPageLite.do",
    "method":"POST",
    "pageId":"test808145b3bf9d0145b3c6812b0008",
    "paymentGateway":"Adyen",
    "authroizationAmount":"100",
    "currency":"PHP",
    "accountId":"test808145b3bf9d0145b3c6812b0008"
}

{
    "uri":"https://sandbox.na.zuora.com/apps/Pu...tedPageLite.do",
    "method":"POST",
    "pageId":"test808145b3bf9d0145b3c6812b0008",
    "paymentGateway":"Adyen",
    "accountId":"test808145b3bf9d0145b3c6812b0008"
}

Step 4. Set up your client code

Follow the instructions in Integrate Payment Pages 2.0. When rendering the Payment Page form, specify the following required parameters in the Z.render or Z.renderWithErrorHandler function. For other optional parameters, see Client Parameters for Payment Pages 2.0.

Here is an example of the parameters for the payment flow for processing the first one-time and subsequent recurring payments:

var params = {
    doPayment:"true",
    storePaymentMethod:"true",
    field_accountId:"testc0f87596f2f301759c29443622fa",
    documents:"[{"type":"invoice","ref":"INV00026338"}, {"type":"invoice","ref":"INV00026339"}]"
};

Step 5. Implement the callback response

See Advanced Integration of Payment Pages 2.0 for more information.