Use react component from the standard sdk

modules/ppcp-blocks/resources/js/checkout-block.js

@@ -1,7 +1,7 @@
 import {useEffect, useState} from '@wordpress/element';
 import {registerExpressPaymentMethod} from '@woocommerce/blocks-registry';
-import {PayPalScriptProvider, PayPalButtons} from "@paypal/react-paypal-js";
 import {paypalOrderToWcShippingAddress, paypalPayerToWc} from "./Helper/Address";
+import {loadPaypalScript} from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading'
 
 const config = wc.wcSettings.getSetting('ppcp-gateway_data');
 
@@ -18,6 +18,15 @@ const PayPalComponent = ({
 
     const [paypalOrder, setPaypalOrder] = useState(null);
 
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        if (!loaded) {
+            loadPaypalScript(config.scriptData, () => {
+                setLoaded(true);
+            });
+        }
+    }, [loaded]);
+
     const createOrder = async () => {
         try {
             const res = await fetch(config.scriptData.ajax.create_order.endpoint, {
@@ -125,17 +134,21 @@ const PayPalComponent = ({
         };
     }, [onPaymentSetup, paypalOrder]);
 
+    if (!loaded) {
+        return null;
+    }
+
+    const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });
+
     return (
-        <PayPalScriptProvider options={config.scriptData.url_params}>
-            <PayPalButtons
-                style={config.scriptData.button.style}
-                onClick={handleClick}
-                onCancel={onClose}
-                onError={onClose}
-                createOrder={createOrder}
-                onApprove={handleApprove}
-            />
-        </PayPalScriptProvider>
+        <PayPalButton
+            style={config.scriptData.button.style}
+            onClick={handleClick}
+            onCancel={onClose}
+            onError={onClose}
+            createOrder={createOrder}
+            onApprove={handleApprove}
+        />
     );
 }