Set up Google Pay with Zuora JavaScript SDK
You can add a Google Pay™ button to your checkout flow by integrating with a JavaScript SDK provided by Zuora. This integration supports Google Pay's Hosted Checkout feature, simplifying the process by bypassing complex certification and domain registration. Both the PAN_ONLY and CRYPTOGRAM_3DS authentication methods are supported, ensuring compatibility across both Android devices and Google Pay compatible browsers.
Currently, this integration is supported on the following payment gateway integrations:
- Adyen Integration v2.0
- Braintree v2.0
- Stripe v2
Zuora is continuing to evaluate other payment gateways for Google Pay integration. If you have any requests on other gateways, please contact your Zuora account team.
This section describes how to add Google Pay to your checkout flow by integrating with the latest version of JavaScript SDK provided by Zuora. If you need guidance for the legacy version of the JavaScript SDK, see Set up Google Pay with legacy version of Zuora JavaScript SDK.
Overview
The following diagram shows how the Google Pay JavaScript SDK integration works in a checkout experience:
Overall, you need to complete the following tasks to set up Google Pay by integrating with Zuora’s JavaScript SDK:
- Complete prerequisite tasks before integration.
- Implement the client-side SDK integration.
- Implement the server-side API integration.
- Perform integration testing.
This feature is in the Early Adopter phase. We are actively soliciting feedback from a small set of early adopters.
Prerequisites
- Understand the guidelines and requirements of Google Pay:
- Google Pay Web Brand Guidelines. Ensure that only approved branding by Google is used when referencing Google Pay.
- Review and adhere to Google Pay API Terms of Service and Acceptable Use Policy.
- Ensure that the requirements for the gateway are met:
- You have signed up for a merchant account for the gateway.
- For Google Pay on Stripe, contact Stripe for gated access to the Processing Google Pay Decrypted Tokens API.
- Turn on the Payment Form feature in Zuora:
Submit a request at Zuora Global Support to turn on the Payment Form feature on your tenant. The JavaScript SDK integration utilizes the publishable key from the Payment Form feature for authentication. This integration supports embedding the Google Pay button within an iframe hosted by Zuora. - Get your testing environment ready. See Supported browsers by Google Pay for more information.
Implement client-side SDK integration
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
- 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.
- Initialize an instance of the Zuora object with your publishable key.
- 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
. - Mount the button component to the container.
- 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>
Implement the server-side API integration to create payment session
In your server, make an API request to the Create a payment session endpoint. For details about constructing the API request and implementing payment flows, see Create a payment session in the API Reference.
Perform integration testing
In your client code, provide a valid callback for createPaymentSession
, which makes a call to your backend API to create a payment session.
We suggest that you test your integration by using a real card with a test gateway. You can make test payments by using a real card without it being charged.
Google Pay payments are processed through several parties, such as the payment gateway, the card network, Google Pay, and your integration with Zuora. You might encounter issues beyond Zuora’s control. If you encounter any issues during your testing, you can submit a request to Zuora Global Support. Zuora will actively work with you to investigate the problems. If the problem is with other parties, please contact the relevant parties for support.
View and export payment method data
After a Google Pay payment method is successfully created, it is shown as a Credit Card payment method type in Zuora. You can retrieve this payment method through the UI, API, Data Source Export, and Data Query.