fix/143: Cancelling Google Pay on checkout shows validation errors

assets/blocks/credit-card/checkout-handler.js

@@ -33,7 +33,7 @@ export const CheckoutHandler = ({
 	const square = useContext(SquareWebContext);
 
 	const {
-		onPaymentProcessing,
+		onPaymentSetup,
 		onCheckoutAfterProcessingWithError,
 		onCheckoutAfterProcessingWithSuccess,
 	} = eventRegistration;
@@ -42,7 +42,7 @@ export const CheckoutHandler = ({
 		checkoutFormHandler;
 
 	usePaymentProcessing(
-		onPaymentProcessing,
+		onPaymentSetup,
 		emitResponse,
 		square,
 		getPaymentMethodData,

assets/blocks/credit-card/use-payment-processing.js

@@ -22,15 +22,15 @@ import { getSquareServerData } from '../square-utils';
  * If the checkout has errors, we send `has-checkout-errors` to the server-side so that the status
  * of the request can be set to 'ERROR' before gateway validation is done.
  *
- * @param {Function}          onPaymentProcessing  Callback for registering observers on the payment processing event
+ * @param {Function}          onPaymentSetup       Callback for registering observers on the payment processing event
  * @param {EmitResponseProps} emitResponse         Helpers for observer response objects
  * @param {SquareContext}     squareContext        Square payment form context variable
  * @param {Function}          getPaymentMethodData CreateNonce function
  * @param {Function}          createNonce          CreateNonce function
  * @param {Function}          verifyBuyer          VerifyBuyer function
  */
 export const usePaymentProcessing = (
-	onPaymentProcessing,
+	onPaymentSetup,
 	emitResponse,
 	squareContext,
 	getPaymentMethodData,
@@ -106,10 +106,10 @@ export const usePaymentProcessing = (
 			return response;
 		};
 
-		const unsubscribe = onPaymentProcessing(processCheckout);
+		const unsubscribe = onPaymentSetup(processCheckout);
 		return unsubscribe;
 	}, [
-		onPaymentProcessing,
+		onPaymentSetup,
 		emitResponse.responseTypes.SUCCESS,
 		emitResponse.responseTypes.ERROR,
 		createNonce,

assets/blocks/digital-wallets/content.js

@@ -6,48 +6,104 @@ import { useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import DigitalWalletContext from './context';
-import ButtonComponent from './button-component';
-import { getSquareServerData } from '../square-utils';
+import { tokenize } from './utils';
+import { getSquareServerData } from '../square-utils/utils';
+import {
+	useSquare,
+	usePaymentRequest,
+	useShippingContactChangeHandler,
+	useShippingOptionChangeHandler,
+	useGooglePay,
+	useApplePay,
+	usePaymentProcessing,
+} from './hooks';
 
-const Content = (props) => {
-	const [payments, setPayments] = useState(null);
-	const { onCheckoutFail } = props.eventRegistration;
-	const { onClose } = props;
+const Content = ({
+	billing,
+	shippingData,
+	onClick,
+	onClose,
+	onSubmit,
+	setExpressPaymentError,
+	emitResponse,
+	eventRegistration: { onPaymentSetup, onCheckoutFail },
+}) => {
+	const { needsShipping } = shippingData;
+	const payments = useSquare();
+	const paymentRequest = usePaymentRequest(payments, needsShipping);
+	const [googlePay, googlePayRef] = useGooglePay(payments, paymentRequest);
+	const [applePay, applePayRef] = useApplePay(payments, paymentRequest);
+	const [tokenResult, setTokenResult] = useState(false);
+
+	useShippingContactChangeHandler(paymentRequest);
+	useShippingOptionChangeHandler(paymentRequest);
+	usePaymentProcessing(
+		payments,
+		billing,
+		tokenResult,
+		emitResponse,
+		onPaymentSetup
+	);
 
 	useEffect(() => {
-		const applicationId = getSquareServerData().applicationId;
-		const locationId = getSquareServerData().locationId;
+		const unsubscribe = onCheckoutFail(() => {
+			onClose();
+			return true;
+		});
+		return unsubscribe;
+	}, [onCheckoutFail]);
+
+	const isGooglePayDisabled =
+		getSquareServerData().hideButtonOptions.includes('google');
+	const isApplePayDisabled =
+		getSquareServerData().hideButtonOptions.includes('apple');
 
-		if (!window.Square) {
+	function onClickHandler(buttonInstance) {
+		if (!buttonInstance) {
 			return;
 		}
 
-		try {
-			const __payments = window.Square.payments(
-				applicationId,
-				locationId
-			);
-			setPayments(__payments);
-		} catch (e) {
-			console.error(e);
-		}
-	}, []);
+		setExpressPaymentError('');
+		onClick();
 
-	useEffect(() => {
-		const unsubscribeOnCheckoutFail = onCheckoutFail(() => {
-			onClose();
-			return true;
-		});
+		(async () => {
+			const __tokenResult = await tokenize(buttonInstance);
+
+			if (!__tokenResult) {
+				onClose();
+			} else {
+				setTokenResult(__tokenResult);
+				onSubmit();
+			}
+		})();
+	}
 
-		return unsubscribeOnCheckoutFail;
-	}, [onCheckoutFail]); // eslint-disable-line react-hooks/exhaustive-deps
+	const googlePayExpressButton = !isGooglePayDisabled && (
+		<div // eslint-disable-line jsx-a11y/click-events-have-key-events
+			tabIndex={0}
+			role="button"
+			ref={googlePayRef}
+			onClick={() => onClickHandler(googlePay)}
+		></div>
+	);
+
+	const applePayExpressButton = !isApplePayDisabled && (
+		<div // eslint-disable-line jsx-a11y/click-events-have-key-events
+			tabIndex={0}
+			role="button"
+			ref={applePayRef}
+			onClick={() => onClickHandler(applePay)}
+			className="apple-pay-button wc-square-wallet-buttons"
+		>
+			<span className="text"></span>
+			<span className="logo"></span>
+		</div>
+	);
 
 	return (
 		<>
-			<DigitalWalletContext.Provider value={{ payments, props }}>
-				<ButtonComponent />
-			</DigitalWalletContext.Provider>
+			{applePayExpressButton}
+			{googlePayExpressButton}
 		</>
 	);
 };