2023-08-25 16:25:20 +01:00
|
|
|
import {useEffect, useState} from '@wordpress/element';
|
|
|
|
import {registerExpressPaymentMethod, registerPaymentMethod} from '@woocommerce/blocks-registry';
|
|
|
|
import {loadPaypalScript} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
|
|
|
|
import GooglepayManager from "./GooglepayManager";
|
|
|
|
import {loadCustomScript} from "@paypal/paypal-js";
|
|
|
|
|
|
|
|
const ppcpData = wc.wcSettings.getSetting('ppcp-gateway_data');
|
|
|
|
const ppcpConfig = ppcpData.scriptData;
|
|
|
|
|
|
|
|
const buttonData = wc.wcSettings.getSetting('ppcp-googlepay_data');
|
|
|
|
const buttonConfig = buttonData.scriptData;
|
|
|
|
|
|
|
|
if (typeof window.PayPalCommerceGateway === 'undefined') {
|
|
|
|
window.PayPalCommerceGateway = ppcpConfig;
|
|
|
|
}
|
|
|
|
|
|
|
|
const GooglePayComponent = () => {
|
|
|
|
const [bootstrapped, setBootstrapped] = useState(false);
|
|
|
|
const [paypalLoaded, setPaypalLoaded] = useState(false);
|
|
|
|
const [googlePayLoaded, setGooglePayLoaded] = useState(false);
|
|
|
|
|
|
|
|
const bootstrap = function () {
|
|
|
|
const manager = new GooglepayManager(buttonConfig, ppcpConfig);
|
|
|
|
manager.init();
|
|
|
|
};
|
|
|
|
|
2023-09-06 11:55:26 +01:00
|
|
|
useEffect(() => {
|
|
|
|
const bodyClass = 'ppcp-has-googlepay-block';
|
|
|
|
if (!document.body.classList.contains(bodyClass)) {
|
|
|
|
document.body.classList.add(bodyClass);
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2023-08-25 16:25:20 +01:00
|
|
|
useEffect(() => {
|
|
|
|
// Load GooglePay SDK
|
|
|
|
loadCustomScript({ url: buttonConfig.sdk_url }).then(() => {
|
|
|
|
setGooglePayLoaded(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
// Load PayPal
|
|
|
|
loadPaypalScript(ppcpConfig, () => {
|
|
|
|
setPaypalLoaded(true);
|
|
|
|
});
|
2023-08-28 17:19:07 +01:00
|
|
|
}, []);
|
2023-08-25 16:25:20 +01:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!bootstrapped && paypalLoaded && googlePayLoaded) {
|
|
|
|
setBootstrapped(true);
|
|
|
|
bootstrap();
|
|
|
|
}
|
|
|
|
}, [paypalLoaded, googlePayLoaded]);
|
|
|
|
|
|
|
|
return (
|
2023-09-06 11:55:26 +01:00
|
|
|
<div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-googlepay"></div>
|
2023-08-25 16:25:20 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const features = ['products'];
|
|
|
|
let registerMethod = registerExpressPaymentMethod;
|
|
|
|
|
|
|
|
registerMethod({
|
|
|
|
name: buttonData.id,
|
|
|
|
label: <div dangerouslySetInnerHTML={{__html: buttonData.title}}/>,
|
|
|
|
content: <GooglePayComponent isEditing={false}/>,
|
|
|
|
edit: <GooglePayComponent isEditing={true}/>,
|
|
|
|
ariaLabel: buttonData.title,
|
|
|
|
canMakePayment: () => buttonData.enabled,
|
|
|
|
supports: {
|
|
|
|
features: features,
|
|
|
|
},
|
|
|
|
});
|