Set up Google Pay with Zuora JavaScript SDK
Integrate Google Pay into your checkout flow using Zuora's JavaScript SDK, supporting various payment gateways and authentication methods.
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. In the hosted checkout flow, Zuora's merchant ID is used. You do not need to register your own merchant ID.
Currently, this integration is supported on the following payment gateway integrations:
-
Adyen Integration v2.0
-
Braintree v2.0
-
Checkout.com
-
Stripe v2
-
Worldpay 1.4
For authentication methods , both PAN_ONLY and CRYPTOGRAM_3DS are supported, ensuring compatibility across both Android devices and Google Pay compatible browsers . For Google Pay on Stripe v2, CRYPTOGRAM_3DS is only supported in sandbox environments.
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 .
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:
This feature is in the Early Adopter phase. We are actively soliciting feedback from a small set of early adopters.
-
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: 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. To enable Payment Form on your tenant, see the "Before you start" section in Configure payment forms .
-
Get your testing environment ready. See Supported browsers by Google Pay for more information.
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>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:
|
On Success |
|
|
On Error |
|
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.
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.
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.
Google Pay Web developer documentation