Integrate a Zuora Payment Page 2.0 for Adyen Integration v2.0 UPI QR flows so your client can render the page, pass UPI-specific parameters, and handle successful and uncertain payment outcomes.

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

2. 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.
3. 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.

4. Implement the callback function.

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

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