woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

💩 A “working” GooglePay block editor preview…

Browse source
This commit is contained in:
Philipp Stracker 2024-10-09 18:58:55 +02:00
parent 3171e943ba
commit 5f6447d786
No known key found for this signature in database
4 changed files with 96 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

45
modules/ppcp-googlepay/resources/js/Block/components/GooglepayButton.js
View file

@ -1,14 +1,36 @@
import { useState, useEffect } from '@wordpress/element';
import useGooglepayApiToGenerateButton from '../hooks/useGooglepayApiToGenerateButton';
import usePayPalScript from '../hooks/usePayPalScript';
import useGooglepayScript from '../hooks/useGooglepayScript';
import useGooglepayConfig from '../hooks/useGooglepayConfig';
const GooglepayButton = ( {
namespace,
buttonConfig,
ppcpConfig,
googlepayConfig,
} ) => {
const GooglepayButton = ( { namespace, buttonConfig, ppcpConfig } ) => {
const [ buttonHtml, setButtonHtml ] = useState( '' );
const [ buttonElement, setButtonElement ] = useState( null );
const [ componentFrame, setComponentFrame ] = useState( null );
const buttonLoader = '<div>Loading Google Pay...</div>';
const isPayPalLoaded = usePayPalScript( namespace, ppcpConfig );
const isGooglepayLoaded = useGooglepayScript(
componentFrame,
buttonConfig,
isPayPalLoaded
);
const googlepayConfig = useGooglepayConfig( namespace, isGooglepayLoaded );
useEffect( () => {
if ( ! buttonElement ) {
return;
}
setComponentFrame( buttonElement.ownerDocument );
}, [ buttonElement ] );
const googlepayButton = useGooglepayApiToGenerateButton(
componentFrame,
namespace,
buttonConfig,
ppcpConfig,
@ -21,11 +43,12 @@ const GooglepayButton = ( {
}
}, [ googlepayButton ] );
if ( ! buttonHtml ) {
return null;
}
return <div dangerouslySetInnerHTML={ { __html: buttonHtml } } />;
return (
<div
ref={ setButtonElement }
dangerouslySetInnerHTML={ { __html: buttonHtml || buttonLoader } }
/>
);
};
export default GooglepayButton;

36
modules/ppcp-googlepay/resources/js/Block/hooks/useGooglepayApiToGenerateButton.js
View file

@ -2,6 +2,7 @@ import { useEffect, useState } from '@wordpress/element';
import useButtonStyles from './useButtonStyles';
const useGooglepayApiToGenerateButton = (
componentDocument,
namespace,
buttonConfig,
ppcpConfig,
@ -12,16 +13,19 @@ const useGooglepayApiToGenerateButton = (
useEffect( () => {
if (
! componentDocument?.defaultView ||
! buttonConfig ||
! googlepayConfig ||
! window.google ||
! window.google.payments ||
! window.google.payments.api
! googlepayConfig
) {
return;
}
const paymentsClient = new window.google.payments.api.PaymentsClient( {
const api = componentDocument.defaultView.google?.payments?.api;
if ( ! api ) {
return;
}
const paymentsClient = new api.PaymentsClient( {
environment: 'TEST',
} );
@ -30,24 +34,22 @@ const useGooglepayApiToGenerateButton = (
console.log( 'googlepayConfig', googlepayConfig );
console.log( 'buttonStyles?.Default', buttonStyles?.Default );
const googlePayButtonOptions = {
allowedPaymentMethods: googlepayConfig.allowedPaymentMethods,
buttonColor: buttonConfig.buttonColor || 'black',
buttonType: buttonConfig.buttonType || 'pay',
buttonLocale: buttonConfig.buttonLocale || 'en',
buttonSizeMode: 'fill',
};
const button = paymentsClient.createButton( {
...googlePayButtonOptions,
onClick: () => {
console.log( 'Google Pay button clicked' );
},
allowedPaymentMethods: googlepayConfig.allowedPaymentMethods,
buttonColor: buttonConfig.buttonColor || 'black',
buttonType: buttonConfig.buttonType || 'pay',
buttonLocale: buttonConfig.buttonLocale || 'en',
buttonSizeMode: 'fill',
} );
console.log( {
allowedPaymentMethods: googlepayConfig.allowedPaymentMethods,
buttonColor: buttonConfig.buttonColor || 'black',
buttonType: buttonConfig.buttonType || 'pay',
buttonLocale: buttonConfig.buttonLocale || 'en',
buttonSizeMode: 'fill',
} );
console.log( 'Google Pay Button options', googlePayButtonOptions );
setGooglepayButton( button );

39
modules/ppcp-googlepay/resources/js/Block/hooks/useGooglepayScript.js
View file

@ -1,10 +1,39 @@
import { useState, useEffect } from '@wordpress/element';
import { loadCustomScript } from '@paypal/paypal-js';
const useGooglepayScript = ( buttonConfig, isPayPalLoaded ) => {
const useGooglepayScript = (
componentDocument,
buttonConfig,
isPayPalLoaded
) => {
const [ isGooglepayLoaded, setIsGooglepayLoaded ] = useState( false );
useEffect( () => {
if ( ! componentDocument ) {
return;
}
const injectScriptToFrame = ( scriptSrc ) => {
if ( document === componentDocument ) {
return;
}
const script = document.querySelector(
`script[src^="${ scriptSrc }"]`
);
if ( script ) {
const newScript = componentDocument.createElement( 'script' );
newScript.src = script.src;
newScript.async = script.async;
newScript.type = script.type;
componentDocument.head.appendChild( newScript );
} else {
console.error( 'Script not found in the document:', scriptSrc );
}
};
const loadGooglepayScript = async () => {
if ( ! isPayPalLoaded ) {
return;
@ -16,7 +45,11 @@ const useGooglepayScript = ( buttonConfig, isPayPalLoaded ) => {
}
try {
await loadCustomScript( { url: buttonConfig.sdk_url } );
await loadCustomScript( { url: buttonConfig.sdk_url } ).then(
() => {
injectScriptToFrame( buttonConfig.sdk_url );
}
);
setIsGooglepayLoaded( true );
} catch ( error ) {
console.error( 'Failed to load Googlepay script:', error );
@ -24,7 +57,7 @@ const useGooglepayScript = ( buttonConfig, isPayPalLoaded ) => {
};
loadGooglepayScript();
}, [ buttonConfig, isPayPalLoaded ] );
}, [ componentDocument, buttonConfig, isPayPalLoaded ] );
return isGooglepayLoaded;
};

31
modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js
View file

@ -1,32 +1,15 @@
import GooglepayButton from './Block/components/GooglepayButton';
import usePayPalScript from './Block/hooks/usePayPalScript';
import useGooglepayScript from './Block/hooks/useGooglepayScript';
import useGooglepayConfig from './Block/hooks/useGooglepayConfig';
const GooglepayManagerBlockEditor = ( {
namespace,
buttonConfig,
ppcpConfig,
} ) => {
const isPayPalLoaded = usePayPalScript( namespace, ppcpConfig );
const isGooglepayLoaded = useGooglepayScript(
buttonConfig,
isPayPalLoaded
);
const googlepayConfig = useGooglepayConfig( namespace, isGooglepayLoaded );
if ( ! googlepayConfig ) {
return <div>Loading Google Pay...</div>; // Or any other loading indicator
}
return (
<GooglepayButton
namespace={ namespace }
buttonConfig={ buttonConfig }
ppcpConfig={ ppcpConfig }
googlepayConfig={ googlepayConfig }
/>
);
};
} ) => (
<GooglepayButton
namespace={ namespace }
buttonConfig={ buttonConfig }
ppcpConfig={ ppcpConfig }
/>
);
export default GooglepayManagerBlockEditor;