Render the Payment Page

To render the Payment Page, call the Z.render function and pass the following:

• A params object that contains the page identity values returned by the signature API (tenantId, id, token, signature, and key), together with the UPI QR client parameters that control the flow.
• A prepopulated fields object. Because a UPI QR page does not collect any details from the customer, pass an empty object.
• A callback function that handles the response after the customer completes the payment.

var params = {
  tenantId: "<tenantId>",
  id: "<UPI QR Payment Page ID>",
  token: "<token>",
  signature: "<signature>",
  key: "<key>",
  style: "inline",
  submitEnabled: "true",
  locale: "en",
  field_currency: "INR",
  doPayment: true,
  storePaymentMethod: false,
  field_accountId: "<Zuora account ID>",
  field_authorizationAmount: "100.00",
  param_gwOptions_shopperName: "<customer name>",
  param_gwOptions_shopperEmail: "customer@example.com",
  param_gwOptions_phoneNumber: "+919999999999",
  param_gwOptions_address: "<address line>",
  param_gwOptions_street_number: "<street number>",
  param_gwOptions_city: "<city>",
  param_gwOptions_state: "<state>",
  param_gwOptions_zipcode: "<postal code>"
};

function callback(response) {
  if (response.success) {
    // response.refId is the ID of the UPI QR payment method created in Zuora.
    // Use it to look up the payment method or the resulting payment.
  } else {
    // Handle the failure using response.errorCode and response.errorMessage.
  }
}

Z.render(params, {}, callback);
  

After the page is rendered, the QR code is displayed, the customer scans it with their UPI app and authorizes the payment, and Zuora invokes your callback function with the result. The QR code display and the payment confirmation are handled inside the rendered Payment Page.

To accept UPI QR payments on EBANX, render a Payment Page 2.0 in your client application by following the instructions in Integrate Payment Pages 2.0. When you call Z.render or Z.renderWithErrorHandler, pass the client parameters described in the following sections to control the UPI QR flow.

Client parameters

The following table describes the client parameters that you can pass for EBANX UPI QR payments:

Parameters for orphan payment method creation

To create an orphan payment method for UPI Autopay without processing an initial payment, use the following client parameters:

Mandate parameters

When you store a payment method for UPI Autopay, you can optionally provide the mandate parameters described in the following table. If you do not provide them, Zuora applies the EBANX default values.

Parameter combinations

The combination of doPayment and storePaymentMethod determines the flow, as described in the following table: