Integrate the Zuora Payment Page into your client for Adyen Integration v2.0 UPI Intent flows, render the page with the JavaScript library, 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 Adyen UPI Intent flows, include the Payment Page ID and signature from the Generate RSA signature response, the field_accountId for the customer account, and the 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 a callback function to process the response returned from the Payment Page.

   
   
   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, and 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 operation to confirm the final status.