Stay organized with collections
Save and categorize content based on your preferences.
The Google Pay API can be used in conjunction with other supported
payment methods in
PaymentRequest.
Step 1: Create a PaymentDataRequest object
Configure a
PaymentDataRequest
object specifying your payment gateway and accepted methods of payment.
We recommend you obtain shipping address, email address, and phone number
through the browser's PaymentRequestoptions argument,
not the Google Pay API, for consistency across payment methods.
Use the Google Pay API to receive only the payment credentials and
optional billing address.
constgooglePaymentDataRequest={environment:'TEST',apiVersion:2,apiVersionMinor:0,merchantInfo:{// A merchant ID is available after approval by Google.// @see {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist}// merchantId: '12345678901234567890',merchantName:'Example Merchant'},allowedPaymentMethods:[{type:'CARD',parameters:{allowedAuthMethods:["PAN_ONLY","CRYPTOGRAM_3DS"],allowedCardNetworks:["AMEX","DISCOVER","INTERAC","JCB","MASTERCARD","VISA"]},tokenizationSpecification:{type:'PAYMENT_GATEWAY',// Check with your payment gateway on the parameters to pass.// @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway}parameters:{'gateway':'example','gatewayMerchantId':'exampleGatewayMerchantId'}}}]};
Step 2: Declare Google Pay API support
Add the Google Pay API payment method identifier and its configuration to
the methodData parameter passed to PaymentRequest.
The following example shows an implementation of the Google Pay API with
other supported payment methods in PaymentRequest:
<div id="checkout">
<button id="buyButton">Checkout</button>
</div>
<script>
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
if (window.PaymentRequest) {
const request = createPaymentRequest();
request.canMakePayment()
.then(function(result) {
if (result) {
// Display PaymentRequest dialog on interaction with the existing checkout button
document.getElementById('buyButton')
.addEventListener('click', onBuyClicked);
}
})
.catch(function(err) {
showErrorForDebugging(
'canMakePayment() error! ' + err.name + ' error: ' + err.message);
});
} else {
showErrorForDebugging('PaymentRequest API not available.');
}
/**
* Show a PaymentRequest dialog after a user clicks the checkout button
*/
function onBuyClicked() {
createPaymentRequest()
.show()
.then(function(response) {
// Dismiss payment dialog.
response.complete('success');
handlePaymentResponse(response);
})
.catch(function(err) {
showErrorForDebugging(
'show() error! ' + err.name + ' error: ' + err.message);
});
}
/**
* Define your unique Google Pay API configuration
*
* @returns {object} data attribute suitable for PaymentMethodData
*/
function getGooglePaymentsConfiguration() {
return {
environment: 'TEST',
apiVersion: 2,
apiVersionMinor: 0,
merchantInfo: {
// A merchant ID is available after approval by Google.
// 'merchantId':'12345678901234567890',
merchantName: 'Example Merchant'
},
allowedPaymentMethods: [{
type: 'CARD',
parameters: {
allowedAuthMethods: allowedCardAuthMethods,
allowedCardNetworks: allowedCardNetworks
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
// Check with your payment gateway on the parameters to pass.
// @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway}
parameters: {
'gateway': 'example',
'gatewayMerchantId': 'exampleGatewayMerchantId'
}
}
}]
};
}
/**
* Create a PaymentRequest
*
* @returns {PaymentRequest}
*/
function createPaymentRequest() {
// Add support for the Google Pay API.
const methodData = [{
supportedMethods: 'https://google.com/pay',
data: getGooglePaymentsConfiguration()
}];
const details = {
total: {label: 'Test Purchase', amount: {currency: 'USD', value: '1.00'}}
};
const options = {
requestPayerEmail: true,
requestPayerName: true
};
return new PaymentRequest(methodData, details, options);
}
/**
* Process a PaymentResponse
*
* @param {PaymentResponse} response returned when a user approves the payment request
*/
function handlePaymentResponse(response) {
const formattedResponse = document.createElement('pre');
formattedResponse.appendChild(
document.createTextNode(JSON.stringify(response.toJSON(), null, 2)));
document.getElementById('checkout')
.insertAdjacentElement('afterend', formattedResponse);
}
/**
* Display an error message for debugging
*
* @param {string} text message to display
*/
function showErrorForDebugging(text) {
const errorDisplay = document.createElement('code');
errorDisplay.style.color = 'red';
errorDisplay.appendChild(document.createTextNode(text));
const p = document.createElement('p');
p.appendChild(errorDisplay);
document.getElementById('checkout').insertAdjacentElement('afterend', p);
}
</script>
Payment method parameter list
The Google Pay API configuration passed in PaymentRequest is similar to the
PaymentDataRequest
object used by the Google Pay API JavaScript client library with a few exceptions:
An environment property should be set on the object matching a string value described in
PaymentOptions
The transactionInfo property should be omitted. Total price and currency should instead be specified in the details argument passed to PaymentRequest
Additional object properties specified for the Google Pay API payment method in a PaymentRequest payment method data property:
Property
Type
Necessity
Description
environment
string
optional
PRODUCTION: return chargeable methods of payment when
a valid Google merchant ID is specified and configured for the domain
TEST: dummy payment methods returned suitable for
testing (default)
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-02-10 UTC."],[[["\u003cp\u003eGoogle Pay can be integrated with other payment methods using the Payment Request API, primarily supported by Chrome.\u003c/p\u003e\n"],["\u003cp\u003eTo ensure wider compatibility, use the Google Pay API JavaScript client library with a branded Google Pay button.\u003c/p\u003e\n"],["\u003cp\u003eImplementing Google Pay involves creating a PaymentDataRequest object to specify payment details and configuring the Payment Request API to include Google Pay as a supported method.\u003c/p\u003e\n"],["\u003cp\u003eThe Google Pay API configuration in Payment Request is similar to the PaymentDataRequest object in the Google Pay API JavaScript library, with minor differences in environment and transaction information handling.\u003c/p\u003e\n"]]],["This guide outlines using the Google Pay API within the `PaymentRequest` API. Key actions include: creating a `PaymentDataRequest` object to define payment gateway and accepted methods, such as card types and authentication methods. Add Google Pay's identifier and configuration to the `methodData` parameter for `PaymentRequest`. This configuration involves setting environment (e.g., 'TEST'), API versions, and merchant information. Shipping details should be requested through `PaymentRequest` options. Configure `environment` and use the `details` argument for pricing.\n"],null,["# Google Pay API PaymentRequest Tutorial\n\nThe Google Pay API can be used in conjunction with other supported\npayment methods in\n[`PaymentRequest`](https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest \"MDN: PaymentRequest documentation\").\n| **Important:** Chrome is currently the only web browser supporting the Payment Request API with third-party payment methods, including Google Pay. Sites wishing to implement Google Pay as a standalone payment method should use the [Google Pay API JavaScript client library](/pay/api/web/guides/tutorial) with a [branded Google Pay button](/pay/api/web/guides/brand-guidelines) to reach a broader Google audience across multiple browsers and platforms.\n\nStep 1: Create a PaymentDataRequest object\n------------------------------------------\n\nConfigure a\n[`PaymentDataRequest`](/pay/api/web/reference/request-objects#PaymentDataRequest)\nobject specifying your payment gateway and accepted methods of payment.\nWe recommend you obtain shipping address, email address, and phone number\nthrough the browser's `PaymentRequest` `options` argument,\nnot the Google Pay API, for consistency across payment methods.\nUse the Google Pay API to receive only the payment credentials and\noptional billing address. \n\n```javascript\nconst googlePaymentDataRequest = {\n environment: 'TEST',\n apiVersion: 2,\n apiVersionMinor: 0,\n merchantInfo: {\n // A merchant ID is available after approval by Google.\n // @see {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist}\n // merchantId: '12345678901234567890',\n merchantName: 'Example Merchant'\n },\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedAuthMethods: [\"PAN_ONLY\", \"CRYPTOGRAM_3DS\"],\n allowedCardNetworks: [\"AMEX\", \"DISCOVER\", \"INTERAC\", \"JCB\", \"MASTERCARD\", \"VISA\"]\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n // Check with your payment gateway on the parameters to pass.\n // @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway}\n parameters: {\n 'gateway': 'example',\n 'gatewayMerchantId': 'exampleGatewayMerchantId'\n }\n }\n }]\n};\n```\n\nStep 2: Declare Google Pay API support\n--------------------------------------\n\nAdd the Google Pay API payment method identifier and its configuration to\nthe `methodData` parameter passed to `PaymentRequest`. \n\n```javascript\nconst methodData = [\n {supportedMethods: 'https://google.com/pay', data: googlePaymentDataRequest}\n];\n```\n\nPutting it all together\n-----------------------\n\nThe following example shows an implementation of the Google Pay API with\nother supported payment methods in `PaymentRequest`: \n\n```html\n\u003cdiv id=\"checkout\"\u003e\n \u003cbutton id=\"buyButton\"\u003eCheckout\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\nconst allowedCardNetworks = [\"AMEX\", \"DISCOVER\", \"INTERAC\", \"JCB\", \"MASTERCARD\", \"VISA\"];\nconst allowedCardAuthMethods = [\"PAN_ONLY\", \"CRYPTOGRAM_3DS\"];\nif (window.PaymentRequest) {\n const request = createPaymentRequest();\n\n request.canMakePayment()\n .then(function(result) {\n if (result) {\n // Display PaymentRequest dialog on interaction with the existing checkout button\n document.getElementById('buyButton')\n .addEventListener('click', onBuyClicked);\n }\n })\n .catch(function(err) {\n showErrorForDebugging(\n 'canMakePayment() error! ' + err.name + ' error: ' + err.message);\n });\n} else {\n showErrorForDebugging('PaymentRequest API not available.');\n}\n\n/**\n * Show a PaymentRequest dialog after a user clicks the checkout button\n */\nfunction onBuyClicked() {\n createPaymentRequest()\n .show()\n .then(function(response) {\n // Dismiss payment dialog.\n response.complete('success');\n handlePaymentResponse(response);\n })\n .catch(function(err) {\n showErrorForDebugging(\n 'show() error! ' + err.name + ' error: ' + err.message);\n });\n}\n\n/**\n * Define your unique Google Pay API configuration\n *\n * @returns {object} data attribute suitable for PaymentMethodData\n */\nfunction getGooglePaymentsConfiguration() {\n return {\n environment: 'TEST',\n apiVersion: 2,\n apiVersionMinor: 0,\n merchantInfo: {\n // A merchant ID is available after approval by Google.\n // 'merchantId':'12345678901234567890',\n merchantName: 'Example Merchant'\n },\n allowedPaymentMethods: [{\n type: 'CARD',\n parameters: {\n allowedAuthMethods: allowedCardAuthMethods,\n allowedCardNetworks: allowedCardNetworks\n },\n tokenizationSpecification: {\n type: 'PAYMENT_GATEWAY',\n // Check with your payment gateway on the parameters to pass.\n // @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway}\n parameters: {\n 'gateway': 'example',\n 'gatewayMerchantId': 'exampleGatewayMerchantId'\n }\n }\n }]\n };\n}\n\n/**\n * Create a PaymentRequest\n *\n * @returns {PaymentRequest}\n */\nfunction createPaymentRequest() {\n // Add support for the Google Pay API.\n const methodData = [{\n supportedMethods: 'https://google.com/pay',\n data: getGooglePaymentsConfiguration()\n }];\n\n const details = {\n total: {label: 'Test Purchase', amount: {currency: 'USD', value: '1.00'}}\n };\n\n const options = {\n requestPayerEmail: true,\n requestPayerName: true\n };\n\n return new PaymentRequest(methodData, details, options);\n}\n\n/**\n * Process a PaymentResponse\n *\n * @param {PaymentResponse} response returned when a user approves the payment request\n */\nfunction handlePaymentResponse(response) {\n const formattedResponse = document.createElement('pre');\n formattedResponse.appendChild(\n document.createTextNode(JSON.stringify(response.toJSON(), null, 2)));\n document.getElementById('checkout')\n .insertAdjacentElement('afterend', formattedResponse);\n}\n\n/**\n * Display an error message for debugging\n *\n * @param {string} text message to display\n */\nfunction showErrorForDebugging(text) {\n const errorDisplay = document.createElement('code');\n errorDisplay.style.color = 'red';\n errorDisplay.appendChild(document.createTextNode(text));\n const p = document.createElement('p');\n p.appendChild(errorDisplay);\n document.getElementById('checkout').insertAdjacentElement('afterend', p);\n}\n\u003c/script\u003e\n```\n\nPayment method parameter list\n-----------------------------\n\nThe Google Pay API configuration passed in `PaymentRequest` is similar to the\n[`PaymentDataRequest`](/pay/api/web/reference/request-objects#PaymentDataRequest)\nobject used by the Google Pay API JavaScript client library with a few exceptions:\n\n- An `environment` property should be set on the object matching a string value described in [`PaymentOptions`](/pay/api/web/reference/request-objects#PaymentOptions)\n- The `transactionInfo` property should be omitted. Total price and currency should instead be specified in the `details` argument passed to `PaymentRequest`\n\nAdditional object properties specified for the Google Pay API payment method in a `PaymentRequest` payment method data property:\n\n| Property | Type | Necessity | Description |\n|---------------|--------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `environment` | string | optional | - `PRODUCTION`: return chargeable methods of payment when a valid Google merchant ID is specified and configured for the domain - `TEST`: dummy payment methods returned suitable for testing (default) |"]]