diff --git a/changelog/poc-google-pay-as-payment-method b/changelog/poc-google-pay-as-payment-method new file mode 100644 index 00000000000..5cc941b4c74 --- /dev/null +++ b/changelog/poc-google-pay-as-payment-method @@ -0,0 +1,4 @@ +Significance: patch +Type: add + +POC: Google Pay as a payment method diff --git a/client/checkout/blocks/index.js b/client/checkout/blocks/index.js index 418c5c1852c..ba4cdb0c412 100644 --- a/client/checkout/blocks/index.js +++ b/client/checkout/blocks/index.js @@ -21,6 +21,7 @@ import enqueueFraudScripts from 'fraud-scripts'; import { expressCheckoutElementApplePay, expressCheckoutElementGooglePay, + paymentMethodGooglePay, } from 'wcpay/express-checkout/blocks'; import { getDeferredIntentCreationUPEFields } from './payment-elements'; @@ -111,6 +112,8 @@ const addCheckoutTracking = () => { } }; +registerPaymentMethod( paymentMethodGooglePay( api ) ); + // Call handleWooPayEmailInput if woopay is enabled and this is the checkout page. if ( getUPEConfig( 'isWooPayEnabled' ) ) { if ( diff --git a/client/express-checkout/blocks/components/express-checkout-component.js b/client/express-checkout/blocks/components/express-checkout-component.js index 88fcc160166..e8dbe196ddf 100644 --- a/client/express-checkout/blocks/components/express-checkout-component.js +++ b/client/express-checkout/blocks/components/express-checkout-component.js @@ -81,6 +81,7 @@ const ExpressCheckoutComponent = ( { expressPaymentMethod = '', buttonAttributes, isPreview = false, + eventRegistration, } ) => { const { buttonOptions, @@ -96,6 +97,7 @@ const ExpressCheckoutComponent = ( { onClick, onClose, setExpressPaymentError, + eventRegistration, } ); const onClickHandler = ! isPreview ? onButtonClick : () => {}; const onShippingAddressChange = ( event ) => diff --git a/client/express-checkout/blocks/hooks/use-express-checkout.js b/client/express-checkout/blocks/hooks/use-express-checkout.js index a3f28340342..bd4fb5801bf 100644 --- a/client/express-checkout/blocks/hooks/use-express-checkout.js +++ b/client/express-checkout/blocks/hooks/use-express-checkout.js @@ -31,6 +31,7 @@ export const useExpressCheckout = ( { onClick, onClose, setExpressPaymentError, + eventRegistration, } ) => { const stripe = useStripe(); const elements = useElements(); @@ -39,7 +40,7 @@ export const useExpressCheckout = ( { const onCancel = () => { onCancelHandler(); - onClose(); + onClose?.(); }; const completePayment = ( redirectUrl ) => { @@ -54,13 +55,23 @@ export const useExpressCheckout = ( { const onButtonClick = useCallback( ( event ) => { + if ( eventRegistration?.onPlaceOrderButtonValidation ) { + const validationResult = eventRegistration.onPlaceOrderButtonValidation(); + console.log( '### vr', validationResult ); + if ( ! validationResult ) { + return; + } + } + // If login is required for checkout, display redirect confirmation dialog. if ( getExpressCheckoutData( 'login_confirmation' ) ) { displayLoginConfirmation( event.expressPaymentType ); return; } - const shippingAddressRequired = shippingData?.needsShipping; + const shippingAddressRequired = eventRegistration?.onPlaceOrderButtonValidation + ? false + : shippingData?.needsShipping; let shippingRates; if ( shippingAddressRequired ) { @@ -122,7 +133,7 @@ export const useExpressCheckout = ( { }; // Click event from WC Blocks. - onClick(); + onClick?.(); // Global click event handler from WooPayments to ECE. onClickHandler( event ); event.resolve( options ); @@ -133,6 +144,7 @@ export const useExpressCheckout = ( { billing.cartTotal.value, shippingData.needsShipping, shippingData.shippingRates, + eventRegistration, ] ); diff --git a/client/express-checkout/blocks/index.js b/client/express-checkout/blocks/index.js index 5968b3ca04a..54d3df51008 100644 --- a/client/express-checkout/blocks/index.js +++ b/client/express-checkout/blocks/index.js @@ -77,3 +77,36 @@ export const expressCheckoutElementGooglePay = ( api ) => ( { return checkPaymentMethodIsAvailable( 'googlePay', cart, api ); }, } ); + +const CustomWrapper = ( { children } ) =>