load data-client-id via endpoint when needed

modules.local/ppcp-button/resources/js/button.js

@@ -5,6 +5,7 @@ import CheckoutBootstap from './modules/ContextBootstrap/CheckoutBootstap';
 import Renderer from './modules/Renderer/Renderer';
 import ErrorHandler from './modules/ErrorHandler';
 import CreditCardRenderer from "./modules/Renderer/CreditCardRenderer";
+import dataClientIdAttributeHandler from "./modules/DataClientIdAttributeHandler";
 
 const bootstrap = () => {
     const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic);
@@ -57,15 +58,20 @@ document.addEventListener(
         }
         const script = document.createElement('script');
 
+        script.addEventListener('load', (event) => {
+            bootstrap();
+        });
         script.setAttribute('src', PayPalCommerceGateway.button.url);
         Object.entries(PayPalCommerceGateway.script_attributes).forEach(
             (keyValue) => {
                 script.setAttribute(keyValue[0], keyValue[1]);
             }
         );
-        script.addEventListener('load', (event) => {
-            bootstrap();
-        });
+
+        if (PayPalCommerceGateway.data_client_id.set_attribute) {
+            dataClientIdAttributeHandler(script, PayPalCommerceGateway.data_client_id);
+            return;
+        }
 
         document.body.append(script);
     },

modules.local/ppcp-button/resources/js/modules/DataClientIdAttributeHandler.js

@@ -0,0 +1,52 @@
+const storageKey = 'ppcp-data-client-id';
+
+const validateToken = (token, user) => {
+    if (! token) {
+        return false;
+    }
+    if (token.user !== user) {
+        return false;
+    }
+    const currentTime = new Date().getTime();
+    const isExpired = currentTime >= token.expiration * 1000;
+    return ! isExpired;
+}
+
+const storedTokenForUser = (user) => {
+    const token = JSON.parse(sessionStorage.getItem(storageKey));
+    if (validateToken(token, user)) {
+        return token.token;
+    }
+    return null;
+}
+
+const storeToken = (token) => {
+    sessionStorage.setItem(storageKey, JSON.stringify(token));
+}
+
+const dataClientIdAttributeHandler = (script, config) => {
+    const token = storedTokenForUser(config.user);
+    if (token) {
+        script.setAttribute('data-client-token', token);
+        document.body.append(script);
+        return;
+    }
+    fetch(config.endpoint, {
+        method: 'POST',
+        body: JSON.stringify({
+            nonce: config.nonce
+        })
+    }).then((res)=>{
+        return res.json();
+    }).then((data)=>{
+        const isValid = validateToken(data, config.user);
+        if (!isValid) {
+            return;
+        }
+        storeToken(data);
+        script.setAttribute('data-client-token', data.token);
+        document.body.append(script);
+    });
+}
+
+export default dataClientIdAttributeHandler;