Integrate the Payment Page into your client for Adyen UPI QR

Follow the instructions in Integrate Payment Pages 2.0 to set up the client-side integration. This task highlights the steps that are specific to Adyen Integration v2.0 and UPI QR flows.

Your client integration must:

Render the Payment Page by using the Zuora JavaScript library.
Implement a callback function to handle the response.
Handle Payment_Status_Unknown by querying the payment status through the REST API.

Include the Zuora JavaScript library in your web page.


<script type="text/javascript"
        src="https://static.zuora.com/Resources/libs/hosted/<version>/zuora-min.js"></script>

Replace <version> with the recommended library version.

Prepare the client parameters object.
Provide the parameters in a JavaScript object and pass them to the render function. For details, see Client parameters for Payment Pages 2.0.

For Adyen UPI QR flows, include:
- The Payment Page ID and signature from the Generate RSA signature response.
- field_accountId for the customer account.
- Required gateway options and UPI-specific parameters.
Render the Payment Page.
Call one of the following functions:
- Z.render(params, prepopulateFields, callbackFunction);
- Z.renderWithErrorHandler(params, prepopulateFields, callbackFunction, errorHandler);
Use Z.renderWithErrorHandler to handle both client-side and server-side errors.

Implement the callback function.


function handlePaymentResponse(response) {
  // response.success
  // response.refId
  // response.errorCode
  // response.errorMessage
}

Process the callback response.
If response.success is true:
- Store the returned refId.
- Redirect the customer to a confirmation page.
- Update the UI to indicate completion.
If response.success is false:
- Inspect the error fields and display an appropriate message.
- If the result is Payment_Status_Unknown, use the Retrieve a payment API to confirm the final status.

The Payment Page is integrated into your client, and your application can handle both successful and uncertain payment outcomes.

Welcome to Zuora Product Documentation

Explore our rich library of product information

Integrate the Payment Page into your client for Adyen UPI QR

zuora-footer