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

Add ButtonOptions support for the Google Pay button

Browse source
This commit is contained in:
Daniel Dudzic 2024-11-07 01:00:53 +01:00
parent 7832f853ff
commit b117ff9b7c
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
9 changed files with 305 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,15 @@
import { useState, useEffect } from '@wordpress/element';
import { useState } 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 } ) => {
const [ buttonHtml, setButtonHtml ] = useState( '' );
const [ buttonElement, setButtonElement ] = useState( null );
const GooglepayButton = ( {
namespace,
buttonConfig,
ppcpConfig,
buttonAttributes,
} ) => {
const [ componentFrame, setComponentFrame ] = useState( null );
const isPayPalLoaded = usePayPalScript( namespace, ppcpConfig );
@ -18,35 +21,45 @@ const GooglepayButton = ( { namespace, buttonConfig, ppcpConfig } ) => {
const googlepayConfig = useGooglepayConfig( namespace, isGooglepayLoaded );
useEffect( () => {
if ( ! buttonElement ) {
return;
}
setComponentFrame( buttonElement.ownerDocument );
}, [ buttonElement ] );
const googlepayButton = useGooglepayApiToGenerateButton(
const { button, containerStyles } = useGooglepayApiToGenerateButton(
componentFrame,
namespace,
buttonConfig,
ppcpConfig,
googlepayConfig
googlepayConfig,
buttonAttributes
);
useEffect( () => {
if ( googlepayButton ) {
const hideLoader =
'<style>.block-editor-iframe__html .gpay-card-info-animated-progress-bar-container {display:none !important}</style>';
setButtonHtml( googlepayButton.outerHTML + hideLoader );
}
}, [ googlepayButton ] );
return (
<div
ref={ setButtonElement }
dangerouslySetInnerHTML={ { __html: buttonHtml } }
/>
<>
<div
id="express-payment-method-ppcp-googlepay"
style={ containerStyles }
ref={ ( node ) => {
if ( ! node ) {
return;
}
// Set component frame
setComponentFrame( node.ownerDocument );
// Handle button mounting
while ( node.firstChild ) {
node.removeChild( node.firstChild );
}
if ( button ) {
node.appendChild( button );
}
} }
/>
{ button && (
<style>
{ `.block-editor-iframe__html .gpay-card-info-animated-progress-bar-container {
display: none !important
}` }
</style>
) }
</>
);
};