@payment-kit-js/vanilla 0.5.13 → 0.5.15

package/dist/cdn/paymentkit.js

@@ -1,5 +1,5 @@
 /**
- * PaymentKit.js v0.5.13
+ * PaymentKit.js v0.5.15
  * https://paymentkit.com
  *
  * @license MIT
@@ -42,7 +42,7 @@ var PaymentKit = (() => {
   });
 
   // package.json
-  var version = "0.5.13";
+  var version = "0.5.15";
 
   // src/analytics/mock-adapter.ts
   var MockAnalyticsAdapter = class {
@@ -6598,6 +6598,175 @@ var PaymentKit = (() => {
   };
   var index_default = PaymentKit;
 
+  // src/payment-methods/bnpl-shared.ts
+  var createSubmitPayment = (states, config) => {
+    const { name, endpointPath, supportsSetupFutureUsage } = config;
+    const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
+    const submitPayment = async (_fields, options) => {
+      const { apiBaseUrl, secureToken, environment } = states;
+      const bnplOptions = options;
+      if (!bnplOptions?.processorId) {
+        return { errors: { processor_id: "Processor ID is required" } };
+      }
+      if (!bnplOptions?.customerInfo?.first_name || !bnplOptions?.customerInfo?.last_name) {
+        return {
+          errors: {
+            customer_name: "Customer first and last name are required"
+          }
+        };
+      }
+      try {
+        const checkoutRequestId = getOrCreateCheckoutRequestId(environment);
+        const requestBody = {
+          processor_id: bnplOptions.processorId,
+          customer_info: bnplOptions.customerInfo,
+          fraud_metadata: collectFraudMetadata()
+        };
+        if (supportsSetupFutureUsage && bnplOptions.setupFutureUsage !== void 0) {
+          requestBody.setup_future_usage = bnplOptions.setupFutureUsage;
+        }
+        const startResponse = await fetch(`${apiBaseUrl}/api/checkout/${secureToken}/stripe/${endpointPath}/start`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-request-id": checkoutRequestId
+          },
+          body: JSON.stringify(requestBody)
+        });
+        if (!startResponse.ok) {
+          let errorMessage = `Failed to start ${capitalizedName} checkout (${startResponse.status})`;
+          try {
+            const errorData = await startResponse.json();
+            errorMessage = errorData.detail || errorMessage;
+          } catch {
+            errorMessage = startResponse.statusText || errorMessage;
+          }
+          return {
+            errors: {
+              [name]: errorMessage
+            }
+          };
+        }
+        const { approval_url, popup_token, checkout_attempt_id } = await startResponse.json();
+        const popup = window.open(approval_url, capitalizedName, "width=600,height=700");
+        if (!popup) {
+          return {
+            errors: {
+              [name]: `Failed to open ${capitalizedName} popup. Please allow popups for this site.`
+            }
+          };
+        }
+        states.popup = popup;
+        return new Promise((resolve) => {
+          let popupClosedGracePolls = 0;
+          const MAX_GRACE_POLLS = 5;
+          const pollInterval = setInterval(async () => {
+            try {
+              const statusResponse = await fetch(
+                `${apiBaseUrl}/api/checkout/${secureToken}/popup/status?popup_token=${popup_token}`
+              );
+              if (!statusResponse.ok) {
+                clearInterval(pollInterval);
+                popup.close();
+                resolve({
+                  errors: {
+                    [name]: `Failed to check ${capitalizedName} status`
+                  }
+                });
+                return;
+              }
+              const statusResult = await statusResponse.json();
+              if (statusResult.completed) {
+                clearInterval(pollInterval);
+                popup.close();
+                if (statusResult.status === "success") {
+                  const result = statusResult.result || {
+                    id: checkout_attempt_id,
+                    checkoutAttemptId: checkout_attempt_id,
+                    checkoutSessionId: secureToken,
+                    state: "checkout_succeeded"
+                  };
+                  resolve({ data: result });
+                } else {
+                  resolve({
+                    errors: {
+                      [name]: statusResult.error || `${capitalizedName} checkout ${statusResult.status}`
+                    }
+                  });
+                }
+                return;
+              }
+              if (popup.closed) {
+                popupClosedGracePolls++;
+                if (popupClosedGracePolls >= MAX_GRACE_POLLS) {
+                  clearInterval(pollInterval);
+                  resolve({
+                    errors: {
+                      [name]: `${capitalizedName} popup closed by user`
+                    }
+                  });
+                }
+                return;
+              }
+            } catch (error) {
+              clearInterval(pollInterval);
+              popup.close();
+              resolve({
+                errors: {
+                  [name]: `Polling error: ${error}`
+                }
+              });
+            }
+          }, 2e3);
+          states.pollInterval = pollInterval;
+        });
+      } catch (error) {
+        return {
+          errors: {
+            [name]: `${capitalizedName} checkout error: ${error}`
+          }
+        };
+      }
+    };
+    return submitPayment;
+  };
+  function createBnplPaymentMethod(config) {
+    return definePaymentMethod((paymentKitStates) => {
+      const localStates = { ...paymentKitStates };
+      return {
+        name: config.name,
+        externalFuncs: {},
+        internalFuncs: {
+          submitPayment: createSubmitPayment(localStates, config),
+          cleanup: () => {
+            if (localStates.pollInterval) {
+              clearInterval(localStates.pollInterval);
+            }
+            if (localStates.popup && !localStates.popup.closed) {
+              localStates.popup.close();
+            }
+          }
+        }
+      };
+    });
+  }
+
+  // src/payment-methods/affirm.ts
+  var AffirmPaymentMethod = createBnplPaymentMethod({
+    name: "affirm",
+    endpointPath: "affirm",
+    supportsSetupFutureUsage: false
+  });
+  var affirm_default = AffirmPaymentMethod;
+
+  // src/payment-methods/afterpay.ts
+  var AfterpayPaymentMethod = createBnplPaymentMethod({
+    name: "afterpay",
+    endpointPath: "afterpay",
+    supportsSetupFutureUsage: false
+  });
+  var afterpay_default = AfterpayPaymentMethod;
+
   // src/payment-methods/airwallex-apple-pay-adapter.ts
   var AirwallexApplePayAdapter = class {
     constructor(mockScenario) {
@@ -6709,6 +6878,8 @@ var PaymentKit = (() => {
           success: true,
           token: mockToken,
           payerEmail: "mock@example.com",
+          payerFirstName: "Mock",
+          payerLastName: "User",
           complete: (status) => console.log(`[MockApplePay:Airwallex] complete: ${status}`)
         };
       }
@@ -6734,8 +6905,8 @@ var PaymentKit = (() => {
           amount,
           type: "final"
         },
-        // Surface the payer's email so the backend can fill missing customer email.
-        requiredBillingContactFields: ["email"]
+        // Surface the payer's email and name so the backend can fill missing customer info.
+        requiredBillingContactFields: ["email", "name"]
       };
       return new Promise((resolve) => {
         try {
@@ -6779,6 +6950,8 @@ var PaymentKit = (() => {
               transactionIdentifier: payment.token.transactionIdentifier
             };
             const payerEmail = payment.billingContact?.emailAddress ?? payment.shippingContact?.emailAddress ?? void 0;
+            const payerFirstName = payment.billingContact?.givenName ?? payment.shippingContact?.givenName ?? void 0;
+            const payerLastName = payment.billingContact?.familyName ?? payment.shippingContact?.familyName ?? void 0;
             const complete = (status) => {
               console.log("[ApplePay:Airwallex] completing session with status:", status);
               const appleStatus = status === "success" ? STATUS_SUCCESS : STATUS_FAILURE;
@@ -6788,6 +6961,8 @@ var PaymentKit = (() => {
               success: true,
               token,
               payerEmail,
+              payerFirstName,
+              payerLastName,
               complete
             });
           };
@@ -7300,6 +7475,28 @@ var PaymentKit = (() => {
   // src/payment-methods/apple-pay.ts
   var preparedStripeState = null;
   var preparedAirwallexState = null;
+  var applePayScriptLoadPromise = null;
+  async function loadApplePayScript() {
+    if (typeof window === "undefined") return;
+    if (window.ApplePaySession) return;
+    if (document.getElementById("__pk_apple_pay_sdk")) {
+      return applePayScriptLoadPromise ?? Promise.resolve();
+    }
+    applePayScriptLoadPromise = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.id = "__pk_apple_pay_sdk";
+      script.src = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
+      script.crossOrigin = "anonymous";
+      script.onload = () => resolve();
+      script.onerror = () => {
+        applePayScriptLoadPromise = null;
+        document.getElementById("__pk_apple_pay_sdk")?.remove();
+        reject(new Error("Failed to load Apple Pay SDK"));
+      };
+      document.head.appendChild(script);
+    });
+    return applePayScriptLoadPromise;
+  }
   async function apiCall(url, options, checkoutRequestId) {
     const headers = new Headers(options.headers);
     if (checkoutRequestId) {
@@ -7409,7 +7606,25 @@ var PaymentKit = (() => {
     const checkoutRequestId = getOrCreateCheckoutRequestId(environment);
     console.log(`[ApplePay] Using checkout_request_id: ${checkoutRequestId}`);
     if (options.processorType === "airwallex") {
-      console.log("[ApplePay] Airwallex processor - fetching session info for amount");
+      console.log("[ApplePay] Airwallex processor - loading Apple Pay SDK, fetching session info for amount");
+      if (!mockScenarioStr) {
+        try {
+          await loadApplePayScript();
+        } catch (err) {
+          console.error("[ApplePay] Failed to load Apple Pay SDK:", err);
+          return { success: false, error: "Failed to load Apple Pay" };
+        }
+        let canMake = false;
+        try {
+          canMake = !!window.ApplePaySession?.canMakePayments();
+        } catch {
+          canMake = false;
+        }
+        if (!canMake) {
+          console.log("[ApplePay] Apple Pay not available on this device/browser");
+          return { success: false, error: "Apple Pay not available on this device" };
+        }
+      }
       const sessionInfoResult = await callAirwallexSessionInfoEndpoint(apiBaseUrl, secureToken, checkoutRequestId);
       if (sessionInfoResult.error || !sessionInfoResult.data) {
         console.error("[ApplePay] Failed to fetch session info:", sessionInfoResult.error);
@@ -7418,7 +7633,7 @@ var PaymentKit = (() => {
       console.log("[ApplePay] Got session info:", sessionInfoResult.data);
       const resolvedAmount = sessionInfoResult.data.amount;
       const resolvedCurrency = sessionInfoResult.data.currency;
-      const resolvedCountry = options.country || sessionInfoResult.data.country;
+      const resolvedCountry = sessionInfoResult.data.country || options.country;
       preparedAirwallexState = {
         country: resolvedCountry,
         currency: resolvedCurrency,
@@ -7513,7 +7728,7 @@ var PaymentKit = (() => {
       checkoutRequestId
     );
   }
-  async function callAirwallexConfirmEndpoint(apiBaseUrl, secureToken, applePayToken, mockScenarioStr, checkoutRequestId, payerEmail) {
+  async function callAirwallexConfirmEndpoint(apiBaseUrl, secureToken, applePayToken, mockScenarioStr, checkoutRequestId, payerEmail, payerFirstName, payerLastName) {
     const result = await apiCall(
       `${apiBaseUrl}/api/checkout/${secureToken}/airwallex/apple-pay/confirm`,
       {
@@ -7522,6 +7737,8 @@ var PaymentKit = (() => {
         body: JSON.stringify({
           apple_pay_token: applePayToken,
           payer_email: payerEmail,
+          payer_first_name: payerFirstName,
+          payer_last_name: payerLastName,
           mock_scenario: mockScenarioStr
         })
       },
@@ -7613,7 +7830,7 @@ var PaymentKit = (() => {
       merchantName: options.merchantName || "Total"
     };
     if (!adapter.initialize(config)) {
-      return { errors: { apple_pay: "Apple Pay not available on this device (requires Safari)" } };
+      return { errors: { apple_pay: "Apple Pay not available on this device" } };
     }
     const canPay = await adapter.canMakePayment();
     if (!canPay) {
@@ -7658,14 +7875,16 @@ var PaymentKit = (() => {
       }
       return { errors: { apple_pay: paymentResult.error || "Apple Pay failed" } };
     }
-    const { token, complete, payerEmail } = paymentResult;
+    const { token, complete, payerEmail, payerFirstName, payerLastName } = paymentResult;
     let response = await callAirwallexConfirmEndpoint(
       apiBaseUrl,
       secureToken,
       token,
       mockScenarioStr,
       checkoutRequestId,
-      payerEmail
+      payerEmail,
+      payerFirstName,
+      payerLastName
     );
     let userActionCount = 0;
     while (response.charge_status === "pending" && response.next_action && userActionCount < MAX_USER_ACTIONS) {
@@ -7698,10 +7917,17 @@ var PaymentKit = (() => {
     complete(response.charge_status === "success" ? "success" : "fail");
     return toApplePayResult(response, secureToken);
   }
-  var defSubmitPayment = (states) => {
+  var defSubmitPayment = (states, getAutoPrepareConfig, onClearPrepared) => {
     const submitPayment = async (_fields, options) => {
       const { apiBaseUrl, secureToken, environment } = states;
       const applePayOptions = options;
+      const autoPrepareConfig = getAutoPrepareConfig();
+      if (!applePayOptions.processorId && autoPrepareConfig?.processorId) {
+        applePayOptions.processorId = autoPrepareConfig.processorId;
+      }
+      if (!applePayOptions.processorType && autoPrepareConfig?.processorType) {
+        applePayOptions.processorType = autoPrepareConfig.processorType;
+      }
       const validationError = validateOptions(applePayOptions);
       if (validationError) {
         return { errors: validationError };
@@ -7810,26 +8036,131 @@ var PaymentKit = (() => {
           return confirmResult;
         }
       } catch (error) {
-        clearPreparedApplePay();
+        onClearPrepared();
         return { errors: { apple_pay: `Apple Pay error: ${error}` } };
       }
     };
     return submitPayment;
   };
   var ApplePayPaymentMethod = definePaymentMethod((paymentKitStates) => {
+    const { apiBaseUrl, secureToken, environment } = paymentKitStates;
+    let autoPrepareConfig = null;
+    let onApplePayReadyCallbacks = [];
+    let isApplePayReadyState = false;
+    let autoPrepareInProgress = false;
+    let cleanupGeneration = 0;
+    let pendingAutoPrepareArgs = null;
+    let pendingPrepareResolvers = [];
+    function instanceSetApplePayReady(ready) {
+      isApplePayReadyState = ready;
+      for (const cb of onApplePayReadyCallbacks) cb(ready);
+    }
+    function instanceClearPreparedApplePay() {
+      clearPreparedApplePay();
+      instanceSetApplePayReady(false);
+    }
+    async function instanceAutoPrepare(apBase, sToken, env) {
+      if (autoPrepareInProgress) {
+        pendingAutoPrepareArgs = { apiBaseUrl: apBase, secureToken: sToken, environment: env };
+        return new Promise((resolve) => pendingPrepareResolvers.push(resolve));
+      }
+      autoPrepareInProgress = true;
+      const capturedGeneration = cleanupGeneration;
+      instanceSetApplePayReady(false);
+      try {
+        const result = await apiCall(`${apBase}/api/checkout-sessions/token/${sToken}`, {
+          method: "GET"
+        });
+        if (cleanupGeneration !== capturedGeneration) return;
+        if (result.error || !result.data) {
+          console.warn("[ApplePay] Auto-prepare: failed to fetch session config:", result.error);
+          return;
+        }
+        const processorId = result.data.express_checkout_processor_id;
+        if (!processorId) {
+          console.log("[ApplePay] Auto-prepare: no express checkout processor configured");
+          return;
+        }
+        const processorTypeRaw = result.data.express_checkout_processor_type;
+        const processorType = processorTypeRaw === "airwallex" || processorTypeRaw === "stripe" ? processorTypeRaw : void 0;
+        autoPrepareConfig = { processorId, processorType };
+        const prepareResult = await prepareApplePay(
+          apBase,
+          sToken,
+          { processorId, processorType, customerInfo: { first_name: "", last_name: "" } },
+          env
+        );
+        if (cleanupGeneration !== capturedGeneration) return;
+        instanceSetApplePayReady(prepareResult.success && prepareResult.applePay === true);
+      } catch (err) {
+        if (cleanupGeneration === capturedGeneration) {
+          console.error("[ApplePay] Auto-prepare failed:", err);
+        }
+      } finally {
+        autoPrepareInProgress = false;
+        const stale = cleanupGeneration !== capturedGeneration;
+        const pending = pendingAutoPrepareArgs;
+        const resolvers = pendingPrepareResolvers.splice(0);
+        if (!stale && pending) {
+          pendingAutoPrepareArgs = null;
+          instanceAutoPrepare(pending.apiBaseUrl, pending.secureToken, pending.environment).then(() => {
+            for (const r2 of resolvers) r2();
+          });
+        } else {
+          pendingAutoPrepareArgs = null;
+          for (const r2 of resolvers) r2();
+        }
+      }
+    }
+    instanceAutoPrepare(apiBaseUrl, secureToken, environment).catch(
+      (err) => console.error("[ApplePay] Unhandled init error:", err)
+    );
     return {
       name: "apple_pay",
       externalFuncs: {
-        prepareApplePay: (options) => prepareApplePay(
-          paymentKitStates.apiBaseUrl,
-          paymentKitStates.secureToken,
-          options,
-          paymentKitStates.environment
-        )
+        /**
+         * @deprecated The SDK now prepares automatically on init. Use `onApplePayReady` to observe
+         * readiness and `notifyAmountChanged` to trigger re-prepare after amount changes.
+         */
+        prepareApplePay: (options) => prepareApplePay(apiBaseUrl, secureToken, options, environment),
+        /**
+         * Register a callback to be notified when Apple Pay becomes ready (or stops being ready).
+         * Fires immediately with the current state, then on every state change.
+         * Multiple registrations are all notified — none are silently overwritten.
+         *
+         * @example
+         * paymentKit.apple_pay.onApplePayReady((isReady) => {
+         *   applePayButton.disabled = !isReady;
+         * });
+         */
+        onApplePayReady: (callback) => {
+          onApplePayReadyCallbacks.push(callback);
+          callback(isApplePayReadyState);
+        },
+        /**
+         * Notify the SDK that the payment amount has changed (e.g. coupon applied).
+         * The SDK will disable Apple Pay, re-prepare with the new amount, then re-enable.
+         * The returned promise resolves when re-prepare is fully complete.
+         *
+         * @example
+         * await paymentKit.apple_pay.notifyAmountChanged();
+         */
+        notifyAmountChanged: () => {
+          instanceClearPreparedApplePay();
+          autoPrepareConfig = null;
+          return instanceAutoPrepare(apiBaseUrl, secureToken, environment);
+        }
       },
       internalFuncs: {
-        submitPayment: defSubmitPayment(paymentKitStates),
+        submitPayment: defSubmitPayment(paymentKitStates, () => autoPrepareConfig, instanceClearPreparedApplePay),
         cleanup: () => {
+          cleanupGeneration++;
+          onApplePayReadyCallbacks = [];
+          isApplePayReadyState = false;
+          autoPrepareConfig = null;
+          pendingAutoPrepareArgs = null;
+          pendingPrepareResolvers = [];
+          autoPrepareInProgress = false;
           clearPreparedApplePay();
         }
       }
@@ -9143,6 +9474,14 @@ var PaymentKit = (() => {
   });
   var google_pay_default = GooglePayPaymentMethod;
 
+  // src/payment-methods/klarna.ts
+  var KlarnaPaymentMethod = createBnplPaymentMethod({
+    name: "klarna",
+    endpointPath: "klarna",
+    supportsSetupFutureUsage: true
+  });
+  var klarna_default = KlarnaPaymentMethod;
+
   // src/payment-methods/paypal.ts
   var defSubmitPayment4 = (states) => {
     const submitPayment = async (_fields, options) => {
@@ -9293,7 +9632,10 @@ var PaymentKit = (() => {
     applePay: apple_pay_default,
     card: card_default,
     googlePay: google_pay_default,
-    paypal: paypal_default
+    paypal: paypal_default,
+    klarna: klarna_default,
+    afterpay: afterpay_default,
+    affirm: affirm_default
   };
   return __toCommonJS(cdn_exports);
 })();