Step 1. Load zuora.js

Import the Zuora JavaScript client library to your page.

For sandbox environments, use <script src="https://js.zuora.com/payment/sandbox/1.4.0/zuora.js"></script>.

For production environments, use <script src="https://js.zuora.com/payment/1.4.0/zuora.js"></script>.

Create a container for the Google Pay button on your page and place it where you want the button to be rendered. Replace payment-form-container with the ID you want to use.

<div id="payment-form-container">
<!-- The Google Pay button will be inserted here. -->
</div>

1. Copy the publishable key from Payment Form. In the Zuora UI, click your username in the upper right and navigate to Settings > Payments > Payment Form. On the Publishable Keys tab, copy the key.
2. Initialize an instance of the Zuora object with your publishable key.
3. Populate the configuration parameters and generate a payment session when the end customers click the Google Pay button. The following table describes the parameters:

   Parameter	Type	Description
   currency	string	Required. The ISO 4217 alphabetic currency code, such as "USD".
   amount	string	Required. The total amount for the payment.
   allowedCardNetworks	array	Default: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"] The payment networks supported by your Google Pay integration. Specify the values as an array of strings, such as ["AMEX", "DISCOVER", "MASTERCARD", "VISA"] Before specifying this field, check the following information: The networks supported by your payment gateway integration. See the Zuora Knowledge Center article specific to your payment gateway integration for details. The allowed values. See Google Pay documentation for details.
   countryCode	string	The ISO 3166-1 alpha-2 code of the country where the transaction is processed, such as "US". If it is not specified, the default value US is used.
   locale	string	The locale code, which is the combination of ISO language code and ISO country code, such as "en_US". If it is not specified, the default value en_US is used.
   merchantInfo	object	Contains information about the merchant. You must specify the merchantName field (string) within this object. The provided merchant name and Zuora's merchant ID will be used to render the Google Pay button. There is no need to specify the merchant ID in this object, because Zuora's merchant ID is automatically applied. See Google Pay documentation for details. Example: merchantInfo: { merchantName: "Example Merchant" } If merchantName and merchantInfo are not specified, the information configured in the Public Business Information setting for Payment Link will be used. Ensure you have enabled the Payment Link feature. See the following articles for instructions: Follow the instructions in Enable payment features by yourself to enable the Payment Link feature. Follow the instructions in Add public business information to invoice payment page to configure the Public Business Information setting.
   buttonColor	string	Default: default A string that indicates the button color that you can use. For details about allowed values, see buttonColor in Google Pay documentation.
   buttonType	string	Default: buy A string that indicates the button type that you can display. For details about allowed values, see buttonType in Google Pay documentation.
   buttonRadius	string	Default: 4px The button corner radius in pixels, such as 5px.
   buttonWidth	string	The button width in pixels, such as 10px. If not specified, the container width is used.
   buttonHeight	string	The Button height in pixels, such as 10px.

   The following parameters should not be specified when rendering the button:

   • The accountId parameter should not be specified when rendering the button. It can be specified when implementing the server-side API integration. See Implement server-side API integration to create payment session.

   • Specifying a gateway instance is not supported when rendering the button. You can do it when implementing the server-side API integration. See Implement server-side API integration to create payment session.

4. Mount the button component to the container.
5. Handle the payment result.

Here is an example of the code implementation:

<script>
    const publishableKey = "pk_rO0ABXenAF2s7QAF…";
    
    const renderForm = () => {
      const zuora = Zuora(publishableKey);
      zuora.createGooglePayButton({
        countryCode: "US",
        locale: "en_US",
        currency: "USD",
        amount: "10.00",
        allowedCardNetworks: ["AMEX", "DISCOVER", "MASTERCARD", "VISA"],
        buttonHeight: "40px",
        buttonRadius: "5px",
        buttonColor: "black",
        buttonType: "pay",
        createPaymentSession: () => {
          return new Promise((resolve, reject) => {
            fetch("/sdk-test/payment-session.json?seed=" + Math.random(), {
              method: "GET",
            }).then((response) => {
              if (response.ok) {
                return response.json();
              } else {
                return reject("Payment session request is rejected.");
              }
            }).then((data) => {
              console.log("==========");
              console.log("Got Payment Session Token");
              console.log("==========");
              console.log(data.token);
              return resolve(data.token);
            }).catch((error) => {
              return reject(error);
            });
          });
        },
        onComplete: (result) => {
          console.log("==========");
          console.log("Payment Result");
          console.log("==========");
          console.log(result);
          resultMessage("Transaction Result: <br />"
            + "    Success: " + result.success + "<br />"
            + "    Payment Method Id: " + result.paymentMethodId + "<br />"
            + "    Payment Id: : " + result.paymentId + "<br />"
          );
        }
      }).then(function(googlePayButton) {
        googlePayButton.mount("#payment-form-container")
      }).catch(function(error) {
        console.error(error);
      });
    }
    function resultMessage(message) {
        const container = document.querySelector("#result-message");
        container.innerHTML = message;
      }
</script>

The onComplete function returns result in the following structure:

{
    success: true,
    paymentMethodId?: string;
    paymentId?: string;
}

{
    success: false,
    error: {
        type: string;
        code: string;
        message: string;
    }
}