@shipengine/elements 2.28.0 → 2.29.0

package/dist/esm/components/forms/wallet-form/wallet-form.js

@@ -1,20 +1,23 @@
 import { __awaiter } from '../../../_virtual/_tslib.js';
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useAuctanePaySession } from '../../../contexts/auctane-pay-session-context.js';
 import { useBlackboxDetection } from '../../../hooks/use-black-box-detection.js';
 import { useNestedForm } from '../../../hooks/use-nested-form.js';
-import { Grid, GridChild, InlineNotification, NotificationType, Typography, ButtonVariant } from '@shipengine/giger';
+import { Grid, GridChild, InlineNotification, NotificationType, Typography, Spinner, SpinnerSize, ButtonVariant } from '@shipengine/giger';
 import { formLogger } from '../../../utilities/form-logger.js';
 import { isPoBoxAddress } from '../../../utilities/shipengine/address.js';
 import { validationResolver } from '../../../utilities/validation.js';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { EditWalletAddressForm } from '../edit-wallet-address-form/edit-wallet-address-form.js';
-import { BillingFields } from './billing-fields.js';
 import { styles } from './wallet-form.styles.js';
 import { getWalletSchema } from './wallet-schema.js';
+import { useFinancialService } from '../../../hooks/financial-services/use-financial-service.js';
+import { PaymentMethodSelector } from '../../payment/payment-method-selector/payment-method-selector.js';
 import { AddressFields } from '../address-form/address-fields.js';
 import { VatSettings } from '../../../features/vat-settings/vat-settings.js';
+import { useElements } from '../../../elements-provider/elements-context-provider.js';
 import { useAddressPreference } from '../../address-preference-context/address-preference-context.js';
 import { Spacer } from '../../spacer/spacer.js';
 import { AddressDisplay } from '../../address-display/address-display.js';
@@ -27,27 +30,38 @@ const WalletForm = ({
   onSubmit,
   showVatSettings
 }) => {
+  var _a, _b;
   const {
     t
   } = useTranslation(["register-wallet", "common"]);
+  const {
+    locale
+  } = useElements();
   const defaultWarehouseIsPoBox = isPoBoxAddress(address);
   const {
     validateAddress
   } = useAddressPreference();
   const [codedErrors, setCodedErrors] = useState(errors);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [paymentError, setPaymentError] = useState(null);
+  const [isAdyenReady, setIsAdyenReady] = useState(false);
+  const [cardBrand, setCardBrand] = useState();
+  const sessionContext = useAuctanePaySession();
   const form = useForm({
     defaultValues:
     // If the warehouse address is a PO Box they cannot use it as their billing address
     defaultWarehouseIsPoBox ? {
       address: {
         countryCode: "US"
-      }
+      },
+      paymentMethod: "credit_card"
     } : {
       address: Object.assign(Object.assign({}, address), {
         countryCode: address.countryCode
-      })
+      }),
+      paymentMethod: "credit_card"
     },
-    resolver: validationResolver(getWalletSchema("emailOptional", "blackboxRequired"), ["creditCard"])
+    resolver: validationResolver(getWalletSchema("emailOptional", "blackboxRequired"))
   });
   const formSetValue = form.setValue;
   useBlackboxDetection({
@@ -65,24 +79,104 @@ const WalletForm = ({
     onSuccess: useCallback(bb => formSetValue("iovationBlackbox", bb), [formSetValue])
   });
   const watchAddress = form.watch("address");
+  const watchPaymentMethod = form.watch("paymentMethod");
+  const adyenOptions = useMemo(() => ({
+    showPayButton: false,
+    locale: locale || "en-US",
+    onChange: () => {
+      setPaymentError(null);
+    },
+    creditCardOptions: {
+      onLoad: event => {
+        if (event.iframesLoaded) {
+          setIsAdyenReady(true);
+        }
+      },
+      onBinLookup: event => {
+        var _a, _b;
+        // Some cards return multiple brands (e.g., ['star', 'visa']), so prioritize major brands
+        const majorBrands = ["visa", "mc", "amex", "discover"];
+        const brand = ((_a = event.detectedBrands) === null || _a === void 0 ? void 0 : _a.find(b => majorBrands.includes(b.toLowerCase()))) || ((_b = event.detectedBrands) === null || _b === void 0 ? void 0 : _b[0]);
+        setCardBrand(brand);
+      }
+    }
+  }), [locale]);
+  const {
+    adyenRef,
+    submit: adyenSubmit,
+    getSessionData
+  } = useFinancialService({
+    getAdyenSessionData: sessionContext.getSessionData,
+    paymentMethod: watchPaymentMethod || "credit_card",
+    options: adyenOptions
+  });
+  // Reset Adyen ready state when payment method changes
+  useEffect(() => {
+    setIsAdyenReady(false);
+  }, [watchPaymentMethod]);
   const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
     const payload = values;
-    yield validateAddress({
-      addresses: {
-        originAddress: payload.address
-      },
-      data: {
-        creditCard: payload.creditCard,
-        iovationBlackbox: payload.iovationBlackbox
-      },
-      onValid: validatedAddressesPayload => {
-        onSubmit({
-          address: validatedAddressesPayload.originAddress,
-          creditCard: payload.creditCard,
+    setIsSubmitting(true);
+    try {
+      yield validateAddress({
+        addresses: {
+          originAddress: payload.address
+        },
+        data: {
           iovationBlackbox: payload.iovationBlackbox
-        });
-      }
-    });
+        },
+        onValid: validatedAddressesPayload => {
+          const processPayment = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+              const walletPayload = {
+                address: validatedAddressesPayload.originAddress,
+                iovationBlackbox: payload.iovationBlackbox,
+                paymentMethod: payload.paymentMethod
+              };
+              if (payload.paymentMethod === "credit_card") {
+                // For credit card, await Adyen payment completion
+                const paymentResult = yield adyenSubmit();
+                if (!paymentResult.success) {
+                  // Payment failed - show error and allow retry
+                  setPaymentError(paymentResult.error || "Payment failed");
+                  form.reset(undefined, {
+                    keepValues: true
+                  });
+                  return;
+                }
+                // Payment succeeded - get session data and add to payload
+                const sessionData = getSessionData();
+                if (sessionData) {
+                  walletPayload.auctanePaySessionId = sessionData.id;
+                }
+                if (cardBrand) {
+                  walletPayload.cardBrand = cardBrand;
+                }
+              }
+              // Payment successful or non-credit-card method - proceed to next step
+              onSubmit(walletPayload);
+            } catch (error) {
+              // Payment processing error
+              const errorMessage = error instanceof Error ? error.message : "Payment processing failed";
+              setPaymentError(errorMessage);
+            } finally {
+              setIsSubmitting(false);
+            }
+          });
+          void processPayment();
+        }
+      });
+    } catch (error) {
+      // Address validation error
+      const errorMessage = error instanceof Error ? error.message : "An error occurred";
+      setCodedErrors([{
+        errorCode: "unspecified",
+        errorSource: "client",
+        errorType: "validation",
+        message: errorMessage
+      }]);
+      setIsSubmitting(false);
+    }
   }));
   const [editWalletAddressForm, isEditWalletAddressFormOpen, toggleIsEditWalletAddressFormOpen] = useNestedForm(EditWalletAddressForm, {
     address: watchAddress,
@@ -97,9 +191,9 @@ const WalletForm = ({
       children: jsxs("form", {
         id: "wallet-form",
         onSubmit: formLogger.capture(handleSubmit),
-        children: [jsx(GridChild, {
+        children: [jsxs(GridChild, {
           colSpan: 12,
-          children: !!(codedErrors === null || codedErrors === void 0 ? void 0 : codedErrors.length) && jsxs(Fragment, {
+          children: [!!(codedErrors === null || codedErrors === void 0 ? void 0 : codedErrors.length) && jsxs(Fragment, {
             children: [jsx(InlineNotification, {
               title: t("register-wallet:sections.notifications.error.title"),
               type: NotificationType.ERROR,
@@ -109,12 +203,47 @@ const WalletForm = ({
             }), jsx(Spacer, {
               multiplier: 2
             })]
+          }), paymentError && jsxs(Fragment, {
+            children: [jsx(InlineNotification, {
+              title: t("register-wallet:sections.notifications.error.title"),
+              type: NotificationType.ERROR,
+              children: paymentError
+            }), jsx(Spacer, {
+              multiplier: 2
+            })]
+          })]
+        }), jsx(GridChild, {
+          colSpan: 12,
+          children: jsx(Typography, {
+            variant: "subtitle1",
+            children: t("register-wallet:sections.paymentMethod.title")
           })
+        }), jsx(Spacer, {
+          multiplier: 1
         }), jsx(GridChild, {
           colSpan: 12,
-          children: jsx(BillingFields, {
-            form: form
+          children: jsx(PaymentMethodSelector, {
+            onChange: method => form.setValue("paymentMethod", method),
+            payByBankEnabled: (_b = (_a = getSessionData()) === null || _a === void 0 ? void 0 : _a.eligiblePaymentMethodTypes) === null || _b === void 0 ? void 0 : _b.includes("pay_by_bank_us"),
+            value: watchPaymentMethod || "credit_card"
           })
+        }), jsx(Spacer, {
+          multiplier: 2
+        }), jsxs(GridChild, {
+          colSpan: 12,
+          children: [!isAdyenReady && jsx("div", {
+            css: styles.loadingContainer,
+            children: jsx(Spinner, {
+              size: SpinnerSize.SIZE_LARGE
+            })
+          }), jsx("div", {
+            css: styles.adyenContainer,
+            "data-ready": isAdyenReady,
+            "data-testid": "adyen-div",
+            ref: adyenRef
+          })]
+        }), jsx(Spacer, {
+          multiplier: 2
         }), jsx(GridChild, {
           colSpan: 12,
           children: jsx(Typography, {
@@ -165,6 +294,7 @@ const WalletForm = ({
         children: jsx(SubmitButton, {
           control: form.control,
           form: "wallet-form",
+          isLoading: isSubmitting,
           variant: ButtonVariant.FILLED,
           children: t("actions.continue")
         })

package/dist/esm/components/forms/wallet-form/wallet-form.styles.js

@@ -6,6 +6,21 @@ const styles = createStyles({
   }),
   grid: theme => ({
     margin: scopeTheme(theme).spacing(1)
+  }),
+  loadingContainer: theme => ({
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: scopeTheme(theme).spacing(2),
+    paddingBottom: scopeTheme(theme).spacing(2)
+  }),
+  adyenContainer: () => ({
+    "&:not([data-ready='true'])": {
+      display: "none"
+    },
+    // Hide Adyen's "All fields are required" instruction text
+    "& .adyen-checkout-form-instruction": {
+      display: "none"
+    }
   })
 });
 

package/dist/esm/components/forms/wallet-form/wallet-schema.js

@@ -1,15 +1,9 @@
-import { __rest } from '../../../_virtual/_tslib.js';
-import { getExpirationYears } from '../../../utilities/date.js';
 import { isPoBox } from '../../../utilities/shipengine/address.js';
-import cardValidator from 'card-validator';
 import { isValidPhoneNumber } from 'libphonenumber-js/min';
 import { z } from 'zod';
 import { addressSchema, addressLine2Schema, addressLine1Schema } from '../address-form/address-schema.js';
 import { addressNameRegex, usStateCodes, postalCodeRegex } from '../../../constants/shipengine/address.js';
 
-const expirationYears = getExpirationYears(15);
-const creditCardTypes = ["visa", "mastercard", "american-express", "discover"];
-const expirationMonths = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
 const walletEmailSchemas = {
   emailOptional: addressSchema.shape.email,
   emailRequired: z.string().trim().email().min(1)
@@ -49,40 +43,11 @@ const getBillingAddressSchema = emailRequirement => {
     path: ["postalCode"]
   });
 };
-const creditCardSchema = z.object({
-  cvv: z.string().trim().refine(cvv => cardValidator.cvv(cvv, [3, 4]).isValid, "Invalid CVV"),
-  expiration: z.string().trim().refine(expiration => {
-    const [expirationMonth, expirationYear] = expiration.split("/");
-    return expirationMonths.includes(expirationMonth) && expirationYears.includes(expirationYear);
-  }, "schemaErrors.invalidExpirationDate"),
-  name: addressSchema.shape.name.refine(name => name.match(addressNameRegex), "schemaErrors.invalidAddressNameOnboarding"),
-  number: z.string().trim().refine(number => cardValidator.number(number).isValid, "Invalid card number").refine(number => {
-    var _a, _b;
-    return !((_a = cardValidator.number(number).card) === null || _a === void 0 ? void 0 : _a.type) || creditCardTypes.includes((_b = cardValidator.number(number).card) === null || _b === void 0 ? void 0 : _b.type);
-  }, "schemaErrors.invalidCreditCardType")
-}).transform(schema => {
-  var _a;
-  const {
-      cvv,
-      expiration
-    } = schema,
-    creditCard = __rest(schema, ["cvv", "expiration"]);
-  const creditCardVendor = (_a = cardValidator.number(creditCard.number).card) === null || _a === void 0 ? void 0 : _a.type;
-  const [expirationMonth, expirationYear] = expiration.split("/").map(v => parseInt(v, 10));
-  return {
-    cardNumber: creditCard.number,
-    cvv: cvv,
-    expirationMonth: expirationMonth,
-    expirationYear: expirationYear,
-    name: creditCard.name,
-    provider: creditCardVendor === "american-express" ? "american_express" : creditCardVendor
-  };
-});
 const getWalletSchema = (emailRequirement, blackboxRequirement) => {
   const billingAddressSchema = getBillingAddressSchema(emailRequirement);
   return z.object({
     address: billingAddressSchema,
-    creditCard: creditCardSchema,
+    paymentMethod: z.enum(["credit_card", "pay_by_bank_us"]).default("credit_card"),
     iovationBlackbox: walletBlackboxSchemas[blackboxRequirement]
   });
 };

package/dist/esm/components/payment/payment-method-selector/index.js

@@ -0,0 +1 @@
+export { PaymentMethodSelector } from './payment-method-selector.js';

package/dist/esm/components/payment/payment-method-selector/payment-method-selector.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { RadioGroup, Radio, Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { useTranslation } from 'react-i18next';
+import { styles } from './payment-method-selector.styles.js';
+
+const PaymentMethodSelector = ({
+  name = "paymentMethod",
+  onChange,
+  payByBankEnabled = false,
+  value
+}) => {
+  const {
+    t
+  } = useTranslation("register-wallet");
+  const paymentMethods = [{
+    value: "credit_card",
+    icon: IconNames.CREDIT_CARD,
+    label: t("sections.paymentMethod.creditCard")
+  }, payByBankEnabled ? {
+    value: "pay_by_bank_us",
+    icon: IconNames.BANK,
+    label: t("sections.paymentMethod.payByBank")
+  } : undefined];
+  return jsx("div", {
+    css: styles.paymentMethodSelector,
+    children: jsx(RadioGroup, {
+      name: name,
+      onChange: e => onChange(e.target.value),
+      value: value,
+      children: paymentMethods.map(method => {
+        return method !== undefined ? jsx("div", {
+          css: [styles.paymentMethodOption, value === method.value && styles.paymentMethodOptionSelected],
+          onClick: () => onChange(method.value),
+          children: jsx(Radio, {
+            checked: value === method.value,
+            readOnly: true,
+            value: method.value,
+            children: jsxs("div", {
+              css: styles.paymentMethodOptionContent,
+              children: [jsx(Icon, {
+                name: method.icon,
+                size: IconSize.SIZE_SMALL
+              }), method.label]
+            })
+          })
+        }, method.value) : null;
+      })
+    })
+  });
+};
+
+export { PaymentMethodSelector };

package/dist/esm/components/payment/payment-method-selector/payment-method-selector.styles.js

@@ -0,0 +1,56 @@
+import { createStyles, scopeTheme } from '../../../utilities/styles.js';
+
+const styles = createStyles({
+  paymentMethodSelector: () => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    "& .giger-radio-group": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px"
+    }
+  }),
+  paymentMethodOption: theme => ({
+    padding: scopeTheme(theme).spacing(2),
+    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
+    borderRadius: scopeTheme(theme).spacing(),
+    background: scopeTheme(theme).palette.white,
+    marginBottom: scopeTheme(theme).spacing(1),
+    transition: "all 0.2s ease",
+    cursor: "pointer",
+    "&:hover": {
+      borderColor: scopeTheme(theme).palette.primary.main
+    },
+    "& .giger-radio": {
+      margin: 0,
+      width: "100%",
+      pointerEvents: "none",
+      // Disable pointer events on radio to let div handle clicks
+      "& .giger-radio__container": {
+        width: "100%",
+        justifyContent: "flex-start"
+      },
+      "& .giger-radio__label": {
+        fontWeight: 500,
+        marginLeft: scopeTheme(theme).spacing(1),
+        flex: 1,
+        cursor: "pointer"
+      },
+      "& .giger-radio__input": {
+        pointerEvents: "auto" // Re-enable pointer events on the actual input
+      }
+    }
+  }),
+  paymentMethodOptionSelected: theme => ({
+    borderColor: scopeTheme(theme).palette.primary.main,
+    backgroundColor: scopeTheme(theme).palette.gray.megaLight
+  }),
+  paymentMethodOptionContent: () => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  })
+});
+
+export { styles };

package/dist/esm/contexts/auctane-pay-session-context.js

@@ -0,0 +1,155 @@
+import { __awaiter } from '../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useCreateAuctanePaySession } from '@shipengine/react-api';
+import { useState, useRef, useCallback, useMemo, createContext, useContext } from 'react';
+
+const SESSION_STORAGE_KEY = "auctane_pay_session";
+const storeSession = (session, expiresAt) => {
+  try {
+    const data = {
+      session,
+      expiresAt
+    };
+    sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(data));
+  } catch (error) {
+    console.warn("Failed to store session in sessionStorage:", error);
+  }
+};
+const retrieveStoredSession = () => {
+  try {
+    const stored = sessionStorage.getItem(SESSION_STORAGE_KEY);
+    if (!stored) return null;
+    const data = JSON.parse(stored);
+    return data;
+  } catch (error) {
+    console.warn("Failed to retrieve session from sessionStorage:", error);
+    return null;
+  }
+};
+const clearStoredSession = () => {
+  try {
+    sessionStorage.removeItem(SESSION_STORAGE_KEY);
+  } catch (error) {
+    console.warn("Failed to clear session from sessionStorage:", error);
+  }
+};
+const AuctanePaySessionContext = /*#__PURE__*/createContext(undefined);
+/**
+ * Provider that manages Adyen payment session creation and redirect handling.
+ * Each call to getSessionData() creates a fresh session - sessions are not cached
+ * to avoid reusing sessions after authorization.
+ *
+ * @example
+ * ```tsx
+ * <AuctanePaySessionProvider paymentPreferences={["add_funds", "subscription"]}>
+ *   <OnboardingWizard>
+ *     <FundingStep />
+ *   </OnboardingWizard>
+ * </AuctanePaySessionProvider>
+ * ```
+ */
+const AuctanePaySessionProvider = ({
+  children,
+  paymentPreferences = ["add_funds", "subscription"],
+  returnUrl
+}) => {
+  const [sessionError, setSessionError] = useState(null);
+  // Track the last created session for saveSessionForRedirect
+  const lastSessionRef = useRef(null);
+  const {
+    mutateAsync: createAdyenSession,
+    isLoading: isCreating
+  } = useCreateAuctanePaySession();
+  const createSession = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      setSessionError(null);
+      const cleanUrl = returnUrl || `${window.location.origin}${window.location.pathname}`;
+      const session = yield createAdyenSession({
+        paymentPreferences,
+        returnUrl: cleanUrl
+      });
+      if (session) {
+        const expiresAt = new Date(session.metadata.adyenExpiration).getTime();
+        lastSessionRef.current = {
+          session,
+          expiresAt
+        };
+      }
+      return session;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to create Adyen session");
+      setSessionError(error);
+      throw error;
+    }
+  }), [createAdyenSession, paymentPreferences, returnUrl]);
+  const getSessionData = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    // Always create a fresh session to avoid reusing sessions after authorization
+    return createSession();
+  }), [createSession]);
+  const clearSession = useCallback(() => {
+    lastSessionRef.current = null;
+    setSessionError(null);
+    clearStoredSession();
+  }, []);
+  const saveSessionForRedirect = useCallback(() => {
+    if (lastSessionRef.current) {
+      storeSession(lastSessionRef.current.session, lastSessionRef.current.expiresAt);
+    }
+  }, []);
+  const restoreSessionAfterRedirect = useCallback(() => {
+    const storedData = retrieveStoredSession();
+    if (!storedData) {
+      return null;
+    }
+    // Check if session is still valid
+    if (Date.now() >= storedData.expiresAt) {
+      clearStoredSession();
+      return null;
+    }
+    // Update lastSessionRef so saveSessionForRedirect can work if needed
+    lastSessionRef.current = storedData;
+    // Clear from storage after restoring (single-use)
+    clearStoredSession();
+    return storedData.session;
+  }, []);
+  const value = useMemo(() => ({
+    isCreating,
+    sessionError,
+    getSessionData,
+    clearSession,
+    saveSessionForRedirect,
+    restoreSessionAfterRedirect
+  }), [isCreating, sessionError, getSessionData, clearSession, saveSessionForRedirect, restoreSessionAfterRedirect]);
+  return jsx(AuctanePaySessionContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+/**
+ * Hook to access the Adyen payment session context
+ *
+ * @throws Error if used outside of AuctanePaySessionProvider
+ *
+ * @example
+ * ```tsx
+ * const WalletForm = () => {
+ *   const { getSessionData, sessionData } = useAuctanePaySession();
+ *
+ *   const { adyenRef, submit } = useFinancialService({
+ *     getAdyenSessionData: getSessionData,  // Uses cached session!
+ *     paymentMethod: "credit_card",
+ *   });
+ *
+ *   return <div ref={adyenRef} />;
+ * };
+ * ```
+ */
+const useAuctanePaySession = () => {
+  const context = useContext(AuctanePaySessionContext);
+  if (!context) {
+    throw new Error("useAuctanePaySession must be used within AuctanePaySessionProvider");
+  }
+  return context;
+};
+
+export { AuctanePaySessionProvider, useAuctanePaySession };

package/dist/esm/contexts/index.js

@@ -0,0 +1 @@
+export { AuctanePaySessionProvider, useAuctanePaySession } from './auctane-pay-session-context.js';

package/dist/esm/features/payment-method-settings/payment-method-settings.js

@@ -1,5 +1,6 @@
 import { __awaiter } from '../../_virtual/_tslib.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { AuctanePaySessionProvider } from '../../contexts/auctane-pay-session-context.js';
 import { useToggle } from '../../hooks/use-toggle.js';
 import { InlineNotification, NotificationType } from '@shipengine/giger';
 import { useUpdateFundingSource, useListFundingSources } from '@shipengine/react-api';
@@ -41,13 +42,13 @@ const PaymentMethodSettings = ({
     fundingSourceId,
     billingInfo
   } = (_a = fundingSources === null || fundingSources === void 0 ? void 0 : fundingSources[0]) !== null && _a !== void 0 ? _a : {};
-  const handleUpdateBilling = (billingInfo, creditCardInfo) => __awaiter(void 0, void 0, void 0, function* () {
+  const handleUpdateBilling = (billingInfo, auctanePayInfo) => __awaiter(void 0, void 0, void 0, function* () {
     if (fundingSourceId) {
       try {
         setIsUpdatingBilling(true);
         yield updateBilling({
           billingInfo,
-          creditCardInfo,
+          auctanePayInfo,
           fundingSourceId
         });
         yield refetchFundingSources();
@@ -60,7 +61,7 @@ const PaymentMethodSettings = ({
       }
     }
   });
-  if (showEditBilling) return jsxs(Fragment, {
+  if (showEditBilling) return jsxs(AuctanePaySessionProvider, {
     children: [jsx(EditBillingForm, {
       billingInfo: billingInfo,
       isLoading: isUpdatingBilling,