@flopay/react 0.5.11 → 0.5.13

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.mjs CHANGED
@@ -100,7 +100,7 @@ function FloPayProvider({
100
100
  }
101
101
 
102
102
  // src/flopay-checkout.tsx
103
- import React6, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
103
+ import React7, { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
104
104
  import { PaymentAPI as PaymentAPI2 } from "@flopay/js";
105
105
  import { SDK_VERSION, FloPayError as FloPayError4, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
106
106
 
@@ -248,7 +248,7 @@ import {
248
248
  isAVSFieldVisible,
249
249
  getStateFromPostalCode
250
250
  } from "@flopay/shared";
251
- import { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
251
+ import { forwardRef, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
252
252
 
253
253
  // src/hooks.ts
254
254
  import { useContext as useContext2 } from "react";
@@ -621,9 +621,91 @@ function wasSessionRecentlyCompleted(sessionId) {
621
621
  }
622
622
  }
623
623
 
624
+ // src/in-app-browser-notice.tsx
625
+ import { useCallback, useState as useState2 } from "react";
626
+ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
627
+ 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.";
628
+ function InAppBrowserNotice({
629
+ message,
630
+ openButtonLabel = "Open in browser",
631
+ copiedButtonLabel = "Link copied \u2014 paste in your browser",
632
+ containerStyle,
633
+ buttonStyle,
634
+ onOpenInBrowser
635
+ }) {
636
+ const [copied, setCopied] = useState2(false);
637
+ const handleClick = useCallback(async () => {
638
+ if (typeof window === "undefined") return;
639
+ const url = window.location.href;
640
+ let opened = false;
641
+ try {
642
+ const win = window.open(url, "_blank");
643
+ opened = !!win;
644
+ } catch {
645
+ opened = false;
646
+ }
647
+ let didCopy = false;
648
+ if (!opened) {
649
+ if (typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function") {
650
+ try {
651
+ await navigator.clipboard.writeText(url);
652
+ didCopy = true;
653
+ setCopied(true);
654
+ } catch {
655
+ didCopy = false;
656
+ }
657
+ }
658
+ }
659
+ onOpenInBrowser?.({ opened, copied: didCopy });
660
+ }, [onOpenInBrowser]);
661
+ return /* @__PURE__ */ jsxs3(
662
+ "div",
663
+ {
664
+ role: "status",
665
+ "data-testid": "flopay-in-app-browser-notice",
666
+ style: {
667
+ padding: "0.75rem 0.875rem",
668
+ background: "#FFFBEB",
669
+ border: "1px solid #FDE68A",
670
+ borderRadius: 8,
671
+ color: "#92400E",
672
+ fontSize: "0.85rem",
673
+ lineHeight: 1.4,
674
+ display: "flex",
675
+ flexDirection: "column",
676
+ gap: "0.5rem",
677
+ ...containerStyle
678
+ },
679
+ children: [
680
+ /* @__PURE__ */ jsx5("span", { children: message ?? DEFAULT_MESSAGE }),
681
+ /* @__PURE__ */ jsx5(
682
+ "button",
683
+ {
684
+ type: "button",
685
+ onClick: handleClick,
686
+ style: {
687
+ alignSelf: "flex-start",
688
+ padding: "0.4rem 0.75rem",
689
+ background: "transparent",
690
+ border: "1px solid #92400E",
691
+ borderRadius: 6,
692
+ color: "#92400E",
693
+ fontSize: "0.85rem",
694
+ fontWeight: 600,
695
+ cursor: "pointer",
696
+ ...buttonStyle
697
+ },
698
+ children: copied ? copiedButtonLabel : openButtonLabel
699
+ }
700
+ )
701
+ ]
702
+ }
703
+ );
704
+ }
705
+
624
706
  // src/split-card-form.tsx
625
707
  import { FloPayError as FloPayError2 } from "@flopay/shared";
626
- import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
708
+ import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
627
709
  var WALLET_RESUME_KEY = "flopay_wallet_resume";
628
710
  var FLOPAY_KEYFRAMES = `
629
711
  @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -665,7 +747,7 @@ function normalizeBeforeButtonClickError(method, err) {
665
747
  );
666
748
  }
667
749
  function FloPayKeyframes() {
668
- return /* @__PURE__ */ jsx5("style", { children: FLOPAY_KEYFRAMES });
750
+ return /* @__PURE__ */ jsx6("style", { children: FLOPAY_KEYFRAMES });
669
751
  }
670
752
  function toCssSize(value) {
671
753
  if (typeof value === "number") return `${value}px`;
@@ -685,9 +767,9 @@ function ExpressCheckoutReadySwap({
685
767
  placeholderTestId,
686
768
  children
687
769
  }) {
688
- if (state === "unavailable") return null;
689
- return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: 44 }, children: [
690
- /* @__PURE__ */ jsx5(
770
+ if (state === "unavailable" || state === "load_error") return null;
771
+ return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", minHeight: 44 }, children: [
772
+ /* @__PURE__ */ jsx6(
691
773
  "div",
692
774
  {
693
775
  "data-testid": placeholderTestId,
@@ -706,7 +788,7 @@ function ExpressCheckoutReadySwap({
706
788
  }
707
789
  }
708
790
  ),
709
- /* @__PURE__ */ jsx5(
791
+ /* @__PURE__ */ jsx6(
710
792
  "div",
711
793
  {
712
794
  style: {
@@ -723,7 +805,7 @@ function ExpressCheckoutReadySwap({
723
805
  }
724
806
  var SplitCardForm = forwardRef(
725
807
  function SplitCardForm2(props, ref) {
726
- return /* @__PURE__ */ jsx5(SplitCardFormInner, { ...props, innerRef: ref });
808
+ return /* @__PURE__ */ jsx6(SplitCardFormInner, { ...props, innerRef: ref });
727
809
  }
728
810
  );
729
811
  function PayPalButtonInner({
@@ -735,12 +817,20 @@ function PayPalButtonInner({
735
817
  isProcessing = false,
736
818
  onButtonClick,
737
819
  onDecline,
738
- runBeforeButtonClick
820
+ runBeforeButtonClick,
821
+ onLoadStateChange
739
822
  }) {
740
823
  const stripe = useStripeRaw();
741
824
  const elements = useStripeElements();
742
- const [loadState, setLoadState] = useState2("loading");
743
- const [submitting, setSubmitting] = useState2(false);
825
+ const [loadState, setLoadState] = useState3("loading");
826
+ const onLoadStateChangeRef = useRef2(onLoadStateChange);
827
+ useEffect3(() => {
828
+ onLoadStateChangeRef.current = onLoadStateChange;
829
+ }, [onLoadStateChange]);
830
+ useEffect3(() => {
831
+ onLoadStateChangeRef.current?.(loadState);
832
+ }, [loadState]);
833
+ const [submitting, setSubmitting] = useState3(false);
744
834
  const paypalResumeAttempted = useRef2(false);
745
835
  const beforeClickRef = useRef2(null);
746
836
  const baseUrl = billingApiUrl.replace(/\/+$/, "");
@@ -791,7 +881,7 @@ function PayPalButtonInner({
791
881
  }
792
882
  })();
793
883
  }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
794
- const handlePayPalClick = useCallback(async (event) => {
884
+ const handlePayPalClick = useCallback2(async (event) => {
795
885
  if (isProcessing || submitting) {
796
886
  event.reject();
797
887
  return;
@@ -809,7 +899,7 @@ function PayPalButtonInner({
809
899
  onButtonClick?.("paypal");
810
900
  event.resolve();
811
901
  }, [isProcessing, onButtonClick, runBeforeButtonClick, submitting]);
812
- const handlePayPalConfirm = useCallback(async (event) => {
902
+ const handlePayPalConfirm = useCallback2(async (event) => {
813
903
  if (!stripe || !elements) return;
814
904
  let prepared = beforeClickRef.current;
815
905
  beforeClickRef.current = null;
@@ -901,12 +991,12 @@ function PayPalButtonInner({
901
991
  setSubmitting(false);
902
992
  }
903
993
  }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
904
- return /* @__PURE__ */ jsxs3(Fragment2, { children: [
905
- /* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx5(
994
+ return /* @__PURE__ */ jsxs4(Fragment2, { children: [
995
+ /* @__PURE__ */ jsx6(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx6(
906
996
  ExpressCheckoutElement,
907
997
  {
908
998
  onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
909
- onLoadError: () => setLoadState("unavailable"),
999
+ onLoadError: () => setLoadState("load_error"),
910
1000
  onClick: handlePayPalClick,
911
1001
  onConfirm: handlePayPalConfirm,
912
1002
  onCancel: () => {
@@ -927,7 +1017,7 @@ function PayPalButtonInner({
927
1017
  }
928
1018
  }
929
1019
  ) }),
930
- submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
1020
+ submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
931
1021
  ] });
932
1022
  }
933
1023
  function WalletButtonInner({
@@ -940,16 +1030,24 @@ function WalletButtonInner({
940
1030
  onErrorChange,
941
1031
  onButtonClick,
942
1032
  onDecline,
943
- runBeforeButtonClick
1033
+ runBeforeButtonClick,
1034
+ onLoadStateChange
944
1035
  }) {
945
1036
  const stripe = useStripeRaw();
946
1037
  const elements = useStripeElements();
947
- const [loadState, setLoadState] = useState2("loading");
948
- const [submitting, setSubmitting] = useState2(false);
1038
+ const [loadState, setLoadState] = useState3("loading");
1039
+ const onLoadStateChangeRef = useRef2(onLoadStateChange);
1040
+ useEffect3(() => {
1041
+ onLoadStateChangeRef.current = onLoadStateChange;
1042
+ }, [onLoadStateChange]);
1043
+ useEffect3(() => {
1044
+ onLoadStateChangeRef.current?.(loadState);
1045
+ }, [loadState]);
1046
+ const [submitting, setSubmitting] = useState3(false);
949
1047
  const baseUrl = billingApiUrl.replace(/\/+$/, "");
950
1048
  const lastWalletMethodRef = useRef2("card");
951
1049
  const beforeClickRef = useRef2(null);
952
- const handleWalletConfirm = useCallback(
1050
+ const handleWalletConfirm = useCallback2(
953
1051
  async (event) => {
954
1052
  if (!stripe || !elements) return;
955
1053
  const walletType = event.expressPaymentType;
@@ -1038,12 +1136,12 @@ function WalletButtonInner({
1038
1136
  },
1039
1137
  [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
1040
1138
  );
1041
- return /* @__PURE__ */ jsxs3(Fragment2, { children: [
1042
- /* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx5(
1139
+ return /* @__PURE__ */ jsxs4(Fragment2, { children: [
1140
+ /* @__PURE__ */ jsx6(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx6(
1043
1141
  ExpressCheckoutElement,
1044
1142
  {
1045
1143
  onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
1046
- onLoadError: () => setLoadState("unavailable"),
1144
+ onLoadError: () => setLoadState("load_error"),
1047
1145
  onClick: async (event) => {
1048
1146
  lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
1049
1147
  const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current) : { proceed: true };
@@ -1078,7 +1176,7 @@ function WalletButtonInner({
1078
1176
  }
1079
1177
  }
1080
1178
  ) }),
1081
- submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
1179
+ submitting && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: "processing" })
1082
1180
  ] });
1083
1181
  }
1084
1182
  function SplitCardFormInner({
@@ -1137,16 +1235,16 @@ function SplitCardFormInner({
1137
1235
  const elements = useElements();
1138
1236
  const checkout = useContext3(CheckoutContext);
1139
1237
  const contextBillingUrl = useBillingApiUrl();
1140
- const [processing, setProcessing] = useState2(false);
1141
- const [error, setError] = useState2(null);
1142
- const [is3DSActive, setIs3DSActive] = useState2(false);
1143
- const [selectedCountry, setSelectedCountry] = useState2(countryProp ?? "US");
1144
- const [zipCode, setZipCode] = useState2(zipProp ?? "");
1145
- const [addressLine1, setAddressLine1] = useState2(addressLine1Prop ?? "");
1146
- const [addressLine2, setAddressLine2] = useState2(addressLine2Prop ?? "");
1147
- const [city, setCity] = useState2(cityProp ?? "");
1148
- const [stateValue, setStateValue] = useState2(stateProp ?? "");
1149
- const [accountPatch, setAccountPatch] = useState2({});
1238
+ const [processing, setProcessing] = useState3(false);
1239
+ const [error, setError] = useState3(null);
1240
+ const [is3DSActive, setIs3DSActive] = useState3(false);
1241
+ const [selectedCountry, setSelectedCountry] = useState3(countryProp ?? "US");
1242
+ const [zipCode, setZipCode] = useState3(zipProp ?? "");
1243
+ const [addressLine1, setAddressLine1] = useState3(addressLine1Prop ?? "");
1244
+ const [addressLine2, setAddressLine2] = useState3(addressLine2Prop ?? "");
1245
+ const [city, setCity] = useState3(cityProp ?? "");
1246
+ const [stateValue, setStateValue] = useState3(stateProp ?? "");
1247
+ const [accountPatch, setAccountPatch] = useState3({});
1150
1248
  const zipCodeRef = useRef2(zipProp ?? "");
1151
1249
  const selectedCountryRef = useRef2(countryProp ?? "US");
1152
1250
  const addressLine1Ref = useRef2(addressLine1Prop ?? "");
@@ -1155,14 +1253,14 @@ function SplitCardFormInner({
1155
1253
  const stateRef = useRef2(stateProp ?? "");
1156
1254
  const avsConfig = useMemo2(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
1157
1255
  const enableAVS = avsConfig !== null;
1158
- const [viewState, setViewState] = useState2(initialCardOpen ? "card" : "buttons");
1256
+ const [viewState, setViewState] = useState3(initialCardOpen ? "card" : "buttons");
1159
1257
  const showCardForm = viewState === "expanding" || viewState === "card";
1160
1258
  const TRANSITION_MS = 280;
1161
- const expandToCard = useCallback(() => {
1259
+ const expandToCard = useCallback2(() => {
1162
1260
  setViewState("expanding");
1163
1261
  setTimeout(() => setViewState("card"), TRANSITION_MS);
1164
1262
  }, []);
1165
- const collapseToButtons = useCallback(() => {
1263
+ const collapseToButtons = useCallback2(() => {
1166
1264
  setViewState("collapsing");
1167
1265
  setTimeout(() => setViewState("buttons"), TRANSITION_MS);
1168
1266
  }, []);
@@ -1171,9 +1269,9 @@ function SplitCardFormInner({
1171
1269
  setViewState("card");
1172
1270
  }
1173
1271
  }, [layout, initialCardOpen]);
1174
- const [fullName, setFullName] = useState2("");
1175
- const [formReady, setFormReady] = useState2(false);
1176
- const [overlayStatus, setOverlayStatus] = useState2(null);
1272
+ const [fullName, setFullName] = useState3("");
1273
+ const [formReady, setFormReady] = useState3(false);
1274
+ const [overlayStatus, setOverlayStatus] = useState3(null);
1177
1275
  const processingRef = useRef2(false);
1178
1276
  const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
1179
1277
  const displayError = externalError ?? error;
@@ -1226,28 +1324,35 @@ function SplitCardFormInner({
1226
1324
  captureMethod: "manual",
1227
1325
  setupFutureUsage: "off_session"
1228
1326
  }), [amountInCents, currency]);
1229
- const updateError = useCallback(
1327
+ const updateError = useCallback2(
1230
1328
  (err) => {
1231
1329
  setError(err);
1232
1330
  onErrorChange?.(err);
1233
1331
  },
1234
1332
  [onErrorChange]
1235
1333
  );
1236
- const emitDecline = useCallback(
1334
+ const emitDecline = useCallback2(
1237
1335
  (method, input, overrides) => {
1238
1336
  onDecline?.(buildDeclineEvent(method, input, overrides));
1239
1337
  },
1240
1338
  [onDecline]
1241
1339
  );
1242
1340
  const showWallets = showApplePay || showGooglePay;
1243
- const handleNameChange = useCallback((value) => {
1341
+ const [paypalLoadState, setPaypalLoadState] = useState3("loading");
1342
+ const [walletLoadState, setWalletLoadState] = useState3("loading");
1343
+ const expectedPayPal = showPayPal && !!paypalStripeInstance;
1344
+ const expectedWallets = showWallets && !!stripeInstance;
1345
+ const paypalLoadFailed = expectedPayPal && paypalLoadState === "load_error";
1346
+ const walletsLoadFailed = expectedWallets && walletLoadState === "load_error";
1347
+ const showInAppBrowserNotice = (expectedPayPal || expectedWallets) && (!expectedPayPal || paypalLoadFailed) && (!expectedWallets || walletsLoadFailed) && (paypalLoadFailed || walletsLoadFailed);
1348
+ const handleNameChange = useCallback2((value) => {
1244
1349
  setFullName(value);
1245
1350
  onFullNameChange?.(value);
1246
1351
  const parts = value.trim().split(/\s+/);
1247
1352
  onFirstNameChange?.(parts[0] ?? "");
1248
1353
  onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
1249
1354
  }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
1250
- const applyInlineSessionPatch = useCallback(
1355
+ const applyInlineSessionPatch = useCallback2(
1251
1356
  (patch, method) => {
1252
1357
  if (!checkout.applyInlineSessionPatch) {
1253
1358
  return Promise.resolve({ error: null, sessionId });
@@ -1264,7 +1369,7 @@ function SplitCardFormInner({
1264
1369
  },
1265
1370
  [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
1266
1371
  );
1267
- const runBeforeButtonClick = useCallback(async (method) => {
1372
+ const runBeforeButtonClick = useCallback2(async (method) => {
1268
1373
  if (!onBeforeButtonClick) return { proceed: true };
1269
1374
  try {
1270
1375
  const result = await onBeforeButtonClick({
@@ -1300,7 +1405,7 @@ function SplitCardFormInner({
1300
1405
  return { proceed: false };
1301
1406
  }
1302
1407
  }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
1303
- const processPaymentInternal = useCallback(
1408
+ const processPaymentInternal = useCallback2(
1304
1409
  async (tokenizedBody, overrides) => {
1305
1410
  if (processingRef.current) return;
1306
1411
  processingRef.current = true;
@@ -1490,7 +1595,7 @@ function SplitCardFormInner({
1490
1595
  },
1491
1596
  [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
1492
1597
  );
1493
- const dispatchTokenizedBody = useCallback(
1598
+ const dispatchTokenizedBody = useCallback2(
1494
1599
  (tokenizedBody, overrides) => {
1495
1600
  if (onTokenizedBody) {
1496
1601
  onTokenizedBody(tokenizedBody);
@@ -1545,7 +1650,7 @@ function SplitCardFormInner({
1545
1650
  localStorage.removeItem(WALLET_RESUME_KEY);
1546
1651
  }
1547
1652
  }, [sessionId, dispatchTokenizedBody]);
1548
- const handleSubmit = useCallback(
1653
+ const handleSubmit = useCallback2(
1549
1654
  async (e) => {
1550
1655
  e.preventDefault();
1551
1656
  if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -1687,7 +1792,7 @@ function SplitCardFormInner({
1687
1792
  );
1688
1793
  const isReady = flopay !== null && elements !== null;
1689
1794
  if (!isReady) {
1690
- return /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
1795
+ return /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
1691
1796
  }
1692
1797
  const isButtons = layout === "buttons";
1693
1798
  const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -1730,7 +1835,7 @@ function SplitCardFormInner({
1730
1835
  invalid: { color: "#ef4444" }
1731
1836
  }
1732
1837
  };
1733
- const cardFormBlock = /* @__PURE__ */ jsxs3("div", { style: {
1838
+ const cardFormBlock = /* @__PURE__ */ jsxs4("div", { style: {
1734
1839
  backgroundColor: cardBg,
1735
1840
  borderRadius: "8px",
1736
1841
  padding: isButtons ? "0" : "1rem",
@@ -1738,7 +1843,7 @@ function SplitCardFormInner({
1738
1843
  ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
1739
1844
  ...sharedInputPlaceholderVars
1740
1845
  }, children: [
1741
- /* @__PURE__ */ jsx5("style", { children: `
1846
+ /* @__PURE__ */ jsx6("style", { children: `
1742
1847
  .flopay-shared-input::placeholder {
1743
1848
  color: var(--flopay-input-placeholder-color);
1744
1849
  opacity: 1;
@@ -1747,12 +1852,12 @@ function SplitCardFormInner({
1747
1852
  font-weight: var(--flopay-input-font-weight);
1748
1853
  }
1749
1854
  ` }),
1750
- isButtons && showCardForm && /* @__PURE__ */ jsxs3("div", { style: {
1855
+ isButtons && showCardForm && /* @__PURE__ */ jsxs4("div", { style: {
1751
1856
  display: "flex",
1752
1857
  alignItems: "center",
1753
1858
  padding: "0.75rem 0 0.625rem"
1754
1859
  }, children: [
1755
- /* @__PURE__ */ jsxs3(
1860
+ /* @__PURE__ */ jsxs4(
1756
1861
  "button",
1757
1862
  {
1758
1863
  type: "button",
@@ -1774,7 +1879,7 @@ function SplitCardFormInner({
1774
1879
  },
1775
1880
  "aria-label": "Back to payment methods",
1776
1881
  children: [
1777
- /* @__PURE__ */ jsx5("span", { style: {
1882
+ /* @__PURE__ */ jsx6("span", { style: {
1778
1883
  display: "inline-flex",
1779
1884
  alignItems: "center",
1780
1885
  justifyContent: "center",
@@ -1784,12 +1889,12 @@ function SplitCardFormInner({
1784
1889
  backgroundColor: "#f3f4f6",
1785
1890
  transition: "background-color 0.15s",
1786
1891
  ...bStyles.backButtonIcon
1787
- }, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
1788
- /* @__PURE__ */ jsx5(BackButtonContentSlot, { content: cardBackButtonContent })
1892
+ }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
1893
+ /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
1789
1894
  ]
1790
1895
  }
1791
1896
  ),
1792
- hideTitle ? /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx5("div", { style: {
1897
+ hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
1793
1898
  flex: 1,
1794
1899
  textAlign: "center",
1795
1900
  fontWeight: 600,
@@ -1797,18 +1902,18 @@ function SplitCardFormInner({
1797
1902
  color: "#262833",
1798
1903
  paddingRight: 80,
1799
1904
  ...bStyles.title
1800
- }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) })
1905
+ }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
1801
1906
  ] }),
1802
- !isButtons && !hideTitle && /* @__PURE__ */ jsx5("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) }),
1803
- /* @__PURE__ */ jsx5("div", { style: {
1907
+ !isButtons && !hideTitle && /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) }),
1908
+ /* @__PURE__ */ jsx6("div", { style: {
1804
1909
  backgroundColor: cardInputBg,
1805
1910
  border: `1px solid ${resolvedBorder}`,
1806
1911
  borderTopLeftRadius: "8px",
1807
1912
  borderTopRightRadius: "8px",
1808
1913
  padding: "10px"
1809
- }, children: /* @__PURE__ */ jsx5(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
1810
- /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
1811
- /* @__PURE__ */ jsx5("div", { style: {
1914
+ }, children: /* @__PURE__ */ jsx6(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
1915
+ /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
1916
+ /* @__PURE__ */ jsx6("div", { style: {
1812
1917
  flex: 1,
1813
1918
  backgroundColor: cardInputBg,
1814
1919
  border: `1px solid ${resolvedBorder}`,
@@ -1816,23 +1921,23 @@ function SplitCardFormInner({
1816
1921
  borderRight: "none",
1817
1922
  borderBottomLeftRadius: "8px",
1818
1923
  padding: "10px"
1819
- }, children: /* @__PURE__ */ jsx5(CardExpiryElement, { options: stripeElementStyle }) }),
1820
- /* @__PURE__ */ jsx5("div", { style: {
1924
+ }, children: /* @__PURE__ */ jsx6(CardExpiryElement, { options: stripeElementStyle }) }),
1925
+ /* @__PURE__ */ jsx6("div", { style: {
1821
1926
  flex: 1,
1822
1927
  backgroundColor: cardInputBg,
1823
1928
  border: `1px solid ${resolvedBorder}`,
1824
1929
  borderTop: "none",
1825
1930
  borderBottomRightRadius: "8px",
1826
1931
  padding: "10px"
1827
- }, children: /* @__PURE__ */ jsx5(CardCvcElement, { options: stripeElementStyle }) })
1932
+ }, children: /* @__PURE__ */ jsx6(CardCvcElement, { options: stripeElementStyle }) })
1828
1933
  ] }),
1829
- /* @__PURE__ */ jsx5("div", { style: {
1934
+ /* @__PURE__ */ jsx6("div", { style: {
1830
1935
  backgroundColor: cardInputBg,
1831
1936
  border: `1px solid ${resolvedBorder}`,
1832
1937
  borderRadius: "8px",
1833
1938
  marginTop: "0.5rem",
1834
1939
  padding: "10px"
1835
- }, children: /* @__PURE__ */ jsx5(
1940
+ }, children: /* @__PURE__ */ jsx6(
1836
1941
  "input",
1837
1942
  {
1838
1943
  className: "flopay-shared-input",
@@ -1871,8 +1976,8 @@ function SplitCardFormInner({
1871
1976
  ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
1872
1977
  });
1873
1978
  const stateOpts = getStateOptions(cc);
1874
- return /* @__PURE__ */ jsxs3(Fragment2, { children: [
1875
- isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx5(
1979
+ return /* @__PURE__ */ jsxs4(Fragment2, { children: [
1980
+ isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx6("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx6(
1876
1981
  "input",
1877
1982
  {
1878
1983
  className: "flopay-shared-input",
@@ -1889,7 +1994,7 @@ function SplitCardFormInner({
1889
1994
  style: inputFieldStyle()
1890
1995
  }
1891
1996
  ) }),
1892
- isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx5(
1997
+ isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx6("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx6(
1893
1998
  "input",
1894
1999
  {
1895
2000
  className: "flopay-shared-input",
@@ -1905,12 +2010,12 @@ function SplitCardFormInner({
1905
2010
  style: inputFieldStyle()
1906
2011
  }
1907
2012
  ) }),
1908
- (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
2013
+ (isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
1909
2014
  display: "flex",
1910
2015
  gap: "0",
1911
2016
  marginTop: "0.5rem"
1912
2017
  }, children: [
1913
- isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx5("div", { style: {
2018
+ isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx6("div", { style: {
1914
2019
  flex: 1,
1915
2020
  backgroundColor: cardInputBg,
1916
2021
  border: `1px solid ${resolvedBorder}`,
@@ -1919,7 +2024,7 @@ function SplitCardFormInner({
1919
2024
  borderBottomLeftRadius: "8px",
1920
2025
  ...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
1921
2026
  ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
1922
- }, children: /* @__PURE__ */ jsx5(
2027
+ }, children: /* @__PURE__ */ jsx6(
1923
2028
  "input",
1924
2029
  {
1925
2030
  className: "flopay-shared-input",
@@ -1936,7 +2041,7 @@ function SplitCardFormInner({
1936
2041
  style: inputFieldStyle()
1937
2042
  }
1938
2043
  ) }),
1939
- isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx5("div", { style: {
2044
+ isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx6("div", { style: {
1940
2045
  flex: 1,
1941
2046
  backgroundColor: cardInputBg,
1942
2047
  border: `1px solid ${resolvedBorder}`,
@@ -1945,7 +2050,7 @@ function SplitCardFormInner({
1945
2050
  borderBottomRightRadius: "8px",
1946
2051
  ...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
1947
2052
  ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
1948
- }, children: stateOpts ? /* @__PURE__ */ jsxs3(
2053
+ }, children: stateOpts ? /* @__PURE__ */ jsxs4(
1949
2054
  "select",
1950
2055
  {
1951
2056
  value: stateValue,
@@ -1959,11 +2064,11 @@ function SplitCardFormInner({
1959
2064
  "data-testid": "flopay-state",
1960
2065
  style: { ...inputFieldStyle(), cursor: "pointer" },
1961
2066
  children: [
1962
- /* @__PURE__ */ jsx5("option", { value: "", children: getStateLabel(cc) }),
1963
- stateOpts.map((s) => /* @__PURE__ */ jsx5("option", { value: s.code, children: s.name }, s.code))
2067
+ /* @__PURE__ */ jsx6("option", { value: "", children: getStateLabel(cc) }),
2068
+ stateOpts.map((s) => /* @__PURE__ */ jsx6("option", { value: s.code, children: s.name }, s.code))
1964
2069
  ]
1965
2070
  }
1966
- ) : /* @__PURE__ */ jsx5(
2071
+ ) : /* @__PURE__ */ jsx6(
1967
2072
  "input",
1968
2073
  {
1969
2074
  className: "flopay-shared-input",
@@ -1981,20 +2086,20 @@ function SplitCardFormInner({
1981
2086
  }
1982
2087
  ) })
1983
2088
  ] }),
1984
- (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
2089
+ (isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs4("div", { style: {
1985
2090
  display: "flex",
1986
2091
  flexDirection: avsLayoutProp === "column" ? "column" : "row",
1987
2092
  gap: avsLayoutProp === "column" ? "0.5rem" : "0",
1988
2093
  marginTop: "0.5rem"
1989
2094
  }, children: [
1990
- isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx5("div", { style: {
2095
+ isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx6("div", { style: {
1991
2096
  flex: avsLayoutProp === "row" ? 1 : void 0,
1992
2097
  backgroundColor: cardInputBg,
1993
2098
  border: `1px solid ${resolvedBorder}`,
1994
2099
  padding: "10px",
1995
2100
  ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
1996
2101
  ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
1997
- }, children: /* @__PURE__ */ jsx5(
2102
+ }, children: /* @__PURE__ */ jsx6(
1998
2103
  "select",
1999
2104
  {
2000
2105
  value: selectedCountry,
@@ -2009,21 +2114,21 @@ function SplitCardFormInner({
2009
2114
  autoComplete: "country",
2010
2115
  "data-testid": "flopay-country",
2011
2116
  style: { ...inputFieldStyle(), cursor: "pointer" },
2012
- children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs3("option", { value: c.code, children: [
2117
+ children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs4("option", { value: c.code, children: [
2013
2118
  c.flag,
2014
2119
  " ",
2015
2120
  c.name
2016
2121
  ] }, c.code))
2017
2122
  }
2018
2123
  ) }),
2019
- isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx5("div", { style: {
2124
+ isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx6("div", { style: {
2020
2125
  flex: avsLayoutProp === "row" ? 1 : void 0,
2021
2126
  backgroundColor: cardInputBg,
2022
2127
  border: `1px solid ${resolvedBorder}`,
2023
2128
  padding: "10px",
2024
2129
  ...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
2025
2130
  ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
2026
- }, children: /* @__PURE__ */ jsx5(
2131
+ }, children: /* @__PURE__ */ jsx6(
2027
2132
  "input",
2028
2133
  {
2029
2134
  className: "flopay-shared-input",
@@ -2044,7 +2149,7 @@ function SplitCardFormInner({
2044
2149
  ] })
2045
2150
  ] });
2046
2151
  })(),
2047
- displayError && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
2152
+ displayError && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
2048
2153
  margin: "0.75rem 0",
2049
2154
  padding: "0.625rem 0.875rem",
2050
2155
  background: "#FEF2F2",
@@ -2058,10 +2163,10 @@ function SplitCardFormInner({
2058
2163
  gap: "0.5rem",
2059
2164
  ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
2060
2165
  }, children: [
2061
- /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("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" }) }),
2166
+ /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("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" }) }),
2062
2167
  displayError
2063
2168
  ] }),
2064
- children ?? /* @__PURE__ */ jsx5(
2169
+ children ?? /* @__PURE__ */ jsx6(
2065
2170
  "button",
2066
2171
  {
2067
2172
  type: "submit",
@@ -2084,7 +2189,7 @@ function SplitCardFormInner({
2084
2189
  children: isSubmitting ? "PROCESSING..." : submitLabel
2085
2190
  }
2086
2191
  ),
2087
- !isButtons && showSecurityFooter && /* @__PURE__ */ jsx5("div", { style: {
2192
+ !isButtons && showSecurityFooter && /* @__PURE__ */ jsx6("div", { style: {
2088
2193
  backgroundColor: "#EFF9F0",
2089
2194
  borderRadius: "8px",
2090
2195
  padding: "0.75rem",
@@ -2101,11 +2206,11 @@ function SplitCardFormInner({
2101
2206
  const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
2102
2207
  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;
2103
2208
  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;
2104
- return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2105
- /* @__PURE__ */ jsx5(FloPayKeyframes, {}),
2106
- overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2107
- /* @__PURE__ */ jsxs3("div", { style: { display: "grid" }, children: [
2108
- /* @__PURE__ */ jsxs3("div", { style: {
2209
+ return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2210
+ /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
2211
+ overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2212
+ /* @__PURE__ */ jsxs4("div", { style: { display: "grid" }, children: [
2213
+ /* @__PURE__ */ jsxs4("div", { style: {
2109
2214
  gridArea: "1 / 1",
2110
2215
  display: "flex",
2111
2216
  flexDirection: "column",
@@ -2114,7 +2219,7 @@ function SplitCardFormInner({
2114
2219
  ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
2115
2220
  ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
2116
2221
  }, children: [
2117
- showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
2222
+ showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
2118
2223
  PayPalButtonInner,
2119
2224
  {
2120
2225
  sessionId,
@@ -2125,10 +2230,11 @@ function SplitCardFormInner({
2125
2230
  isProcessing: isSubmitting,
2126
2231
  onButtonClick,
2127
2232
  onDecline,
2128
- runBeforeButtonClick
2233
+ runBeforeButtonClick,
2234
+ onLoadStateChange: setPaypalLoadState
2129
2235
  }
2130
2236
  ) }),
2131
- showWallets && stripeInstance ? /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
2237
+ showWallets && stripeInstance ? /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
2132
2238
  WalletButtonInner,
2133
2239
  {
2134
2240
  sessionId,
@@ -2140,10 +2246,12 @@ function SplitCardFormInner({
2140
2246
  onErrorChange: updateError,
2141
2247
  onButtonClick,
2142
2248
  onDecline,
2143
- runBeforeButtonClick
2249
+ runBeforeButtonClick,
2250
+ onLoadStateChange: setWalletLoadState
2144
2251
  }
2145
- ) }) : showWallets ? /* @__PURE__ */ jsx5("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
2146
- /* @__PURE__ */ jsx5(
2252
+ ) }) : showWallets ? /* @__PURE__ */ jsx6("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
2253
+ showInAppBrowserNotice && /* @__PURE__ */ jsx6(InAppBrowserNotice, {}),
2254
+ /* @__PURE__ */ jsx6(
2147
2255
  "button",
2148
2256
  {
2149
2257
  type: "button",
@@ -2181,10 +2289,10 @@ function SplitCardFormInner({
2181
2289
  onMouseUp: (e) => {
2182
2290
  e.currentTarget.style.transform = "scale(1)";
2183
2291
  },
2184
- children: /* @__PURE__ */ jsx5(CardButtonContentSlot, { content: cardButtonContent })
2292
+ children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
2185
2293
  }
2186
2294
  ),
2187
- displayError && viewState === "buttons" && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
2295
+ displayError && viewState === "buttons" && /* @__PURE__ */ jsxs4("div", { role: "alert", "data-testid": "flopay-error", style: {
2188
2296
  margin: "0.25rem 0",
2189
2297
  padding: "0.625rem 0.875rem",
2190
2298
  background: "#FEF2F2",
@@ -2198,11 +2306,11 @@ function SplitCardFormInner({
2198
2306
  gap: "0.5rem",
2199
2307
  ...bStyles.errorBanner ? bStyles.errorBanner : {}
2200
2308
  }, children: [
2201
- /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("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" }) }),
2309
+ /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("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" }) }),
2202
2310
  displayError
2203
2311
  ] })
2204
2312
  ] }),
2205
- isCardView && /* @__PURE__ */ jsx5("div", { style: {
2313
+ isCardView && /* @__PURE__ */ jsx6("div", { style: {
2206
2314
  gridArea: "1 / 1",
2207
2315
  ...cardAnim ? { animation: cardAnim } : {},
2208
2316
  ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -2210,10 +2318,10 @@ function SplitCardFormInner({
2210
2318
  ] })
2211
2319
  ] });
2212
2320
  }
2213
- return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2214
- /* @__PURE__ */ jsx5(FloPayKeyframes, {}),
2215
- overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2216
- showWallets && stripeInstance && /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
2321
+ return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2322
+ /* @__PURE__ */ jsx6(FloPayKeyframes, {}),
2323
+ overlayStatus && /* @__PURE__ */ jsx6(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2324
+ showWallets && stripeInstance && /* @__PURE__ */ jsx6(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx6(
2217
2325
  WalletButtonInner,
2218
2326
  {
2219
2327
  sessionId,
@@ -2223,10 +2331,11 @@ function SplitCardFormInner({
2223
2331
  showGooglePay,
2224
2332
  onTokenizedBody: dispatchTokenizedBody,
2225
2333
  onErrorChange: updateError,
2226
- onDecline
2334
+ onDecline,
2335
+ onLoadStateChange: setWalletLoadState
2227
2336
  }
2228
2337
  ) }),
2229
- showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
2338
+ showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx6(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx6(
2230
2339
  PayPalButtonInner,
2231
2340
  {
2232
2341
  sessionId,
@@ -2235,10 +2344,12 @@ function SplitCardFormInner({
2235
2344
  onTokenizedBody: dispatchTokenizedBody,
2236
2345
  onErrorChange: updateError,
2237
2346
  isProcessing: isSubmitting,
2238
- onDecline
2347
+ onDecline,
2348
+ onLoadStateChange: setPaypalLoadState
2239
2349
  }
2240
2350
  ) }),
2241
- (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ jsxs3("div", { style: {
2351
+ showInAppBrowserNotice && /* @__PURE__ */ jsx6(InAppBrowserNotice, {}),
2352
+ (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ jsxs4("div", { style: {
2242
2353
  display: "flex",
2243
2354
  alignItems: "center",
2244
2355
  gap: "0.75rem",
@@ -2246,9 +2357,9 @@ function SplitCardFormInner({
2246
2357
  color: "#999",
2247
2358
  fontSize: "0.85rem"
2248
2359
  }, children: [
2249
- /* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
2250
- /* @__PURE__ */ jsx5("span", { children: "or pay with card" }),
2251
- /* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
2360
+ /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
2361
+ /* @__PURE__ */ jsx6("span", { children: "or pay with card" }),
2362
+ /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
2252
2363
  ] }),
2253
2364
  cardFormBlock
2254
2365
  ] });
@@ -2689,15 +2800,31 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
2689
2800
  { checkoutMethod: "paypal" }
2690
2801
  );
2691
2802
  }
2692
- const confirmParams = {
2693
- return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href
2694
- };
2695
2803
  if (redirectResult.paymentMethodId) {
2696
- confirmParams["payment_method"] = redirectResult.paymentMethodId;
2804
+ const { error: error2 } = await paypalStripe.handleNextAction({
2805
+ clientSecret: redirectResult.threeDSecureToken
2806
+ });
2807
+ if (error2) {
2808
+ throw Object.assign(
2809
+ new FloPayError3(
2810
+ error2.message ?? "PayPal authorization failed.",
2811
+ "api_error",
2812
+ { code: error2.code }
2813
+ ),
2814
+ { checkoutMethod: "paypal" }
2815
+ );
2816
+ }
2817
+ return {
2818
+ status: "succeeded",
2819
+ checkoutMethod: "paypal"
2820
+ };
2697
2821
  }
2698
2822
  const { error } = await paypalStripe.confirmPayment({
2699
2823
  clientSecret: redirectResult.threeDSecureToken,
2700
- confirmParams,
2824
+ confirmParams: {
2825
+ return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href,
2826
+ payment_method_data: { type: "paypal" }
2827
+ },
2701
2828
  redirect: "if_required"
2702
2829
  });
2703
2830
  if (error) {
@@ -2771,7 +2898,7 @@ async function loadSavedPaymentProviders({
2771
2898
  }
2772
2899
 
2773
2900
  // src/flopay-checkout.tsx
2774
- import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
2901
+ import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
2775
2902
  var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
2776
2903
  var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
2777
2904
  var sessionInflightMap = /* @__PURE__ */ new Map();
@@ -2874,25 +3001,25 @@ function FloPayCheckout({
2874
3001
  const resolvedBillingUrl = resolveBillingApiUrl3(billingApiUrl);
2875
3002
  const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
2876
3003
  const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
2877
- const [unified, setUnified] = useState3(null);
2878
- const [flopay, setFloPay] = useState3(null);
3004
+ const [unified, setUnified] = useState4(null);
3005
+ const [flopay, setFloPay] = useState4(null);
2879
3006
  const flopayRef = useRef3(null);
2880
- const [paypalFlopay, setPaypalFloPay] = useState3(null);
3007
+ const [paypalFlopay, setPaypalFloPay] = useState4(null);
2881
3008
  const paypalFlopayRef = useRef3(null);
2882
- const [session, setSession] = useState3(null);
2883
- const [resolvedSessionId, setResolvedSessionId] = useState3(sessionIdProp ?? "");
3009
+ const [session, setSession] = useState4(null);
3010
+ const [resolvedSessionId, setResolvedSessionId] = useState4(sessionIdProp ?? "");
2884
3011
  const activeSessionId = sessionIdProp ?? resolvedSessionId;
2885
3012
  const initSessionDependency = createSessionParams ? "" : activeSessionId;
2886
- const [isLoading, setIsLoading] = useState3(true);
2887
- const [loadError, setLoadError] = useState3(null);
2888
- const [currentMode, setCurrentMode] = useState3("full");
2889
- const [confirmProcessing, setConfirmProcessing] = useState3(false);
2890
- const [modeError, setModeError] = useState3(initialErrorMessage);
2891
- const [modeOverlayStatus, setModeOverlayStatus] = useState3(null);
2892
- const [modeOverlayError, setModeOverlayError] = useState3(null);
2893
- const [createSessionPatch, setCreateSessionPatch] = useState3(void 0);
2894
- const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState3("");
2895
- const [cardBootstrapPending, setCardBootstrapPending] = useState3(false);
3013
+ const [isLoading, setIsLoading] = useState4(true);
3014
+ const [loadError, setLoadError] = useState4(null);
3015
+ const [currentMode, setCurrentMode] = useState4("full");
3016
+ const [confirmProcessing, setConfirmProcessing] = useState4(false);
3017
+ const [modeError, setModeError] = useState4(initialErrorMessage);
3018
+ const [modeOverlayStatus, setModeOverlayStatus] = useState4(null);
3019
+ const [modeOverlayError, setModeOverlayError] = useState4(null);
3020
+ const [createSessionPatch, setCreateSessionPatch] = useState4(void 0);
3021
+ const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState4("");
3022
+ const [cardBootstrapPending, setCardBootstrapPending] = useState4(false);
2896
3023
  const autoCheckoutAttempted = useRef3(false);
2897
3024
  const paypalResumeAttempted = useRef3(false);
2898
3025
  const savedPaymentKeysRef = useRef3(null);
@@ -2939,13 +3066,13 @@ function FloPayCheckout({
2939
3066
  useEffect4(() => {
2940
3067
  setModeError(initialErrorMessage);
2941
3068
  }, [initialErrorMessage]);
2942
- const emitDecline = useCallback2(
3069
+ const emitDecline = useCallback3(
2943
3070
  (method, input, overrides) => {
2944
3071
  onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
2945
3072
  },
2946
3073
  []
2947
3074
  );
2948
- const runSavedPaymentFlow = useCallback2(
3075
+ const runSavedPaymentFlow = useCallback3(
2949
3076
  async (sess, options) => {
2950
3077
  setModeError(null);
2951
3078
  setModeOverlayError(null);
@@ -3113,6 +3240,7 @@ function FloPayCheckout({
3113
3240
  );
3114
3241
  }
3115
3242
  const paymentMethodId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
3243
+ let finalResultStatus = resultStatus;
3116
3244
  if (resumeState.sessionId) {
3117
3245
  const resumeApi = new PaymentAPI2(resolvedBillingUrl);
3118
3246
  const resumeSessionResult = await resumeApi.getUnifiedCheckoutSession(resumeState.sessionId);
@@ -3135,13 +3263,14 @@ function FloPayCheckout({
3135
3263
  { checkoutMethod: "paypal" }
3136
3264
  );
3137
3265
  }
3266
+ finalResultStatus = processResult.result.status;
3138
3267
  }
3139
3268
  }
3140
3269
  if (resumeState.sessionId) markSessionRecentlyCompleted(resumeState.sessionId);
3141
3270
  setModeOverlayStatus("success");
3142
3271
  await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
3143
3272
  onCompleteRef.current?.({
3144
- status: resultStatus,
3273
+ status: finalResultStatus,
3145
3274
  paymentIntentId: paymentIntent.id,
3146
3275
  paymentMethodId,
3147
3276
  checkoutMethod: "paypal"
@@ -3243,7 +3372,7 @@ function FloPayCheckout({
3243
3372
  }
3244
3373
  return { sid: sid ?? "", result: realResult };
3245
3374
  }
3246
- const bootstrapInlineSession = useCallback2(
3375
+ const bootstrapInlineSession = useCallback3(
3247
3376
  async (patch) => {
3248
3377
  const baseParams = createSessionParamsRef.current;
3249
3378
  if (!baseParams) {
@@ -3304,7 +3433,7 @@ function FloPayCheckout({
3304
3433
  },
3305
3434
  [locale, resolvedBillingUrl]
3306
3435
  );
3307
- const handleInlineSessionPatch = useCallback2(async (patch) => {
3436
+ const handleInlineSessionPatch = useCallback3(async (patch) => {
3308
3437
  if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
3309
3438
  return {
3310
3439
  sessionId: resolvedSessionId,
@@ -3481,7 +3610,7 @@ function FloPayCheckout({
3481
3610
  initSessionDependency,
3482
3611
  runSavedPaymentFlow
3483
3612
  ]);
3484
- const handleConfirmCheckout = useCallback2(async () => {
3613
+ const handleConfirmCheckout = useCallback3(async () => {
3485
3614
  if (confirmProcessing || !session) return;
3486
3615
  setConfirmProcessing(true);
3487
3616
  setModeError(null);
@@ -3535,7 +3664,7 @@ function FloPayCheckout({
3535
3664
  ]
3536
3665
  );
3537
3666
  const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
3538
- const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx6(
3667
+ const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx7(
3539
3668
  ProcessingOverlay,
3540
3669
  {
3541
3670
  status: modeOverlayStatus,
@@ -3544,31 +3673,31 @@ function FloPayCheckout({
3544
3673
  ) : null;
3545
3674
  if (isLoading) {
3546
3675
  if (loadingNode) {
3547
- return /* @__PURE__ */ jsxs4(Fragment3, { children: [
3676
+ return /* @__PURE__ */ jsxs5(Fragment3, { children: [
3548
3677
  loadingNode,
3549
3678
  modeOverlay
3550
3679
  ] });
3551
3680
  }
3552
3681
  if (layout === "buttons") {
3553
- const skeletonBar = (h) => /* @__PURE__ */ jsx6("div", { style: {
3682
+ const skeletonBar = (h) => /* @__PURE__ */ jsx7("div", { style: {
3554
3683
  height: h,
3555
3684
  borderRadius: 8,
3556
3685
  background: "#e5e7eb",
3557
3686
  animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
3558
3687
  } });
3559
- return /* @__PURE__ */ jsxs4(Fragment3, { children: [
3560
- /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3688
+ return /* @__PURE__ */ jsxs5(Fragment3, { children: [
3689
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3561
3690
  showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3562
3691
  (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3563
3692
  skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3564
- /* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
3693
+ /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
3565
3694
  ] }),
3566
3695
  modeOverlay
3567
3696
  ] });
3568
3697
  }
3569
- return /* @__PURE__ */ jsxs4(Fragment3, { children: [
3570
- /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
3571
- /* @__PURE__ */ jsx6("div", { style: {
3698
+ return /* @__PURE__ */ jsxs5(Fragment3, { children: [
3699
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
3700
+ /* @__PURE__ */ jsx7("div", { style: {
3572
3701
  width: 24,
3573
3702
  height: 24,
3574
3703
  border: "2px solid #e5e7eb",
@@ -3576,14 +3705,14 @@ function FloPayCheckout({
3576
3705
  borderRadius: "50%",
3577
3706
  animation: "spin 0.6s linear infinite"
3578
3707
  } }),
3579
- /* @__PURE__ */ jsx6("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
3708
+ /* @__PURE__ */ jsx7("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
3580
3709
  ] }),
3581
3710
  modeOverlay
3582
3711
  ] });
3583
3712
  }
3584
3713
  if (loadError) {
3585
- if (errorNode) return /* @__PURE__ */ jsx6(Fragment3, { children: errorNode(loadError) });
3586
- return /* @__PURE__ */ jsx6(
3714
+ if (errorNode) return /* @__PURE__ */ jsx7(Fragment3, { children: errorNode(loadError) });
3715
+ return /* @__PURE__ */ jsx7(
3587
3716
  "div",
3588
3717
  {
3589
3718
  style: {
@@ -3597,8 +3726,8 @@ function FloPayCheckout({
3597
3726
  );
3598
3727
  }
3599
3728
  if (shouldShowInterimButtons) {
3600
- return /* @__PURE__ */ jsxs4(Fragment3, { children: [
3601
- /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(
3729
+ return /* @__PURE__ */ jsxs5(Fragment3, { children: [
3730
+ /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(
3602
3731
  InterimButtonsView,
3603
3732
  {
3604
3733
  onButtonClick,
@@ -3616,12 +3745,12 @@ function FloPayCheckout({
3616
3745
  ] });
3617
3746
  }
3618
3747
  if (!flopay || !providerOptions) {
3619
- return /* @__PURE__ */ jsx6(Fragment3, { children: modeOverlay });
3748
+ return /* @__PURE__ */ jsx7(Fragment3, { children: modeOverlay });
3620
3749
  }
3621
3750
  if (currentMode === "confirm") {
3622
- return /* @__PURE__ */ jsxs4(Fragment3, { children: [
3623
- /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs4("div", { className, children: [
3624
- modeError && /* @__PURE__ */ jsx6(
3751
+ return /* @__PURE__ */ jsxs5(Fragment3, { children: [
3752
+ /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs5("div", { className, children: [
3753
+ modeError && /* @__PURE__ */ jsx7(
3625
3754
  "div",
3626
3755
  {
3627
3756
  style: {
@@ -3636,7 +3765,7 @@ function FloPayCheckout({
3636
3765
  renderConfirmButton ? renderConfirmButton({
3637
3766
  onConfirm: handleConfirmCheckout,
3638
3767
  isProcessing: confirmProcessing
3639
- }) : /* @__PURE__ */ jsx6(
3768
+ }) : /* @__PURE__ */ jsx7(
3640
3769
  "button",
3641
3770
  {
3642
3771
  type: "button",
@@ -3661,9 +3790,9 @@ function FloPayCheckout({
3661
3790
  modeOverlay
3662
3791
  ] });
3663
3792
  }
3664
- return /* @__PURE__ */ jsxs4(Fragment3, { children: [
3665
- /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
3666
- modeError && /* @__PURE__ */ jsx6(
3793
+ return /* @__PURE__ */ jsxs5(Fragment3, { children: [
3794
+ /* @__PURE__ */ jsx7(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx7(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
3795
+ modeError && /* @__PURE__ */ jsx7(
3667
3796
  "div",
3668
3797
  {
3669
3798
  style: {
@@ -3678,7 +3807,7 @@ function FloPayCheckout({
3678
3807
  children: modeError
3679
3808
  }
3680
3809
  ),
3681
- /* @__PURE__ */ jsx6(
3810
+ /* @__PURE__ */ jsx7(
3682
3811
  SessionInjector,
3683
3812
  {
3684
3813
  sessionId: activeSessionId,
@@ -3687,7 +3816,7 @@ function FloPayCheckout({
3687
3816
  children
3688
3817
  }
3689
3818
  )
3690
- ] }) : /* @__PURE__ */ jsx6(
3819
+ ] }) : /* @__PURE__ */ jsx7(
3691
3820
  SplitCardForm,
3692
3821
  {
3693
3822
  sessionId: activeSessionId,
@@ -3738,8 +3867,8 @@ function SessionInjector({
3738
3867
  session,
3739
3868
  children
3740
3869
  }) {
3741
- return /* @__PURE__ */ jsx6(Fragment3, { children: React6.Children.map(children, (child) => {
3742
- if (!React6.isValidElement(child)) return child;
3870
+ return /* @__PURE__ */ jsx7(Fragment3, { children: React7.Children.map(children, (child) => {
3871
+ if (!React7.isValidElement(child)) return child;
3743
3872
  const existing = child.props;
3744
3873
  const injected = {};
3745
3874
  if (!existing.sessionId) injected.sessionId = sessionId;
@@ -3753,7 +3882,7 @@ function SessionInjector({
3753
3882
  injected.lastName = session.customer.lastName;
3754
3883
  }
3755
3884
  if (Object.keys(injected).length === 0) return child;
3756
- return React6.cloneElement(child, injected);
3885
+ return React7.cloneElement(child, injected);
3757
3886
  }) });
3758
3887
  }
3759
3888
  function InterimButtonsView({
@@ -3771,7 +3900,7 @@ function InterimButtonsView({
3771
3900
  cardBackButtonContent,
3772
3901
  cardTitleContent
3773
3902
  }) {
3774
- const [showCardForm, setShowCardForm] = useState3(false);
3903
+ const [showCardForm, setShowCardForm] = useState4(false);
3775
3904
  const isCardOpenControlled = typeof cardOpen === "boolean";
3776
3905
  useEffect4(() => {
3777
3906
  if (isCardOpenControlled) {
@@ -3792,7 +3921,7 @@ function InterimButtonsView({
3792
3921
  title: { ...base.title, ...stylesOverride.title }
3793
3922
  };
3794
3923
  }, [buttonsTheme, stylesOverride]);
3795
- const skeleton = (h) => /* @__PURE__ */ jsx6("div", { style: {
3924
+ const skeleton = (h) => /* @__PURE__ */ jsx7("div", { style: {
3796
3925
  height: h,
3797
3926
  borderRadius: 8,
3798
3927
  background: "#e5e7eb",
@@ -3804,15 +3933,15 @@ function InterimButtonsView({
3804
3933
  const inputBg = bStyles.cardInputBackground ?? "white";
3805
3934
  const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
3806
3935
  const hideTitle = isEmptySlotContent(cardTitleContent);
3807
- return /* @__PURE__ */ jsxs4("div", { style: {
3936
+ return /* @__PURE__ */ jsxs5("div", { style: {
3808
3937
  backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
3809
3938
  borderRadius: "8px",
3810
3939
  animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
3811
3940
  overflow: "hidden",
3812
3941
  ...bStyles.cardFormContainer
3813
3942
  }, children: [
3814
- /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
3815
- /* @__PURE__ */ jsxs4(
3943
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
3944
+ /* @__PURE__ */ jsxs5(
3816
3945
  "button",
3817
3946
  {
3818
3947
  type: "button",
@@ -3839,7 +3968,7 @@ function InterimButtonsView({
3839
3968
  ...bStyles.backButton
3840
3969
  },
3841
3970
  children: [
3842
- /* @__PURE__ */ jsx6("span", { style: {
3971
+ /* @__PURE__ */ jsx7("span", { style: {
3843
3972
  display: "inline-flex",
3844
3973
  alignItems: "center",
3845
3974
  justifyContent: "center",
@@ -3848,12 +3977,12 @@ function InterimButtonsView({
3848
3977
  borderRadius: "50%",
3849
3978
  backgroundColor: "#f3f4f6",
3850
3979
  ...bStyles.backButtonIcon
3851
- }, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
3852
- /* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
3980
+ }, children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M15 18l-6-6 6-6" }) }) }),
3981
+ /* @__PURE__ */ jsx7(BackButtonContentSlot, { content: cardBackButtonContent })
3853
3982
  ]
3854
3983
  }
3855
3984
  ),
3856
- hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
3985
+ hideTitle ? /* @__PURE__ */ jsx7("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx7("div", { style: {
3857
3986
  flex: 1,
3858
3987
  textAlign: "center",
3859
3988
  fontWeight: 600,
@@ -3861,15 +3990,15 @@ function InterimButtonsView({
3861
3990
  color: "#262833",
3862
3991
  paddingRight: 80,
3863
3992
  ...bStyles.title
3864
- }, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
3993
+ }, children: /* @__PURE__ */ jsx7(TitleContentSlot, { content: cardTitleContent }) })
3865
3994
  ] }),
3866
- /* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
3867
- /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
3868
- /* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
3869
- /* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
3995
+ /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
3996
+ /* @__PURE__ */ jsxs5("div", { style: { display: "flex" }, children: [
3997
+ /* @__PURE__ */ jsx7("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
3998
+ /* @__PURE__ */ jsx7("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
3870
3999
  ] }),
3871
- /* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
3872
- /* @__PURE__ */ jsx6("div", { style: {
4000
+ /* @__PURE__ */ jsx7("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx7("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
4001
+ /* @__PURE__ */ jsx7("div", { style: {
3873
4002
  height: 50,
3874
4003
  borderRadius: 8,
3875
4004
  marginTop: 16,
@@ -3878,7 +4007,7 @@ function InterimButtonsView({
3878
4007
  ...bStyles.submitButton,
3879
4008
  opacity: 0.5
3880
4009
  } }),
3881
- /* @__PURE__ */ jsx6("style", { children: `
4010
+ /* @__PURE__ */ jsx7("style", { children: `
3882
4011
  @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
3883
4012
  @keyframes flopay-interim-expand {
3884
4013
  0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -3888,10 +4017,10 @@ function InterimButtonsView({
3888
4017
  ` })
3889
4018
  ] });
3890
4019
  }
3891
- return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
4020
+ return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3892
4021
  showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3893
4022
  (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3894
- /* @__PURE__ */ jsx6(
4023
+ /* @__PURE__ */ jsx7(
3895
4024
  "button",
3896
4025
  {
3897
4026
  type: "button",
@@ -3931,10 +4060,10 @@ function InterimButtonsView({
3931
4060
  onMouseUp: (e) => {
3932
4061
  e.currentTarget.style.transform = "scale(1)";
3933
4062
  },
3934
- children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
4063
+ children: /* @__PURE__ */ jsx7(CardButtonContentSlot, { content: cardButtonContent })
3935
4064
  }
3936
4065
  ),
3937
- errorMessage && /* @__PURE__ */ jsxs4("div", { style: {
4066
+ errorMessage && /* @__PURE__ */ jsxs5("div", { style: {
3938
4067
  margin: "0.25rem 0",
3939
4068
  padding: "0.625rem 0.875rem",
3940
4069
  background: "#FEF2F2",
@@ -3948,21 +4077,21 @@ function InterimButtonsView({
3948
4077
  gap: "0.5rem",
3949
4078
  ...bStyles.errorBanner
3950
4079
  }, children: [
3951
- /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("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" }) }),
4080
+ /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx7("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" }) }),
3952
4081
  errorMessage
3953
4082
  ] }),
3954
- /* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
4083
+ /* @__PURE__ */ jsx7("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
3955
4084
  ] });
3956
4085
  }
3957
4086
 
3958
4087
  // src/checkout-form.tsx
3959
4088
  import { FloPayError as FloPayError5 } from "@flopay/shared";
3960
- import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useState as useState4 } from "react";
3961
- import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
4089
+ import { forwardRef as forwardRef2, useCallback as useCallback4, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useState as useState5 } from "react";
4090
+ import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
3962
4091
  var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
3963
4092
  var CheckoutForm = forwardRef2(
3964
4093
  function CheckoutForm2(props, ref) {
3965
- return /* @__PURE__ */ jsx7(CheckoutFormInner, { ...props, innerRef: ref });
4094
+ return /* @__PURE__ */ jsx8(CheckoutFormInner, { ...props, innerRef: ref });
3966
4095
  }
3967
4096
  );
3968
4097
  function CheckoutFormInner({
@@ -3991,27 +4120,27 @@ function CheckoutFormInner({
3991
4120
  const paypalFlopay = usePayPalFloPay();
3992
4121
  const elements = useElements();
3993
4122
  const contextBillingUrl = useBillingApiUrl();
3994
- const [processing, setProcessing] = useState4(false);
3995
- const [error, setError] = useState4(null);
3996
- const [is3DSActive, setIs3DSActive] = useState4(false);
4123
+ const [processing, setProcessing] = useState5(false);
4124
+ const [error, setError] = useState5(null);
4125
+ const [is3DSActive, setIs3DSActive] = useState5(false);
3997
4126
  const displayError = externalError ?? error;
3998
4127
  const isSubmitting = externalProcessing ?? processing;
3999
4128
  const isSelfContained = !onTokenizedBody;
4000
4129
  const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
4001
- const updateError = useCallback3(
4130
+ const updateError = useCallback4(
4002
4131
  (err) => {
4003
4132
  setError(err);
4004
4133
  onErrorChange?.(err);
4005
4134
  },
4006
4135
  [onErrorChange]
4007
4136
  );
4008
- const emitDecline = useCallback3(
4137
+ const emitDecline = useCallback4(
4009
4138
  (input, overrides) => {
4010
4139
  onDecline?.(buildDeclineEvent("card", input, overrides));
4011
4140
  },
4012
4141
  [onDecline]
4013
4142
  );
4014
- const processPaymentInternal = useCallback3(
4143
+ const processPaymentInternal = useCallback4(
4015
4144
  async (tokenizedBody, completionPaymentMethodId) => {
4016
4145
  setProcessing(true);
4017
4146
  updateError(null);
@@ -4128,7 +4257,7 @@ function CheckoutFormInner({
4128
4257
  },
4129
4258
  [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
4130
4259
  );
4131
- const dispatchTokenizedBody = useCallback3(
4260
+ const dispatchTokenizedBody = useCallback4(
4132
4261
  (tokenizedBody) => {
4133
4262
  if (onTokenizedBody) {
4134
4263
  onTokenizedBody(tokenizedBody);
@@ -4183,7 +4312,7 @@ function CheckoutFormInner({
4183
4312
  localStorage.removeItem(WALLET_RESUME_KEY2);
4184
4313
  }
4185
4314
  }, [sessionId, dispatchTokenizedBody]);
4186
- const handleSubmit = useCallback3(
4315
+ const handleSubmit = useCallback4(
4187
4316
  async (e) => {
4188
4317
  e.preventDefault();
4189
4318
  if (!flopay || !elements || isSubmitting) return;
@@ -4273,8 +4402,8 @@ function CheckoutFormInner({
4273
4402
  [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
4274
4403
  );
4275
4404
  const isReady = flopay !== null && elements !== null;
4276
- return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
4277
- (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-overlay", style: {
4405
+ return /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
4406
+ (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-overlay", style: {
4278
4407
  position: "absolute",
4279
4408
  inset: 0,
4280
4409
  background: "rgba(255,255,255,0.7)",
@@ -4283,12 +4412,12 @@ function CheckoutFormInner({
4283
4412
  justifyContent: "center",
4284
4413
  zIndex: 10
4285
4414
  }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
4286
- !isReady && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
4287
- isReady && /* @__PURE__ */ jsxs5(Fragment4, { children: [
4288
- /* @__PURE__ */ jsx7(PaymentElement, { options: { layout } }),
4289
- showAddress && /* @__PURE__ */ jsx7(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
4290
- displayError && /* @__PURE__ */ jsx7("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
4291
- children ?? /* @__PURE__ */ jsx7(
4415
+ !isReady && /* @__PURE__ */ jsx8("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
4416
+ isReady && /* @__PURE__ */ jsxs6(Fragment4, { children: [
4417
+ /* @__PURE__ */ jsx8(PaymentElement, { options: { layout } }),
4418
+ showAddress && /* @__PURE__ */ jsx8(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
4419
+ displayError && /* @__PURE__ */ jsx8("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
4420
+ children ?? /* @__PURE__ */ jsx8(
4292
4421
  "button",
4293
4422
  {
4294
4423
  type: "submit",
@@ -4303,8 +4432,8 @@ function CheckoutFormInner({
4303
4432
 
4304
4433
  // src/paypal-button.tsx
4305
4434
  import { FloPayError as FloPayError6 } from "@flopay/shared";
4306
- import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
4307
- import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
4435
+ import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
4436
+ import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
4308
4437
  function PayPalButton({
4309
4438
  sessionId,
4310
4439
  billingApiUrl,
@@ -4321,11 +4450,11 @@ function PayPalButton({
4321
4450
  const flopay = useFloPay();
4322
4451
  const elements = useElements();
4323
4452
  const contextBillingUrl = useBillingApiUrl();
4324
- const [ready, setReady] = useState5(false);
4325
- const [submitting, setSubmitting] = useState5(false);
4453
+ const [ready, setReady] = useState6(false);
4454
+ const [submitting, setSubmitting] = useState6(false);
4326
4455
  const paypalResumeAttempted = useRef4(false);
4327
4456
  const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
4328
- const processPaymentInternal = useCallback4(
4457
+ const processPaymentInternal = useCallback5(
4329
4458
  async (tokenizedBody) => {
4330
4459
  try {
4331
4460
  const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
@@ -4358,7 +4487,7 @@ function PayPalButton({
4358
4487
  },
4359
4488
  [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
4360
4489
  );
4361
- const dispatchTokenizedBody = useCallback4(
4490
+ const dispatchTokenizedBody = useCallback5(
4362
4491
  (body) => {
4363
4492
  if (onTokenizedBody) {
4364
4493
  onTokenizedBody(body);
@@ -4416,7 +4545,7 @@ function PayPalButton({
4416
4545
  }
4417
4546
  })();
4418
4547
  }, [flopay, dispatchTokenizedBody, onErrorChange]);
4419
- const handlePayPalConfirm = useCallback4(async () => {
4548
+ const handlePayPalConfirm = useCallback5(async () => {
4420
4549
  if (!flopay || !elements) return;
4421
4550
  try {
4422
4551
  setSubmitting(true);
@@ -4449,11 +4578,11 @@ function PayPalButton({
4449
4578
  }
4450
4579
  }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
4451
4580
  if (!flopay || !elements) {
4452
- return /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
4581
+ return /* @__PURE__ */ jsx9("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
4453
4582
  }
4454
- return /* @__PURE__ */ jsxs6(Fragment5, { children: [
4455
- !ready && /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
4456
- /* @__PURE__ */ jsx8("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx8(
4583
+ return /* @__PURE__ */ jsxs7(Fragment5, { children: [
4584
+ !ready && /* @__PURE__ */ jsx9("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
4585
+ /* @__PURE__ */ jsx9("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx9(
4457
4586
  "button",
4458
4587
  {
4459
4588
  type: "button",
@@ -4475,7 +4604,7 @@ function PayPalButton({
4475
4604
  children: submitting ? "Processing..." : "PayPal"
4476
4605
  }
4477
4606
  ) }),
4478
- (submitting || isProcessing) && /* @__PURE__ */ jsx8("div", { style: {
4607
+ (submitting || isProcessing) && /* @__PURE__ */ jsx9("div", { style: {
4479
4608
  position: "fixed",
4480
4609
  inset: 0,
4481
4610
  background: "rgba(0,0,0,0.4)",
@@ -4483,7 +4612,7 @@ function PayPalButton({
4483
4612
  alignItems: "center",
4484
4613
  justifyContent: "center",
4485
4614
  zIndex: 1e3
4486
- }, children: /* @__PURE__ */ jsx8("div", { style: {
4615
+ }, children: /* @__PURE__ */ jsx9("div", { style: {
4487
4616
  background: "white",
4488
4617
  borderRadius: 8,
4489
4618
  padding: "1.5rem",
@@ -4495,10 +4624,10 @@ function PayPalButton({
4495
4624
  }
4496
4625
 
4497
4626
  // src/automatic-payment-button.tsx
4498
- import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
4627
+ import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
4499
4628
  import { PaymentAPI as PaymentAPI3 } from "@flopay/js";
4500
4629
  import { FloPayError as FloPayError7, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3 } from "@flopay/shared";
4501
- import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
4630
+ import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
4502
4631
  var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
4503
4632
  var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
4504
4633
  function sleep2(ms) {
@@ -4645,10 +4774,10 @@ function FloPayAutomaticPaymentButton({
4645
4774
  utmMetadata
4646
4775
  ]
4647
4776
  );
4648
- const [isProcessing, setIsProcessing] = useState6(false);
4649
- const [overlayStatus, setOverlayStatus] = useState6(null);
4650
- const [overlayError, setOverlayError] = useState6(null);
4651
- const [fallbackSession, setFallbackSession] = useState6(null);
4777
+ const [isProcessing, setIsProcessing] = useState7(false);
4778
+ const [overlayStatus, setOverlayStatus] = useState7(null);
4779
+ const [overlayError, setOverlayError] = useState7(null);
4780
+ const [fallbackSession, setFallbackSession] = useState7(null);
4652
4781
  const automaticPaymentToken = useMemo4(
4653
4782
  () => paymentMethodId ? {
4654
4783
  id: paymentMethodId,
@@ -4695,13 +4824,13 @@ function FloPayAutomaticPaymentButton({
4695
4824
  window.removeEventListener("keydown", handleKeyDown);
4696
4825
  };
4697
4826
  }, [fallbackSession]);
4698
- const emitDecline = useCallback5((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
4827
+ const emitDecline = useCallback6((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
4699
4828
  onDeclineRef.current?.(buildDeclineEvent(method, error, {
4700
4829
  code: error.code,
4701
4830
  declineCode: error.declineCode
4702
4831
  }));
4703
4832
  }, []);
4704
- const showSuccess = useCallback5(async (event) => {
4833
+ const showSuccess = useCallback6(async (event) => {
4705
4834
  if (!isMountedRef.current) return;
4706
4835
  setOverlayError(null);
4707
4836
  setOverlayStatus("success");
@@ -4709,7 +4838,7 @@ function FloPayAutomaticPaymentButton({
4709
4838
  if (!isMountedRef.current) return;
4710
4839
  onSuccessRef.current?.(event);
4711
4840
  }, []);
4712
- const showError = useCallback5(async (error, options) => {
4841
+ const showError = useCallback6(async (error, options) => {
4713
4842
  if (!isMountedRef.current) return;
4714
4843
  onErrorRef.current?.(error);
4715
4844
  if (options?.emitDecline) {
@@ -4719,7 +4848,7 @@ function FloPayAutomaticPaymentButton({
4719
4848
  setOverlayStatus("error");
4720
4849
  await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
4721
4850
  }, [emitDecline]);
4722
- const processResolvedSession = useCallback5(async (apiResult, resolvedSessionId, options) => {
4851
+ const processResolvedSession = useCallback6(async (apiResult, resolvedSessionId, options) => {
4723
4852
  const session = apiResult.data.session ?? null;
4724
4853
  if (!session) {
4725
4854
  throw new FloPayError7("No session data returned", "api_error");
@@ -4886,6 +5015,14 @@ function FloPayAutomaticPaymentButton({
4886
5015
  if (floPayErr.code === "payment_intent_unexpected_state" && inResumeWindow) {
4887
5016
  return;
4888
5017
  }
5018
+ const isSilentFallbackCase = (floPayErr.code === "paypal_requires_user_interaction" || floPayErr.code === "payment_intent_unexpected_state") && shouldShowFallbackCheckout(floPayErr, fallbackSessionId) && !!fallbackSessionId && isMountedRef.current;
5019
+ if (isSilentFallbackCase) {
5020
+ setFallbackSession({
5021
+ sessionId: fallbackSessionId,
5022
+ errorMessage: ""
5023
+ });
5024
+ return;
5025
+ }
4889
5026
  await showError(floPayErr, {
4890
5027
  emitDecline: true,
4891
5028
  method: floPayErr.checkoutMethod ?? DEFAULT_SAVED_PAYMENT_DECLINE_METHOD
@@ -4906,7 +5043,7 @@ function FloPayAutomaticPaymentButton({
4906
5043
  showError,
4907
5044
  showSuccess
4908
5045
  ]);
4909
- const handleButtonClick = useCallback5(async (event) => {
5046
+ const handleButtonClick = useCallback6(async (event) => {
4910
5047
  buttonProps.onClick?.(event);
4911
5048
  if (event.defaultPrevented || disabled || isProcessing) {
4912
5049
  return;
@@ -4988,7 +5125,7 @@ function FloPayAutomaticPaymentButton({
4988
5125
  showError,
4989
5126
  showSuccess
4990
5127
  ]);
4991
- const handleFallbackComplete = useCallback5((result) => {
5128
+ const handleFallbackComplete = useCallback6((result) => {
4992
5129
  const activeFallback = fallbackSessionRef.current;
4993
5130
  setFallbackSession(null);
4994
5131
  onSuccessRef.current?.({
@@ -4998,10 +5135,10 @@ function FloPayAutomaticPaymentButton({
4998
5135
  autoCompleted: false
4999
5136
  });
5000
5137
  }, []);
5001
- const handleFallbackError = useCallback5((error) => {
5138
+ const handleFallbackError = useCallback6((error) => {
5002
5139
  onErrorRef.current?.(error);
5003
5140
  }, []);
5004
- const handleFallbackDecline = useCallback5((decline) => {
5141
+ const handleFallbackDecline = useCallback6((decline) => {
5005
5142
  onDeclineRef.current?.(decline);
5006
5143
  }, []);
5007
5144
  useEffect7(() => {
@@ -5072,13 +5209,14 @@ function FloPayAutomaticPaymentButton({
5072
5209
  }
5073
5210
  const api = new PaymentAPI3(resolvedBillingUrl);
5074
5211
  const sessionResult = await api.getUnifiedCheckoutSession(resumeState.sessionId);
5075
- const resumeSession = sessionResult.data.session;
5212
+ let resumeSession = sessionResult.data.session;
5076
5213
  if (!resumeSession) {
5077
5214
  throw Object.assign(
5078
5215
  new FloPayError7("Could not load session to capture PayPal payment.", "api_error"),
5079
5216
  { checkoutMethod: "paypal" }
5080
5217
  );
5081
5218
  }
5219
+ let finalResultStatus = resultStatus;
5082
5220
  if (resumeSession.status !== "complete") {
5083
5221
  const processResult = await processSavedPaymentForMode({
5084
5222
  billingApiUrl: resolvedBillingUrl,
@@ -5097,10 +5235,18 @@ function FloPayAutomaticPaymentButton({
5097
5235
  { checkoutMethod: "paypal" }
5098
5236
  );
5099
5237
  }
5238
+ finalResultStatus = processResult.result.status;
5239
+ try {
5240
+ const refreshed = await api.getUnifiedCheckoutSession(resumeState.sessionId);
5241
+ if (refreshed.data.session) {
5242
+ resumeSession = refreshed.data.session;
5243
+ }
5244
+ } catch {
5245
+ }
5100
5246
  }
5101
5247
  await showSuccess({
5102
5248
  result: {
5103
- status: resultStatus,
5249
+ status: finalResultStatus,
5104
5250
  paymentIntentId: paymentIntent.id,
5105
5251
  paymentMethodId: paymentMethodId2,
5106
5252
  checkoutMethod: "paypal"
@@ -5136,8 +5282,8 @@ function FloPayAutomaticPaymentButton({
5136
5282
  };
5137
5283
  }, [buttonsTheme, stylesOverride]);
5138
5284
  const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
5139
- return /* @__PURE__ */ jsxs7(Fragment6, { children: [
5140
- /* @__PURE__ */ jsx9(
5285
+ return /* @__PURE__ */ jsxs8(Fragment6, { children: [
5286
+ /* @__PURE__ */ jsx10(
5141
5287
  "button",
5142
5288
  {
5143
5289
  ...buttonProps,
@@ -5178,17 +5324,17 @@ function FloPayAutomaticPaymentButton({
5178
5324
  e.currentTarget.style.transform = "scale(1)";
5179
5325
  }
5180
5326
  },
5181
- children: /* @__PURE__ */ jsx9(CardButtonContentSlot, { content: children })
5327
+ children: /* @__PURE__ */ jsx10(CardButtonContentSlot, { content: children })
5182
5328
  }
5183
5329
  ),
5184
- overlayStatus && /* @__PURE__ */ jsx9(
5330
+ overlayStatus && /* @__PURE__ */ jsx10(
5185
5331
  ProcessingOverlay,
5186
5332
  {
5187
5333
  status: overlayStatus,
5188
5334
  errorMessage: overlayError
5189
5335
  }
5190
5336
  ),
5191
- fallbackSession && /* @__PURE__ */ jsx9(
5337
+ fallbackSession && /* @__PURE__ */ jsx10(
5192
5338
  "div",
5193
5339
  {
5194
5340
  "data-testid": "flopay-automatic-payment-fallback",
@@ -5209,7 +5355,7 @@ function FloPayAutomaticPaymentButton({
5209
5355
  padding: "1.5rem",
5210
5356
  zIndex: 1100
5211
5357
  },
5212
- children: /* @__PURE__ */ jsx9(
5358
+ children: /* @__PURE__ */ jsx10(
5213
5359
  "div",
5214
5360
  {
5215
5361
  style: {
@@ -5225,7 +5371,7 @@ function FloPayAutomaticPaymentButton({
5225
5371
  flexDirection: "column",
5226
5372
  gap: "1rem"
5227
5373
  },
5228
- children: /* @__PURE__ */ jsx9(
5374
+ children: /* @__PURE__ */ jsx10(
5229
5375
  FloPayCheckout,
5230
5376
  {
5231
5377
  sessionId: fallbackSession.sessionId,
@@ -5255,6 +5401,7 @@ export {
5255
5401
  FloPayAutomaticPaymentButton,
5256
5402
  FloPayCheckout,
5257
5403
  FloPayProvider,
5404
+ InAppBrowserNotice,
5258
5405
  PayPalButton,
5259
5406
  PaymentElement,
5260
5407
  SplitCardForm,