Check user readiness for payment
Stay organized with collections
Save and categorize content based on your preferences.
Before calling the payment request API, you must check whether the user can make
a payment using the current device.
Use the canMakePayment()
method to query whether the user is allowed to make
payments with the current device.
- If the result returned is
True
, then Google Pay is installed on the device and the
user can make a payment.
- If the result returned is
False
, it indicates that Google Pay isn't installed on
the device, or payment method is not added in Google Pay.
If a query is made using canMakePayment()
method with different payment
methods in supportedInstruments
, the following error will be returned:
DOMException: Query quota exceeded, not allowed to check whether can make
payment.
When this error occurs, Chrome will reset the quota after 30 minutes or on
restart.
Each order made through Google Pay contains different data fields
(for example, transactionID
). To avoid the DOMException error, you must cache
the result of the first call, then check for the cache result before making more calls.
Checking user readiness
The sample function below checks to see whether a payment can be made using a
session storage cache.
//
Global
key
for
canMakepayment
cache
.
const
canMakePaymentCache
=
'canMakePaymentCache'
;
/**
* Check whether can make payment with Google Pay or not. It will check session storage
* cache first and use the cache directly if it exists. Otherwise, it will call
* canMakePayment method from PaymentRequest object and return the result, the
* result will also be stored in the session storage cache for future usage.
*
* @private
* @param {PaymentRequest} request The payment request object.
* @return {Promise} a promise containing the result of whether can make payment.
*/
function
checkCanMakePayment
(
request
)
{
//
Check
canMakePayment
cache
,
use
cache
result
directly
if
it
exists
.
if
(
sessionStorage
.
hasOwnProperty
(
canMakePaymentCache
))
{
return
Promise
.
resolve
(
JSON
.
parse
(
sessionStorage
[
canMakePaymentCache
]
));
}
//
If
canMakePayment
()
isn
't available, default to assume the method is
// supported.
var canMakePaymentPromise = Promise.resolve(true);
// Feature detect canMakePayment().
if (request.canMakePayment) {
canMakePaymentPromise = request.canMakePayment();
}
return canMakePaymentPromise
.then((result) => {
// Store the result in cache for future usage.
sessionStorage[canMakePaymentCache] = result;
return result;
})
.catch((err) => {
console.log('
Error
calling
canMakePayment
:
'
+
err
);
}
);
}
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License
, and code samples are licensed under the Apache 2.0 License
. For details, see the Google Developers Site Policies
. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-10-16 UTC.
[[["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 2024-10-16 UTC."],[[["\u003cp\u003ePrior to initiating the Google Pay payment request API, verify the user's payment capability using the \u003ccode\u003ecanMakePayment()\u003c/code\u003e method.\u003c/p\u003e\n"],["\u003cp\u003eIf \u003ccode\u003ecanMakePayment()\u003c/code\u003e returns \u003ccode\u003eTrue\u003c/code\u003e, Google Pay is installed and ready for use; a \u003ccode\u003eFalse\u003c/code\u003e result indicates Google Pay is not installed or a payment method is missing.\u003c/p\u003e\n"],["\u003cp\u003eAvoid the "Query quota exceeded" error by caching the initial \u003ccode\u003ecanMakePayment()\u003c/code\u003e result and using it for subsequent checks within a session.\u003c/p\u003e\n"],["\u003cp\u003eImplement a caching mechanism, like the provided \u003ccode\u003echeckCanMakePayment()\u003c/code\u003e function, to efficiently check payment readiness while adhering to query limits.\u003c/p\u003e\n"]]],["Before using the payment request API, verify user payment capability with `canMakePayment()`. `True` indicates Google Pay is available; `False` means it's not installed or lacks payment methods. Multiple `canMakePayment()` calls with different payment methods cause a `DOMException`, resetting after 30 minutes or restart. Cache the first call's result to avoid this error. The provided `checkCanMakePayment` function utilizes session storage to store and reuse the cached `canMakePayment()` outcome.\n"],null,["# Check user readiness for payment\n\nBefore calling the payment request API, you must check whether the user can make\na payment using the current device.\n\nUse the `canMakePayment()` method to query whether the user is allowed to make\npayments with the current device.\n\n- If the result returned is `True`, then Google Pay is installed on the device and the user can make a payment.\n- If the result returned is `False`, it indicates that Google Pay isn't installed on the device, or payment method is not added in Google Pay.\n\nIf a query is made using `canMakePayment()` method with different payment\nmethods in `supportedInstruments`, the following error will be returned:\n\n`DOMException: Query quota exceeded, not allowed to check whether can make\npayment.`\n\nWhen this error occurs, Chrome will reset the quota after 30 minutes or on\nrestart.\n\nEach order made through Google Pay contains different data fields\n(for example, `transactionID`). To avoid the DOMException error, you must cache\nthe result of the first call, then check for the cache result before making more calls.\n\nChecking user readiness\n-----------------------\n\nThe sample function below checks to see whether a payment can be made using a\nsession storage cache. \n\n // Global key for canMakepayment cache.\n const canMakePaymentCache = 'canMakePaymentCache';\n\n /**\n * Check whether can make payment with Google Pay or not. It will check session storage\n * cache first and use the cache directly if it exists. Otherwise, it will call\n * canMakePayment method from PaymentRequest object and return the result, the\n * result will also be stored in the session storage cache for future usage.\n *\n * @private\n * @param {PaymentRequest} request The payment request object.\n * @return {Promise} a promise containing the result of whether can make payment.\n */\n function checkCanMakePayment(request) {\n // Check canMakePayment cache, use cache result directly if it exists.\n if (sessionStorage.hasOwnProperty(canMakePaymentCache)) {\n return Promise.resolve(JSON.parse(sessionStorage[canMakePaymentCache]));\n }\n\n // If canMakePayment() isn't available, default to assume the method is\n // supported.\n var canMakePaymentPromise = Promise.resolve(true);\n\n // Feature detect canMakePayment().\n if (request.canMakePayment) {\n canMakePaymentPromise = request.canMakePayment();\n }\n\n return canMakePaymentPromise\n .then((result) =\u003e {\n // Store the result in cache for future usage.\n sessionStorage[canMakePaymentCache] = result;\n return result;\n })\n .catch((err) =\u003e {\n console.log('Error calling canMakePayment: ' + err);\n });\n }"]]
