Set up Google Pay with Zuora JavaScript SDK

Step 1. Load zuora.js

Import the Zuora JavaScript client library to your page:

<script src="https://js.zuora.com/payment/v3/zuora.js"></script>

Step 2. Create a container

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>

Step 3. Render the Google Pay button

1. Copy the publishable key from Payment Form. In the Zuora UI, click your username in the upper right and navigate to Settings > Payments > Dynamic Hosted 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.
   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.

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>