fix issue where PRB UI is displayed when browser does not support PRs

client/blocks/payment-request/index.js

@@ -1,5 +1,10 @@
 /* global wc_stripe_payment_request_params */
 
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
 /**
  * Internal dependencies
  */
@@ -16,7 +21,7 @@ const paymentRequestPaymentMethod = {
 	name: PAYMENT_METHOD_NAME,
 	content: <PaymentRequestExpress stripe={ componentStripePromise } />,
 	edit: <ApplePayPreview />,
-	canMakePayment: () => {
+	canMakePayment: ( cartData ) => {
 		// If the `wc_stripe_payment_request_params` object is not available we don't support
 		// payment requests.
 		// eslint-disable-next-line camelcase
@@ -25,7 +30,23 @@ const paymentRequestPaymentMethod = {
 		}
 
 		return loadStripe().then( ( stripe ) => {
-			return stripe !== null;
+			// Create a payment request and check if we can make a payment to determine whether to
+			// show the Payment Request Button or not. This is necessary because a browser might be
+			// able to load the Stripe JS object, but not support Payment Requests.
+			const paymentRequest = stripe.paymentRequest( {
+				total: {
+					label: 'Total',
+					amount: parseInt(
+						cartData?.cartTotals?.total_price ?? 0,
+						10
+					),
+					pending: true,
+				},
+				country: getSetting( 'baseLocation', {} )?.country,
+				currency: cartData?.cartTotals?.currency_code?.toLowerCase(),
+			} );
+
+			return paymentRequest.canMakePayment();
 		} );
 	},
 	paymentMethodId: 'stripe',