Fix Express Payment method being displayed on Blocks checkout when Payment Request is not supported

changelog.txt

@@ -13,6 +13,7 @@
 * Add - Deposit overviews have been added to the overview page.
 * Update - Account overview page is now GA and default page for woocommerce payments.
 * Update - Base fee and account status has been moved to overview page from WCPay settings.
+* Fix - Express payment method being displayed on blocks checkout when Payment Request is not supported.
 
 = 2.4.0 - 2021-05-12 =
 * Update - Improve the Connect Account page.

client/payment-request/blocks/index.js

@@ -5,24 +5,38 @@ 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 = () => <img src={ applePayImage } alt="" />;
 
 const paymentRequestPaymentMethod = ( api ) => ( {
 	name: PAYMENT_METHOD_NAME_PAYMENT_REQUEST,
 	content: <PaymentRequestExpress api={ api } stripe={ api.loadStripe() } />,
 	edit: <ApplePayPreview />,
-	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: {

client/payment-request/blocks/payment-request-express.js

@@ -28,12 +28,9 @@ const PaymentRequestExpressComponent = ( {
 } ) => {
 	// TODO: Don't display custom button when result.requestType
 	// is `apple_pay` or `google_pay`.
-	// TODO: Add loading indicator when isProcessing.
 	const {
 		paymentRequest,
 		// paymentRequestType,
-		// isProcessing,
-		canMakePayment,
 		onButtonClick,
 	} = useInitialization( {
 		api,
@@ -57,7 +54,7 @@ const PaymentRequestExpressComponent = ( {
 		},
 	};
 
-	if ( ! canMakePayment || ! paymentRequest ) {
+	if ( ! paymentRequest ) {
 		return null;
 	}
 

client/payment-request/blocks/use-initialization.js

@@ -16,7 +16,6 @@ import {
 import {
 	getPaymentRequest,
 	updatePaymentRequest,
-	canDoPaymentRequest,
 	normalizeLineItems,
 } from '../utils';
 
@@ -32,8 +31,6 @@ export const useInitialization = ( {
 
 	const [ paymentRequest, setPaymentRequest ] = useState( null );
 	const [ isFinished, setIsFinished ] = useState( false );
-	const [ isProcessing, setIsProcessing ] = useState( false );
-	const [ canMakePayment, setCanMakePayment ] = useState( false );
 	const [ paymentRequestType, setPaymentRequestType ] = useState( '' );
 
 	// Create the initial paymentRequest object. Note, we can't do anything if stripe isn't available yet or we have zero total.
@@ -42,7 +39,6 @@ export const useInitialization = ( {
 			! stripe ||
 			! billing?.cartTotal?.value ||
 			isFinished ||
-			isProcessing ||
 			paymentRequest
 		) {
 			return;
@@ -55,17 +51,23 @@ export const useInitialization = ( {
 			displayItems: normalizeLineItems( billing?.cartTotalItems ),
 		} );
 
-		canDoPaymentRequest( pr ).then( ( result ) => {
-			setPaymentRequest( pr );
-			setPaymentRequestType( result.requestType || '' );
-			setCanMakePayment( result.canPay );
+		pr.canMakePayment().then( ( result ) => {
+			if ( result ) {
+				setPaymentRequest( pr );
+				if ( result.applePay ) {
+					setPaymentRequestType( 'apple_pay' );
+				} else if ( result.googlePay ) {
+					setPaymentRequestType( 'google_pay' );
+				} else {
+					setPaymentRequestType( 'payment_request_api' );
+				}
+			}
 		} );
 	}, [
 		stripe,
 		paymentRequest,
 		billing?.cartTotal?.value,
 		isFinished,
-		isProcessing,
 		shippingData?.needsShipping,
 		billing?.cartTotalItems,
 	] );
@@ -78,7 +80,6 @@ export const useInitialization = ( {
 
 	// When the payment button is clicked, update the request and show it.
 	const onButtonClick = useCallback( () => {
-		setIsProcessing( true );
 		setIsFinished( false );
 		setExpressPaymentError( '' );
 		updatePaymentRequest( {
@@ -99,21 +100,18 @@ export const useInitialization = ( {
 	useEffect( () => {
 		const cancelHandler = () => {
 			setIsFinished( false );
-			setIsProcessing( false );
 			setPaymentRequest( null );
 			onClose();
 		};
 
 		const completePayment = ( redirectUrl ) => {
 			setIsFinished( true );
-			setIsProcessing( false );
 			window.location = redirectUrl;
 		};
 
 		const abortPayment = ( paymentMethod, message ) => {
 			paymentMethod.complete( 'fail' );
 			setIsFinished( true );
-			setIsProcessing( false );
 			setExpressPaymentError( message );
 		};
 
@@ -139,15 +137,12 @@ export const useInitialization = ( {
 		paymentRequest,
 		api,
 		setIsFinished,
-		setIsProcessing,
 		setPaymentRequest,
 		onClose,
 	] );
 
 	return {
 		paymentRequest,
-		isProcessing,
-		canMakePayment,
 		onButtonClick,
 		paymentRequestType,
 	};

client/payment-request/index.js

@@ -12,11 +12,7 @@ import {
 	paymentMethodHandler,
 } from './event-handlers.js';
 
-import {
-	shouldUseGooglePayBrand,
-	getPaymentRequest,
-	canDoPaymentRequest,
-} from './utils';
+import { shouldUseGooglePayBrand, getPaymentRequest } from './utils';
 
 jQuery( ( $ ) => {
 	// Don't load if blocks checkout is being loaded.
@@ -185,8 +181,8 @@ jQuery( ( $ ) => {
 			);
 
 			// Check the availability of the Payment Request API first.
-			canDoPaymentRequest( paymentRequest ).then( ( result ) => {
-				if ( ! result || ! result.canPay ) {
+			paymentRequest.canMakePayment().then( ( result ) => {
+				if ( ! result ) {
 					return;
 				}
 

client/payment-request/utils/utils.js

@@ -80,35 +80,6 @@ export const updatePaymentRequest = ( {
 	} );
 };
 
-/**
- * Returns whether or not the current session can make payments and what type of request it uses.
- *
- * @param {Object} paymentRequest A Stripe PaymentRequest instance.
- *
- * @return {Promise} Object containing canPay and the requestType, which can be either
- * - payment_request_api
- * - apple_pay
- * - google_pay
- */
-export const canDoPaymentRequest = ( paymentRequest ) => {
-	return new Promise( ( resolve ) => {
-		paymentRequest.canMakePayment().then( ( result ) => {
-			if ( result ) {
-				let paymentRequestType = 'payment_request_api';
-				if ( result.applePay ) {
-					paymentRequestType = 'apple_pay';
-				} else if ( result.googlePay ) {
-					paymentRequestType = 'google_pay';
-				}
-
-				resolve( { canPay: true, requestType: paymentRequestType } );
-			} else {
-				resolve( { canPay: false } );
-			}
-		} );
-	} );
-};
-
 /**
  * Get WC AJAX endpoint URL.
  *

readme.txt

@@ -114,6 +114,7 @@ Please note that our support for the checkout block is still experimental and th
 * Add - Deposit overviews have been added to the overview page.
 * Update - Account overview page is now GA and default page for woocommerce payments.
 * Update - Base fee and account status has been moved to overview page from WCPay settings.
+* Fix - Express payment method being displayed on blocks checkout when Payment Request is not supported.
 
 = 2.4.0 - 2021-05-12 =
 * Update - Improve the Connect Account page.