Do not use react-paypal-js

modules/ppcp-paylater-block/package.json

@@ -10,7 +10,6 @@
         "Edge >= 14"
     ],
     "dependencies": {
-        "@paypal/react-paypal-js": "^8.1.3",
         "core-js": "^3.25.0"
     },
     "devDependencies": {

modules/ppcp-paylater-block/resources/js/components/PayPalMessages.js

@@ -0,0 +1,29 @@
+import { useRef, useEffect } from '@wordpress/element';
+
+export default function PayPalMessages({
+    amount,
+    style,
+    onRender,
+}) {
+    const containerRef = useRef(null);
+
+    useEffect(() => {
+        const messages = paypal.Messages({
+            amount,
+            style,
+            onRender,
+        });
+
+        messages.render(containerRef.current)
+            .catch(err => {
+                // Ignore when component destroyed.
+                if (!containerRef.current || containerRef.current.children.length === 0) {
+                    return;
+                }
+
+                console.error(err);
+            });
+    }, [amount, style, onRender]);
+
+    return <div ref={containerRef}/>
+}

modules/ppcp-paylater-block/resources/js/edit.js

@@ -2,14 +2,17 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, SelectControl, Spinner } from '@wordpress/components';
-import { PayPalScriptProvider, PayPalMessages } from "@paypal/react-paypal-js";
 import { useScriptParams } from "./hooks/script-params";
+import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
+import PayPalMessages from "./components/PayPalMessages";
 
 export default function Edit( { attributes, clientId, setAttributes } ) {
     const { layout, logo, position, color, flexColor, flexRatio, placement, id } = attributes;
     const isFlex = layout === 'flex';
 
-    const [loaded, setLoaded] = useState(false);
+    const [paypalScriptState, setPaypalScriptState] = useState(null);
+
+    const [rendered, setRendered] = useState(false);
 
     const previewStyle = {
         layout,
@@ -26,25 +29,36 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 
     const props = useBlockProps({className: ['ppcp-paylater-block-preview', 'ppcp-overlay-parent']});
 
+    const loadingElement = <div {...props}><Spinner/></div>;
+
     useEffect(() => {
         if (!id) {
             setAttributes({id: 'ppcp-' + clientId});
         }
     }, []);
 
-    const scriptParams = useScriptParams(PcpPayLaterBlock.ajax.cart_script_params);
+    let scriptParams = useScriptParams(PcpPayLaterBlock.ajax.cart_script_params);
     if (scriptParams === null) {
-        return (<div {...props}><Spinner/></div>)
+        return loadingElement;
+    }
+    if (scriptParams === false) {
+        scriptParams = {
+            url_params: {
+                clientId: 'test',
+                components: 'messages,buttons,funding-eligibility',
+            }
+        }
     }
 
-    const urlParams = scriptParams === false ? {
-        clientId: 'test',
-        components: 'messages',
-    } : {
-        ...scriptParams.url_params,
-        ...{
-            components: 'messages,buttons,funding-eligibility',
-        }
+    if (!paypalScriptState) {
+        loadPaypalScript(scriptParams, () => {
+            setPaypalScriptState('loaded')
+        }, () => {
+            setPaypalScriptState('failed')
+        });
+    }
+    if (paypalScriptState !== 'loaded') {
+        return loadingElement;
     }
 
 	return (
@@ -136,18 +150,13 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 			</InspectorControls>
             <div {...props}>
                 <div className={'ppcp-overlay-child'}>
-                    <PayPalScriptProvider
-                        options={urlParams}
-                    >
-                        <PayPalMessages
-                            style={previewStyle}
-                            forceReRender={[previewStyle]}
-                            onRender={() => setLoaded(true)}
-                        />
-                    </PayPalScriptProvider>
+                    <PayPalMessages
+                        style={previewStyle}
+                        onRender={() => setRendered(true)}
+                    />
                 </div>
                 <div className={'ppcp-overlay-child ppcp-unclicable-overlay'}> {/* make the message not clickable */}
-                    {!loaded && (<Spinner/>)}
+                    {!rendered && (<Spinner/>)}
                 </div>
             </div>
 		</>

modules/ppcp-paylater-block/yarn.lock

@@ -1005,28 +1005,6 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@paypal/paypal-js@^7.0.0":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-7.1.1.tgz#3547cbb96f1692209c4b33cf0f8e69225c2e84a3"
-  integrity sha512-fVpExBrHINGHsyODYKBXSMinxrgPKzmVW7ZCaCqUaMl7kTSR1ZsVi2IhgLvsPpXF4LWSAMkPTP/J6aetQ6ZlNA==
-  dependencies:
-    promise-polyfill "^8.3.0"
-
-"@paypal/react-paypal-js@^8.1.3":
-  version "8.1.3"
-  resolved "https://registry.yarnpkg.com/@paypal/react-paypal-js/-/react-paypal-js-8.1.3.tgz#2a46bd864eee02efada370ca50fab5a5bf38f4ff"
-  integrity sha512-hEm27iYP/UHS3XPBhDdiK2U4PH1FxrOD5O3f9tstAVLJd82l/laCjq751HiESSm63PVOoFeKE41Fe1mYGab+oA==
-  dependencies:
-    "@paypal/paypal-js" "^7.0.0"
-    "@paypal/sdk-constants" "^1.0.122"
-
-"@paypal/sdk-constants@^1.0.122":
-  version "1.0.133"
-  resolved "https://registry.yarnpkg.com/@paypal/sdk-constants/-/sdk-constants-1.0.133.tgz#ee65c0bb574554becc8a5d3d0a834a944bbeb0e7"
-  integrity sha512-NWV0IWrHwQQrNLaUYxQ1GsytvHbDu+x63kRpNJfw1OQeDcUca4B0I4LoBktWQl5gICi090hD56n2Wg08dAl44g==
-  dependencies:
-    hi-base32 "^0.5.0"
-
 "@types/eslint-scope@^3.7.3":
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@@ -1621,11 +1599,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hi-base32@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/hi-base32/-/hi-base32-0.5.1.tgz#1279f2ddae2673219ea5870c2121d2a33132857e"
-  integrity sha512-EmBBpvdYh/4XxsnUybsPag6VikPYnN30td+vQk+GI3qpahVEG9+gTkG0aXVxTjBqQ5T6ijbWIu77O+C5WFWsnA==
-
 immutable@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
@@ -1867,11 +1840,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-promise-polyfill@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.3.0.tgz#9284810268138d103807b11f4e23d5e945a4db63"
-  integrity sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==
-
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"