diff --git a/client/payment-request/blocks/index.js b/client/payment-request/blocks/index.js index 6e44c416c77..0ec5b11a2d2 100644 --- a/client/payment-request/blocks/index.js +++ b/client/payment-request/blocks/index.js @@ -5,6 +5,7 @@ import { PAYMENT_METHOD_NAME_PAYMENT_REQUEST } from '../../checkout/constants'; import { PaymentRequestExpress } from './payment-request-express'; import { applePayImage } from './apple-pay-preview'; import { getConfig } from '../../utils/checkout'; +import { getPaymentRequest } from '../utils'; const ApplePayPreview = () => ; @@ -12,17 +13,30 @@ const paymentRequestPaymentMethod = ( api ) => ( { name: PAYMENT_METHOD_NAME_PAYMENT_REQUEST, content: , edit: , - canMakePayment: () => { + canMakePayment: ( cartData ) => { // If in the editor context, always return true to display the `edit` prop preview. // https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/4101. if ( getConfig( 'is_admin' ) ) { return true; } - return ( - !! api.getStripe() && - 'undefined' !== typeof wcpayPaymentRequestParams - ); + if ( 'undefined' === typeof wcpayPaymentRequestParams ) { + return false; + } + + return api.loadStripe().then( ( stripe ) => { + // 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 pr = getPaymentRequest( { + stripe, + total: parseInt( cartData?.cartTotals?.total_price ?? 0, 10 ), + requestShipping: cartData?.cartNeedsShipping, + displayItems: [], + } ); + + return pr.canMakePayment(); + } ); }, paymentMethodId: PAYMENT_METHOD_NAME_PAYMENT_REQUEST, supports: {