@payment-kit-js/vanilla 0.5.18 → 0.5.19

package/README.md

@@ -7,3 +7,17 @@ Vanilla JavaScript SDK for PaymentKit. A type-safe, framework-agnostic payment p
 For complete documentation, guides, and examples, visit:
 
 **[PaymentKit.js Documentation](https://docs.paymentkit.com/guides/integration/sdk-reference/payment-kit-js/getting-started)**
+
+## Content-Security-Policy Requirements
+
+If your site uses a Content-Security-Policy header, you must add the following domains to your `script-src` directive to allow fraud prevention scripts:
+
+- **Production:** `https://static.airwallex.com`
+- **Sandbox:** `https://static-demo.airwallex.com`
+
+Example:
+```
+Content-Security-Policy: script-src 'self' https://static.airwallex.com;
+```
+
+If these domains are blocked, PaymentKit.js will log an error to the console with the required domain.

package/dist/cdn/paymentkit.js

@@ -1,5 +1,5 @@
 /**
- * PaymentKit.js v0.5.18
+ * PaymentKit.js v0.5.19
  * https://paymentkit.com
  *
  * @license MIT
@@ -42,7 +42,7 @@ var PaymentKit = (() => {
   });
 
   // package.json
-  var version = "0.5.18";
+  var version = "0.5.19";
 
   // src/analytics/mock-adapter.ts
   var MockAnalyticsAdapter = class {
@@ -6464,6 +6464,18 @@ var PaymentKit = (() => {
   }
 
   // src/index.ts
+  function appendScriptToDOM(script) {
+    const target = document.body ?? document.head;
+    target.appendChild(script);
+  }
+  function getFraudScriptId(url) {
+    if (url.includes("airwallex.com")) {
+      return "airwallex-fraud-api";
+    }
+    const urlObj = new URL(url);
+    const hash = btoa(urlObj.origin + urlObj.pathname).replace(/[^a-zA-Z0-9]/g, "").slice(0, 12);
+    return `pk-fraud-script-${hash}`;
+  }
   var createTunnelXConnection = (baseUrl, apiBaseUrl, token) => {
     const iframe = createCheckoutIFrame("tunnel-x", baseUrl, {
       checkout_token: token,
@@ -6472,9 +6484,12 @@ var PaymentKit = (() => {
     Object.assign(iframe.style, { width: "0", height: "0", position: "absolute", visibility: "hidden" });
     document.body.appendChild(iframe);
     const connection = connectToTunnelXIframe(iframe, {});
+    let destroyed = false;
     const unmount = () => {
+      if (destroyed) return;
+      destroyed = true;
       connection.destroy();
-      document.body.removeChild(iframe);
+      iframe.remove();
     };
     return { unmount, connection };
   };
@@ -6511,7 +6526,9 @@ var PaymentKit = (() => {
       cardTokenizationMode,
       vgsVaultId,
       vgsEnvironment,
-      _sessionConfigReady: void 0
+      _sessionConfigReady: void 0,
+      _fraudScriptIds: [],
+      _fraudScriptsReady: void 0
     };
     if (cardTokenizationMode === void 0) {
       const sessionConfigUrl = `${apiBaseUrl}/api/checkout-sessions/token/${secureToken}`;
@@ -6542,6 +6559,48 @@ var PaymentKit = (() => {
             );
             paymentKitStates.cardTokenizationMode = "direct";
           }
+          if (session?.fraud_script_urls?.length) {
+            const loadPromises = [];
+            session.fraud_script_urls.forEach((url) => {
+              const scriptId = getFraudScriptId(url);
+              if (document.getElementById(scriptId)) {
+                console.log(`[PaymentKit] Fraud script already present: ${scriptId}`);
+                loadPromises.push(Promise.resolve());
+                return;
+              }
+              const script = document.createElement("script");
+              script.type = "text/javascript";
+              script.async = true;
+              script.id = scriptId;
+              script.src = url;
+              script.dataset.orderSessionId = checkoutRequestId;
+              const loadPromise2 = new Promise((resolve) => {
+                script.onload = () => {
+                  console.log(`[PaymentKit] Fraud script loaded: ${scriptId}`);
+                  resolve();
+                };
+                script.onerror = () => {
+                  console.error(
+                    `[PaymentKit] Failed to load fraud prevention script. If using Content-Security-Policy, add to script-src: ${new URL(url).origin}`
+                  );
+                  resolve();
+                };
+              });
+              loadPromises.push(loadPromise2);
+              paymentKitStates._fraudScriptIds.push(scriptId);
+              appendScriptToDOM(script);
+            });
+            paymentKitStates._fraudScriptsReady = Promise.all(loadPromises).then(() => {
+              console.log(`[PaymentKit] All ${loadPromises.length} fraud fingerprinting script(s) ready`);
+            });
+            session.fraud_script_urls.forEach((url) => {
+              const scriptId = getFraudScriptId(url);
+              console.log(
+                `[PaymentKit] Fraud script injected: id=${scriptId}, data-order-session-id=${checkoutRequestId}, src=${url}`
+              );
+            });
+            console.log(`[PaymentKit] Injected ${session.fraud_script_urls.length} fraud fingerprinting script(s)`);
+          }
         } else {
           console.log("[PaymentKit] Session response missing card_tokenization_mode \u2014 defaulting to direct mode");
           paymentKitStates.cardTokenizationMode = "direct";
@@ -6587,6 +6646,13 @@ var PaymentKit = (() => {
       });
     };
     const cleanup = () => {
+      for (const scriptId of paymentKitStates._fraudScriptIds) {
+        const script = document.getElementById(scriptId);
+        if (script) {
+          script.remove();
+        }
+      }
+      paymentKitStates._fraudScriptIds = [];
       for (const pm of pmInstances) {
         if (pm.internalFuncs.cleanup) {
           pm.internalFuncs.cleanup();
@@ -7097,9 +7163,7 @@ var PaymentKit = (() => {
           container.style.opacity = "0";
           container.style.transform = "scale(0.95) translateY(10px)";
           setTimeout(() => {
-            if (overlay.parentNode) {
-              overlay.parentNode.removeChild(overlay);
-            }
+            overlay.remove();
           }, 250);
         });
       };
@@ -8479,10 +8543,7 @@ var PaymentKit = (() => {
           cleanupDirect = () => {
             const connection = cardInputConnections[type];
             connection?.destroy();
-            try {
-              parent.removeChild(iframe);
-            } catch {
-            }
+            iframe.remove();
             states.cardInputConnections[type] = void 0;
           };
           parent.appendChild(iframe);
@@ -8570,13 +8631,19 @@ var PaymentKit = (() => {
       }
       console.log("Card setup intent is set \u2705", cardSetupIntent);
       console.log("Fields", fields);
+      const fraudMetadata = {
+        ...collectFraudMetadata(),
+        processorFraudInfo: {
+          airwallexDeviceId: states.checkoutRequestId
+        }
+      };
       let currentResult = await tunnelX.publicEndpoints.cardCheckout(
         {
           checkoutToken: states.secureToken,
           publicCardCheckoutRequest: {
             cardSetupIntentId: states.cardSetupIntentId,
             customerInfo: mapFieldsToCustomerInfo(fields),
-            fraudMetadata: collectFraudMetadata()
+            fraudMetadata
           }
         },
         requestOptions