@payment-kit-js/vanilla 0.5.8 → 0.5.10

package/dist/cdn/paymentkit.js

@@ -1,5 +1,5 @@
 /**
- * PaymentKit.js v0.5.8
+ * PaymentKit.js v0.5.10
  * https://paymentkit.com
  *
  * @license MIT
@@ -42,7 +42,7 @@ var PaymentKit = (() => {
   });
 
   // package.json
-  var version = "0.5.8";
+  var version = "0.5.10";
 
   // src/analytics/mock-adapter.ts
   var MockAnalyticsAdapter = class {
@@ -6465,6 +6465,7 @@ var PaymentKit = (() => {
       checkout_token: token,
       api_base_url: apiBaseUrl
     });
+    Object.assign(iframe.style, { width: "0", height: "0", position: "absolute", visibility: "hidden" });
     document.body.appendChild(iframe);
     const connection = connectToTunnelXIframe(iframe, {});
     const unmount = () => {
@@ -6597,9 +6598,214 @@ var PaymentKit = (() => {
   };
   var index_default = PaymentKit;
 
-  // src/penpal/connect-card.ts
-  var connectToCardIframe = (iframe, methods) => {
-    return connectToWindow({ window: iframe.contentWindow, methods });
+  // src/payment-methods/airwallex-apple-pay-adapter.ts
+  var AirwallexApplePayAdapter = class {
+    constructor(mockScenario) {
+      __publicField(this, "config", null);
+      __publicField(this, "mockScenario");
+      this.mockScenario = mockScenario ?? "none" /* None */;
+    }
+    /**
+     * Initialize the adapter with payment configuration.
+     * Returns true if Apple Pay is available on this device.
+     */
+    initialize(config) {
+      if (this.mockScenario !== "none" /* None */) {
+        console.log("[MockApplePay:Airwallex] initialize called (mock mode)");
+        this.config = config;
+        return true;
+      }
+      if (typeof window === "undefined" || !window.ApplePaySession) {
+        console.error("[ApplePay:Airwallex] ApplePaySession not available (not Safari or unsupported device)");
+        return false;
+      }
+      this.config = config;
+      return true;
+    }
+    /**
+     * Check if the user can make a payment with Apple Pay.
+     * Returns true if Apple Pay is set up on this device.
+     */
+    async canMakePayment() {
+      if (this.mockScenario !== "none" /* None */) {
+        console.log("[MockApplePay:Airwallex] canMakePayment: true (mock mode)");
+        return true;
+      }
+      if (!window.ApplePaySession) {
+        return false;
+      }
+      try {
+        const canMake = window.ApplePaySession.canMakePayments();
+        console.log("[ApplePay:Airwallex] canMakePayments:", canMake);
+        return canMake;
+      } catch (error) {
+        console.error("[ApplePay:Airwallex] canMakePayment error:", error);
+        return false;
+      }
+    }
+    /**
+     * Convert atomic units (cents) to display format for Apple Pay.
+     * Apple Pay expects a string like "10.00" for $10.00.
+     */
+    formatAmount(amountAtom, currency) {
+      const zeroDecimalCurrencies = [
+        "BIF",
+        "CLP",
+        "DJF",
+        "GNF",
+        "ISK",
+        "JPY",
+        "KMF",
+        "KRW",
+        "PYG",
+        "RWF",
+        "UGX",
+        "VND",
+        "VUV",
+        "XAF",
+        "XOF",
+        "XPF"
+      ];
+      const isZeroDecimal = zeroDecimalCurrencies.includes(currency.toUpperCase());
+      if (isZeroDecimal) {
+        return amountAtom.toString();
+      }
+      return (amountAtom / 100).toFixed(2);
+    }
+    /**
+     * Show the Apple Pay payment sheet and return the encrypted token.
+     *
+     * This uses the native ApplePaySession API with a two-step flow:
+     * 1. onvalidatemerchant - Called by Apple to validate the merchant
+     *    The callback should call our backend which calls Airwallex's payment_session/start
+     * 2. onpaymentauthorized - Called when user authorizes with Face ID/Touch ID
+     *    Returns the encrypted token for processing
+     *
+     * @param onMerchantValidation - Callback to validate merchant with backend
+     * @returns Promise with token or error
+     */
+    async showPaymentSheet(onMerchantValidation) {
+      if (this.mockScenario === "success" /* Success */) {
+        console.log("[MockApplePay:Airwallex] showPaymentSheet: returning mock success token");
+        const mockToken = {
+          paymentData: {
+            version: "EC_v1",
+            data: "MOCK_ENCRYPTED_DATA",
+            signature: "MOCK_SIGNATURE",
+            header: {
+              ephemeralPublicKey: "MOCK_PUBLIC_KEY",
+              publicKeyHash: "MOCK_HASH",
+              transactionId: "mock_txn_123"
+            }
+          },
+          paymentMethod: {
+            displayName: "Visa 4242",
+            network: "Visa",
+            type: "debit"
+          },
+          transactionIdentifier: "MOCK_TXN_ID"
+        };
+        return {
+          success: true,
+          token: mockToken,
+          payerEmail: "mock@example.com",
+          complete: (status) => console.log(`[MockApplePay:Airwallex] complete: ${status}`)
+        };
+      }
+      if (this.mockScenario === "cancelled" /* Cancelled */) {
+        console.log("[MockApplePay:Airwallex] showPaymentSheet: returning mock cancelled");
+        return { success: false, cancelled: true };
+      }
+      if (!this.config) {
+        return { success: false, error: "Apple Pay not initialized" };
+      }
+      if (!window.ApplePaySession) {
+        return { success: false, error: "ApplePaySession not available" };
+      }
+      const config = this.config;
+      const amount = this.formatAmount(config.amount, config.currency);
+      const paymentRequest = {
+        countryCode: config.country.toUpperCase(),
+        currencyCode: config.currency.toUpperCase(),
+        supportedNetworks: ["visa", "masterCard", "amex", "discover"],
+        merchantCapabilities: ["supports3DS"],
+        total: {
+          label: config.merchantName || "Total",
+          amount,
+          type: "final"
+        },
+        // Surface the payer's email so the backend can fill missing customer email.
+        requiredBillingContactFields: ["email"]
+      };
+      return new Promise((resolve) => {
+        try {
+          const session = new window.ApplePaySession(3, paymentRequest);
+          const STATUS_SUCCESS = window.ApplePaySession.STATUS_SUCCESS;
+          const STATUS_FAILURE = window.ApplePaySession.STATUS_FAILURE;
+          session.onvalidatemerchant = async (event) => {
+            console.log("[ApplePay:Airwallex] onvalidatemerchant called", event.validationURL);
+            try {
+              const validationResult = await onMerchantValidation(event.validationURL);
+              if (validationResult.error || !validationResult.merchantSession) {
+                console.error("[ApplePay:Airwallex] Merchant validation failed:", validationResult.error);
+                session.abort();
+                resolve({
+                  success: false,
+                  error: validationResult.error || "Merchant validation failed"
+                });
+                return;
+              }
+              session.completeMerchantValidation(validationResult.merchantSession);
+              console.log("[ApplePay:Airwallex] Merchant validation completed");
+            } catch (error) {
+              console.error("[ApplePay:Airwallex] Merchant validation error:", error);
+              session.abort();
+              resolve({
+                success: false,
+                error: `Merchant validation error: ${error}`
+              });
+            }
+          };
+          session.onpaymentauthorized = (event) => {
+            console.log("[ApplePay:Airwallex] onpaymentauthorized called");
+            const payment = event.payment;
+            const token = {
+              paymentData: payment.token.paymentData,
+              paymentMethod: {
+                displayName: payment.token.paymentMethod.displayName,
+                network: payment.token.paymentMethod.network,
+                type: payment.token.paymentMethod.type
+              },
+              transactionIdentifier: payment.token.transactionIdentifier
+            };
+            const payerEmail = payment.billingContact?.emailAddress ?? payment.shippingContact?.emailAddress ?? void 0;
+            const complete = (status) => {
+              console.log("[ApplePay:Airwallex] completing session with status:", status);
+              const appleStatus = status === "success" ? STATUS_SUCCESS : STATUS_FAILURE;
+              session.completePayment({ status: appleStatus });
+            };
+            resolve({
+              success: true,
+              token,
+              payerEmail,
+              complete
+            });
+          };
+          session.oncancel = () => {
+            console.log("[ApplePay:Airwallex] oncancel - user cancelled");
+            resolve({ success: false, cancelled: true });
+          };
+          console.log("[ApplePay:Airwallex] Starting Apple Pay session");
+          session.begin();
+        } catch (error) {
+          console.error("[ApplePay:Airwallex] Session creation error:", error);
+          resolve({
+            success: false,
+            error: `Failed to create Apple Pay session: ${error}`
+          });
+        }
+      });
+    }
   };
 
   // src/utils/3ds-iframe-modal.ts
@@ -6739,77 +6945,849 @@ var PaymentKit = (() => {
           }
         }
       };
-      window.addEventListener("keydown", handleKeydown);
-      closeButton.focus();
-      const handleMessage = (event) => {
-        const messageResult = onMessage(event);
-        if (messageResult.handled) {
-          cleanupWithAnimation();
-          resolve(messageResult.result);
-        }
+      window.addEventListener("keydown", handleKeydown);
+      closeButton.focus();
+      const handleMessage = (event) => {
+        const messageResult = onMessage(event);
+        if (messageResult.handled) {
+          cleanupWithAnimation();
+          resolve(messageResult.result);
+        }
+      };
+      window.addEventListener("message", handleMessage);
+    });
+  }
+
+  // src/payment-methods/next-action-handlers.ts
+  var sleep = (ms2) => new Promise((resolve) => setTimeout(resolve, ms2));
+  var isStripeJsPresent = () => "Stripe" in window;
+  var getLoadedStripe = async (publishableKey) => {
+    for (let i2 = 0; i2 < 10; i2++) {
+      if (isStripeJsPresent()) {
+        break;
+      }
+      await sleep(500);
+    }
+    if (!isStripeJsPresent()) {
+      throw new Error(
+        'Stripe.js not loaded. Add this script tag to your HTML <head>:\n<script src="https://js.stripe.com/v3/"><\/script>'
+      );
+    }
+    const stripe = new window.Stripe(publishableKey);
+    return stripe;
+  };
+  var handleStripe3ds = async (nextAction) => {
+    const { clientSecret, stripePk } = nextAction;
+    const stripe = await getLoadedStripe(stripePk);
+    const { error: stripeError } = await stripe.confirmCardPayment(clientSecret);
+    if (stripeError) {
+      console.error("[3DS:Stripe] Authentication failed:", stripeError.message);
+      return { success: false, error: stripeError.message || "3DS authentication failed" };
+    }
+    return { success: true };
+  };
+  var handleAirwallex3ds = async (nextAction) => {
+    return show3DSIframeModal({
+      url: nextAction.url,
+      size: { width: 605, height: 550 },
+      onMessage: (event) => {
+        if (event.data.type !== "3ds_complete") {
+          return { handled: false };
+        }
+        const { isSuccess, error } = event.data;
+        if (isSuccess) {
+          return { handled: true, result: { success: true, data: {} } };
+        } else {
+          console.error("[3DS:Airwallex] Authentication failed:", error);
+          return {
+            handled: true,
+            result: { success: false, error: error || "3DS authentication failed" }
+          };
+        }
+      }
+    });
+  };
+  var handleNextAction = async (nextAction) => {
+    switch (nextAction.type) {
+      case "stripe_3ds":
+        return handleStripe3ds(nextAction);
+      case "airwallex_3ds":
+        return handleAirwallex3ds(nextAction);
+      default:
+        return { success: false, error: `Unknown next action type: ${nextAction.type}` };
+    }
+  };
+
+  // src/payment-methods/stripe-apple-pay-adapter.ts
+  var StripeApplePayAdapter = class {
+    constructor(mockScenario) {
+      __publicField(this, "stripe", null);
+      __publicField(this, "mockScenario");
+      __publicField(this, "preparedPaymentRequest", null);
+      this.mockScenario = mockScenario ?? "none" /* None */;
+    }
+    initialize(publishableKey) {
+      switch (this.mockScenario) {
+        case "none" /* None */: {
+          console.log("[ApplePay] initialize called");
+          if (!window.Stripe) {
+            console.log("[ApplePay] Stripe.js not loaded");
+            return false;
+          }
+          this.stripe = window.Stripe(publishableKey);
+          const success = this.stripe !== null;
+          console.log("[ApplePay] initialize result:", success);
+          return success;
+        }
+        case "success" /* Success */:
+        case "cancelled" /* Cancelled */: {
+          console.log("[MockApplePay] initialize called");
+          console.log("[MockApplePay] initialize result:", true);
+          return true;
+        }
+      }
+    }
+    /**
+     * Check if Apple Pay is available on this device/browser.
+     * Uses Stripe's PaymentRequest.canMakePayment() which is more reliable
+     * than checking ApplePaySession directly.
+     */
+    static isAvailable() {
+      if (typeof window === "undefined" || !window.ApplePaySession) {
+        console.log("[ApplePay] ApplePaySession not available");
+        return false;
+      }
+      const canMakePayments = window.ApplePaySession.canMakePayments();
+      console.log("[ApplePay] canMakePayments:", canMakePayments);
+      return canMakePayments;
+    }
+    /**
+     * Check availability using Stripe's PaymentRequest API.
+     * This is more accurate as it checks Stripe's configuration too.
+     */
+    async canMakePayment() {
+      if (!this.stripe) {
+        console.log("[ApplePay] Stripe not initialized");
+        return null;
+      }
+      const pr2 = this.stripe.paymentRequest({
+        country: "US",
+        currency: "usd",
+        total: { label: "Check", amount: 100 }
+      });
+      const result = await pr2.canMakePayment();
+      console.log("[ApplePay] canMakePayment result:", result);
+      if (!result) {
+        return null;
+      }
+      return {
+        applePay: result.applePay ?? false,
+        googlePay: result.googlePay ?? false
+      };
+    }
+    /**
+     * Prepare a PaymentRequest for later use. Call this BEFORE the user clicks.
+     * This creates the PaymentRequest and calls canMakePayment() to validate.
+     *
+     * @returns Promise with success status and whether Apple Pay is available
+     */
+    async preparePaymentRequest(config) {
+      if (this.mockScenario !== "none" /* None */) {
+        console.log("[MockApplePay] preparePaymentRequest called");
+        this.preparedConfig = config;
+        return { success: true, applePay: true, googlePay: false };
+      }
+      console.log("[ApplePay] preparePaymentRequest called", config);
+      if (!this.stripe) {
+        return { success: false, error: "Stripe not initialized" };
+      }
+      const paymentRequest = this.stripe.paymentRequest({
+        country: config.country,
+        currency: config.currency.toLowerCase(),
+        total: {
+          label: config.total.label,
+          amount: config.total.amount
+        },
+        requestPayerName: true,
+        requestPayerEmail: true
+      });
+      const canMakePaymentResult = await paymentRequest.canMakePayment();
+      console.log("[ApplePay] preparePaymentRequest canMakePayment:", canMakePaymentResult);
+      if (!canMakePaymentResult) {
+        return {
+          success: false,
+          error: "Payment methods not available on this device/browser",
+          applePay: false,
+          googlePay: false
+        };
+      }
+      this.preparedPaymentRequest = paymentRequest;
+      this.preparedConfig = config;
+      return {
+        success: true,
+        applePay: canMakePaymentResult.applePay ?? false,
+        googlePay: canMakePaymentResult.googlePay ?? false
+      };
+    }
+    /**
+     * Check if a PaymentRequest has been prepared and is ready to show.
+     */
+    isPrepared() {
+      return this.preparedPaymentRequest !== null || this.mockScenario !== "none" /* None */;
+    }
+    /**
+     * Clear the prepared PaymentRequest.
+     */
+    clearPrepared() {
+      this.preparedPaymentRequest = null;
+      this.preparedConfig = null;
+    }
+    /**
+     * Show the prepared Apple Pay payment sheet.
+     * MUST be called synchronously from a user click handler.
+     * Call preparePaymentRequest() before the click to set up the PaymentRequest.
+     */
+    showPreparedPaymentSheet() {
+      switch (this.mockScenario) {
+        case "none" /* None */: {
+          console.log("[ApplePay] showPreparedPaymentSheet called");
+          if (!this.preparedPaymentRequest) {
+            console.error("[ApplePay] No prepared PaymentRequest! Call preparePaymentRequest() first.");
+            return Promise.resolve({
+              success: false,
+              error: "PaymentRequest not prepared. Call preparePaymentRequest() before showing the sheet."
+            });
+          }
+          const paymentRequest = this.preparedPaymentRequest;
+          return new Promise((resolve) => {
+            paymentRequest.on("paymentmethod", (evt) => {
+              console.log("[ApplePay] paymentmethod event received", {
+                paymentMethodId: evt.paymentMethod.id,
+                payerEmail: evt.payerEmail,
+                payerName: evt.payerName
+              });
+              this.preparedPaymentRequest = null;
+              resolve({
+                success: true,
+                paymentMethodId: evt.paymentMethod.id,
+                paymentMethodEvent: evt,
+                billingDetails: {
+                  email: evt.payerEmail ?? void 0,
+                  name: evt.payerName ?? void 0,
+                  address: evt.paymentMethod.billing_details?.address ?? void 0
+                }
+              });
+            });
+            paymentRequest.on("cancel", () => {
+              console.log("[ApplePay] cancel event - user cancelled");
+              this.preparedPaymentRequest = null;
+              resolve({ success: false, cancelled: true });
+            });
+            console.log("[ApplePay] showing payment sheet");
+            paymentRequest.show();
+          });
+        }
+        case "success" /* Success */: {
+          console.log("[MockApplePay] showPreparedPaymentSheet: success");
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                success: true,
+                paymentMethodId: "pm_mock_apple_pay_test",
+                paymentMethodEvent: {
+                  complete: (status) => console.log(`[MockApplePay] complete: ${status}`),
+                  paymentMethod: {
+                    id: "pm_mock_apple_pay_test",
+                    object: "payment_method",
+                    type: "card",
+                    card: {
+                      brand: "visa",
+                      last4: "4242",
+                      exp_month: 12,
+                      exp_year: 2030
+                    },
+                    billing_details: {
+                      email: "test@example.com",
+                      name: "Test User"
+                    }
+                  },
+                  payerEmail: "test@example.com",
+                  payerName: "Test User"
+                },
+                billingDetails: {
+                  email: "test@example.com",
+                  name: "Test User"
+                }
+              });
+            }, 500);
+          });
+        }
+        case "cancelled" /* Cancelled */: {
+          console.log("[MockApplePay] showPreparedPaymentSheet: cancelled");
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({ success: false, cancelled: true });
+            }, 500);
+          });
+        }
+      }
+    }
+    /**
+     * @deprecated Use preparePaymentRequest() + showPreparedPaymentSheet() instead.
+     * This method creates a new PaymentRequest and shows it, which doesn't work
+     * with browser security requirements (show() must be called synchronously).
+     */
+    async showPaymentSheet(config) {
+      console.warn(
+        "[ApplePay] showPaymentSheet is deprecated. Use preparePaymentRequest() + showPreparedPaymentSheet() instead."
+      );
+      const prepareResult = await this.preparePaymentRequest(config);
+      if (!prepareResult.success) {
+        return { success: false, error: prepareResult.error ?? "Failed to prepare payment request" };
+      }
+      return this.showPreparedPaymentSheet();
+    }
+    /**
+     * Complete the payment flow in the Apple Pay sheet.
+     * Call this after confirming the payment on the server.
+     *
+     * @param evt - The PaymentRequestPaymentMethodEvent from showPaymentSheet
+     * @param status - 'success' or 'fail'
+     */
+    completePayment(evt, status) {
+      console.log("[ApplePay] completePayment:", status);
+      evt.complete(status);
+    }
+    /**
+     * Confirm PaymentIntent with the PaymentMethod.
+     * This is called after showPaymentSheet to finalize the payment.
+     *
+     * @deprecated - Server-side confirmation is preferred. The backend should
+     * call stripe.PaymentIntent.confirm() with the payment_method_id.
+     */
+    async confirmPaymentIntent(clientSecret, paymentMethodId) {
+      switch (this.mockScenario) {
+        case "none" /* None */: {
+          console.log("[ApplePay] confirmPaymentIntent called", {
+            clientSecret: `${clientSecret.slice(0, 20)}...`,
+            paymentMethodId
+          });
+          if (!this.stripe) {
+            console.log("[ApplePay] confirmPaymentIntent: Stripe not initialized");
+            return { success: false, error: "Stripe not initialized" };
+          }
+          const { error } = await this.stripe.confirmCardPayment(clientSecret, {
+            payment_method: paymentMethodId
+          });
+          if (error) {
+            console.log("[ApplePay] confirmPaymentIntent error:", error);
+            return { success: false, error: error.message ?? "Payment failed" };
+          }
+          console.log("[ApplePay] confirmPaymentIntent success");
+          return { success: true };
+        }
+        case "success" /* Success */: {
+          console.log("[MockApplePay] confirmPaymentIntent called", { clientSecret, paymentMethodId });
+          return { success: true };
+        }
+        case "cancelled" /* Cancelled */: {
+          throw new Error("confirmPaymentIntent should not be called when scenario is Cancelled");
+        }
+      }
+    }
+  };
+
+  // src/payment-methods/apple-pay.ts
+  var preparedStripeState = null;
+  async function apiCall(url, options, checkoutRequestId) {
+    const headers = new Headers(options.headers);
+    if (checkoutRequestId) {
+      headers.set("x-request-id", checkoutRequestId);
+    }
+    const response = await fetch(url, { ...options, headers });
+    if (!response.ok) {
+      let errorMessage = `Request failed (${response.status})`;
+      try {
+        const errorData = await response.json();
+        errorMessage = errorData.detail || errorMessage;
+      } catch {
+        errorMessage = response.statusText || errorMessage;
+      }
+      return { error: errorMessage };
+    }
+    return { data: await response.json() };
+  }
+  function validateOptions(options) {
+    if (!options?.processorId) {
+      return { processor_id: "Processor ID is required" };
+    }
+    return null;
+  }
+  function getMockScenarioStr(mockScenario) {
+    return mockScenario && mockScenario !== "none" /* None */ ? mockScenario : void 0;
+  }
+  async function callStripeStartEndpoint(apiBaseUrl, secureToken, options, mockScenarioStr, checkoutRequestId) {
+    return apiCall(
+      `${apiBaseUrl}/api/checkout/${secureToken}/apple-pay/start`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          processor_id: options.processorId,
+          customer_info: options.customerInfo,
+          fraud_metadata: collectFraudMetadata(),
+          mock_scenario: mockScenarioStr
+        })
+      },
+      checkoutRequestId
+    );
+  }
+  function initializeStripeAdapter(stripePk, mockScenario) {
+    const adapter = new StripeApplePayAdapter(mockScenario);
+    if (!adapter.initialize(stripePk)) {
+      return { error: 'Stripe.js not loaded. Add <script src="https://js.stripe.com/v3/"><\/script> to your page.' };
+    }
+    return { adapter };
+  }
+  async function callStripeConfirmEndpoint(apiBaseUrl, secureToken, paymentMethodId, mockScenarioStr, checkoutRequestId, payerEmail) {
+    const result = await apiCall(
+      `${apiBaseUrl}/api/checkout/${secureToken}/apple-pay/confirm`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          payment_method_id: paymentMethodId,
+          payer_email: payerEmail,
+          mock_scenario: mockScenarioStr
+        })
+      },
+      checkoutRequestId
+    );
+    if (result.error || !result.data) {
+      return { errors: { apple_pay: result.error || "Failed to confirm payment" } };
+    }
+    const confirmData = result.data;
+    if (confirmData.charge_status === "success") {
+      return {
+        data: {
+          id: confirmData.transaction_id,
+          checkoutAttemptId: confirmData.checkout_attempt_id,
+          checkoutSessionId: confirmData.checkout_session_id ?? secureToken,
+          state: "checkout_succeeded",
+          paymentIntentId: confirmData.payment_intent_id,
+          customerId: confirmData.customer_id,
+          paymentMethodId: confirmData.payment_method_id,
+          processorUsed: confirmData.processor_used,
+          subscriptionId: confirmData.subscription_id,
+          invoiceId: confirmData.invoice_id,
+          invoiceNumber: confirmData.invoice_number,
+          cardBrand: confirmData.card_brand,
+          cardLast4: confirmData.card_last4,
+          cardExpMonth: confirmData.card_exp_month,
+          cardExpYear: confirmData.card_exp_year,
+          errorCode: confirmData.error_code,
+          errorMessageForCustomer: confirmData.error_message_for_customer,
+          errorMessageForDebug: confirmData.error_message_for_debug,
+          nextAction: confirmData.next_action
+        }
+      };
+    }
+    return {
+      errors: {
+        apple_pay: confirmData.error_message_for_customer || confirmData.error_message_for_debug || "Payment failed"
+      }
+    };
+  }
+  async function prepareApplePay(apiBaseUrl, secureToken, options, environment) {
+    console.log("[ApplePay] prepareApplePay called");
+    preparedStripeState = null;
+    const mockScenarioStr = getMockScenarioStr(options.mockScenario);
+    const checkoutRequestId = getOrCreateCheckoutRequestId(environment);
+    console.log(`[ApplePay] Using checkout_request_id: ${checkoutRequestId}`);
+    if (options.processorType === "airwallex") {
+      console.log("[ApplePay] Airwallex processor - will use native ApplePaySession on submit");
+      return { success: true, applePay: true };
+    }
+    const startResult = await callStripeStartEndpoint(
+      apiBaseUrl,
+      secureToken,
+      options,
+      mockScenarioStr,
+      checkoutRequestId
+    );
+    if (startResult.error || !startResult.data) {
+      return { success: false, error: startResult.error || "Failed to start Apple Pay" };
+    }
+    const startData = startResult.data;
+    if (!startData.stripe_pk) {
+      return { success: false, error: "Stripe publishable key not provided" };
+    }
+    const { adapter, error: adapterError } = initializeStripeAdapter(startData.stripe_pk, options.mockScenario);
+    if (!adapter) {
+      return { success: false, error: adapterError };
+    }
+    const prepareResult = await adapter.preparePaymentRequest({
+      country: startData.country,
+      currency: startData.currency.toLowerCase(),
+      total: {
+        label: "Total",
+        amount: startData.amount
+      }
+    });
+    if (!prepareResult.success) {
+      return {
+        success: false,
+        error: prepareResult.error || "Failed to prepare payment request",
+        applePay: prepareResult.applePay
+      };
+    }
+    if (!prepareResult.applePay) {
+      return {
+        success: false,
+        error: "Apple Pay is not available on this device or Stripe account",
+        applePay: false
+      };
+    }
+    preparedStripeState = {
+      processor: "stripe",
+      adapter,
+      startData,
+      mockScenarioStr,
+      checkoutRequestId
+    };
+    console.log("[ApplePay] prepareApplePay success (Stripe), ready for click");
+    return { success: true, applePay: true };
+  }
+  function clearPreparedApplePay() {
+    if (preparedStripeState) {
+      preparedStripeState.adapter.clearPrepared();
+    }
+    preparedStripeState = null;
+  }
+  async function callAirwallexStartEndpoint(apiBaseUrl, secureToken, options, validationUrl, initiativeContext, mockScenarioStr, checkoutRequestId) {
+    return apiCall(
+      `${apiBaseUrl}/api/checkout/${secureToken}/airwallex/apple-pay/start`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          processor_id: options.processorId,
+          customer_info: options.customerInfo,
+          fraud_metadata: collectFraudMetadata(),
+          validation_url: validationUrl,
+          initiative_context: initiativeContext,
+          mock_scenario: mockScenarioStr
+        })
+      },
+      checkoutRequestId
+    );
+  }
+  async function callAirwallexConfirmEndpoint(apiBaseUrl, secureToken, applePayToken, mockScenarioStr, checkoutRequestId, payerEmail) {
+    const result = await apiCall(
+      `${apiBaseUrl}/api/checkout/${secureToken}/airwallex/apple-pay/confirm`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          apple_pay_token: applePayToken,
+          payer_email: payerEmail,
+          mock_scenario: mockScenarioStr
+        })
+      },
+      checkoutRequestId
+    );
+    if (result.error || !result.data) {
+      return {
+        charge_status: "fail",
+        error_message_for_debug: result.error || "Failed to confirm payment",
+        checkout_attempt_id: ""
+      };
+    }
+    return result.data;
+  }
+  async function callAirwallexVerifyEndpoint(apiBaseUrl, secureToken, checkoutRequestId) {
+    const result = await apiCall(
+      `${apiBaseUrl}/api/checkout/${secureToken}/airwallex/apple-pay/verify`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" }
+      },
+      checkoutRequestId
+    );
+    if (result.error || !result.data) {
+      return {
+        charge_status: "fail",
+        error_message_for_debug: result.error || "Failed to verify payment",
+        checkout_attempt_id: ""
       };
-      window.addEventListener("message", handleMessage);
-    });
+    }
+    return result.data;
   }
-
-  // src/payment-methods/next-action-handlers.ts
-  var sleep = (ms2) => new Promise((resolve) => setTimeout(resolve, ms2));
-  var isStripeJsPresent = () => "Stripe" in window;
-  var getLoadedStripe = async (publishableKey) => {
-    for (let i2 = 0; i2 < 10; i2++) {
-      if (isStripeJsPresent()) {
-        break;
+  function toApplePayResult(response, secureToken) {
+    if (response.charge_status === "success") {
+      return {
+        data: {
+          id: response.transaction_id,
+          checkoutAttemptId: response.checkout_attempt_id,
+          checkoutSessionId: response.checkout_session_id ?? secureToken,
+          state: "checkout_succeeded",
+          paymentIntentId: response.payment_intent_id,
+          customerId: response.customer_id,
+          paymentMethodId: response.payment_method_id,
+          processorUsed: response.processor_used,
+          subscriptionId: response.subscription_id,
+          invoiceId: response.invoice_id,
+          invoiceNumber: response.invoice_number,
+          cardBrand: response.card_brand,
+          cardLast4: response.card_last4,
+          cardExpMonth: response.card_exp_month,
+          cardExpYear: response.card_exp_year,
+          errorCode: response.error_code,
+          errorMessageForCustomer: response.error_message_for_customer,
+          errorMessageForDebug: response.error_message_for_debug,
+          nextAction: response.next_action
+        }
+      };
+    }
+    return {
+      errors: {
+        apple_pay: response.error_message_for_customer || response.error_message_for_debug || "Payment failed"
       }
-      await sleep(500);
+    };
+  }
+  var MAX_USER_ACTIONS = 5;
+  async function runAirwallexFlow(apiBaseUrl, secureToken, options, mockScenarioStr, checkoutRequestId) {
+    let airwallexMockScenario = "none" /* None */;
+    if (options.mockScenario === "success" /* Success */) {
+      airwallexMockScenario = "success" /* Success */;
+    } else if (options.mockScenario === "cancelled" /* Cancelled */) {
+      airwallexMockScenario = "cancelled" /* Cancelled */;
     }
-    if (!isStripeJsPresent()) {
-      throw new Error(
-        'Stripe.js not loaded. Add this script tag to your HTML <head>:\n<script src="https://js.stripe.com/v3/"><\/script>'
+    const adapter = new AirwallexApplePayAdapter(airwallexMockScenario);
+    const config = {
+      amount: options.amount || 0,
+      currency: (options.currency || "USD").toUpperCase(),
+      country: options.country.toUpperCase(),
+      merchantName: options.merchantName || "Total"
+    };
+    if (!adapter.initialize(config)) {
+      return { errors: { apple_pay: "Apple Pay not available on this device (requires Safari)" } };
+    }
+    const canPay = await adapter.canMakePayment();
+    if (!canPay) {
+      return { errors: { apple_pay: "Apple Pay not available on this device" } };
+    }
+    const initiativeContext = typeof window !== "undefined" ? window.location.hostname : "";
+    if (airwallexMockScenario !== "none" /* None */) {
+      const startResult = await callAirwallexStartEndpoint(
+        apiBaseUrl,
+        secureToken,
+        options,
+        "https://mock-apple-pay-gateway.example.com/paymentservices/startSession",
+        initiativeContext,
+        mockScenarioStr,
+        checkoutRequestId
       );
+      if (startResult.error || !startResult.data) {
+        return { errors: { apple_pay: startResult.error || "Failed to start mock checkout" } };
+      }
+    }
+    const paymentResult = await adapter.showPaymentSheet(async (validationUrl) => {
+      const startResult = await callAirwallexStartEndpoint(
+        apiBaseUrl,
+        secureToken,
+        options,
+        validationUrl,
+        initiativeContext,
+        mockScenarioStr,
+        checkoutRequestId
+      );
+      if (startResult.error || !startResult.data) {
+        return { error: startResult.error || "Merchant validation failed" };
+      }
+      if (!startResult.data.merchant_session) {
+        return { error: "No merchant session returned from server" };
+      }
+      return { merchantSession: startResult.data.merchant_session };
+    });
+    if (!paymentResult.success) {
+      if ("cancelled" in paymentResult && paymentResult.cancelled) {
+        return { errors: { apple_pay: "Apple Pay cancelled by user" } };
+      }
+      return { errors: { apple_pay: paymentResult.error || "Apple Pay failed" } };
     }
-    const stripe = new window.Stripe(publishableKey);
-    return stripe;
-  };
-  var handleStripe3ds = async (nextAction) => {
-    const { clientSecret, stripePk } = nextAction;
-    const stripe = await getLoadedStripe(stripePk);
-    const { error: stripeError } = await stripe.confirmCardPayment(clientSecret);
-    if (stripeError) {
-      console.error("[3DS:Stripe] Authentication failed:", stripeError.message);
-      return { success: false, error: stripeError.message || "3DS authentication failed" };
+    const { token, complete, payerEmail } = paymentResult;
+    let response = await callAirwallexConfirmEndpoint(
+      apiBaseUrl,
+      secureToken,
+      token,
+      mockScenarioStr,
+      checkoutRequestId,
+      payerEmail
+    );
+    let userActionCount = 0;
+    while (response.charge_status === "pending" && response.next_action && userActionCount < MAX_USER_ACTIONS) {
+      userActionCount++;
+      const nextAction = response.next_action;
+      const actionResult = await handleNextAction({ type: nextAction.type, url: nextAction.url });
+      const verifyResponse = await callAirwallexVerifyEndpoint(apiBaseUrl, secureToken, checkoutRequestId);
+      if (verifyResponse.charge_status === "pending" && verifyResponse.next_action) {
+        if (!actionResult.success) {
+          console.log("[ApplePay:Airwallex] 3DS failed but retry available, continuing loop...");
+        }
+        response = verifyResponse;
+        continue;
+      }
+      if (!actionResult.success) {
+        complete("fail");
+        return {
+          errors: {
+            apple_pay: verifyResponse.error_message_for_customer || verifyResponse.error_message_for_debug || actionResult.error || "3DS authentication failed"
+          }
+        };
+      }
+      complete(verifyResponse.charge_status === "success" ? "success" : "fail");
+      return toApplePayResult(verifyResponse, secureToken);
     }
-    return { success: true };
-  };
-  var handleAirwallex3ds = async (nextAction) => {
-    return show3DSIframeModal({
-      url: nextAction.url,
-      size: { width: 605, height: 550 },
-      onMessage: (event) => {
-        if (event.data.type !== "3ds_complete") {
-          return { handled: false };
+    if (userActionCount >= MAX_USER_ACTIONS) {
+      complete("fail");
+      return { errors: { apple_pay: "Too many authentication attempts. Please try again." } };
+    }
+    complete(response.charge_status === "success" ? "success" : "fail");
+    return toApplePayResult(response, secureToken);
+  }
+  var defSubmitPayment = (states) => {
+    const submitPayment = async (_fields, options) => {
+      const { apiBaseUrl, secureToken, environment } = states;
+      const applePayOptions = options;
+      const validationError = validateOptions(applePayOptions);
+      if (validationError) {
+        return { errors: validationError };
+      }
+      try {
+        const mockScenarioStr = getMockScenarioStr(applePayOptions.mockScenario);
+        const checkoutRequestId = getOrCreateCheckoutRequestId(environment);
+        console.log(`[ApplePay] Using checkout_request_id: ${checkoutRequestId}`);
+        if (preparedStripeState?.adapter.isPrepared()) {
+          console.log("[ApplePay] Using prepared Stripe state for immediate sheet display");
+          const paymentResultPromise = preparedStripeState.adapter.showPreparedPaymentSheet();
+          const paymentResult2 = await paymentResultPromise;
+          if (!paymentResult2.success) {
+            clearPreparedApplePay();
+            if ("cancelled" in paymentResult2 && paymentResult2.cancelled) {
+              return { errors: { apple_pay: "Apple Pay cancelled by user" } };
+            }
+            const errorMessage = "error" in paymentResult2 ? paymentResult2.error : "Unknown error";
+            return { errors: { apple_pay: errorMessage } };
+          }
+          const { paymentMethodId: paymentMethodId2, paymentMethodEvent: paymentMethodEvent2, billingDetails: billingDetails2 } = paymentResult2;
+          const confirmResult2 = await callStripeConfirmEndpoint(
+            apiBaseUrl,
+            secureToken,
+            paymentMethodId2,
+            mockScenarioStr,
+            preparedStripeState.checkoutRequestId,
+            billingDetails2?.email
+          );
+          if (confirmResult2.data) {
+            paymentMethodEvent2.complete("success");
+            clearPreparedApplePay();
+            return confirmResult2;
+          } else {
+            paymentMethodEvent2.complete("fail");
+            clearPreparedApplePay();
+            return confirmResult2;
+          }
         }
-        const { isSuccess, error } = event.data;
-        if (isSuccess) {
-          return { handled: true, result: { success: true, data: {} } };
+        if (applePayOptions.processorType === "airwallex") {
+          console.log("[ApplePay] Running Airwallex flow (processorType=airwallex)");
+          return await runAirwallexFlow(apiBaseUrl, secureToken, applePayOptions, mockScenarioStr, checkoutRequestId);
+        }
+        const startResult = await callStripeStartEndpoint(
+          apiBaseUrl,
+          secureToken,
+          applePayOptions,
+          mockScenarioStr,
+          checkoutRequestId
+        );
+        if (startResult.error || !startResult.data) {
+          return { errors: { apple_pay: startResult.error || "Failed to start Apple Pay" } };
+        }
+        const startData = startResult.data;
+        console.warn("[ApplePay] Stripe flow without prepared state - may fail due to user gesture requirements");
+        if (!startData.stripe_pk) {
+          return { errors: { apple_pay: "Stripe publishable key not provided" } };
+        }
+        const { adapter, error: adapterError } = initializeStripeAdapter(
+          startData.stripe_pk,
+          applePayOptions.mockScenario
+        );
+        if (!adapter) {
+          return { errors: { apple_pay: adapterError || "Failed to initialize Stripe adapter" } };
+        }
+        const prepareResult = await adapter.preparePaymentRequest({
+          country: startData.country,
+          currency: startData.currency.toLowerCase(),
+          total: { label: "Total", amount: startData.amount }
+        });
+        if (!prepareResult.success || !prepareResult.applePay) {
+          return { errors: { apple_pay: prepareResult.error || "Apple Pay not available" } };
+        }
+        const paymentResult = await adapter.showPreparedPaymentSheet();
+        if (!paymentResult.success) {
+          if ("cancelled" in paymentResult && paymentResult.cancelled) {
+            return { errors: { apple_pay: "Apple Pay cancelled by user" } };
+          }
+          const errorMessage = "error" in paymentResult ? paymentResult.error : "Unknown error";
+          return { errors: { apple_pay: errorMessage } };
+        }
+        const { paymentMethodId, paymentMethodEvent, billingDetails } = paymentResult;
+        const confirmResult = await callStripeConfirmEndpoint(
+          apiBaseUrl,
+          secureToken,
+          paymentMethodId,
+          mockScenarioStr,
+          checkoutRequestId,
+          billingDetails?.email
+        );
+        if (confirmResult.data) {
+          paymentMethodEvent.complete("success");
+          return confirmResult;
         } else {
-          console.error("[3DS:Airwallex] Authentication failed:", error);
-          return {
-            handled: true,
-            result: { success: false, error: error || "3DS authentication failed" }
-          };
+          paymentMethodEvent.complete("fail");
+          return confirmResult;
         }
+      } catch (error) {
+        clearPreparedApplePay();
+        return { errors: { apple_pay: `Apple Pay error: ${error}` } };
       }
-    });
+    };
+    return submitPayment;
   };
-  var handleNextAction = async (nextAction) => {
-    switch (nextAction.type) {
-      case "stripe_3ds":
-        return handleStripe3ds(nextAction);
-      case "airwallex_3ds":
-        return handleAirwallex3ds(nextAction);
-      default:
-        return { success: false, error: `Unknown next action type: ${nextAction.type}` };
-    }
+  var ApplePayPaymentMethod = definePaymentMethod((paymentKitStates) => {
+    return {
+      name: "apple_pay",
+      externalFuncs: {
+        prepareApplePay: (options) => prepareApplePay(
+          paymentKitStates.apiBaseUrl,
+          paymentKitStates.secureToken,
+          options,
+          paymentKitStates.environment
+        )
+      },
+      internalFuncs: {
+        submitPayment: defSubmitPayment(paymentKitStates),
+        cleanup: () => {
+          clearPreparedApplePay();
+        }
+      }
+    };
+  });
+  var apple_pay_default = ApplePayPaymentMethod;
+
+  // src/penpal/connect-card.ts
+  var connectToCardIframe = (iframe, methods) => {
+    return connectToWindow({ window: iframe.contentWindow, methods });
   };
 
   // src/payment-methods/vgs-collect-loader.ts
@@ -6864,6 +7842,14 @@ var PaymentKit = (() => {
       "box-sizing": "border-box",
       ...containerPadding && containerPadding !== "0px" ? { padding: containerPadding } : {}
     };
+    for (const selector of [mountPoints.pan, mountPoints.exp, mountPoints.cvc]) {
+      const container = document.querySelector(selector);
+      if (!container) continue;
+      const staleIframes = container.querySelectorAll("iframe");
+      for (const iframe of staleIframes) {
+        iframe.remove();
+      }
+    }
     const panField = form.cardNumberField(mountPoints.pan, {
       placeholder: placeholders?.card_pan ?? "Card number",
       validations: ["required", "validCardNumber"],
@@ -6883,9 +7869,12 @@ var PaymentKit = (() => {
       validations: ["required", "validCardSecurityCode"],
       css: fieldCss
     });
+    const observers = [];
+    const containers = [];
     for (const selector of [mountPoints.pan, mountPoints.exp, mountPoints.cvc]) {
       const container = document.querySelector(selector);
       if (!container) continue;
+      containers.push(container);
       const styleIframe = (iframe) => {
         const containerEl = container;
         if (getComputedStyle(containerEl).position === "static") {
@@ -6897,18 +7886,17 @@ var PaymentKit = (() => {
         iframe.style.height = "100%";
         iframe.style.border = "none";
       };
+      const observer = new MutationObserver(() => {
+        const iframe = container.querySelector("iframe");
+        if (iframe && iframe.style.position !== "absolute") {
+          styleIframe(iframe);
+        }
+      });
+      observer.observe(container, { childList: true, subtree: true });
+      observers.push(observer);
       const existing = container.querySelector("iframe");
-      if (existing) {
+      if (existing && existing.style.position !== "absolute") {
         styleIframe(existing);
-      } else {
-        const observer = new MutationObserver((_2, obs) => {
-          const iframe = container.querySelector("iframe");
-          if (iframe) {
-            styleIframe(iframe);
-            obs.disconnect();
-          }
-        });
-        observer.observe(container, { childList: true, subtree: true });
       }
     }
     if (onFocusChangeCallbacks) {
@@ -6925,6 +7913,17 @@ var PaymentKit = (() => {
         }
       }
     }
+    return () => {
+      for (const observer of observers) {
+        observer.disconnect();
+      }
+      for (const container of containers) {
+        const iframes = container.querySelectorAll("iframe");
+        for (const iframe of iframes) {
+          iframe.remove();
+        }
+      }
+    };
   }
 
   // src/payment-methods/card.ts
@@ -7037,7 +8036,7 @@ var PaymentKit = (() => {
                 console.log(
                   `[PaymentKit] Creating VGS card fields \u2014 pan: ${parentSelector}, exp: ${expSelector}, cvc: ${cvcSelector}`
                 );
-                createVgsCardFields(
+                states.vgsFieldsCleanup = createVgsCardFields(
                   form,
                   {
                     pan: parentSelector,
@@ -7061,7 +8060,15 @@ var PaymentKit = (() => {
             }
             cleanupVgs = () => {
               if (type === "card_pan" && states.vgsForm) {
-                states.vgsForm.unmount();
+                try {
+                  states.vgsFieldsCleanup?.();
+                } catch {
+                }
+                states.vgsFieldsCleanup = void 0;
+                try {
+                  states.vgsForm.unmount();
+                } catch {
+                }
                 states.vgsForm = void 0;
               }
             };
@@ -7095,7 +8102,10 @@ var PaymentKit = (() => {
           cleanupDirect = () => {
             const connection = cardInputConnections[type];
             connection?.destroy();
-            parent.removeChild(iframe);
+            try {
+              parent.removeChild(iframe);
+            } catch {
+            }
             states.cardInputConnections[type] = void 0;
           };
           parent.appendChild(iframe);
@@ -7128,7 +8138,7 @@ var PaymentKit = (() => {
       return { mount: mountIFrame };
     };
   };
-  var defSubmitPayment = (states) => {
+  var defSubmitPayment2 = (states) => {
     const submitPayment = async (fields, options) => {
       if (states._sessionConfigReady) await states._sessionConfigReady;
       const isVgsMode = states.cardTokenizationMode === "vgs";
@@ -7158,7 +8168,8 @@ var PaymentKit = (() => {
         console.log("[PaymentKit] Submitting card via VGS CMP...");
         const vgsSubmitResult = await submitVgsCardFields(states, tunnelX);
         if (!vgsSubmitResult.isSuccess) {
-          timingTracker.trackFail(null, "card_submit_error", "VGS card submission failed");
+          const errorDetail = Object.entries(vgsSubmitResult.errors).map(([k2, v2]) => `${k2}: ${v2}`).join(", ");
+          timingTracker.trackFail(null, "card_submit_error", errorDetail || "VGS card submission failed");
           return { errors: vgsSubmitResult.errors };
         }
       } else {
@@ -7194,11 +8205,11 @@ var PaymentKit = (() => {
         requestOptions
       );
       console.log("Card checkout result:", currentResult);
-      const MAX_USER_ACTIONS2 = 5;
+      const MAX_USER_ACTIONS3 = 5;
       let userActionCount = 0;
-      while (currentResult.nextAction && userActionCount < MAX_USER_ACTIONS2) {
+      while (currentResult.nextAction && userActionCount < MAX_USER_ACTIONS3) {
         userActionCount++;
-        console.log(`Handling user action ${userActionCount}/${MAX_USER_ACTIONS2}...`);
+        console.log(`Handling user action ${userActionCount}/${MAX_USER_ACTIONS3}...`);
         const actionResult = await handleNextAction(currentResult.nextAction);
         console.log("User action completed, verifying checkout...");
         const verifyResult = await tunnelX.publicEndpoints.cardCheckoutVerify(
@@ -7234,7 +8245,7 @@ var PaymentKit = (() => {
         timingTracker.trackSuccess(verifyResult.checkoutAttemptId || "unknown");
         return { data: verifyResult };
       }
-      if (userActionCount >= MAX_USER_ACTIONS2) {
+      if (userActionCount >= MAX_USER_ACTIONS3) {
         console.error("Max user actions exceeded");
         timingTracker.trackFail(null, "max_actions_exceeded", "Too many authentication attempts");
         return { errors: { root: "Too many authentication attempts. Please try again." } };
@@ -7270,8 +8281,27 @@ var PaymentKit = (() => {
     const data = await resp.json();
     return data.access_token;
   };
+  var VGS_FIELD_MAP = {
+    // Actual VGS CMP error keys (verified empirically)
+    pan: "card_pan",
+    cvc: "card_cvc",
+    "exp-date": "card_exp",
+    // Alternative key formats (VGS documentation references)
+    "card-number": "card_pan",
+    "card-security-code": "card_cvc",
+    "card-expiration-date": "card_exp"
+  };
+  var stringifyError = (err) => {
+    if (err instanceof Error) return err.message;
+    try {
+      return JSON.stringify(err);
+    } catch {
+      return String(err);
+    }
+  };
   var submitVgsCardFields = async (states, tunnelX) => {
-    const { vgsForm, cardSetupIntentId, secureToken, apiBaseUrl } = states;
+    const { vgsForm, cardSetupIntentId, secureToken, apiBaseUrl, checkoutRequestId } = states;
+    const logPrefix = `[PaymentKit] [${checkoutRequestId}]`;
     const errors = {};
     if (!vgsForm) {
       errors.card_pan = "required";
@@ -7281,11 +8311,19 @@ var PaymentKit = (() => {
       errors.root = "Card setup intent not created";
       return { errors, isSuccess: false };
     }
+    let accessToken;
+    try {
+      accessToken = await fetchCollectToken(apiBaseUrl, secureToken);
+    } catch (err) {
+      console.error(`${logPrefix} VGS auth token fetch failed:`, stringifyError(err));
+      errors.root = "Card authentication failed \u2014 please try again";
+      return { errors, isSuccess: false };
+    }
+    let cardResult;
+    const VGS_CREATE_CARD_TIMEOUT_MS = 3e4;
     try {
-      const accessToken = await fetchCollectToken(apiBaseUrl, secureToken);
-      const VGS_CREATE_CARD_TIMEOUT_MS = 3e4;
       let createCardTimeoutId;
-      const cardResult = await Promise.race([
+      cardResult = await Promise.race([
         new Promise((resolve, reject) => {
           vgsForm.createCard(
             {
@@ -7297,34 +8335,76 @@ var PaymentKit = (() => {
           );
         }),
         new Promise((_2, reject) => {
-          createCardTimeoutId = setTimeout(
-            () => reject(new Error("VGS createCard timed out")),
-            VGS_CREATE_CARD_TIMEOUT_MS
-          );
+          createCardTimeoutId = setTimeout(() => reject(new Error("VGS_TIMEOUT")), VGS_CREATE_CARD_TIMEOUT_MS);
         })
       ]).finally(() => clearTimeout(createCardTimeoutId));
-      if (!cardResult?.data?.attributes) {
-        throw new Error("VGS createCard returned an invalid response");
+    } catch (err) {
+      const errStr = stringifyError(err);
+      console.error(`${logPrefix} VGS createCard failed:`, errStr);
+      if (err instanceof Error && err.message === "VGS_TIMEOUT") {
+        errors.root = "Card processing timed out \u2014 please try again";
+        return { errors, isSuccess: false };
+      }
+      if (err && typeof err === "object" && !(err instanceof Error)) {
+        const vgsErrors = err;
+        for (const [vgsKey, fieldKey] of Object.entries(VGS_FIELD_MAP)) {
+          if (vgsKey in vgsErrors) {
+            const fieldErr = vgsErrors[vgsKey];
+            const messages = fieldErr?.errorMessages;
+            errors[fieldKey] = Array.isArray(messages) ? messages[0] : "invalid";
+          }
+        }
+        if (Object.keys(errors).length > 0) {
+          return { errors, isSuccess: false };
+        }
       }
-      const { pan_alias, cvc_alias, exp_month, exp_year } = cardResult.data.attributes;
-      const fullYear = exp_year < 100 ? 2e3 + exp_year : exp_year;
-      const formattedExp = `${String(exp_month).padStart(2, "0")}/${fullYear}`;
-      await tunnelX.publicEndpoints.updateCardSetupIntent({
+      errors.root = "Card validation failed \u2014 please check your card details and try again";
+      return { errors, isSuccess: false };
+    }
+    if (!cardResult?.data?.attributes) {
+      console.error(`${logPrefix} VGS createCard returned invalid response:`, stringifyError(cardResult));
+      errors.root = "Card processing returned an invalid response \u2014 please try again";
+      return { errors, isSuccess: false };
+    }
+    const { pan_alias, cvc_alias, exp_month, exp_year } = cardResult.data.attributes;
+    const fullYear = exp_year < 100 ? 2e3 + exp_year : exp_year;
+    const formattedExp = `${String(exp_month).padStart(2, "0")}/${fullYear}`;
+    const cmpCardId = cardResult.data.id;
+    try {
+      const updateIntentCall = tunnelX.publicEndpoints.updateCardSetupIntent({
         checkoutToken: secureToken,
         cardSetupIntentId,
         updateCardSetupIntentReq: {
           cardPan: pan_alias,
           cardExp: formattedExp,
           cardCvc: cvc_alias,
+          cmpCardId,
           fraudMetadata: collectFraudMetadata()
         }
       });
-      return { errors: {}, isSuccess: true };
+      const proxyCvcCall = new Promise((resolve, reject) => {
+        if (!vgsForm.submit) {
+          reject(new Error("VGS form.submit not available"));
+          return;
+        }
+        vgsForm.submit(
+          `/api/card-setup-intents/${secureToken}/${cardSetupIntentId}`,
+          {
+            method: "post",
+            headers: { "Content-Type": "application/json" },
+            data: (fields) => ({ card_cvc: fields.cvc })
+          },
+          (_status) => resolve(),
+          (err) => reject(err)
+        );
+      });
+      await Promise.all([updateIntentCall, proxyCvcCall]);
     } catch (err) {
-      console.error("[PaymentKit] VGS CMP createCard failed:", err);
-      errors.root = "Card submission failed";
+      console.error(`${logPrefix} updateCardSetupIntent failed:`, stringifyError(err));
+      errors.root = "Failed to save card details \u2014 please try again";
       return { errors, isSuccess: false };
     }
+    return { errors: {}, isSuccess: true };
   };
   var submitCardFields = async (states) => {
     const errors = {};
@@ -7373,9 +8453,11 @@ var PaymentKit = (() => {
         createElement: defCreateElement(localStates)
       },
       internalFuncs: {
-        submitPayment: defSubmitPayment(localStates),
+        submitPayment: defSubmitPayment2(localStates),
         cleanup: () => {
           if (localStates.vgsForm) {
+            localStates.vgsFieldsCleanup?.();
+            localStates.vgsFieldsCleanup = void 0;
             localStates.vgsForm.unmount();
             localStates.vgsForm = void 0;
           }
@@ -7607,11 +8689,13 @@ var PaymentKit = (() => {
           return new Promise((resolve) => {
             this.paymentRequest.on("paymentmethod", (event) => {
               console.log("[GooglePay] showPaymentSheet: paymentmethod event", {
-                paymentMethodId: event.paymentMethod.id
+                paymentMethodId: event.paymentMethod.id,
+                payerEmail: event.payerEmail
               });
               resolve({
                 success: true,
                 paymentMethodId: event.paymentMethod.id,
+                payerEmail: event.payerEmail ?? void 0,
                 complete: (status) => {
                   console.log("[GooglePay] complete called:", status);
                   event.complete(status);
@@ -7632,6 +8716,7 @@ var PaymentKit = (() => {
           return {
             success: true,
             paymentMethodId: "pm_mock_123456789",
+            payerEmail: "mock@example.com",
             complete: (status) => console.log(`[MockGooglePay] complete: ${status}`)
           };
         }
@@ -7675,7 +8760,7 @@ var PaymentKit = (() => {
   };
 
   // src/payment-methods/google-pay.ts
-  async function apiCall(url, options, checkoutRequestId) {
+  async function apiCall2(url, options, checkoutRequestId) {
     const headers = new Headers(options.headers);
     if (checkoutRequestId) {
       headers.set("x-request-id", checkoutRequestId);
@@ -7693,17 +8778,17 @@ var PaymentKit = (() => {
     }
     return { data: await response.json() };
   }
-  function validateOptions(options) {
+  function validateOptions2(options) {
     if (!options?.processorId) {
       return { processor_id: "Processor ID is required" };
     }
     return null;
   }
-  function getMockScenarioStr(mockScenario) {
+  function getMockScenarioStr2(mockScenario) {
     return mockScenario && mockScenario !== "none" /* None */ ? mockScenario : void 0;
   }
   async function callStartEndpoint(apiBaseUrl, secureToken, options, mockScenarioStr, checkoutRequestId) {
-    return apiCall(
+    return apiCall2(
       `${apiBaseUrl}/api/checkout/${secureToken}/google-pay/start`,
       {
         method: "POST",
@@ -7718,7 +8803,7 @@ var PaymentKit = (() => {
       checkoutRequestId
     );
   }
-  function initializeStripeAdapter(stripePk, startData, mockScenario) {
+  function initializeStripeAdapter2(stripePk, startData, mockScenario) {
     const adapter = new StripeGooglePayAdapter(mockScenario);
     if (!adapter.initialize(stripePk)) {
       return { error: 'Stripe.js not loaded. Add <script src="https://js.stripe.com/v3/"><\/script> to your page.' };
@@ -7737,7 +8822,7 @@ var PaymentKit = (() => {
     if (!startData.stripe_pk || !startData.client_secret) {
       return { success: false, error: "Stripe credentials not provided" };
     }
-    const { adapter, error: adapterError } = initializeStripeAdapter(startData.stripe_pk, startData, mockScenario);
+    const { adapter, error: adapterError } = initializeStripeAdapter2(startData.stripe_pk, startData, mockScenario);
     if (!adapter) {
       return { success: false, error: adapterError };
     }
@@ -7759,7 +8844,7 @@ var PaymentKit = (() => {
       return { success: false, error: "error" in confirmResult ? confirmResult.error : "Card setup failed" };
     }
     paymentResult.complete("success");
-    return { success: true };
+    return { success: true, payerEmail: paymentResult.payerEmail };
   }
   function initializeAirwallexAdapter(startData, mockScenario) {
     if (!startData.merchant_name || !startData.airwallex_account_id) {
@@ -7788,7 +8873,7 @@ var PaymentKit = (() => {
     }
     return { adapter };
   }
-  async function runAirwallexFlow(startData, mockScenario) {
+  async function runAirwallexFlow2(startData, mockScenario) {
     const { adapter, error: adapterError } = initializeAirwallexAdapter(startData, mockScenario);
     if (!adapter) {
       return { success: false, error: adapterError };
@@ -7807,14 +8892,17 @@ var PaymentKit = (() => {
     }
     return { success: true, token: paymentResult.token };
   }
-  async function callConfirmEndpoint(apiBaseUrl, secureToken, googlePayToken, mockScenarioStr, checkoutRequestId) {
+  async function callConfirmEndpoint(apiBaseUrl, secureToken, googlePayToken, mockScenarioStr, checkoutRequestId, payerEmail) {
     const requestBody = {
       mock_scenario: mockScenarioStr
     };
     if (googlePayToken) {
       requestBody.google_pay_token = googlePayToken;
     }
-    const result = await apiCall(
+    if (payerEmail) {
+      requestBody.payer_email = payerEmail;
+    }
+    const result = await apiCall2(
       `${apiBaseUrl}/api/checkout/${secureToken}/google-pay/confirm`,
       {
         method: "POST",
@@ -7833,7 +8921,7 @@ var PaymentKit = (() => {
     return result.data;
   }
   async function callVerifyEndpoint(apiBaseUrl, secureToken, checkoutRequestId) {
-    const result = await apiCall(
+    const result = await apiCall2(
       `${apiBaseUrl}/api/checkout/${secureToken}/google-pay/verify`,
       {
         method: "POST",
@@ -7856,22 +8944,48 @@ var PaymentKit = (() => {
         data: {
           id: response.transaction_id,
           checkoutAttemptId: response.checkout_attempt_id,
-          checkoutSessionId: secureToken,
-          state: "checkout_succeeded"
+          checkoutSessionId: response.checkout_session_id ?? secureToken,
+          state: "checkout_succeeded",
+          paymentIntentId: response.payment_intent_id,
+          customerId: response.customer_id,
+          paymentMethodId: response.payment_method_id,
+          processorUsed: response.processor_used,
+          subscriptionId: response.subscription_id,
+          invoiceId: response.invoice_id,
+          invoiceNumber: response.invoice_number,
+          cardBrand: response.card_brand,
+          cardLast4: response.card_last4,
+          cardExpMonth: response.card_exp_month,
+          cardExpYear: response.card_exp_year,
+          errorCode: response.error_code,
+          errorMessageForCustomer: response.error_message_for_customer,
+          errorMessageForDebug: response.error_message_for_debug,
+          nextAction: response.next_action
         }
       };
     }
-    return { errors: { google_pay: response.error_message || "Payment failed" } };
+    return {
+      errors: {
+        google_pay: response.error_message_for_customer || response.error_message_for_debug || response.error_message || "Payment failed"
+      }
+    };
   }
-  async function confirmStripeGooglePay(apiBaseUrl, secureToken, mockScenarioStr, checkoutRequestId) {
-    const response = await callConfirmEndpoint(apiBaseUrl, secureToken, void 0, mockScenarioStr, checkoutRequestId);
+  async function confirmStripeGooglePay(apiBaseUrl, secureToken, mockScenarioStr, checkoutRequestId, payerEmail) {
+    const response = await callConfirmEndpoint(
+      apiBaseUrl,
+      secureToken,
+      void 0,
+      mockScenarioStr,
+      checkoutRequestId,
+      payerEmail
+    );
     return toGooglePayResult(response, secureToken);
   }
-  var MAX_USER_ACTIONS = 5;
+  var MAX_USER_ACTIONS2 = 5;
   async function confirmAirwallexGooglePay(apiBaseUrl, secureToken, googlePayToken, mockScenarioStr, checkoutRequestId) {
     let userActionCount = 0;
     let response = await callConfirmEndpoint(apiBaseUrl, secureToken, googlePayToken, mockScenarioStr, checkoutRequestId);
-    while (response.charge_status === "pending" && response.next_action && userActionCount < MAX_USER_ACTIONS) {
+    while (response.charge_status === "pending" && response.next_action && userActionCount < MAX_USER_ACTIONS2) {
       userActionCount++;
       const actionResult = await handleNextAction(response.next_action);
       const verifyResponse = await callVerifyEndpoint(apiBaseUrl, secureToken, checkoutRequestId);
@@ -7891,21 +9005,21 @@ var PaymentKit = (() => {
       }
       return toGooglePayResult(verifyResponse, secureToken);
     }
-    if (userActionCount >= MAX_USER_ACTIONS) {
+    if (userActionCount >= MAX_USER_ACTIONS2) {
       return { errors: { google_pay: "Too many authentication attempts. Please try again." } };
     }
     return toGooglePayResult(response, secureToken);
   }
-  var defSubmitPayment2 = (states) => {
+  var defSubmitPayment3 = (states) => {
     const submitPayment = async (_fields, options) => {
       const { apiBaseUrl, secureToken, environment } = states;
       const gpayOptions = options;
-      const validationError = validateOptions(gpayOptions);
+      const validationError = validateOptions2(gpayOptions);
       if (validationError) {
         return { errors: validationError };
       }
       try {
-        const mockScenarioStr = getMockScenarioStr(gpayOptions.mockScenario);
+        const mockScenarioStr = getMockScenarioStr2(gpayOptions.mockScenario);
         const checkoutRequestId = getOrCreateCheckoutRequestId(environment);
         console.log(`[GooglePay] Using checkout_request_id: ${checkoutRequestId}`);
         const startResult = await callStartEndpoint(
@@ -7924,10 +9038,16 @@ var PaymentKit = (() => {
           if (!stripeResult.success) {
             return { errors: { google_pay: stripeResult.error } };
           }
-          return await confirmStripeGooglePay(apiBaseUrl, secureToken, mockScenarioStr, checkoutRequestId);
+          return await confirmStripeGooglePay(
+            apiBaseUrl,
+            secureToken,
+            mockScenarioStr,
+            checkoutRequestId,
+            stripeResult.payerEmail
+          );
         }
         if (startData.processor === "airwallex") {
-          const airwallexResult = await runAirwallexFlow(startData, gpayOptions.mockScenario);
+          const airwallexResult = await runAirwallexFlow2(startData, gpayOptions.mockScenario);
           if (!airwallexResult.success) {
             return { errors: { google_pay: airwallexResult.error } };
           }
@@ -7954,7 +9074,7 @@ var PaymentKit = (() => {
       name: "google_pay",
       externalFuncs: {},
       internalFuncs: {
-        submitPayment: defSubmitPayment2(paymentKitStates),
+        submitPayment: defSubmitPayment3(paymentKitStates),
         cleanup: () => {
         }
       }
@@ -7963,7 +9083,7 @@ var PaymentKit = (() => {
   var google_pay_default = GooglePayPaymentMethod;
 
   // src/payment-methods/paypal.ts
-  var defSubmitPayment3 = (states) => {
+  var defSubmitPayment4 = (states) => {
     const submitPayment = async (_fields, options) => {
       const { apiBaseUrl, secureToken, environment } = states;
       const paypalOptions = options;
@@ -8092,7 +9212,7 @@ var PaymentKit = (() => {
         // PayPal doesn't need createElement like card iframes
       },
       internalFuncs: {
-        submitPayment: defSubmitPayment3(localStates),
+        submitPayment: defSubmitPayment4(localStates),
         cleanup: () => {
           if (localStates.pollInterval) {
             clearInterval(localStates.pollInterval);
@@ -8109,6 +9229,7 @@ var PaymentKit = (() => {
   // src/cdn.ts
   var cdn_default = index_default;
   var PaymentMethods = {
+    applePay: apple_pay_default,
     card: card_default,
     googlePay: google_pay_default,
     paypal: paypal_default