@flopay/react 0.5.18 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -39,11 +39,9 @@ __export(index_exports, {
39
39
  FloPayAutomaticPaymentButton: () => FloPayAutomaticPaymentButton,
40
40
  FloPayCheckout: () => FloPayCheckout,
41
41
  FloPayProvider: () => FloPayProvider,
42
- InAppBrowserNotice: () => InAppBrowserNotice,
43
42
  PayPalButton: () => PayPalButton,
44
43
  PaymentElement: () => PaymentElement,
45
44
  SplitCardForm: () => SplitCardForm,
46
- isInAppBrowser: () => isInAppBrowser,
47
45
  useCheckout: () => useCheckout,
48
46
  useElements: () => useElements,
49
47
  useFloPay: () => useFloPay,
@@ -153,7 +151,7 @@ function FloPayProvider({
153
151
  }
154
152
 
155
153
  // src/flopay-checkout.tsx
156
- var import_react9 = __toESM(require("react"), 1);
154
+ var import_react8 = __toESM(require("react"), 1);
157
155
  var import_js3 = require("@flopay/js");
158
156
  var import_shared7 = require("@flopay/shared");
159
157
 
@@ -288,7 +286,7 @@ var AddressElement = createElementComponent("address", "AddressElement");
288
286
  var import_react_stripe_js = require("@stripe/react-stripe-js");
289
287
  var import_shared4 = require("@flopay/shared");
290
288
  var import_js = require("@flopay/js");
291
- var import_react8 = require("react");
289
+ var import_react7 = require("react");
292
290
 
293
291
  // src/hooks.ts
294
292
  var import_react5 = require("react");
@@ -661,9 +659,6 @@ function wasSessionRecentlyCompleted(sessionId) {
661
659
  }
662
660
  }
663
661
 
664
- // src/in-app-browser-notice.tsx
665
- var import_react7 = require("react");
666
-
667
662
  // src/in-app-browser.ts
668
663
  function isInAppBrowser(userAgent) {
669
664
  const ua = userAgent ?? (typeof navigator !== "undefined" ? navigator.userAgent : "");
@@ -679,101 +674,9 @@ function isInAppBrowser(userAgent) {
679
674
  return false;
680
675
  }
681
676
 
682
- // src/in-app-browser-notice.tsx
683
- var import_jsx_runtime5 = require("react/jsx-runtime");
684
- var DEFAULT_MESSAGE = "PayPal and some digital wallets aren't supported in this browser. Open this page in your device's browser to use them.";
685
- function InAppBrowserNotice({
686
- message,
687
- openButtonLabel,
688
- copiedButtonLabel,
689
- containerStyle,
690
- buttonStyle,
691
- onOpenInBrowser
692
- }) {
693
- const [copied, setCopied] = (0, import_react7.useState)(false);
694
- const [inAppBrowser, setInAppBrowser] = (0, import_react7.useState)(false);
695
- (0, import_react7.useEffect)(() => {
696
- setInAppBrowser(isInAppBrowser());
697
- }, []);
698
- const defaultOpenLabel = inAppBrowser ? "Copy link" : "Open in browser";
699
- const defaultCopiedLabel = inAppBrowser ? "Link copied \u2014 open Safari/Chrome and paste" : "Link copied \u2014 paste in your browser";
700
- const effectiveOpenLabel = openButtonLabel ?? defaultOpenLabel;
701
- const effectiveCopiedLabel = copiedButtonLabel ?? defaultCopiedLabel;
702
- const handleClick = (0, import_react7.useCallback)(async () => {
703
- if (typeof window === "undefined") return;
704
- const url = window.location.href;
705
- let opened = false;
706
- if (!inAppBrowser) {
707
- try {
708
- const win = window.open(url, "_blank");
709
- opened = !!win;
710
- } catch {
711
- opened = false;
712
- }
713
- }
714
- let didCopy = false;
715
- if (!opened) {
716
- if (typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function") {
717
- try {
718
- await navigator.clipboard.writeText(url);
719
- didCopy = true;
720
- setCopied(true);
721
- } catch {
722
- didCopy = false;
723
- }
724
- }
725
- }
726
- onOpenInBrowser?.({ opened, copied: didCopy });
727
- }, [inAppBrowser, onOpenInBrowser]);
728
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
729
- "div",
730
- {
731
- role: "status",
732
- "data-testid": "flopay-in-app-browser-notice",
733
- style: {
734
- marginTop: "0.75rem",
735
- padding: "0.75rem 0.875rem",
736
- background: "#FFFBEB",
737
- border: "1px solid #FDE68A",
738
- borderRadius: 8,
739
- color: "#92400E",
740
- fontSize: "0.85rem",
741
- lineHeight: 1.4,
742
- display: "flex",
743
- flexDirection: "column",
744
- gap: "0.5rem",
745
- ...containerStyle
746
- },
747
- children: [
748
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: message ?? DEFAULT_MESSAGE }),
749
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
750
- "button",
751
- {
752
- type: "button",
753
- onClick: handleClick,
754
- style: {
755
- alignSelf: "flex-start",
756
- padding: "0.4rem 0.75rem",
757
- background: "transparent",
758
- border: "1px solid #92400E",
759
- borderRadius: 6,
760
- color: "#92400E",
761
- fontSize: "0.85rem",
762
- fontWeight: 600,
763
- cursor: "pointer",
764
- ...buttonStyle
765
- },
766
- children: copied ? effectiveCopiedLabel : effectiveOpenLabel
767
- }
768
- )
769
- ]
770
- }
771
- );
772
- }
773
-
774
677
  // src/split-card-form.tsx
775
678
  var import_shared5 = require("@flopay/shared");
776
- var import_jsx_runtime6 = require("react/jsx-runtime");
679
+ var import_jsx_runtime5 = require("react/jsx-runtime");
777
680
  var WALLET_RESUME_KEY = "flopay_wallet_resume";
778
681
  var FLOPAY_KEYFRAMES = `
779
682
  @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -815,7 +718,7 @@ function normalizeBeforeButtonClickError(method, err) {
815
718
  );
816
719
  }
817
720
  function FloPayKeyframes() {
818
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: FLOPAY_KEYFRAMES });
721
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: FLOPAY_KEYFRAMES });
819
722
  }
820
723
  function toCssSize(value) {
821
724
  if (typeof value === "number") return `${value}px`;
@@ -836,8 +739,8 @@ function ExpressCheckoutReadySwap({
836
739
  children
837
740
  }) {
838
741
  if (state === "unavailable" || state === "load_error") return null;
839
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
840
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
742
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
743
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
841
744
  "div",
842
745
  {
843
746
  "data-testid": placeholderTestId,
@@ -856,7 +759,7 @@ function ExpressCheckoutReadySwap({
856
759
  }
857
760
  }
858
761
  ),
859
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
762
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
860
763
  "div",
861
764
  {
862
765
  style: {
@@ -871,9 +774,12 @@ function ExpressCheckoutReadySwap({
871
774
  )
872
775
  ] });
873
776
  }
874
- var SplitCardForm = (0, import_react8.forwardRef)(
777
+ function isExpressCheckoutRowVisible(state) {
778
+ return state !== "unavailable" && state !== "load_error";
779
+ }
780
+ var SplitCardForm = (0, import_react7.forwardRef)(
875
781
  function SplitCardForm2(props, ref) {
876
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
782
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
877
783
  }
878
784
  );
879
785
  function PayPalButtonInner({
@@ -890,19 +796,15 @@ function PayPalButtonInner({
890
796
  }) {
891
797
  const stripe = (0, import_react_stripe_js.useStripe)();
892
798
  const elements = (0, import_react_stripe_js.useElements)();
893
- const [loadState, setLoadState] = (0, import_react8.useState)("loading");
894
- const onLoadStateChangeRef = (0, import_react8.useRef)(onLoadStateChange);
895
- (0, import_react8.useEffect)(() => {
896
- onLoadStateChangeRef.current = onLoadStateChange;
897
- }, [onLoadStateChange]);
898
- (0, import_react8.useEffect)(() => {
899
- onLoadStateChangeRef.current?.(loadState);
900
- }, [loadState]);
901
- const [submitting, setSubmitting] = (0, import_react8.useState)(false);
902
- const paypalResumeAttempted = (0, import_react8.useRef)(false);
903
- const beforeClickRef = (0, import_react8.useRef)(null);
799
+ const [loadState, setLoadState] = (0, import_react7.useState)("loading");
800
+ (0, import_react7.useEffect)(() => {
801
+ onLoadStateChange?.(loadState);
802
+ }, [loadState, onLoadStateChange]);
803
+ const [submitting, setSubmitting] = (0, import_react7.useState)(false);
804
+ const paypalResumeAttempted = (0, import_react7.useRef)(false);
805
+ const beforeClickRef = (0, import_react7.useRef)(null);
904
806
  const baseUrl = billingApiUrl.replace(/\/+$/, "");
905
- (0, import_react8.useEffect)(() => {
807
+ (0, import_react7.useEffect)(() => {
906
808
  if (!stripe || paypalResumeAttempted.current) return;
907
809
  const params = new URLSearchParams(window.location.search);
908
810
  const paymentIntentId = params.get("payment_intent");
@@ -949,7 +851,7 @@ function PayPalButtonInner({
949
851
  }
950
852
  })();
951
853
  }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
952
- const handlePayPalClick = (0, import_react8.useCallback)(async (event) => {
854
+ const handlePayPalClick = (0, import_react7.useCallback)(async (event) => {
953
855
  if (isProcessing || submitting) {
954
856
  event.reject();
955
857
  return;
@@ -967,7 +869,7 @@ function PayPalButtonInner({
967
869
  onButtonClick?.("paypal");
968
870
  event.resolve();
969
871
  }, [isProcessing, onButtonClick, runBeforeButtonClick, submitting]);
970
- const handlePayPalConfirm = (0, import_react8.useCallback)(async (event) => {
872
+ const handlePayPalConfirm = (0, import_react7.useCallback)(async (event) => {
971
873
  if (!stripe || !elements) return;
972
874
  let prepared = beforeClickRef.current;
973
875
  beforeClickRef.current = null;
@@ -1059,8 +961,8 @@ function PayPalButtonInner({
1059
961
  setSubmitting(false);
1060
962
  }
1061
963
  }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
1062
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1063
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
964
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
965
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1064
966
  import_react_stripe_js.ExpressCheckoutElement,
1065
967
  {
1066
968
  onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
@@ -1085,7 +987,7 @@ function PayPalButtonInner({
1085
987
  }
1086
988
  }
1087
989
  ) }),
1088
- submitting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: "processing" })
990
+ submitting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: "processing" })
1089
991
  ] });
1090
992
  }
1091
993
  function WalletButtonInner({
@@ -1103,19 +1005,15 @@ function WalletButtonInner({
1103
1005
  }) {
1104
1006
  const stripe = (0, import_react_stripe_js.useStripe)();
1105
1007
  const elements = (0, import_react_stripe_js.useElements)();
1106
- const [loadState, setLoadState] = (0, import_react8.useState)("loading");
1107
- const onLoadStateChangeRef = (0, import_react8.useRef)(onLoadStateChange);
1108
- (0, import_react8.useEffect)(() => {
1109
- onLoadStateChangeRef.current = onLoadStateChange;
1110
- }, [onLoadStateChange]);
1111
- (0, import_react8.useEffect)(() => {
1112
- onLoadStateChangeRef.current?.(loadState);
1113
- }, [loadState]);
1114
- const [submitting, setSubmitting] = (0, import_react8.useState)(false);
1008
+ const [loadState, setLoadState] = (0, import_react7.useState)("loading");
1009
+ (0, import_react7.useEffect)(() => {
1010
+ onLoadStateChange?.(loadState);
1011
+ }, [loadState, onLoadStateChange]);
1012
+ const [submitting, setSubmitting] = (0, import_react7.useState)(false);
1115
1013
  const baseUrl = billingApiUrl.replace(/\/+$/, "");
1116
- const lastWalletMethodRef = (0, import_react8.useRef)("card");
1117
- const beforeClickRef = (0, import_react8.useRef)(null);
1118
- const handleWalletConfirm = (0, import_react8.useCallback)(
1014
+ const lastWalletMethodRef = (0, import_react7.useRef)("card");
1015
+ const beforeClickRef = (0, import_react7.useRef)(null);
1016
+ const handleWalletConfirm = (0, import_react7.useCallback)(
1119
1017
  async (event) => {
1120
1018
  if (!stripe || !elements) return;
1121
1019
  const walletType = event.expressPaymentType;
@@ -1204,8 +1102,8 @@ function WalletButtonInner({
1204
1102
  },
1205
1103
  [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
1206
1104
  );
1207
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1208
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1105
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
1106
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1209
1107
  import_react_stripe_js.ExpressCheckoutElement,
1210
1108
  {
1211
1109
  onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
@@ -1244,7 +1142,7 @@ function WalletButtonInner({
1244
1142
  }
1245
1143
  }
1246
1144
  ) }),
1247
- submitting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: "processing" })
1145
+ submitting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: "processing" })
1248
1146
  ] });
1249
1147
  }
1250
1148
  function SplitCardFormInner({
@@ -1301,49 +1199,49 @@ function SplitCardFormInner({
1301
1199
  const flopay = useFloPay();
1302
1200
  const paypalFlopay = usePayPalFloPay();
1303
1201
  const elements = useElements();
1304
- const checkout = (0, import_react8.useContext)(CheckoutContext);
1202
+ const checkout = (0, import_react7.useContext)(CheckoutContext);
1305
1203
  const contextBillingUrl = useBillingApiUrl();
1306
- const [processing, setProcessing] = (0, import_react8.useState)(false);
1307
- const [error, setError] = (0, import_react8.useState)(null);
1308
- const [is3DSActive, setIs3DSActive] = (0, import_react8.useState)(false);
1309
- const [selectedCountry, setSelectedCountry] = (0, import_react8.useState)(countryProp ?? "US");
1310
- const [zipCode, setZipCode] = (0, import_react8.useState)(zipProp ?? "");
1311
- const [addressLine1, setAddressLine1] = (0, import_react8.useState)(addressLine1Prop ?? "");
1312
- const [addressLine2, setAddressLine2] = (0, import_react8.useState)(addressLine2Prop ?? "");
1313
- const [city, setCity] = (0, import_react8.useState)(cityProp ?? "");
1314
- const [stateValue, setStateValue] = (0, import_react8.useState)(stateProp ?? "");
1315
- const [accountPatch, setAccountPatch] = (0, import_react8.useState)({});
1316
- const zipCodeRef = (0, import_react8.useRef)(zipProp ?? "");
1317
- const selectedCountryRef = (0, import_react8.useRef)(countryProp ?? "US");
1318
- const addressLine1Ref = (0, import_react8.useRef)(addressLine1Prop ?? "");
1319
- const addressLine2Ref = (0, import_react8.useRef)(addressLine2Prop ?? "");
1320
- const cityRef = (0, import_react8.useRef)(cityProp ?? "");
1321
- const stateRef = (0, import_react8.useRef)(stateProp ?? "");
1322
- const avsConfig = (0, import_react8.useMemo)(() => (0, import_shared4.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
1204
+ const [processing, setProcessing] = (0, import_react7.useState)(false);
1205
+ const [error, setError] = (0, import_react7.useState)(null);
1206
+ const [is3DSActive, setIs3DSActive] = (0, import_react7.useState)(false);
1207
+ const [selectedCountry, setSelectedCountry] = (0, import_react7.useState)(countryProp ?? "US");
1208
+ const [zipCode, setZipCode] = (0, import_react7.useState)(zipProp ?? "");
1209
+ const [addressLine1, setAddressLine1] = (0, import_react7.useState)(addressLine1Prop ?? "");
1210
+ const [addressLine2, setAddressLine2] = (0, import_react7.useState)(addressLine2Prop ?? "");
1211
+ const [city, setCity] = (0, import_react7.useState)(cityProp ?? "");
1212
+ const [stateValue, setStateValue] = (0, import_react7.useState)(stateProp ?? "");
1213
+ const [accountPatch, setAccountPatch] = (0, import_react7.useState)({});
1214
+ const zipCodeRef = (0, import_react7.useRef)(zipProp ?? "");
1215
+ const selectedCountryRef = (0, import_react7.useRef)(countryProp ?? "US");
1216
+ const addressLine1Ref = (0, import_react7.useRef)(addressLine1Prop ?? "");
1217
+ const addressLine2Ref = (0, import_react7.useRef)(addressLine2Prop ?? "");
1218
+ const cityRef = (0, import_react7.useRef)(cityProp ?? "");
1219
+ const stateRef = (0, import_react7.useRef)(stateProp ?? "");
1220
+ const avsConfig = (0, import_react7.useMemo)(() => (0, import_shared4.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
1323
1221
  const enableAVS = avsConfig !== null;
1324
- const [viewState, setViewState] = (0, import_react8.useState)(initialCardOpen ? "card" : "buttons");
1222
+ const [viewState, setViewState] = (0, import_react7.useState)(initialCardOpen ? "card" : "buttons");
1325
1223
  const showCardForm = viewState === "expanding" || viewState === "card";
1326
1224
  const TRANSITION_MS = 280;
1327
- const expandToCard = (0, import_react8.useCallback)(() => {
1225
+ const expandToCard = (0, import_react7.useCallback)(() => {
1328
1226
  setViewState("expanding");
1329
1227
  setTimeout(() => setViewState("card"), TRANSITION_MS);
1330
1228
  }, []);
1331
- const collapseToButtons = (0, import_react8.useCallback)(() => {
1229
+ const collapseToButtons = (0, import_react7.useCallback)(() => {
1332
1230
  setViewState("collapsing");
1333
1231
  setTimeout(() => setViewState("buttons"), TRANSITION_MS);
1334
1232
  }, []);
1335
- (0, import_react8.useEffect)(() => {
1233
+ (0, import_react7.useEffect)(() => {
1336
1234
  if (layout === "buttons" && initialCardOpen) {
1337
1235
  setViewState("card");
1338
1236
  }
1339
1237
  }, [layout, initialCardOpen]);
1340
- const [fullName, setFullName] = (0, import_react8.useState)("");
1341
- const [formReady, setFormReady] = (0, import_react8.useState)(false);
1342
- const [overlayStatus, setOverlayStatus] = (0, import_react8.useState)(null);
1343
- const processingRef = (0, import_react8.useRef)(false);
1238
+ const [fullName, setFullName] = (0, import_react7.useState)("");
1239
+ const [formReady, setFormReady] = (0, import_react7.useState)(false);
1240
+ const [overlayStatus, setOverlayStatus] = (0, import_react7.useState)(null);
1241
+ const processingRef = (0, import_react7.useRef)(false);
1344
1242
  const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
1345
1243
  const displayError = externalError ?? error;
1346
- const bStyles = (0, import_react8.useMemo)(() => {
1244
+ const bStyles = (0, import_react7.useMemo)(() => {
1347
1245
  const base = (0, import_shared4.resolveButtonsLayoutTheme)(buttonsTheme);
1348
1246
  if (!buttonsStylesOverride) return base;
1349
1247
  return {
@@ -1361,7 +1259,7 @@ function SplitCardFormInner({
1361
1259
  const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
1362
1260
  const isSelfContained = !onTokenizedBody;
1363
1261
  const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
1364
- const resolvedAccount = (0, import_react8.useMemo)(() => mergeAccountPatch({
1262
+ const resolvedAccount = (0, import_react7.useMemo)(() => mergeAccountPatch({
1365
1263
  userId,
1366
1264
  email,
1367
1265
  firstName,
@@ -1369,62 +1267,63 @@ function SplitCardFormInner({
1369
1267
  country: countryProp,
1370
1268
  zip: zipProp
1371
1269
  }, accountPatch), [userId, email, firstName, lastName, countryProp, zipProp, accountPatch]);
1372
- const stripeInstance = (0, import_react8.useMemo)(() => {
1270
+ const stripeInstance = (0, import_react7.useMemo)(() => {
1373
1271
  if (!flopay) return null;
1374
1272
  return flopay.getRawProvider();
1375
1273
  }, [flopay]);
1376
- const paypalStripeInstance = (0, import_react8.useMemo)(() => {
1274
+ const paypalStripeInstance = (0, import_react7.useMemo)(() => {
1377
1275
  if (!paypalFlopay) return null;
1378
1276
  return paypalFlopay.getRawProvider();
1379
1277
  }, [paypalFlopay]);
1380
1278
  const amountInCents = totalAmount || 100;
1381
- const walletOptions = (0, import_react8.useMemo)(() => ({
1279
+ const walletOptions = (0, import_react7.useMemo)(() => ({
1382
1280
  mode: "payment",
1383
1281
  amount: amountInCents,
1384
1282
  currency: currency.toLowerCase(),
1385
1283
  paymentMethodCreation: "manual",
1386
1284
  captureMethod: "manual"
1387
1285
  }), [amountInCents, currency]);
1388
- const paypalOptions = (0, import_react8.useMemo)(() => ({
1286
+ const paypalOptions = (0, import_react7.useMemo)(() => ({
1389
1287
  mode: "payment",
1390
1288
  amount: amountInCents,
1391
1289
  currency: currency.toLowerCase(),
1392
1290
  captureMethod: "manual",
1393
1291
  setupFutureUsage: "off_session"
1394
1292
  }), [amountInCents, currency]);
1395
- const updateError = (0, import_react8.useCallback)(
1293
+ const updateError = (0, import_react7.useCallback)(
1396
1294
  (err) => {
1397
1295
  setError(err);
1398
1296
  onErrorChange?.(err);
1399
1297
  },
1400
1298
  [onErrorChange]
1401
1299
  );
1402
- const emitDecline = (0, import_react8.useCallback)(
1300
+ const emitDecline = (0, import_react7.useCallback)(
1403
1301
  (method, input, overrides) => {
1404
1302
  onDecline?.(buildDeclineEvent(method, input, overrides));
1405
1303
  },
1406
1304
  [onDecline]
1407
1305
  );
1408
1306
  const showWallets = showApplePay || showGooglePay;
1409
- const [paypalLoadState, setPaypalLoadState] = (0, import_react8.useState)("loading");
1410
- const [walletLoadState, setWalletLoadState] = (0, import_react8.useState)("loading");
1411
- const [inAppBrowserDetected, setInAppBrowserDetected] = (0, import_react8.useState)(false);
1412
- (0, import_react8.useEffect)(() => {
1307
+ const [paypalLoadState, setPaypalLoadState] = (0, import_react7.useState)("loading");
1308
+ const [walletLoadState, setWalletLoadState] = (0, import_react7.useState)("loading");
1309
+ const [inAppBrowserDetected, setInAppBrowserDetected] = (0, import_react7.useState)();
1310
+ (0, import_react7.useEffect)(() => {
1413
1311
  setInAppBrowserDetected(isInAppBrowser());
1414
1312
  }, []);
1415
- const expectedPayPal = showPayPal && !!paypalStripeInstance;
1416
- const expectedWallets = showWallets && !!stripeInstance;
1417
- const paypalLoadFailed = expectedPayPal && (paypalLoadState === "load_error" || paypalLoadState === "unavailable");
1418
- const walletsLoadFailed = expectedWallets && walletLoadState === "load_error";
1419
- const showInAppBrowserNotice = (expectedPayPal || expectedWallets) && (inAppBrowserDetected || paypalLoadFailed || walletsLoadFailed);
1420
- const handleNameChange = (0, import_react8.useCallback)((value) => {
1313
+ const shouldShowPayPal = showPayPal && inAppBrowserDetected === false;
1314
+ const shouldShowWallets = showWallets && inAppBrowserDetected === false;
1315
+ const shouldRenderPayPal = shouldShowPayPal && !!paypalStripeInstance;
1316
+ const shouldRenderWallets = shouldShowWallets && !!stripeInstance;
1317
+ const shouldDisplayPayPalRow = shouldRenderPayPal && isExpressCheckoutRowVisible(paypalLoadState);
1318
+ const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
1319
+ const handleNameChange = (0, import_react7.useCallback)((value) => {
1421
1320
  setFullName(value);
1422
1321
  onFullNameChange?.(value);
1423
1322
  const parts = value.trim().split(/\s+/);
1424
1323
  onFirstNameChange?.(parts[0] ?? "");
1425
1324
  onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
1426
1325
  }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
1427
- const applyInlineSessionPatch = (0, import_react8.useCallback)(
1326
+ const applyInlineSessionPatch = (0, import_react7.useCallback)(
1428
1327
  (patch, method) => {
1429
1328
  if (!checkout.applyInlineSessionPatch) {
1430
1329
  return Promise.resolve({ error: null, sessionId });
@@ -1441,7 +1340,7 @@ function SplitCardFormInner({
1441
1340
  },
1442
1341
  [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
1443
1342
  );
1444
- const runBeforeButtonClick = (0, import_react8.useCallback)(async (method) => {
1343
+ const runBeforeButtonClick = (0, import_react7.useCallback)(async (method) => {
1445
1344
  if (!onBeforeButtonClick) return { proceed: true };
1446
1345
  try {
1447
1346
  const result = await onBeforeButtonClick({
@@ -1477,7 +1376,7 @@ function SplitCardFormInner({
1477
1376
  return { proceed: false };
1478
1377
  }
1479
1378
  }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
1480
- const processPaymentInternal = (0, import_react8.useCallback)(
1379
+ const processPaymentInternal = (0, import_react7.useCallback)(
1481
1380
  async (tokenizedBody, overrides) => {
1482
1381
  if (processingRef.current) return;
1483
1382
  processingRef.current = true;
@@ -1661,7 +1560,7 @@ function SplitCardFormInner({
1661
1560
  },
1662
1561
  [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
1663
1562
  );
1664
- const dispatchTokenizedBody = (0, import_react8.useCallback)(
1563
+ const dispatchTokenizedBody = (0, import_react7.useCallback)(
1665
1564
  (tokenizedBody, overrides) => {
1666
1565
  if (onTokenizedBody) {
1667
1566
  onTokenizedBody(tokenizedBody);
@@ -1671,7 +1570,7 @@ function SplitCardFormInner({
1671
1570
  },
1672
1571
  [onTokenizedBody, processPaymentInternal]
1673
1572
  );
1674
- (0, import_react8.useImperativeHandle)(innerRef, () => ({
1573
+ (0, import_react7.useImperativeHandle)(innerRef, () => ({
1675
1574
  async handleNextAction(secret) {
1676
1575
  if (!flopay) return;
1677
1576
  setIs3DSActive(true);
@@ -1698,7 +1597,7 @@ function SplitCardFormInner({
1698
1597
  }
1699
1598
  }
1700
1599
  }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
1701
- (0, import_react8.useEffect)(() => {
1600
+ (0, import_react7.useEffect)(() => {
1702
1601
  if (typeof window === "undefined") return;
1703
1602
  const stored = localStorage.getItem(WALLET_RESUME_KEY);
1704
1603
  if (!stored) return;
@@ -1716,7 +1615,7 @@ function SplitCardFormInner({
1716
1615
  localStorage.removeItem(WALLET_RESUME_KEY);
1717
1616
  }
1718
1617
  }, [sessionId, dispatchTokenizedBody]);
1719
- const handleSubmit = (0, import_react8.useCallback)(
1618
+ const handleSubmit = (0, import_react7.useCallback)(
1720
1619
  async (e) => {
1721
1620
  e.preventDefault();
1722
1621
  if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -1858,7 +1757,7 @@ function SplitCardFormInner({
1858
1757
  );
1859
1758
  const isReady = flopay !== null && elements !== null;
1860
1759
  if (!isReady) {
1861
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
1760
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
1862
1761
  }
1863
1762
  const isButtons = layout === "buttons";
1864
1763
  const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -1901,7 +1800,7 @@ function SplitCardFormInner({
1901
1800
  invalid: { color: "#ef4444" }
1902
1801
  }
1903
1802
  };
1904
- const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
1803
+ const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
1905
1804
  backgroundColor: cardBg,
1906
1805
  borderRadius: "8px",
1907
1806
  padding: isButtons ? "0" : "1rem",
@@ -1909,7 +1808,7 @@ function SplitCardFormInner({
1909
1808
  ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
1910
1809
  ...sharedInputPlaceholderVars
1911
1810
  }, children: [
1912
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
1811
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
1913
1812
  .flopay-shared-input::placeholder {
1914
1813
  color: var(--flopay-input-placeholder-color);
1915
1814
  opacity: 1;
@@ -1918,12 +1817,12 @@ function SplitCardFormInner({
1918
1817
  font-weight: var(--flopay-input-font-weight);
1919
1818
  }
1920
1819
  ` }),
1921
- isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
1820
+ isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
1922
1821
  display: "flex",
1923
1822
  alignItems: "center",
1924
1823
  padding: "0.75rem 0 0.625rem"
1925
1824
  }, children: [
1926
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1825
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1927
1826
  "button",
1928
1827
  {
1929
1828
  type: "button",
@@ -1945,7 +1844,7 @@ function SplitCardFormInner({
1945
1844
  },
1946
1845
  "aria-label": "Back to payment methods",
1947
1846
  children: [
1948
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
1847
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
1949
1848
  display: "inline-flex",
1950
1849
  alignItems: "center",
1951
1850
  justifyContent: "center",
@@ -1955,12 +1854,12 @@ function SplitCardFormInner({
1955
1854
  backgroundColor: "#f3f4f6",
1956
1855
  transition: "background-color 0.15s",
1957
1856
  ...bStyles.backButtonIcon
1958
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
1959
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
1857
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
1858
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
1960
1859
  ]
1961
1860
  }
1962
1861
  ),
1963
- hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1862
+ hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1964
1863
  flex: 1,
1965
1864
  textAlign: "center",
1966
1865
  fontWeight: 600,
@@ -1968,18 +1867,18 @@ function SplitCardFormInner({
1968
1867
  color: "#262833",
1969
1868
  paddingRight: 80,
1970
1869
  ...bStyles.title
1971
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) })
1870
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) })
1972
1871
  ] }),
1973
- !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
1974
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1872
+ !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
1873
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1975
1874
  backgroundColor: cardInputBg,
1976
1875
  border: `1px solid ${resolvedBorder}`,
1977
1876
  borderTopLeftRadius: "8px",
1978
1877
  borderTopRightRadius: "8px",
1979
1878
  padding: "10px"
1980
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
1981
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
1982
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1879
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
1880
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex" }, children: [
1881
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1983
1882
  flex: 1,
1984
1883
  backgroundColor: cardInputBg,
1985
1884
  border: `1px solid ${resolvedBorder}`,
@@ -1987,23 +1886,23 @@ function SplitCardFormInner({
1987
1886
  borderRight: "none",
1988
1887
  borderBottomLeftRadius: "8px",
1989
1888
  padding: "10px"
1990
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
1991
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1889
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
1890
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1992
1891
  flex: 1,
1993
1892
  backgroundColor: cardInputBg,
1994
1893
  border: `1px solid ${resolvedBorder}`,
1995
1894
  borderTop: "none",
1996
1895
  borderBottomRightRadius: "8px",
1997
1896
  padding: "10px"
1998
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardCvcElement, { options: stripeElementStyle }) })
1897
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardCvcElement, { options: stripeElementStyle }) })
1999
1898
  ] }),
2000
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1899
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2001
1900
  backgroundColor: cardInputBg,
2002
1901
  border: `1px solid ${resolvedBorder}`,
2003
1902
  borderRadius: "8px",
2004
1903
  marginTop: "0.5rem",
2005
1904
  padding: "10px"
2006
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1905
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2007
1906
  "input",
2008
1907
  {
2009
1908
  className: "flopay-shared-input",
@@ -2042,8 +1941,8 @@ function SplitCardFormInner({
2042
1941
  ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
2043
1942
  });
2044
1943
  const stateOpts = (0, import_shared4.getStateOptions)(cc);
2045
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
2046
- (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1944
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
1945
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_1, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2047
1946
  "input",
2048
1947
  {
2049
1948
  className: "flopay-shared-input",
@@ -2060,7 +1959,7 @@ function SplitCardFormInner({
2060
1959
  style: inputFieldStyle()
2061
1960
  }
2062
1961
  ) }),
2063
- (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1962
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.address_line_2, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2064
1963
  "input",
2065
1964
  {
2066
1965
  className: "flopay-shared-input",
@@ -2076,12 +1975,12 @@ function SplitCardFormInner({
2076
1975
  style: inputFieldStyle()
2077
1976
  }
2078
1977
  ) }),
2079
- ((0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
1978
+ ((0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
2080
1979
  display: "flex",
2081
1980
  gap: "0",
2082
1981
  marginTop: "0.5rem"
2083
1982
  }, children: [
2084
- (0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1983
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2085
1984
  flex: 1,
2086
1985
  backgroundColor: cardInputBg,
2087
1986
  border: `1px solid ${resolvedBorder}`,
@@ -2090,7 +1989,7 @@ function SplitCardFormInner({
2090
1989
  borderBottomLeftRadius: "8px",
2091
1990
  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
2092
1991
  ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
2093
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1992
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2094
1993
  "input",
2095
1994
  {
2096
1995
  className: "flopay-shared-input",
@@ -2107,7 +2006,7 @@ function SplitCardFormInner({
2107
2006
  style: inputFieldStyle()
2108
2007
  }
2109
2008
  ) }),
2110
- (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2009
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2111
2010
  flex: 1,
2112
2011
  backgroundColor: cardInputBg,
2113
2012
  border: `1px solid ${resolvedBorder}`,
@@ -2116,7 +2015,7 @@ function SplitCardFormInner({
2116
2015
  borderBottomRightRadius: "8px",
2117
2016
  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
2118
2017
  ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
2119
- }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2018
+ }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2120
2019
  "select",
2121
2020
  {
2122
2021
  value: stateValue,
@@ -2130,11 +2029,11 @@ function SplitCardFormInner({
2130
2029
  "data-testid": "flopay-state",
2131
2030
  style: { ...inputFieldStyle(), cursor: "pointer" },
2132
2031
  children: [
2133
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: (0, import_shared4.getStateLabel)(cc) }),
2134
- stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: s.code, children: s.name }, s.code))
2032
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: (0, import_shared4.getStateLabel)(cc) }),
2033
+ stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: s.code, children: s.name }, s.code))
2135
2034
  ]
2136
2035
  }
2137
- ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2036
+ ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2138
2037
  "input",
2139
2038
  {
2140
2039
  className: "flopay-shared-input",
@@ -2152,20 +2051,20 @@ function SplitCardFormInner({
2152
2051
  }
2153
2052
  ) })
2154
2053
  ] }),
2155
- ((0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
2054
+ ((0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
2156
2055
  display: "flex",
2157
2056
  flexDirection: avsLayoutProp === "column" ? "column" : "row",
2158
2057
  gap: avsLayoutProp === "column" ? "0.5rem" : "0",
2159
2058
  marginTop: "0.5rem"
2160
2059
  }, children: [
2161
- (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2060
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2162
2061
  flex: avsLayoutProp === "row" ? 1 : void 0,
2163
2062
  backgroundColor: cardInputBg,
2164
2063
  border: `1px solid ${resolvedBorder}`,
2165
2064
  padding: "10px",
2166
2065
  ...avsLayoutProp === "row" && (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
2167
2066
  ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
2168
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2067
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2169
2068
  "select",
2170
2069
  {
2171
2070
  value: selectedCountry,
@@ -2180,21 +2079,21 @@ function SplitCardFormInner({
2180
2079
  autoComplete: "country",
2181
2080
  "data-testid": "flopay-country",
2182
2081
  style: { ...inputFieldStyle(), cursor: "pointer" },
2183
- children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: c.code, children: [
2082
+ children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: c.code, children: [
2184
2083
  c.flag,
2185
2084
  " ",
2186
2085
  c.name
2187
2086
  ] }, c.code))
2188
2087
  }
2189
2088
  ) }),
2190
- (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2089
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2191
2090
  flex: avsLayoutProp === "row" ? 1 : void 0,
2192
2091
  backgroundColor: cardInputBg,
2193
2092
  border: `1px solid ${resolvedBorder}`,
2194
2093
  padding: "10px",
2195
2094
  ...avsLayoutProp === "row" && (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
2196
2095
  ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
2197
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2096
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2198
2097
  "input",
2199
2098
  {
2200
2099
  className: "flopay-shared-input",
@@ -2215,7 +2114,7 @@ function SplitCardFormInner({
2215
2114
  ] })
2216
2115
  ] });
2217
2116
  })(),
2218
- displayError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2117
+ displayError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2219
2118
  margin: "0.75rem 0",
2220
2119
  padding: "0.625rem 0.875rem",
2221
2120
  background: "#FEF2F2",
@@ -2229,10 +2128,10 @@ function SplitCardFormInner({
2229
2128
  gap: "0.5rem",
2230
2129
  ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
2231
2130
  }, children: [
2232
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2131
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2233
2132
  displayError
2234
2133
  ] }),
2235
- children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2134
+ children ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2236
2135
  "button",
2237
2136
  {
2238
2137
  type: "submit",
@@ -2255,7 +2154,7 @@ function SplitCardFormInner({
2255
2154
  children: isSubmitting ? "PROCESSING..." : submitLabel
2256
2155
  }
2257
2156
  ),
2258
- !isButtons && showSecurityFooter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2157
+ !isButtons && showSecurityFooter && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2259
2158
  backgroundColor: "#EFF9F0",
2260
2159
  borderRadius: "8px",
2261
2160
  padding: "0.75rem",
@@ -2272,11 +2171,11 @@ function SplitCardFormInner({
2272
2171
  const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
2273
2172
  const buttonsAnim = viewState === "expanding" ? `flopay-buttons-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-buttons-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : void 0;
2274
2173
  const cardAnim = viewState === "expanding" ? `flopay-card-enter ${TRANSITION_MS}ms cubic-bezier(0, 0, 0.2, 1) both` : viewState === "collapsing" ? `flopay-card-exit ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1) both` : void 0;
2275
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2276
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
2277
- overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2278
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid" }, children: [
2279
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
2174
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2175
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayKeyframes, {}),
2176
+ overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2177
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid" }, children: [
2178
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
2280
2179
  gridArea: "1 / 1",
2281
2180
  display: "flex",
2282
2181
  flexDirection: "column",
@@ -2285,7 +2184,7 @@ function SplitCardFormInner({
2285
2184
  ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
2286
2185
  ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
2287
2186
  }, children: [
2288
- showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2187
+ shouldRenderPayPal && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2289
2188
  PayPalButtonInner,
2290
2189
  {
2291
2190
  sessionId,
@@ -2300,7 +2199,7 @@ function SplitCardFormInner({
2300
2199
  onLoadStateChange: setPaypalLoadState
2301
2200
  }
2302
2201
  ) }),
2303
- showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2202
+ shouldRenderWallets ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2304
2203
  WalletButtonInner,
2305
2204
  {
2306
2205
  sessionId,
@@ -2315,9 +2214,8 @@ function SplitCardFormInner({
2315
2214
  runBeforeButtonClick,
2316
2215
  onLoadStateChange: setWalletLoadState
2317
2216
  }
2318
- ) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
2319
- showInAppBrowserNotice && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InAppBrowserNotice, {}),
2320
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2217
+ ) }) : shouldShowWallets ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
2218
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2321
2219
  "button",
2322
2220
  {
2323
2221
  type: "button",
@@ -2355,10 +2253,10 @@ function SplitCardFormInner({
2355
2253
  onMouseUp: (e) => {
2356
2254
  e.currentTarget.style.transform = "scale(1)";
2357
2255
  },
2358
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
2256
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardButtonContentSlot, { content: cardButtonContent })
2359
2257
  }
2360
2258
  ),
2361
- displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2259
+ displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2362
2260
  margin: "0.25rem 0",
2363
2261
  padding: "0.625rem 0.875rem",
2364
2262
  background: "#FEF2F2",
@@ -2372,11 +2270,11 @@ function SplitCardFormInner({
2372
2270
  gap: "0.5rem",
2373
2271
  ...bStyles.errorBanner ? bStyles.errorBanner : {}
2374
2272
  }, children: [
2375
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2273
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2376
2274
  displayError
2377
2275
  ] })
2378
2276
  ] }),
2379
- isCardView && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2277
+ isCardView && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2380
2278
  gridArea: "1 / 1",
2381
2279
  ...cardAnim ? { animation: cardAnim } : {},
2382
2280
  ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -2384,10 +2282,10 @@ function SplitCardFormInner({
2384
2282
  ] })
2385
2283
  ] });
2386
2284
  }
2387
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2388
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
2389
- overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2390
- showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2285
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2286
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayKeyframes, {}),
2287
+ overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2288
+ shouldRenderWallets && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2391
2289
  WalletButtonInner,
2392
2290
  {
2393
2291
  sessionId,
@@ -2401,7 +2299,7 @@ function SplitCardFormInner({
2401
2299
  onLoadStateChange: setWalletLoadState
2402
2300
  }
2403
2301
  ) }),
2404
- showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2302
+ shouldRenderPayPal && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2405
2303
  PayPalButtonInner,
2406
2304
  {
2407
2305
  sessionId,
@@ -2414,8 +2312,7 @@ function SplitCardFormInner({
2414
2312
  onLoadStateChange: setPaypalLoadState
2415
2313
  }
2416
2314
  ) }),
2417
- showInAppBrowserNotice && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InAppBrowserNotice, {}),
2418
- (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
2315
+ (shouldDisplayWalletRow || shouldDisplayPayPalRow) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
2419
2316
  display: "flex",
2420
2317
  alignItems: "center",
2421
2318
  gap: "0.75rem",
@@ -2423,9 +2320,9 @@ function SplitCardFormInner({
2423
2320
  color: "#999",
2424
2321
  fontSize: "0.85rem"
2425
2322
  }, children: [
2426
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
2427
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "or pay with card" }),
2428
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
2323
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
2324
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "or pay with card" }),
2325
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
2429
2326
  ] }),
2430
2327
  cardFormBlock
2431
2328
  ] });
@@ -2958,7 +2855,7 @@ async function loadSavedPaymentProviders({
2958
2855
  }
2959
2856
 
2960
2857
  // src/flopay-checkout.tsx
2961
- var import_jsx_runtime7 = require("react/jsx-runtime");
2858
+ var import_jsx_runtime6 = require("react/jsx-runtime");
2962
2859
  var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
2963
2860
  var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
2964
2861
  var sessionInflightMap = /* @__PURE__ */ new Map();
@@ -3061,37 +2958,37 @@ function FloPayCheckout({
3061
2958
  const resolvedBillingUrl = (0, import_shared7.resolveBillingApiUrl)(billingApiUrl);
3062
2959
  const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
3063
2960
  const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
3064
- const [unified, setUnified] = (0, import_react9.useState)(null);
3065
- const [flopay, setFloPay] = (0, import_react9.useState)(null);
3066
- const flopayRef = (0, import_react9.useRef)(null);
3067
- const [paypalFlopay, setPaypalFloPay] = (0, import_react9.useState)(null);
3068
- const paypalFlopayRef = (0, import_react9.useRef)(null);
3069
- const [session, setSession] = (0, import_react9.useState)(null);
3070
- const [resolvedSessionId, setResolvedSessionId] = (0, import_react9.useState)(sessionIdProp ?? "");
2961
+ const [unified, setUnified] = (0, import_react8.useState)(null);
2962
+ const [flopay, setFloPay] = (0, import_react8.useState)(null);
2963
+ const flopayRef = (0, import_react8.useRef)(null);
2964
+ const [paypalFlopay, setPaypalFloPay] = (0, import_react8.useState)(null);
2965
+ const paypalFlopayRef = (0, import_react8.useRef)(null);
2966
+ const [session, setSession] = (0, import_react8.useState)(null);
2967
+ const [resolvedSessionId, setResolvedSessionId] = (0, import_react8.useState)(sessionIdProp ?? "");
3071
2968
  const activeSessionId = sessionIdProp ?? resolvedSessionId;
3072
2969
  const initSessionDependency = createSessionParams ? "" : activeSessionId;
3073
- const [isLoading, setIsLoading] = (0, import_react9.useState)(true);
3074
- const [loadError, setLoadError] = (0, import_react9.useState)(null);
3075
- const [currentMode, setCurrentMode] = (0, import_react9.useState)("full");
3076
- const [confirmProcessing, setConfirmProcessing] = (0, import_react9.useState)(false);
3077
- const [modeError, setModeError] = (0, import_react9.useState)(initialErrorMessage);
3078
- const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react9.useState)(null);
3079
- const [modeOverlayError, setModeOverlayError] = (0, import_react9.useState)(null);
3080
- const [createSessionPatch, setCreateSessionPatch] = (0, import_react9.useState)(void 0);
3081
- const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react9.useState)("");
3082
- const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react9.useState)(false);
3083
- const autoCheckoutAttempted = (0, import_react9.useRef)(false);
3084
- const paypalResumeAttempted = (0, import_react9.useRef)(false);
3085
- const savedPaymentKeysRef = (0, import_react9.useRef)(null);
3086
- const onCompleteRef = (0, import_react9.useRef)(onComplete);
2970
+ const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
2971
+ const [loadError, setLoadError] = (0, import_react8.useState)(null);
2972
+ const [currentMode, setCurrentMode] = (0, import_react8.useState)("full");
2973
+ const [confirmProcessing, setConfirmProcessing] = (0, import_react8.useState)(false);
2974
+ const [modeError, setModeError] = (0, import_react8.useState)(initialErrorMessage);
2975
+ const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react8.useState)(null);
2976
+ const [modeOverlayError, setModeOverlayError] = (0, import_react8.useState)(null);
2977
+ const [createSessionPatch, setCreateSessionPatch] = (0, import_react8.useState)(void 0);
2978
+ const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react8.useState)("");
2979
+ const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react8.useState)(false);
2980
+ const autoCheckoutAttempted = (0, import_react8.useRef)(false);
2981
+ const paypalResumeAttempted = (0, import_react8.useRef)(false);
2982
+ const savedPaymentKeysRef = (0, import_react8.useRef)(null);
2983
+ const onCompleteRef = (0, import_react8.useRef)(onComplete);
3087
2984
  onCompleteRef.current = onComplete;
3088
- const onErrorRef = (0, import_react9.useRef)(onError);
2985
+ const onErrorRef = (0, import_react8.useRef)(onError);
3089
2986
  onErrorRef.current = onError;
3090
- const onDeclineRef = (0, import_react9.useRef)(onDecline);
2987
+ const onDeclineRef = (0, import_react8.useRef)(onDecline);
3091
2988
  onDeclineRef.current = onDecline;
3092
- const onSessionCompletedRef = (0, import_react9.useRef)(onSessionCompleted);
2989
+ const onSessionCompletedRef = (0, import_react8.useRef)(onSessionCompleted);
3093
2990
  onSessionCompletedRef.current = onSessionCompleted;
3094
- (0, import_react9.useEffect)(() => {
2991
+ (0, import_react8.useEffect)(() => {
3095
2992
  console.info("[FloPay] Checkout initialized", {
3096
2993
  sdk_version: import_shared7.SDK_VERSION,
3097
2994
  checkout_type: checkoutType,
@@ -3099,40 +2996,40 @@ function FloPayCheckout({
3099
2996
  billing_api_url: resolvedBillingUrl
3100
2997
  });
3101
2998
  }, [checkoutLayout, checkoutType, resolvedBillingUrl]);
3102
- const baseCreateSessionHash = (0, import_react9.useMemo)(
2999
+ const baseCreateSessionHash = (0, import_react8.useMemo)(
3103
3000
  () => createSessionParams ? hashCreateParams(createSessionParams) : "",
3104
3001
  [createSessionParams]
3105
3002
  );
3106
- const activeCreateSessionPatch = (0, import_react9.useMemo)(
3003
+ const activeCreateSessionPatch = (0, import_react8.useMemo)(
3107
3004
  () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
3108
3005
  [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
3109
3006
  );
3110
- const effectiveCreateSessionBase = (0, import_react9.useMemo)(
3007
+ const effectiveCreateSessionBase = (0, import_react8.useMemo)(
3111
3008
  () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
3112
3009
  [createSessionParams, activeCreateSessionPatch]
3113
3010
  );
3114
3011
  const effectiveCreateSessionMode = checkoutModeProp ?? effectiveCreateSessionBase?.checkoutMode ?? "full";
3115
- const effectiveCreateSession = (0, import_react9.useMemo)(
3012
+ const effectiveCreateSession = (0, import_react8.useMemo)(
3116
3013
  () => effectiveCreateSessionBase ? {
3117
3014
  ...effectiveCreateSessionBase,
3118
3015
  checkoutMode: effectiveCreateSessionMode
3119
3016
  } : void 0,
3120
3017
  [effectiveCreateSessionBase, effectiveCreateSessionMode]
3121
3018
  );
3122
- (0, import_react9.useEffect)(() => {
3019
+ (0, import_react8.useEffect)(() => {
3123
3020
  setCreateSessionPatch(void 0);
3124
3021
  setCreateSessionPatchBaseHash(baseCreateSessionHash);
3125
3022
  }, [baseCreateSessionHash]);
3126
- (0, import_react9.useEffect)(() => {
3023
+ (0, import_react8.useEffect)(() => {
3127
3024
  setModeError(initialErrorMessage);
3128
3025
  }, [initialErrorMessage]);
3129
- const emitDecline = (0, import_react9.useCallback)(
3026
+ const emitDecline = (0, import_react8.useCallback)(
3130
3027
  (method, input, overrides) => {
3131
3028
  onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
3132
3029
  },
3133
3030
  []
3134
3031
  );
3135
- const runSavedPaymentFlow = (0, import_react9.useCallback)(
3032
+ const runSavedPaymentFlow = (0, import_react8.useCallback)(
3136
3033
  async (sess, options) => {
3137
3034
  setModeError(null);
3138
3035
  setModeOverlayError(null);
@@ -3250,7 +3147,7 @@ function FloPayCheckout({
3250
3147
  resolvedBillingUrl
3251
3148
  ]
3252
3149
  );
3253
- (0, import_react9.useEffect)(() => {
3150
+ (0, import_react8.useEffect)(() => {
3254
3151
  if (typeof window === "undefined" || paypalResumeAttempted.current) {
3255
3152
  return;
3256
3153
  }
@@ -3367,7 +3264,7 @@ function FloPayCheckout({
3367
3264
  }
3368
3265
  })();
3369
3266
  }, [emitDecline, locale, normalizeSavedPaymentError, resolvedBillingUrl]);
3370
- const initializedHashRef = (0, import_react9.useRef)(null);
3267
+ const initializedHashRef = (0, import_react8.useRef)(null);
3371
3268
  function hashCreateParams(params) {
3372
3269
  const key = JSON.stringify({
3373
3270
  c: params?.clientId,
@@ -3391,16 +3288,16 @@ function FloPayCheckout({
3391
3288
  }
3392
3289
  return `flopay_session_${Math.abs(h).toString(36)}`;
3393
3290
  }
3394
- const createSessionHash = (0, import_react9.useMemo)(
3291
+ const createSessionHash = (0, import_react8.useMemo)(
3395
3292
  () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
3396
3293
  [effectiveCreateSession]
3397
3294
  );
3398
- const createSessionParamsRef = (0, import_react9.useRef)(effectiveCreateSession);
3295
+ const createSessionParamsRef = (0, import_react8.useRef)(effectiveCreateSession);
3399
3296
  createSessionParamsRef.current = effectiveCreateSession;
3400
- (0, import_react9.useEffect)(() => {
3297
+ (0, import_react8.useEffect)(() => {
3401
3298
  setResolvedSessionId(sessionIdProp ?? "");
3402
3299
  }, [sessionIdProp]);
3403
- (0, import_react9.useEffect)(() => {
3300
+ (0, import_react8.useEffect)(() => {
3404
3301
  autoCheckoutAttempted.current = false;
3405
3302
  setModeError(initialErrorMessage);
3406
3303
  setModeOverlayError(null);
@@ -3443,7 +3340,7 @@ function FloPayCheckout({
3443
3340
  }
3444
3341
  return { sid: sid ?? "", result: realResult };
3445
3342
  }
3446
- const bootstrapInlineSession = (0, import_react9.useCallback)(
3343
+ const bootstrapInlineSession = (0, import_react8.useCallback)(
3447
3344
  async (patch) => {
3448
3345
  const baseParams = createSessionParamsRef.current;
3449
3346
  if (!baseParams) {
@@ -3504,7 +3401,7 @@ function FloPayCheckout({
3504
3401
  },
3505
3402
  [locale, resolvedBillingUrl]
3506
3403
  );
3507
- const handleInlineSessionPatch = (0, import_react9.useCallback)(async (patch) => {
3404
+ const handleInlineSessionPatch = (0, import_react8.useCallback)(async (patch) => {
3508
3405
  if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
3509
3406
  return {
3510
3407
  sessionId: resolvedSessionId,
@@ -3527,7 +3424,7 @@ function FloPayCheckout({
3527
3424
  resolvedSessionId,
3528
3425
  session
3529
3426
  ]);
3530
- (0, import_react9.useEffect)(() => {
3427
+ (0, import_react8.useEffect)(() => {
3531
3428
  let cancelled = false;
3532
3429
  setLoadError(null);
3533
3430
  if (createSessionHash) {
@@ -3687,7 +3584,7 @@ function FloPayCheckout({
3687
3584
  initSessionDependency,
3688
3585
  runSavedPaymentFlow
3689
3586
  ]);
3690
- const handleConfirmCheckout = (0, import_react9.useCallback)(async () => {
3587
+ const handleConfirmCheckout = (0, import_react8.useCallback)(async () => {
3691
3588
  if (confirmProcessing || !session) return;
3692
3589
  setConfirmProcessing(true);
3693
3590
  setModeError(null);
@@ -3700,7 +3597,7 @@ function FloPayCheckout({
3700
3597
  setConfirmProcessing(false);
3701
3598
  }
3702
3599
  }, [activeSessionId, confirmProcessing, runSavedPaymentFlow, session]);
3703
- const providerOptions = (0, import_react9.useMemo)(() => {
3600
+ const providerOptions = (0, import_react8.useMemo)(() => {
3704
3601
  if (!unified || !session) return void 0;
3705
3602
  const opts = {
3706
3603
  appearance,
@@ -3719,7 +3616,7 @@ function FloPayCheckout({
3719
3616
  const shouldHandleInlineSessionPatch = Boolean(
3720
3617
  createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && effectiveCreateSessionMode === "full"
3721
3618
  );
3722
- const checkoutValue = (0, import_react9.useMemo)(
3619
+ const checkoutValue = (0, import_react8.useMemo)(
3723
3620
  () => ({
3724
3621
  session,
3725
3622
  loading: isLoading,
@@ -3741,7 +3638,7 @@ function FloPayCheckout({
3741
3638
  ]
3742
3639
  );
3743
3640
  const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
3744
- const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3641
+ const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3745
3642
  ProcessingOverlay,
3746
3643
  {
3747
3644
  status: modeOverlayStatus,
@@ -3750,31 +3647,31 @@ function FloPayCheckout({
3750
3647
  ) : null;
3751
3648
  if (isLoading) {
3752
3649
  if (loadingNode) {
3753
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3650
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3754
3651
  loadingNode,
3755
3652
  modeOverlay
3756
3653
  ] });
3757
3654
  }
3758
3655
  if (layout === "buttons") {
3759
- const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3656
+ const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
3760
3657
  height: h,
3761
3658
  borderRadius: 8,
3762
3659
  background: "#e5e7eb",
3763
3660
  animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
3764
3661
  } });
3765
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3766
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3662
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3663
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3767
3664
  showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3768
3665
  (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3769
3666
  skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3770
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
3667
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
3771
3668
  ] }),
3772
3669
  modeOverlay
3773
3670
  ] });
3774
3671
  }
3775
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3776
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
3777
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3672
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3673
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
3674
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
3778
3675
  width: 24,
3779
3676
  height: 24,
3780
3677
  border: "2px solid #e5e7eb",
@@ -3782,16 +3679,16 @@ function FloPayCheckout({
3782
3679
  borderRadius: "50%",
3783
3680
  animation: "spin 0.6s linear infinite"
3784
3681
  } }),
3785
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
3682
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
3786
3683
  ] }),
3787
3684
  modeOverlay
3788
3685
  ] });
3789
3686
  }
3790
3687
  if (loadError) {
3791
3688
  if (errorNode) {
3792
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
3689
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
3793
3690
  }
3794
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3691
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3795
3692
  "div",
3796
3693
  {
3797
3694
  style: {
@@ -3805,8 +3702,8 @@ function FloPayCheckout({
3805
3702
  ) });
3806
3703
  }
3807
3704
  if (shouldShowInterimButtons) {
3808
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3809
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3705
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3706
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3810
3707
  InterimButtonsView,
3811
3708
  {
3812
3709
  onButtonClick,
@@ -3824,12 +3721,12 @@ function FloPayCheckout({
3824
3721
  ] });
3825
3722
  }
3826
3723
  if (!flopay || !providerOptions) {
3827
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: modeOverlay });
3724
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: modeOverlay });
3828
3725
  }
3829
3726
  if (currentMode === "confirm") {
3830
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3831
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, children: [
3832
- modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3727
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3728
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, children: [
3729
+ modeError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3833
3730
  "div",
3834
3731
  {
3835
3732
  style: {
@@ -3844,7 +3741,7 @@ function FloPayCheckout({
3844
3741
  renderConfirmButton ? renderConfirmButton({
3845
3742
  onConfirm: handleConfirmCheckout,
3846
3743
  isProcessing: confirmProcessing
3847
- }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3744
+ }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3848
3745
  "button",
3849
3746
  {
3850
3747
  type: "button",
@@ -3869,9 +3766,9 @@ function FloPayCheckout({
3869
3766
  modeOverlay
3870
3767
  ] });
3871
3768
  }
3872
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3873
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3874
- modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3769
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3770
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3771
+ modeError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3875
3772
  "div",
3876
3773
  {
3877
3774
  style: {
@@ -3886,7 +3783,7 @@ function FloPayCheckout({
3886
3783
  children: modeError
3887
3784
  }
3888
3785
  ),
3889
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3786
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3890
3787
  SessionInjector,
3891
3788
  {
3892
3789
  sessionId: activeSessionId,
@@ -3895,7 +3792,7 @@ function FloPayCheckout({
3895
3792
  children
3896
3793
  }
3897
3794
  )
3898
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3795
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3899
3796
  SplitCardForm,
3900
3797
  {
3901
3798
  sessionId: activeSessionId,
@@ -3946,8 +3843,8 @@ function SessionInjector({
3946
3843
  session,
3947
3844
  children
3948
3845
  }) {
3949
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: import_react9.default.Children.map(children, (child) => {
3950
- if (!import_react9.default.isValidElement(child)) return child;
3846
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: import_react8.default.Children.map(children, (child) => {
3847
+ if (!import_react8.default.isValidElement(child)) return child;
3951
3848
  const existing = child.props;
3952
3849
  const injected = {};
3953
3850
  if (!existing.sessionId) injected.sessionId = sessionId;
@@ -3961,7 +3858,7 @@ function SessionInjector({
3961
3858
  injected.lastName = session.customer.lastName;
3962
3859
  }
3963
3860
  if (Object.keys(injected).length === 0) return child;
3964
- return import_react9.default.cloneElement(child, injected);
3861
+ return import_react8.default.cloneElement(child, injected);
3965
3862
  }) });
3966
3863
  }
3967
3864
  function InterimButtonsView({
@@ -3979,14 +3876,14 @@ function InterimButtonsView({
3979
3876
  cardBackButtonContent,
3980
3877
  cardTitleContent
3981
3878
  }) {
3982
- const [showCardForm, setShowCardForm] = (0, import_react9.useState)(false);
3879
+ const [showCardForm, setShowCardForm] = (0, import_react8.useState)(false);
3983
3880
  const isCardOpenControlled = typeof cardOpen === "boolean";
3984
- (0, import_react9.useEffect)(() => {
3881
+ (0, import_react8.useEffect)(() => {
3985
3882
  if (isCardOpenControlled) {
3986
3883
  setShowCardForm(cardOpen);
3987
3884
  }
3988
3885
  }, [cardOpen, isCardOpenControlled]);
3989
- const bStyles = (0, import_react9.useMemo)(() => {
3886
+ const bStyles = (0, import_react8.useMemo)(() => {
3990
3887
  const base = (0, import_shared7.resolveButtonsLayoutTheme)(buttonsTheme);
3991
3888
  if (!stylesOverride) return base;
3992
3889
  return {
@@ -4000,7 +3897,7 @@ function InterimButtonsView({
4000
3897
  title: { ...base.title, ...stylesOverride.title }
4001
3898
  };
4002
3899
  }, [buttonsTheme, stylesOverride]);
4003
- const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3900
+ const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
4004
3901
  height: h,
4005
3902
  borderRadius: 8,
4006
3903
  background: "#e5e7eb",
@@ -4012,15 +3909,15 @@ function InterimButtonsView({
4012
3909
  const inputBg = bStyles.cardInputBackground ?? "white";
4013
3910
  const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
4014
3911
  const hideTitle = isEmptySlotContent(cardTitleContent);
4015
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
3912
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
4016
3913
  backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
4017
3914
  borderRadius: "8px",
4018
3915
  animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
4019
3916
  overflow: "hidden",
4020
3917
  ...bStyles.cardFormContainer
4021
3918
  }, children: [
4022
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
4023
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
3919
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
3920
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
4024
3921
  "button",
4025
3922
  {
4026
3923
  type: "button",
@@ -4047,7 +3944,7 @@ function InterimButtonsView({
4047
3944
  ...bStyles.backButton
4048
3945
  },
4049
3946
  children: [
4050
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
3947
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
4051
3948
  display: "inline-flex",
4052
3949
  alignItems: "center",
4053
3950
  justifyContent: "center",
@@ -4056,12 +3953,12 @@ function InterimButtonsView({
4056
3953
  borderRadius: "50%",
4057
3954
  backgroundColor: "#f3f4f6",
4058
3955
  ...bStyles.backButtonIcon
4059
- }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
4060
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
3956
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
3957
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
4061
3958
  ]
4062
3959
  }
4063
3960
  ),
4064
- hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3961
+ hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
4065
3962
  flex: 1,
4066
3963
  textAlign: "center",
4067
3964
  fontWeight: 600,
@@ -4069,15 +3966,15 @@ function InterimButtonsView({
4069
3966
  color: "#262833",
4070
3967
  paddingRight: 80,
4071
3968
  ...bStyles.title
4072
- }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TitleContentSlot, { content: cardTitleContent }) })
3969
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) })
4073
3970
  ] }),
4074
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
4075
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex" }, children: [
4076
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
4077
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
3971
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
3972
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
3973
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
3974
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
4078
3975
  ] }),
4079
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
4080
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3976
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
3977
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
4081
3978
  height: 50,
4082
3979
  borderRadius: 8,
4083
3980
  marginTop: 16,
@@ -4086,7 +3983,7 @@ function InterimButtonsView({
4086
3983
  ...bStyles.submitButton,
4087
3984
  opacity: 0.5
4088
3985
  } }),
4089
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
3986
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
4090
3987
  @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
4091
3988
  @keyframes flopay-interim-expand {
4092
3989
  0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -4096,10 +3993,10 @@ function InterimButtonsView({
4096
3993
  ` })
4097
3994
  ] });
4098
3995
  }
4099
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3996
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
4100
3997
  showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
4101
3998
  (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
4102
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3999
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
4103
4000
  "button",
4104
4001
  {
4105
4002
  type: "button",
@@ -4139,10 +4036,10 @@ function InterimButtonsView({
4139
4036
  onMouseUp: (e) => {
4140
4037
  e.currentTarget.style.transform = "scale(1)";
4141
4038
  },
4142
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardButtonContentSlot, { content: cardButtonContent })
4039
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
4143
4040
  }
4144
4041
  ),
4145
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
4042
+ errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
4146
4043
  margin: "0.25rem 0",
4147
4044
  padding: "0.625rem 0.875rem",
4148
4045
  background: "#FEF2F2",
@@ -4156,22 +4053,22 @@ function InterimButtonsView({
4156
4053
  gap: "0.5rem",
4157
4054
  ...bStyles.errorBanner
4158
4055
  }, children: [
4159
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
4056
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
4160
4057
  errorMessage
4161
4058
  ] }),
4162
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
4059
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
4163
4060
  ] });
4164
4061
  }
4165
4062
 
4166
4063
  // src/checkout-form.tsx
4167
4064
  var import_js4 = require("@flopay/js");
4168
4065
  var import_shared8 = require("@flopay/shared");
4169
- var import_react10 = require("react");
4170
- var import_jsx_runtime8 = require("react/jsx-runtime");
4066
+ var import_react9 = require("react");
4067
+ var import_jsx_runtime7 = require("react/jsx-runtime");
4171
4068
  var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
4172
- var CheckoutForm = (0, import_react10.forwardRef)(
4069
+ var CheckoutForm = (0, import_react9.forwardRef)(
4173
4070
  function CheckoutForm2(props, ref) {
4174
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
4071
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
4175
4072
  }
4176
4073
  );
4177
4074
  function CheckoutFormInner({
@@ -4200,27 +4097,27 @@ function CheckoutFormInner({
4200
4097
  const paypalFlopay = usePayPalFloPay();
4201
4098
  const elements = useElements();
4202
4099
  const contextBillingUrl = useBillingApiUrl();
4203
- const [processing, setProcessing] = (0, import_react10.useState)(false);
4204
- const [error, setError] = (0, import_react10.useState)(null);
4205
- const [is3DSActive, setIs3DSActive] = (0, import_react10.useState)(false);
4100
+ const [processing, setProcessing] = (0, import_react9.useState)(false);
4101
+ const [error, setError] = (0, import_react9.useState)(null);
4102
+ const [is3DSActive, setIs3DSActive] = (0, import_react9.useState)(false);
4206
4103
  const displayError = externalError ?? error;
4207
4104
  const isSubmitting = externalProcessing ?? processing;
4208
4105
  const isSelfContained = !onTokenizedBody;
4209
4106
  const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
4210
- const updateError = (0, import_react10.useCallback)(
4107
+ const updateError = (0, import_react9.useCallback)(
4211
4108
  (err) => {
4212
4109
  setError(err);
4213
4110
  onErrorChange?.(err);
4214
4111
  },
4215
4112
  [onErrorChange]
4216
4113
  );
4217
- const emitDecline = (0, import_react10.useCallback)(
4114
+ const emitDecline = (0, import_react9.useCallback)(
4218
4115
  (input, overrides) => {
4219
4116
  onDecline?.(buildDeclineEvent("card", input, overrides));
4220
4117
  },
4221
4118
  [onDecline]
4222
4119
  );
4223
- const processPaymentInternal = (0, import_react10.useCallback)(
4120
+ const processPaymentInternal = (0, import_react9.useCallback)(
4224
4121
  async (tokenizedBody, completionPaymentMethodId) => {
4225
4122
  setProcessing(true);
4226
4123
  updateError(null);
@@ -4331,7 +4228,7 @@ function CheckoutFormInner({
4331
4228
  },
4332
4229
  [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
4333
4230
  );
4334
- const dispatchTokenizedBody = (0, import_react10.useCallback)(
4231
+ const dispatchTokenizedBody = (0, import_react9.useCallback)(
4335
4232
  (tokenizedBody) => {
4336
4233
  if (onTokenizedBody) {
4337
4234
  onTokenizedBody(tokenizedBody);
@@ -4341,7 +4238,7 @@ function CheckoutFormInner({
4341
4238
  },
4342
4239
  [onTokenizedBody, processPaymentInternal]
4343
4240
  );
4344
- (0, import_react10.useImperativeHandle)(innerRef, () => ({
4241
+ (0, import_react9.useImperativeHandle)(innerRef, () => ({
4345
4242
  async handleNextAction(secret) {
4346
4243
  if (!flopay) return;
4347
4244
  setIs3DSActive(true);
@@ -4368,7 +4265,7 @@ function CheckoutFormInner({
4368
4265
  }
4369
4266
  }
4370
4267
  }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
4371
- (0, import_react10.useEffect)(() => {
4268
+ (0, import_react9.useEffect)(() => {
4372
4269
  if (typeof window === "undefined") return;
4373
4270
  const stored = localStorage.getItem(WALLET_RESUME_KEY2);
4374
4271
  if (!stored) return;
@@ -4386,7 +4283,7 @@ function CheckoutFormInner({
4386
4283
  localStorage.removeItem(WALLET_RESUME_KEY2);
4387
4284
  }
4388
4285
  }, [sessionId, dispatchTokenizedBody]);
4389
- const handleSubmit = (0, import_react10.useCallback)(
4286
+ const handleSubmit = (0, import_react9.useCallback)(
4390
4287
  async (e) => {
4391
4288
  e.preventDefault();
4392
4289
  if (!flopay || !elements || isSubmitting) return;
@@ -4476,8 +4373,8 @@ function CheckoutFormInner({
4476
4373
  [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
4477
4374
  );
4478
4375
  const isReady = flopay !== null && elements !== null;
4479
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
4480
- (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-overlay", style: {
4376
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
4377
+ (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-overlay", style: {
4481
4378
  position: "absolute",
4482
4379
  inset: 0,
4483
4380
  background: "rgba(255,255,255,0.7)",
@@ -4486,12 +4383,12 @@ function CheckoutFormInner({
4486
4383
  justifyContent: "center",
4487
4384
  zIndex: 10
4488
4385
  }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
4489
- !isReady && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
4490
- isReady && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
4491
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaymentElement, { options: { layout } }),
4492
- showAddress && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
4493
- displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
4494
- children ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4386
+ !isReady && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
4387
+ isReady && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
4388
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaymentElement, { options: { layout } }),
4389
+ showAddress && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
4390
+ displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
4391
+ children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4495
4392
  "button",
4496
4393
  {
4497
4394
  type: "submit",
@@ -4507,8 +4404,8 @@ function CheckoutFormInner({
4507
4404
  // src/paypal-button.tsx
4508
4405
  var import_js5 = require("@flopay/js");
4509
4406
  var import_shared9 = require("@flopay/shared");
4510
- var import_react11 = require("react");
4511
- var import_jsx_runtime9 = require("react/jsx-runtime");
4407
+ var import_react10 = require("react");
4408
+ var import_jsx_runtime8 = require("react/jsx-runtime");
4512
4409
  function PayPalButton({
4513
4410
  sessionId,
4514
4411
  billingApiUrl,
@@ -4525,11 +4422,11 @@ function PayPalButton({
4525
4422
  const flopay = useFloPay();
4526
4423
  const elements = useElements();
4527
4424
  const contextBillingUrl = useBillingApiUrl();
4528
- const [ready, setReady] = (0, import_react11.useState)(false);
4529
- const [submitting, setSubmitting] = (0, import_react11.useState)(false);
4530
- const paypalResumeAttempted = (0, import_react11.useRef)(false);
4425
+ const [ready, setReady] = (0, import_react10.useState)(false);
4426
+ const [submitting, setSubmitting] = (0, import_react10.useState)(false);
4427
+ const paypalResumeAttempted = (0, import_react10.useRef)(false);
4531
4428
  const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
4532
- const processPaymentInternal = (0, import_react11.useCallback)(
4429
+ const processPaymentInternal = (0, import_react10.useCallback)(
4533
4430
  async (tokenizedBody) => {
4534
4431
  try {
4535
4432
  const api = new import_js5.PaymentAPI(baseUrl);
@@ -4556,7 +4453,7 @@ function PayPalButton({
4556
4453
  },
4557
4454
  [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
4558
4455
  );
4559
- const dispatchTokenizedBody = (0, import_react11.useCallback)(
4456
+ const dispatchTokenizedBody = (0, import_react10.useCallback)(
4560
4457
  (body) => {
4561
4458
  if (onTokenizedBody) {
4562
4459
  onTokenizedBody(body);
@@ -4566,7 +4463,7 @@ function PayPalButton({
4566
4463
  },
4567
4464
  [onTokenizedBody, processPaymentInternal]
4568
4465
  );
4569
- (0, import_react11.useEffect)(() => {
4466
+ (0, import_react10.useEffect)(() => {
4570
4467
  if (!flopay || paypalResumeAttempted.current) return;
4571
4468
  const params = new URLSearchParams(window.location.search);
4572
4469
  const paymentIntentId = params.get("payment_intent");
@@ -4614,7 +4511,7 @@ function PayPalButton({
4614
4511
  }
4615
4512
  })();
4616
4513
  }, [flopay, dispatchTokenizedBody, onErrorChange]);
4617
- const handlePayPalConfirm = (0, import_react11.useCallback)(async () => {
4514
+ const handlePayPalConfirm = (0, import_react10.useCallback)(async () => {
4618
4515
  if (!flopay || !elements) return;
4619
4516
  try {
4620
4517
  setSubmitting(true);
@@ -4647,11 +4544,11 @@ function PayPalButton({
4647
4544
  }
4648
4545
  }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
4649
4546
  if (!flopay || !elements) {
4650
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
4547
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
4651
4548
  }
4652
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
4653
- !ready && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
4654
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4549
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
4550
+ !ready && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
4551
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4655
4552
  "button",
4656
4553
  {
4657
4554
  type: "button",
@@ -4673,7 +4570,7 @@ function PayPalButton({
4673
4570
  children: submitting ? "Processing..." : "PayPal"
4674
4571
  }
4675
4572
  ) }),
4676
- (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
4573
+ (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
4677
4574
  position: "fixed",
4678
4575
  inset: 0,
4679
4576
  background: "rgba(0,0,0,0.4)",
@@ -4681,7 +4578,7 @@ function PayPalButton({
4681
4578
  alignItems: "center",
4682
4579
  justifyContent: "center",
4683
4580
  zIndex: 1e3
4684
- }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
4581
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
4685
4582
  background: "white",
4686
4583
  borderRadius: 8,
4687
4584
  padding: "1.5rem",
@@ -4693,10 +4590,10 @@ function PayPalButton({
4693
4590
  }
4694
4591
 
4695
4592
  // src/automatic-payment-button.tsx
4696
- var import_react12 = require("react");
4593
+ var import_react11 = require("react");
4697
4594
  var import_js6 = require("@flopay/js");
4698
4595
  var import_shared10 = require("@flopay/shared");
4699
- var import_jsx_runtime10 = require("react/jsx-runtime");
4596
+ var import_jsx_runtime9 = require("react/jsx-runtime");
4700
4597
  var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
4701
4598
  var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
4702
4599
  function sleep2(ms) {
@@ -4813,11 +4710,11 @@ function FloPayAutomaticPaymentButton({
4813
4710
  style,
4814
4711
  ...buttonProps
4815
4712
  }) {
4816
- const resolvedBillingUrl = (0, import_react12.useMemo)(
4713
+ const resolvedBillingUrl = (0, import_react11.useMemo)(
4817
4714
  () => (0, import_shared10.resolveBillingApiUrl)(billingApiUrl),
4818
4715
  [billingApiUrl]
4819
4716
  );
4820
- const createSessionDraft = (0, import_react12.useMemo)(
4717
+ const createSessionDraft = (0, import_react11.useMemo)(
4821
4718
  () => resolveCreateSessionDraft({
4822
4719
  createSession,
4823
4720
  clientId,
@@ -4843,11 +4740,11 @@ function FloPayAutomaticPaymentButton({
4843
4740
  utmMetadata
4844
4741
  ]
4845
4742
  );
4846
- const [isProcessing, setIsProcessing] = (0, import_react12.useState)(false);
4847
- const [overlayStatus, setOverlayStatus] = (0, import_react12.useState)(null);
4848
- const [overlayError, setOverlayError] = (0, import_react12.useState)(null);
4849
- const [fallbackSession, setFallbackSession] = (0, import_react12.useState)(null);
4850
- const automaticPaymentToken = (0, import_react12.useMemo)(
4743
+ const [isProcessing, setIsProcessing] = (0, import_react11.useState)(false);
4744
+ const [overlayStatus, setOverlayStatus] = (0, import_react11.useState)(null);
4745
+ const [overlayError, setOverlayError] = (0, import_react11.useState)(null);
4746
+ const [fallbackSession, setFallbackSession] = (0, import_react11.useState)(null);
4747
+ const automaticPaymentToken = (0, import_react11.useMemo)(
4851
4748
  () => paymentMethodId ? {
4852
4749
  id: paymentMethodId,
4853
4750
  type: "card",
@@ -4855,31 +4752,31 @@ function FloPayAutomaticPaymentButton({
4855
4752
  } : void 0,
4856
4753
  [checkoutMethod, paymentMethodId]
4857
4754
  );
4858
- const isMountedRef = (0, import_react12.useRef)(true);
4859
- const resumeAttemptedRef = (0, import_react12.useRef)(false);
4860
- const fallbackSessionRef = (0, import_react12.useRef)(fallbackSession);
4861
- const onSuccessRef = (0, import_react12.useRef)(onSuccess);
4862
- const onErrorRef = (0, import_react12.useRef)(onError);
4863
- const onDeclineRef = (0, import_react12.useRef)(onDecline);
4864
- (0, import_react12.useEffect)(() => {
4755
+ const isMountedRef = (0, import_react11.useRef)(true);
4756
+ const resumeAttemptedRef = (0, import_react11.useRef)(false);
4757
+ const fallbackSessionRef = (0, import_react11.useRef)(fallbackSession);
4758
+ const onSuccessRef = (0, import_react11.useRef)(onSuccess);
4759
+ const onErrorRef = (0, import_react11.useRef)(onError);
4760
+ const onDeclineRef = (0, import_react11.useRef)(onDecline);
4761
+ (0, import_react11.useEffect)(() => {
4865
4762
  fallbackSessionRef.current = fallbackSession;
4866
4763
  }, [fallbackSession]);
4867
- (0, import_react12.useEffect)(() => {
4764
+ (0, import_react11.useEffect)(() => {
4868
4765
  onSuccessRef.current = onSuccess;
4869
4766
  }, [onSuccess]);
4870
- (0, import_react12.useEffect)(() => {
4767
+ (0, import_react11.useEffect)(() => {
4871
4768
  onErrorRef.current = onError;
4872
4769
  }, [onError]);
4873
- (0, import_react12.useEffect)(() => {
4770
+ (0, import_react11.useEffect)(() => {
4874
4771
  onDeclineRef.current = onDecline;
4875
4772
  }, [onDecline]);
4876
- (0, import_react12.useEffect)(() => {
4773
+ (0, import_react11.useEffect)(() => {
4877
4774
  isMountedRef.current = true;
4878
4775
  return () => {
4879
4776
  isMountedRef.current = false;
4880
4777
  };
4881
4778
  }, []);
4882
- (0, import_react12.useEffect)(() => {
4779
+ (0, import_react11.useEffect)(() => {
4883
4780
  if (!fallbackSession || typeof window === "undefined") {
4884
4781
  return;
4885
4782
  }
@@ -4893,13 +4790,13 @@ function FloPayAutomaticPaymentButton({
4893
4790
  window.removeEventListener("keydown", handleKeyDown);
4894
4791
  };
4895
4792
  }, [fallbackSession]);
4896
- const emitDecline = (0, import_react12.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
4793
+ const emitDecline = (0, import_react11.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
4897
4794
  onDeclineRef.current?.(buildDeclineEvent(method, error, {
4898
4795
  code: error.code,
4899
4796
  declineCode: error.declineCode
4900
4797
  }));
4901
4798
  }, []);
4902
- const showSuccess = (0, import_react12.useCallback)(async (event) => {
4799
+ const showSuccess = (0, import_react11.useCallback)(async (event) => {
4903
4800
  if (!isMountedRef.current) return;
4904
4801
  setOverlayError(null);
4905
4802
  setOverlayStatus("success");
@@ -4907,7 +4804,7 @@ function FloPayAutomaticPaymentButton({
4907
4804
  if (!isMountedRef.current) return;
4908
4805
  onSuccessRef.current?.(event);
4909
4806
  }, []);
4910
- const showError = (0, import_react12.useCallback)(async (error, options) => {
4807
+ const showError = (0, import_react11.useCallback)(async (error, options) => {
4911
4808
  if (!isMountedRef.current) return;
4912
4809
  onErrorRef.current?.(error);
4913
4810
  if (options?.emitDecline) {
@@ -4917,7 +4814,7 @@ function FloPayAutomaticPaymentButton({
4917
4814
  setOverlayStatus("error");
4918
4815
  await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
4919
4816
  }, [emitDecline]);
4920
- const processResolvedSession = (0, import_react12.useCallback)(async (apiResult, resolvedSessionId, options) => {
4817
+ const processResolvedSession = (0, import_react11.useCallback)(async (apiResult, resolvedSessionId, options) => {
4921
4818
  const session = apiResult.data.session ?? null;
4922
4819
  if (!session) {
4923
4820
  throw new import_shared10.FloPayError("No session data returned", "api_error");
@@ -5140,7 +5037,7 @@ function FloPayAutomaticPaymentButton({
5140
5037
  showError,
5141
5038
  showSuccess
5142
5039
  ]);
5143
- const handleButtonClick = (0, import_react12.useCallback)(async (event) => {
5040
+ const handleButtonClick = (0, import_react11.useCallback)(async (event) => {
5144
5041
  buttonProps.onClick?.(event);
5145
5042
  if (event.defaultPrevented || disabled || isProcessing) {
5146
5043
  return;
@@ -5222,7 +5119,7 @@ function FloPayAutomaticPaymentButton({
5222
5119
  showError,
5223
5120
  showSuccess
5224
5121
  ]);
5225
- const handleFallbackComplete = (0, import_react12.useCallback)((result) => {
5122
+ const handleFallbackComplete = (0, import_react11.useCallback)((result) => {
5226
5123
  const activeFallback = fallbackSessionRef.current;
5227
5124
  setFallbackSession(null);
5228
5125
  onSuccessRef.current?.({
@@ -5232,13 +5129,13 @@ function FloPayAutomaticPaymentButton({
5232
5129
  autoCompleted: false
5233
5130
  });
5234
5131
  }, []);
5235
- const handleFallbackError = (0, import_react12.useCallback)((error) => {
5132
+ const handleFallbackError = (0, import_react11.useCallback)((error) => {
5236
5133
  onErrorRef.current?.(error);
5237
5134
  }, []);
5238
- const handleFallbackDecline = (0, import_react12.useCallback)((decline) => {
5135
+ const handleFallbackDecline = (0, import_react11.useCallback)((decline) => {
5239
5136
  onDeclineRef.current?.(decline);
5240
5137
  }, []);
5241
- (0, import_react12.useEffect)(() => {
5138
+ (0, import_react11.useEffect)(() => {
5242
5139
  if (typeof window === "undefined" || resumeAttemptedRef.current) {
5243
5140
  return;
5244
5141
  }
@@ -5369,7 +5266,7 @@ function FloPayAutomaticPaymentButton({
5369
5266
  }
5370
5267
  })();
5371
5268
  }, [locale, resolvedBillingUrl, showError, showSuccess]);
5372
- const bStyles = (0, import_react12.useMemo)(() => {
5269
+ const bStyles = (0, import_react11.useMemo)(() => {
5373
5270
  const base = (0, import_shared10.resolveButtonsLayoutTheme)(buttonsTheme);
5374
5271
  if (!stylesOverride) return base;
5375
5272
  return {
@@ -5379,8 +5276,8 @@ function FloPayAutomaticPaymentButton({
5379
5276
  };
5380
5277
  }, [buttonsTheme, stylesOverride]);
5381
5278
  const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
5382
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
5383
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5279
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
5280
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5384
5281
  "button",
5385
5282
  {
5386
5283
  ...buttonProps,
@@ -5421,17 +5318,17 @@ function FloPayAutomaticPaymentButton({
5421
5318
  e.currentTarget.style.transform = "scale(1)";
5422
5319
  }
5423
5320
  },
5424
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardButtonContentSlot, { content: children })
5321
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CardButtonContentSlot, { content: children })
5425
5322
  }
5426
5323
  ),
5427
- overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5324
+ overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5428
5325
  ProcessingOverlay,
5429
5326
  {
5430
5327
  status: overlayStatus,
5431
5328
  errorMessage: overlayError
5432
5329
  }
5433
5330
  ),
5434
- fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5331
+ fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5435
5332
  "div",
5436
5333
  {
5437
5334
  "data-testid": "flopay-automatic-payment-fallback",
@@ -5452,7 +5349,7 @@ function FloPayAutomaticPaymentButton({
5452
5349
  padding: "1.5rem",
5453
5350
  zIndex: 1100
5454
5351
  },
5455
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5352
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5456
5353
  "div",
5457
5354
  {
5458
5355
  style: {
@@ -5468,7 +5365,7 @@ function FloPayAutomaticPaymentButton({
5468
5365
  flexDirection: "column",
5469
5366
  gap: "1rem"
5470
5367
  },
5471
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5368
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5472
5369
  FloPayCheckout,
5473
5370
  {
5474
5371
  sessionId: fallbackSession.sessionId,
@@ -5499,11 +5396,9 @@ function FloPayAutomaticPaymentButton({
5499
5396
  FloPayAutomaticPaymentButton,
5500
5397
  FloPayCheckout,
5501
5398
  FloPayProvider,
5502
- InAppBrowserNotice,
5503
5399
  PayPalButton,
5504
5400
  PaymentElement,
5505
5401
  SplitCardForm,
5506
- isInAppBrowser,
5507
5402
  useCheckout,
5508
5403
  useElements,
5509
5404
  useFloPay,