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;