Set up Google Pay

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 > 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 accountId parameter should not be specified when rendering the button. It must be provided 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>

Prerequisites

• Enabled the Google Pay integration for your Adyen merchant account to be able to generate Google Pay tokens and process Google Pay transactions as described in Adyen documentation and the checklist before you go live.
• In your Adyen merchant account, enable the following fields for the additional card data in the Adyen dashboard:
  • Card bin
  • Subvariant
  • Card summary
  • Expiry date
• Ensure that an Adyen Integration v2.0 gateway instance is in active use in your Zuora tenant.

Procedure

Take the following steps to set up Adyen Google Pay:

1. Obtain a Google Pay token.
2. Enable Google Pay for Adyen in Zuora.
3. Add a new Adyen Google Pay payment method in Zuora.

Obtain a Google Pay token

After Google Pay is enabled for your Adyen merchant account on the Adyen platform, obtain a Google Pay token from the Google Pay API PaymentData response. For more information about the fields this token contains, refer to Google Pay API documentation.

Enable Google Pay for Adyen in Zuora

Take the following steps to enable Adyen Google Pay in Zuora:

1. In your Zuora tenant, navigate to Payments Settings > Payment Method.
2. Click Edit and then select Adyen Google Pay.
3. Click Save. The Google Pay payment method is then activated in your Zuora tenant.

Note that no update is required for your existing Adyen Integration v2.0 instance in Zuora to support Google Pay.

Add a new Adyen Google Pay payment method in Zuora

After you have enabled Google Pay in your Zuora tenant, you can create an Adyen Google Pay payment method and associate it with a customer account. 

Adyen Google Pay payment methods can only be created through the Zuora REST APIs. You can use the Create a payment method API operation to create a new Adyen Google Pay payment method, and the following fields must be specified in the request:

• accountKey: Specify the customer account ID. This field is required unless the Orphan Payment Method feature is enabled.
• type: Specify AdyenGooglePay.
• googlePaymentToken: Specify the stringified Google Pay token.

You can also pass the shopperEmail information to the gateway through any of the following methods:

• Use the email field in any of the following API operations:
  • Create a payment method
  • Create an account
  • Create an order
  • Create an order asynchronously
• Use the gatewayOptions field in the Create a payment method API operation.

If shopperEmail is not provided through either the email or gatewayOptions field, the shopperEmail field in the payment request is set to the BillTo personal email if it is available. If BillTo personal email is not specified, the shopperEmail field is set to the BillTo work email.

The following code is a sample request for creating a new Google Pay payment method:

{
  "accountKey": "2c92c0f97911f46a0179147510484b90",
  "type": "AdyenGooglePay",
  "email": "testemail@test.com",
  "googlePaymentToken": "{\"signature\":\"MEUCICeJTEEW+a9ak93yk8pYg4xGlPJbrBNjD8b6vahxD5TRAiEAyMiNhzosJDl2N46Dojzc53bwbT/O0t+VToLCqr01qs4\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"aXpc95j3gEFJfaHF8PEpybNuV/k/IDKMa/FkbNnj2p/uaH8ll99hAUwWkH5EnHr2NwNgLuj3j9IhDomWI9gJ4n2fQlsQ9FsNuqsJjct/QuNvlzooLhu76HlzE3mScXcTUqPI1fgC8s/CVNz06aCUd7/oNMzyCw6VploO9abxp3zcpRvAO39bScaO3fri2Kl0WGozyiS0egXcUzMOpPxDw03SjmpgU/X5FjmxayOBUNxM9r/yOQyvY9mTUHOK855XVl3Xf9dpj6GDnDMp4bvCW8zpXWr76Snwtvv41dIaLxNWsBP0lS5PpJ5K1/rSRZg/dauIKQbWGmTTL24vz4Om7hVu25L7XrSM6F2PRUE4rqMblVDvXAlVsD+149r2fjXsB4DXmvGmwaDcuFeTDuI3ov7GDetgW3Fdl+n7RtBOK/luJYs76a9nPbVLhN/aKU5Hpd0ZrIO8ZUOoUYr6WuecD24tTzwic3k921eLJez8IJnG1k05kiqPpHEqMeLyP/WovjH/U7Vu3iDrH4yAxMEuh0MMi0tTgjXlVEezVnsU\\\",\\\"ephemeralPublicKey\\\":\\\"BGNnBpAd6WypQEYJmDH/DhUZ9mX2b/wJK6as8g6hZmDCDpHSWFC1BZ42UBrX/hrF/UarrT24CMcWLZp6fYl6PNw\\\\u003d\\\",\\\"tag\\\":\\\"j9fPmiEL/zj8R+0JRrTC1NgV9VVCYQ9zYaB7uZrEz9U\\\\u003d\\\"}\"}"
}

In addition to the Create a payment method operation, you can also use the following operations to create a Google Pay payment method together with other objects:

• Create an account
• Create an order
• Create an order asynchronously

Prerequisites

• Ensure that you have enabled the Google Pay integration for your Chase merchant account to be able to generate Google Pay tokens and process Google Pay transactions. To do this, you must provide Chase with Zuora’s Orbital Submitter ID, which is 056839.
• Ensure that a Chase Paymentech Orbital Gateway instance is in active use in your Zuora tenant.

Procedure

Take the following steps to set up the Google Pay payment method on the Chase Paymentech Orbital Gateway integration:

1. Obtain a Google Pay token.
2. Activate Google Pay on Chase in Zuora.
3. Add a Google Pay on Chase in Zuora.

Obtain a Google Pay token

After Google Pay is enabled for your Chase merchant account on the Chase platform, obtain a Google Pay token from the Google Pay API PaymentData response. For more information about the fields that this token contains, see Google Pay API documentation.

Activate Google Pay on Chase in Zuora

After Zuora Global Support has enabled Google Pay for your tenant, take the following steps to enable Google Pay on Chase in Zuora:

1. In your Zuora tenant, navigate to Settings > Payments > Payment Method.
2. Click Edit and then select Google Pay.
3. Click Save. The Google Pay payment method is then activated in your Zuora tenant.

Note that no update is required for your existing Chase Paymentech Orbital Gateway instance in Zuora to support Google Pay.

Add a Google Pay on Chase in Zuora

After you have enabled and activated Google Pay on Chase for your Zuora tenant, you can create a Google Pay payment method and associate it with a customer account. 

Google Pay payment methods on Chase can only be created through the REST APIs. You can use the Create a payment method API operation to create a new Google Pay payment method, and the following fields must be specified in the request:

• accountKey: Specify the customer account ID. This field is required unless the Orphan Payment Method feature is enabled.
• type: Specify GooglePay.
• googlePaymentToken: Specify the stringified Google Pay token.

Stored credential profiles will be automatically created and activated during the creation of the payment methods. If the Verify new payment method setting is enabled on the gateway instance configuration page, the network transaction ID (NTI) will be added when creating the payment method. See Overview of support for stored credential transactions for more information.

The following code is a sample request for creating a new Google Pay on Chase payment method:

{
  "accountKey": "2c92c0f97911f46a0179147510484b90",
  "type": "GooglePay",
  "googlePaymentToken": "{\"signature\":\"MEUCICeJTEEW+a9ak93yk8pYg4xGlPJbrBNjD8b6vahxD5TRAiEAyMiNhzosJDl2N46Dojzc53bwbT/O0t+VToLCqr01qs4\\u003d\",\"protocolVersion\":\"ECv1\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"aXpc95j3gEFJfaHF8PEpybNuV/k/IDKMa/FkbNnj2p/uaH8ll99hAUwWkH5EnHr2NwNgLuj3j9IhDomWI9gJ4n2fQlsQ9FsNuqsJjct/QuNvlzooLhu76HlzE3mScXcTUqPI1fgC8s/CVNz06aCUd7/oNMzyCw6VploO9abxp3zcpRvAO39bScaO3fri2Kl0WGozyiS0egXcUzMOpPxDw03SjmpgU/X5FjmxayOBUNxM9r/yOQyvY9mTUHOK855XVl3Xf9dpj6GDnDMp4bvCW8zpXWr76Snwtvv41dIaLxNWsBP0lS5PpJ5K1/rSRZg/dauIKQbWGmTTL24vz4Om7hVu25L7XrSM6F2PRUE4rqMblVDvXAlVsD+149r2fjXsB4DXmvGmwaDcuFeTDuI3ov7GDetgW3Fdl+n7RtBOK/luJYs76a9nPbVLhN/aKU5Hpd0ZrIO8ZUOoUYr6WuecD24tTzwic3k921eLJez8IJnG1k05kiqPpHEqMeLyP/WovjH/U7Vu3iDrH4yAxMEuh0MMi0tTgjXlVEezVnsU\\\",\\\"ephemeralPublicKey\\\":\\\"BGNnBpAd6WypQEYJmDH/DhUZ9mX2b/wJK6as8g6hZmDCDpHSWFC1BZ42UBrX/hrF/UarrT24CMcWLZp6fYl6PNw\\\\u003d\\\",\\\"tag\\\":\\\"j9fPmiEL/zj8R+0JRrTC1NgV9VVCYQ9zYaB7uZrEz9U\\\\u003d\\\"}\"}"
}

In addition to the Create a payment method operation, you can also use the following operations to create a Google Pay payment method on Chase together with other objects:

• Create an account
• Create an order
• Create an order asynchronously

Once a Google Pay payment method on Chase is created, it cannot be edited.