@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.cjs CHANGED
@@ -39,6 +39,7 @@ __export(index_exports, {
39
39
  FloPayAutomaticPaymentButton: () => FloPayAutomaticPaymentButton,
40
40
  FloPayCheckout: () => FloPayCheckout,
41
41
  FloPayProvider: () => FloPayProvider,
42
+ InAppBrowserNotice: () => InAppBrowserNotice,
42
43
  PayPalButton: () => PayPalButton,
43
44
  PaymentElement: () => PaymentElement,
44
45
  SplitCardForm: () => SplitCardForm,
@@ -151,7 +152,7 @@ function FloPayProvider({
151
152
  }
152
153
 
153
154
  // src/flopay-checkout.tsx
154
- var import_react8 = __toESM(require("react"), 1);
155
+ var import_react9 = __toESM(require("react"), 1);
155
156
  var import_js2 = require("@flopay/js");
156
157
  var import_shared7 = require("@flopay/shared");
157
158
 
@@ -285,7 +286,7 @@ var AddressElement = createElementComponent("address", "AddressElement");
285
286
  // src/split-card-form.tsx
286
287
  var import_react_stripe_js = require("@stripe/react-stripe-js");
287
288
  var import_shared4 = require("@flopay/shared");
288
- var import_react7 = require("react");
289
+ var import_react8 = require("react");
289
290
 
290
291
  // src/hooks.ts
291
292
  var import_react5 = require("react");
@@ -658,9 +659,91 @@ function wasSessionRecentlyCompleted(sessionId) {
658
659
  }
659
660
  }
660
661
 
662
+ // src/in-app-browser-notice.tsx
663
+ var import_react7 = require("react");
664
+ var import_jsx_runtime5 = require("react/jsx-runtime");
665
+ 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.";
666
+ function InAppBrowserNotice({
667
+ message,
668
+ openButtonLabel = "Open in browser",
669
+ copiedButtonLabel = "Link copied \u2014 paste in your browser",
670
+ containerStyle,
671
+ buttonStyle,
672
+ onOpenInBrowser
673
+ }) {
674
+ const [copied, setCopied] = (0, import_react7.useState)(false);
675
+ const handleClick = (0, import_react7.useCallback)(async () => {
676
+ if (typeof window === "undefined") return;
677
+ const url = window.location.href;
678
+ let opened = false;
679
+ try {
680
+ const win = window.open(url, "_blank");
681
+ opened = !!win;
682
+ } catch {
683
+ opened = false;
684
+ }
685
+ let didCopy = false;
686
+ if (!opened) {
687
+ if (typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function") {
688
+ try {
689
+ await navigator.clipboard.writeText(url);
690
+ didCopy = true;
691
+ setCopied(true);
692
+ } catch {
693
+ didCopy = false;
694
+ }
695
+ }
696
+ }
697
+ onOpenInBrowser?.({ opened, copied: didCopy });
698
+ }, [onOpenInBrowser]);
699
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
700
+ "div",
701
+ {
702
+ role: "status",
703
+ "data-testid": "flopay-in-app-browser-notice",
704
+ style: {
705
+ padding: "0.75rem 0.875rem",
706
+ background: "#FFFBEB",
707
+ border: "1px solid #FDE68A",
708
+ borderRadius: 8,
709
+ color: "#92400E",
710
+ fontSize: "0.85rem",
711
+ lineHeight: 1.4,
712
+ display: "flex",
713
+ flexDirection: "column",
714
+ gap: "0.5rem",
715
+ ...containerStyle
716
+ },
717
+ children: [
718
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: message ?? DEFAULT_MESSAGE }),
719
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
720
+ "button",
721
+ {
722
+ type: "button",
723
+ onClick: handleClick,
724
+ style: {
725
+ alignSelf: "flex-start",
726
+ padding: "0.4rem 0.75rem",
727
+ background: "transparent",
728
+ border: "1px solid #92400E",
729
+ borderRadius: 6,
730
+ color: "#92400E",
731
+ fontSize: "0.85rem",
732
+ fontWeight: 600,
733
+ cursor: "pointer",
734
+ ...buttonStyle
735
+ },
736
+ children: copied ? copiedButtonLabel : openButtonLabel
737
+ }
738
+ )
739
+ ]
740
+ }
741
+ );
742
+ }
743
+
661
744
  // src/split-card-form.tsx
662
745
  var import_shared5 = require("@flopay/shared");
663
- var import_jsx_runtime5 = require("react/jsx-runtime");
746
+ var import_jsx_runtime6 = require("react/jsx-runtime");
664
747
  var WALLET_RESUME_KEY = "flopay_wallet_resume";
665
748
  var FLOPAY_KEYFRAMES = `
666
749
  @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -702,7 +785,7 @@ function normalizeBeforeButtonClickError(method, err) {
702
785
  );
703
786
  }
704
787
  function FloPayKeyframes() {
705
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: FLOPAY_KEYFRAMES });
788
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: FLOPAY_KEYFRAMES });
706
789
  }
707
790
  function toCssSize(value) {
708
791
  if (typeof value === "number") return `${value}px`;
@@ -722,9 +805,9 @@ function ExpressCheckoutReadySwap({
722
805
  placeholderTestId,
723
806
  children
724
807
  }) {
725
- if (state === "unavailable") return null;
726
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
727
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
808
+ if (state === "unavailable" || state === "load_error") return null;
809
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", minHeight: 44 }, children: [
810
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
728
811
  "div",
729
812
  {
730
813
  "data-testid": placeholderTestId,
@@ -743,7 +826,7 @@ function ExpressCheckoutReadySwap({
743
826
  }
744
827
  }
745
828
  ),
746
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
829
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
747
830
  "div",
748
831
  {
749
832
  style: {
@@ -758,9 +841,9 @@ function ExpressCheckoutReadySwap({
758
841
  )
759
842
  ] });
760
843
  }
761
- var SplitCardForm = (0, import_react7.forwardRef)(
844
+ var SplitCardForm = (0, import_react8.forwardRef)(
762
845
  function SplitCardForm2(props, ref) {
763
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
846
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
764
847
  }
765
848
  );
766
849
  function PayPalButtonInner({
@@ -772,16 +855,24 @@ function PayPalButtonInner({
772
855
  isProcessing = false,
773
856
  onButtonClick,
774
857
  onDecline,
775
- runBeforeButtonClick
858
+ runBeforeButtonClick,
859
+ onLoadStateChange
776
860
  }) {
777
861
  const stripe = (0, import_react_stripe_js.useStripe)();
778
862
  const elements = (0, import_react_stripe_js.useElements)();
779
- const [loadState, setLoadState] = (0, import_react7.useState)("loading");
780
- const [submitting, setSubmitting] = (0, import_react7.useState)(false);
781
- const paypalResumeAttempted = (0, import_react7.useRef)(false);
782
- const beforeClickRef = (0, import_react7.useRef)(null);
863
+ const [loadState, setLoadState] = (0, import_react8.useState)("loading");
864
+ const onLoadStateChangeRef = (0, import_react8.useRef)(onLoadStateChange);
865
+ (0, import_react8.useEffect)(() => {
866
+ onLoadStateChangeRef.current = onLoadStateChange;
867
+ }, [onLoadStateChange]);
868
+ (0, import_react8.useEffect)(() => {
869
+ onLoadStateChangeRef.current?.(loadState);
870
+ }, [loadState]);
871
+ const [submitting, setSubmitting] = (0, import_react8.useState)(false);
872
+ const paypalResumeAttempted = (0, import_react8.useRef)(false);
873
+ const beforeClickRef = (0, import_react8.useRef)(null);
783
874
  const baseUrl = billingApiUrl.replace(/\/+$/, "");
784
- (0, import_react7.useEffect)(() => {
875
+ (0, import_react8.useEffect)(() => {
785
876
  if (!stripe || paypalResumeAttempted.current) return;
786
877
  const params = new URLSearchParams(window.location.search);
787
878
  const paymentIntentId = params.get("payment_intent");
@@ -828,7 +919,7 @@ function PayPalButtonInner({
828
919
  }
829
920
  })();
830
921
  }, [stripe, onTokenizedBody, onErrorChange, onDecline]);
831
- const handlePayPalClick = (0, import_react7.useCallback)(async (event) => {
922
+ const handlePayPalClick = (0, import_react8.useCallback)(async (event) => {
832
923
  if (isProcessing || submitting) {
833
924
  event.reject();
834
925
  return;
@@ -846,7 +937,7 @@ function PayPalButtonInner({
846
937
  onButtonClick?.("paypal");
847
938
  event.resolve();
848
939
  }, [isProcessing, onButtonClick, runBeforeButtonClick, submitting]);
849
- const handlePayPalConfirm = (0, import_react7.useCallback)(async (event) => {
940
+ const handlePayPalConfirm = (0, import_react8.useCallback)(async (event) => {
850
941
  if (!stripe || !elements) return;
851
942
  let prepared = beforeClickRef.current;
852
943
  beforeClickRef.current = null;
@@ -938,12 +1029,12 @@ function PayPalButtonInner({
938
1029
  setSubmitting(false);
939
1030
  }
940
1031
  }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
941
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
942
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1032
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1033
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
943
1034
  import_react_stripe_js.ExpressCheckoutElement,
944
1035
  {
945
1036
  onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
946
- onLoadError: () => setLoadState("unavailable"),
1037
+ onLoadError: () => setLoadState("load_error"),
947
1038
  onClick: handlePayPalClick,
948
1039
  onConfirm: handlePayPalConfirm,
949
1040
  onCancel: () => {
@@ -964,7 +1055,7 @@ function PayPalButtonInner({
964
1055
  }
965
1056
  }
966
1057
  ) }),
967
- submitting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: "processing" })
1058
+ submitting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: "processing" })
968
1059
  ] });
969
1060
  }
970
1061
  function WalletButtonInner({
@@ -977,16 +1068,24 @@ function WalletButtonInner({
977
1068
  onErrorChange,
978
1069
  onButtonClick,
979
1070
  onDecline,
980
- runBeforeButtonClick
1071
+ runBeforeButtonClick,
1072
+ onLoadStateChange
981
1073
  }) {
982
1074
  const stripe = (0, import_react_stripe_js.useStripe)();
983
1075
  const elements = (0, import_react_stripe_js.useElements)();
984
- const [loadState, setLoadState] = (0, import_react7.useState)("loading");
985
- const [submitting, setSubmitting] = (0, import_react7.useState)(false);
1076
+ const [loadState, setLoadState] = (0, import_react8.useState)("loading");
1077
+ const onLoadStateChangeRef = (0, import_react8.useRef)(onLoadStateChange);
1078
+ (0, import_react8.useEffect)(() => {
1079
+ onLoadStateChangeRef.current = onLoadStateChange;
1080
+ }, [onLoadStateChange]);
1081
+ (0, import_react8.useEffect)(() => {
1082
+ onLoadStateChangeRef.current?.(loadState);
1083
+ }, [loadState]);
1084
+ const [submitting, setSubmitting] = (0, import_react8.useState)(false);
986
1085
  const baseUrl = billingApiUrl.replace(/\/+$/, "");
987
- const lastWalletMethodRef = (0, import_react7.useRef)("card");
988
- const beforeClickRef = (0, import_react7.useRef)(null);
989
- const handleWalletConfirm = (0, import_react7.useCallback)(
1086
+ const lastWalletMethodRef = (0, import_react8.useRef)("card");
1087
+ const beforeClickRef = (0, import_react8.useRef)(null);
1088
+ const handleWalletConfirm = (0, import_react8.useCallback)(
990
1089
  async (event) => {
991
1090
  if (!stripe || !elements) return;
992
1091
  const walletType = event.expressPaymentType;
@@ -1075,12 +1174,12 @@ function WalletButtonInner({
1075
1174
  },
1076
1175
  [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
1077
1176
  );
1078
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
1079
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1177
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1178
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1080
1179
  import_react_stripe_js.ExpressCheckoutElement,
1081
1180
  {
1082
1181
  onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
1083
- onLoadError: () => setLoadState("unavailable"),
1182
+ onLoadError: () => setLoadState("load_error"),
1084
1183
  onClick: async (event) => {
1085
1184
  lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
1086
1185
  const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current) : { proceed: true };
@@ -1115,7 +1214,7 @@ function WalletButtonInner({
1115
1214
  }
1116
1215
  }
1117
1216
  ) }),
1118
- submitting && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: "processing" })
1217
+ submitting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: "processing" })
1119
1218
  ] });
1120
1219
  }
1121
1220
  function SplitCardFormInner({
@@ -1172,49 +1271,49 @@ function SplitCardFormInner({
1172
1271
  const flopay = useFloPay();
1173
1272
  const paypalFlopay = usePayPalFloPay();
1174
1273
  const elements = useElements();
1175
- const checkout = (0, import_react7.useContext)(CheckoutContext);
1274
+ const checkout = (0, import_react8.useContext)(CheckoutContext);
1176
1275
  const contextBillingUrl = useBillingApiUrl();
1177
- const [processing, setProcessing] = (0, import_react7.useState)(false);
1178
- const [error, setError] = (0, import_react7.useState)(null);
1179
- const [is3DSActive, setIs3DSActive] = (0, import_react7.useState)(false);
1180
- const [selectedCountry, setSelectedCountry] = (0, import_react7.useState)(countryProp ?? "US");
1181
- const [zipCode, setZipCode] = (0, import_react7.useState)(zipProp ?? "");
1182
- const [addressLine1, setAddressLine1] = (0, import_react7.useState)(addressLine1Prop ?? "");
1183
- const [addressLine2, setAddressLine2] = (0, import_react7.useState)(addressLine2Prop ?? "");
1184
- const [city, setCity] = (0, import_react7.useState)(cityProp ?? "");
1185
- const [stateValue, setStateValue] = (0, import_react7.useState)(stateProp ?? "");
1186
- const [accountPatch, setAccountPatch] = (0, import_react7.useState)({});
1187
- const zipCodeRef = (0, import_react7.useRef)(zipProp ?? "");
1188
- const selectedCountryRef = (0, import_react7.useRef)(countryProp ?? "US");
1189
- const addressLine1Ref = (0, import_react7.useRef)(addressLine1Prop ?? "");
1190
- const addressLine2Ref = (0, import_react7.useRef)(addressLine2Prop ?? "");
1191
- const cityRef = (0, import_react7.useRef)(cityProp ?? "");
1192
- const stateRef = (0, import_react7.useRef)(stateProp ?? "");
1193
- const avsConfig = (0, import_react7.useMemo)(() => (0, import_shared4.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
1276
+ const [processing, setProcessing] = (0, import_react8.useState)(false);
1277
+ const [error, setError] = (0, import_react8.useState)(null);
1278
+ const [is3DSActive, setIs3DSActive] = (0, import_react8.useState)(false);
1279
+ const [selectedCountry, setSelectedCountry] = (0, import_react8.useState)(countryProp ?? "US");
1280
+ const [zipCode, setZipCode] = (0, import_react8.useState)(zipProp ?? "");
1281
+ const [addressLine1, setAddressLine1] = (0, import_react8.useState)(addressLine1Prop ?? "");
1282
+ const [addressLine2, setAddressLine2] = (0, import_react8.useState)(addressLine2Prop ?? "");
1283
+ const [city, setCity] = (0, import_react8.useState)(cityProp ?? "");
1284
+ const [stateValue, setStateValue] = (0, import_react8.useState)(stateProp ?? "");
1285
+ const [accountPatch, setAccountPatch] = (0, import_react8.useState)({});
1286
+ const zipCodeRef = (0, import_react8.useRef)(zipProp ?? "");
1287
+ const selectedCountryRef = (0, import_react8.useRef)(countryProp ?? "US");
1288
+ const addressLine1Ref = (0, import_react8.useRef)(addressLine1Prop ?? "");
1289
+ const addressLine2Ref = (0, import_react8.useRef)(addressLine2Prop ?? "");
1290
+ const cityRef = (0, import_react8.useRef)(cityProp ?? "");
1291
+ const stateRef = (0, import_react8.useRef)(stateProp ?? "");
1292
+ const avsConfig = (0, import_react8.useMemo)(() => (0, import_shared4.resolveAVSConfig)(enableAVSProp), [enableAVSProp]);
1194
1293
  const enableAVS = avsConfig !== null;
1195
- const [viewState, setViewState] = (0, import_react7.useState)(initialCardOpen ? "card" : "buttons");
1294
+ const [viewState, setViewState] = (0, import_react8.useState)(initialCardOpen ? "card" : "buttons");
1196
1295
  const showCardForm = viewState === "expanding" || viewState === "card";
1197
1296
  const TRANSITION_MS = 280;
1198
- const expandToCard = (0, import_react7.useCallback)(() => {
1297
+ const expandToCard = (0, import_react8.useCallback)(() => {
1199
1298
  setViewState("expanding");
1200
1299
  setTimeout(() => setViewState("card"), TRANSITION_MS);
1201
1300
  }, []);
1202
- const collapseToButtons = (0, import_react7.useCallback)(() => {
1301
+ const collapseToButtons = (0, import_react8.useCallback)(() => {
1203
1302
  setViewState("collapsing");
1204
1303
  setTimeout(() => setViewState("buttons"), TRANSITION_MS);
1205
1304
  }, []);
1206
- (0, import_react7.useEffect)(() => {
1305
+ (0, import_react8.useEffect)(() => {
1207
1306
  if (layout === "buttons" && initialCardOpen) {
1208
1307
  setViewState("card");
1209
1308
  }
1210
1309
  }, [layout, initialCardOpen]);
1211
- const [fullName, setFullName] = (0, import_react7.useState)("");
1212
- const [formReady, setFormReady] = (0, import_react7.useState)(false);
1213
- const [overlayStatus, setOverlayStatus] = (0, import_react7.useState)(null);
1214
- const processingRef = (0, import_react7.useRef)(false);
1310
+ const [fullName, setFullName] = (0, import_react8.useState)("");
1311
+ const [formReady, setFormReady] = (0, import_react8.useState)(false);
1312
+ const [overlayStatus, setOverlayStatus] = (0, import_react8.useState)(null);
1313
+ const processingRef = (0, import_react8.useRef)(false);
1215
1314
  const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
1216
1315
  const displayError = externalError ?? error;
1217
- const bStyles = (0, import_react7.useMemo)(() => {
1316
+ const bStyles = (0, import_react8.useMemo)(() => {
1218
1317
  const base = (0, import_shared4.resolveButtonsLayoutTheme)(buttonsTheme);
1219
1318
  if (!buttonsStylesOverride) return base;
1220
1319
  return {
@@ -1232,7 +1331,7 @@ function SplitCardFormInner({
1232
1331
  const isSubmitting = (externalProcessing ?? processing) || isInlineSessionPatchProcessing;
1233
1332
  const isSelfContained = !onTokenizedBody;
1234
1333
  const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
1235
- const resolvedAccount = (0, import_react7.useMemo)(() => mergeAccountPatch({
1334
+ const resolvedAccount = (0, import_react8.useMemo)(() => mergeAccountPatch({
1236
1335
  userId,
1237
1336
  email,
1238
1337
  firstName,
@@ -1240,51 +1339,58 @@ function SplitCardFormInner({
1240
1339
  country: countryProp,
1241
1340
  zip: zipProp
1242
1341
  }, accountPatch), [userId, email, firstName, lastName, countryProp, zipProp, accountPatch]);
1243
- const stripeInstance = (0, import_react7.useMemo)(() => {
1342
+ const stripeInstance = (0, import_react8.useMemo)(() => {
1244
1343
  if (!flopay) return null;
1245
1344
  return flopay.getRawProvider();
1246
1345
  }, [flopay]);
1247
- const paypalStripeInstance = (0, import_react7.useMemo)(() => {
1346
+ const paypalStripeInstance = (0, import_react8.useMemo)(() => {
1248
1347
  if (!paypalFlopay) return null;
1249
1348
  return paypalFlopay.getRawProvider();
1250
1349
  }, [paypalFlopay]);
1251
1350
  const amountInCents = totalAmount || 100;
1252
- const walletOptions = (0, import_react7.useMemo)(() => ({
1351
+ const walletOptions = (0, import_react8.useMemo)(() => ({
1253
1352
  mode: "payment",
1254
1353
  amount: amountInCents,
1255
1354
  currency: currency.toLowerCase(),
1256
1355
  paymentMethodCreation: "manual",
1257
1356
  captureMethod: "manual"
1258
1357
  }), [amountInCents, currency]);
1259
- const paypalOptions = (0, import_react7.useMemo)(() => ({
1358
+ const paypalOptions = (0, import_react8.useMemo)(() => ({
1260
1359
  mode: "payment",
1261
1360
  amount: amountInCents,
1262
1361
  currency: currency.toLowerCase(),
1263
1362
  captureMethod: "manual",
1264
1363
  setupFutureUsage: "off_session"
1265
1364
  }), [amountInCents, currency]);
1266
- const updateError = (0, import_react7.useCallback)(
1365
+ const updateError = (0, import_react8.useCallback)(
1267
1366
  (err) => {
1268
1367
  setError(err);
1269
1368
  onErrorChange?.(err);
1270
1369
  },
1271
1370
  [onErrorChange]
1272
1371
  );
1273
- const emitDecline = (0, import_react7.useCallback)(
1372
+ const emitDecline = (0, import_react8.useCallback)(
1274
1373
  (method, input, overrides) => {
1275
1374
  onDecline?.(buildDeclineEvent(method, input, overrides));
1276
1375
  },
1277
1376
  [onDecline]
1278
1377
  );
1279
1378
  const showWallets = showApplePay || showGooglePay;
1280
- const handleNameChange = (0, import_react7.useCallback)((value) => {
1379
+ const [paypalLoadState, setPaypalLoadState] = (0, import_react8.useState)("loading");
1380
+ const [walletLoadState, setWalletLoadState] = (0, import_react8.useState)("loading");
1381
+ const expectedPayPal = showPayPal && !!paypalStripeInstance;
1382
+ const expectedWallets = showWallets && !!stripeInstance;
1383
+ const paypalLoadFailed = expectedPayPal && paypalLoadState === "load_error";
1384
+ const walletsLoadFailed = expectedWallets && walletLoadState === "load_error";
1385
+ const showInAppBrowserNotice = (expectedPayPal || expectedWallets) && (!expectedPayPal || paypalLoadFailed) && (!expectedWallets || walletsLoadFailed) && (paypalLoadFailed || walletsLoadFailed);
1386
+ const handleNameChange = (0, import_react8.useCallback)((value) => {
1281
1387
  setFullName(value);
1282
1388
  onFullNameChange?.(value);
1283
1389
  const parts = value.trim().split(/\s+/);
1284
1390
  onFirstNameChange?.(parts[0] ?? "");
1285
1391
  onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
1286
1392
  }, [onFullNameChange, onFirstNameChange, onLastNameChange]);
1287
- const applyInlineSessionPatch = (0, import_react7.useCallback)(
1393
+ const applyInlineSessionPatch = (0, import_react8.useCallback)(
1288
1394
  (patch, method) => {
1289
1395
  if (!checkout.applyInlineSessionPatch) {
1290
1396
  return Promise.resolve({ error: null, sessionId });
@@ -1301,7 +1407,7 @@ function SplitCardFormInner({
1301
1407
  },
1302
1408
  [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
1303
1409
  );
1304
- const runBeforeButtonClick = (0, import_react7.useCallback)(async (method) => {
1410
+ const runBeforeButtonClick = (0, import_react8.useCallback)(async (method) => {
1305
1411
  if (!onBeforeButtonClick) return { proceed: true };
1306
1412
  try {
1307
1413
  const result = await onBeforeButtonClick({
@@ -1337,7 +1443,7 @@ function SplitCardFormInner({
1337
1443
  return { proceed: false };
1338
1444
  }
1339
1445
  }, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
1340
- const processPaymentInternal = (0, import_react7.useCallback)(
1446
+ const processPaymentInternal = (0, import_react8.useCallback)(
1341
1447
  async (tokenizedBody, overrides) => {
1342
1448
  if (processingRef.current) return;
1343
1449
  processingRef.current = true;
@@ -1527,7 +1633,7 @@ function SplitCardFormInner({
1527
1633
  },
1528
1634
  [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
1529
1635
  );
1530
- const dispatchTokenizedBody = (0, import_react7.useCallback)(
1636
+ const dispatchTokenizedBody = (0, import_react8.useCallback)(
1531
1637
  (tokenizedBody, overrides) => {
1532
1638
  if (onTokenizedBody) {
1533
1639
  onTokenizedBody(tokenizedBody);
@@ -1537,7 +1643,7 @@ function SplitCardFormInner({
1537
1643
  },
1538
1644
  [onTokenizedBody, processPaymentInternal]
1539
1645
  );
1540
- (0, import_react7.useImperativeHandle)(innerRef, () => ({
1646
+ (0, import_react8.useImperativeHandle)(innerRef, () => ({
1541
1647
  async handleNextAction(secret) {
1542
1648
  if (!flopay) return;
1543
1649
  setIs3DSActive(true);
@@ -1564,7 +1670,7 @@ function SplitCardFormInner({
1564
1670
  }
1565
1671
  }
1566
1672
  }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
1567
- (0, import_react7.useEffect)(() => {
1673
+ (0, import_react8.useEffect)(() => {
1568
1674
  if (typeof window === "undefined") return;
1569
1675
  const stored = localStorage.getItem(WALLET_RESUME_KEY);
1570
1676
  if (!stored) return;
@@ -1582,7 +1688,7 @@ function SplitCardFormInner({
1582
1688
  localStorage.removeItem(WALLET_RESUME_KEY);
1583
1689
  }
1584
1690
  }, [sessionId, dispatchTokenizedBody]);
1585
- const handleSubmit = (0, import_react7.useCallback)(
1691
+ const handleSubmit = (0, import_react8.useCallback)(
1586
1692
  async (e) => {
1587
1693
  e.preventDefault();
1588
1694
  if (!flopay || !elements || isSubmitting || processingRef.current) return;
@@ -1724,7 +1830,7 @@ function SplitCardFormInner({
1724
1830
  );
1725
1831
  const isReady = flopay !== null && elements !== null;
1726
1832
  if (!isReady) {
1727
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
1833
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
1728
1834
  }
1729
1835
  const isButtons = layout === "buttons";
1730
1836
  const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -1767,7 +1873,7 @@ function SplitCardFormInner({
1767
1873
  invalid: { color: "#ef4444" }
1768
1874
  }
1769
1875
  };
1770
- const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
1876
+ const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
1771
1877
  backgroundColor: cardBg,
1772
1878
  borderRadius: "8px",
1773
1879
  padding: isButtons ? "0" : "1rem",
@@ -1775,7 +1881,7 @@ function SplitCardFormInner({
1775
1881
  ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
1776
1882
  ...sharedInputPlaceholderVars
1777
1883
  }, children: [
1778
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
1884
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
1779
1885
  .flopay-shared-input::placeholder {
1780
1886
  color: var(--flopay-input-placeholder-color);
1781
1887
  opacity: 1;
@@ -1784,12 +1890,12 @@ function SplitCardFormInner({
1784
1890
  font-weight: var(--flopay-input-font-weight);
1785
1891
  }
1786
1892
  ` }),
1787
- isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
1893
+ isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
1788
1894
  display: "flex",
1789
1895
  alignItems: "center",
1790
1896
  padding: "0.75rem 0 0.625rem"
1791
1897
  }, children: [
1792
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1898
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1793
1899
  "button",
1794
1900
  {
1795
1901
  type: "button",
@@ -1811,7 +1917,7 @@ function SplitCardFormInner({
1811
1917
  },
1812
1918
  "aria-label": "Back to payment methods",
1813
1919
  children: [
1814
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
1920
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
1815
1921
  display: "inline-flex",
1816
1922
  alignItems: "center",
1817
1923
  justifyContent: "center",
@@ -1821,12 +1927,12 @@ function SplitCardFormInner({
1821
1927
  backgroundColor: "#f3f4f6",
1822
1928
  transition: "background-color 0.15s",
1823
1929
  ...bStyles.backButtonIcon
1824
- }, 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" }) }) }),
1825
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
1930
+ }, 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" }) }) }),
1931
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
1826
1932
  ]
1827
1933
  }
1828
1934
  ),
1829
- hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1935
+ hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1830
1936
  flex: 1,
1831
1937
  textAlign: "center",
1832
1938
  fontWeight: 600,
@@ -1834,18 +1940,18 @@ function SplitCardFormInner({
1834
1940
  color: "#262833",
1835
1941
  paddingRight: 80,
1836
1942
  ...bStyles.title
1837
- }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) })
1943
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) })
1838
1944
  ] }),
1839
- !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 }) }),
1840
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1945
+ !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 }) }),
1946
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1841
1947
  backgroundColor: cardInputBg,
1842
1948
  border: `1px solid ${resolvedBorder}`,
1843
1949
  borderTopLeftRadius: "8px",
1844
1950
  borderTopRightRadius: "8px",
1845
1951
  padding: "10px"
1846
- }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
1847
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex" }, children: [
1848
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1952
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
1953
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
1954
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1849
1955
  flex: 1,
1850
1956
  backgroundColor: cardInputBg,
1851
1957
  border: `1px solid ${resolvedBorder}`,
@@ -1853,23 +1959,23 @@ function SplitCardFormInner({
1853
1959
  borderRight: "none",
1854
1960
  borderBottomLeftRadius: "8px",
1855
1961
  padding: "10px"
1856
- }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
1857
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1962
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
1963
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1858
1964
  flex: 1,
1859
1965
  backgroundColor: cardInputBg,
1860
1966
  border: `1px solid ${resolvedBorder}`,
1861
1967
  borderTop: "none",
1862
1968
  borderBottomRightRadius: "8px",
1863
1969
  padding: "10px"
1864
- }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardCvcElement, { options: stripeElementStyle }) })
1970
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardCvcElement, { options: stripeElementStyle }) })
1865
1971
  ] }),
1866
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
1972
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1867
1973
  backgroundColor: cardInputBg,
1868
1974
  border: `1px solid ${resolvedBorder}`,
1869
1975
  borderRadius: "8px",
1870
1976
  marginTop: "0.5rem",
1871
1977
  padding: "10px"
1872
- }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1978
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1873
1979
  "input",
1874
1980
  {
1875
1981
  className: "flopay-shared-input",
@@ -1908,8 +2014,8 @@ function SplitCardFormInner({
1908
2014
  ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
1909
2015
  });
1910
2016
  const stateOpts = (0, import_shared4.getStateOptions)(cc);
1911
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
1912
- (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)(
2017
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
2018
+ (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)(
1913
2019
  "input",
1914
2020
  {
1915
2021
  className: "flopay-shared-input",
@@ -1926,7 +2032,7 @@ function SplitCardFormInner({
1926
2032
  style: inputFieldStyle()
1927
2033
  }
1928
2034
  ) }),
1929
- (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)(
2035
+ (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)(
1930
2036
  "input",
1931
2037
  {
1932
2038
  className: "flopay-shared-input",
@@ -1942,12 +2048,12 @@ function SplitCardFormInner({
1942
2048
  style: inputFieldStyle()
1943
2049
  }
1944
2050
  ) }),
1945
- ((0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
2051
+ ((0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
1946
2052
  display: "flex",
1947
2053
  gap: "0",
1948
2054
  marginTop: "0.5rem"
1949
2055
  }, children: [
1950
- (0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2056
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1951
2057
  flex: 1,
1952
2058
  backgroundColor: cardInputBg,
1953
2059
  border: `1px solid ${resolvedBorder}`,
@@ -1956,7 +2062,7 @@ function SplitCardFormInner({
1956
2062
  borderBottomLeftRadius: "8px",
1957
2063
  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
1958
2064
  ...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
1959
- }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2065
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1960
2066
  "input",
1961
2067
  {
1962
2068
  className: "flopay-shared-input",
@@ -1973,7 +2079,7 @@ function SplitCardFormInner({
1973
2079
  style: inputFieldStyle()
1974
2080
  }
1975
2081
  ) }),
1976
- (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2082
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.state, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1977
2083
  flex: 1,
1978
2084
  backgroundColor: cardInputBg,
1979
2085
  border: `1px solid ${resolvedBorder}`,
@@ -1982,7 +2088,7 @@ function SplitCardFormInner({
1982
2088
  borderBottomRightRadius: "8px",
1983
2089
  ...(0, import_shared4.isAVSFieldVisible)(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
1984
2090
  ...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
1985
- }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2091
+ }, children: stateOpts ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1986
2092
  "select",
1987
2093
  {
1988
2094
  value: stateValue,
@@ -1996,11 +2102,11 @@ function SplitCardFormInner({
1996
2102
  "data-testid": "flopay-state",
1997
2103
  style: { ...inputFieldStyle(), cursor: "pointer" },
1998
2104
  children: [
1999
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: (0, import_shared4.getStateLabel)(cc) }),
2000
- stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: s.code, children: s.name }, s.code))
2105
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: (0, import_shared4.getStateLabel)(cc) }),
2106
+ stateOpts.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: s.code, children: s.name }, s.code))
2001
2107
  ]
2002
2108
  }
2003
- ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2109
+ ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2004
2110
  "input",
2005
2111
  {
2006
2112
  className: "flopay-shared-input",
@@ -2018,20 +2124,20 @@ function SplitCardFormInner({
2018
2124
  }
2019
2125
  ) })
2020
2126
  ] }),
2021
- ((0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
2127
+ ((0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) || (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
2022
2128
  display: "flex",
2023
2129
  flexDirection: avsLayoutProp === "column" ? "column" : "row",
2024
2130
  gap: avsLayoutProp === "column" ? "0.5rem" : "0",
2025
2131
  marginTop: "0.5rem"
2026
2132
  }, children: [
2027
- (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2133
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2028
2134
  flex: avsLayoutProp === "row" ? 1 : void 0,
2029
2135
  backgroundColor: cardInputBg,
2030
2136
  border: `1px solid ${resolvedBorder}`,
2031
2137
  padding: "10px",
2032
2138
  ...avsLayoutProp === "row" && (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
2033
2139
  ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
2034
- }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2140
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2035
2141
  "select",
2036
2142
  {
2037
2143
  value: selectedCountry,
@@ -2046,21 +2152,21 @@ function SplitCardFormInner({
2046
2152
  autoComplete: "country",
2047
2153
  "data-testid": "flopay-country",
2048
2154
  style: { ...inputFieldStyle(), cursor: "pointer" },
2049
- children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: c.code, children: [
2155
+ children: import_shared4.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: c.code, children: [
2050
2156
  c.flag,
2051
2157
  " ",
2052
2158
  c.name
2053
2159
  ] }, c.code))
2054
2160
  }
2055
2161
  ) }),
2056
- (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2162
+ (0, import_shared4.isAVSFieldVisible)(avsConfig.postal_code, cc) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2057
2163
  flex: avsLayoutProp === "row" ? 1 : void 0,
2058
2164
  backgroundColor: cardInputBg,
2059
2165
  border: `1px solid ${resolvedBorder}`,
2060
2166
  padding: "10px",
2061
2167
  ...avsLayoutProp === "row" && (0, import_shared4.isAVSFieldVisible)(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
2062
2168
  ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
2063
- }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2169
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2064
2170
  "input",
2065
2171
  {
2066
2172
  className: "flopay-shared-input",
@@ -2081,7 +2187,7 @@ function SplitCardFormInner({
2081
2187
  ] })
2082
2188
  ] });
2083
2189
  })(),
2084
- displayError && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2190
+ displayError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2085
2191
  margin: "0.75rem 0",
2086
2192
  padding: "0.625rem 0.875rem",
2087
2193
  background: "#FEF2F2",
@@ -2095,10 +2201,10 @@ function SplitCardFormInner({
2095
2201
  gap: "0.5rem",
2096
2202
  ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
2097
2203
  }, children: [
2098
- /* @__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" }) }),
2204
+ /* @__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" }) }),
2099
2205
  displayError
2100
2206
  ] }),
2101
- children ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2207
+ children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2102
2208
  "button",
2103
2209
  {
2104
2210
  type: "submit",
@@ -2121,7 +2227,7 @@ function SplitCardFormInner({
2121
2227
  children: isSubmitting ? "PROCESSING..." : submitLabel
2122
2228
  }
2123
2229
  ),
2124
- !isButtons && showSecurityFooter && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2230
+ !isButtons && showSecurityFooter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2125
2231
  backgroundColor: "#EFF9F0",
2126
2232
  borderRadius: "8px",
2127
2233
  padding: "0.75rem",
@@ -2138,11 +2244,11 @@ function SplitCardFormInner({
2138
2244
  const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
2139
2245
  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;
2140
2246
  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;
2141
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2142
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayKeyframes, {}),
2143
- overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2144
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid" }, children: [
2145
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
2247
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2248
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
2249
+ overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2250
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid" }, children: [
2251
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
2146
2252
  gridArea: "1 / 1",
2147
2253
  display: "flex",
2148
2254
  flexDirection: "column",
@@ -2151,7 +2257,7 @@ function SplitCardFormInner({
2151
2257
  ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
2152
2258
  ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
2153
2259
  }, children: [
2154
- showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2260
+ showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2155
2261
  PayPalButtonInner,
2156
2262
  {
2157
2263
  sessionId,
@@ -2162,10 +2268,11 @@ function SplitCardFormInner({
2162
2268
  isProcessing: isSubmitting,
2163
2269
  onButtonClick,
2164
2270
  onDecline,
2165
- runBeforeButtonClick
2271
+ runBeforeButtonClick,
2272
+ onLoadStateChange: setPaypalLoadState
2166
2273
  }
2167
2274
  ) }),
2168
- showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2275
+ showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2169
2276
  WalletButtonInner,
2170
2277
  {
2171
2278
  sessionId,
@@ -2177,10 +2284,12 @@ function SplitCardFormInner({
2177
2284
  onErrorChange: updateError,
2178
2285
  onButtonClick,
2179
2286
  onDecline,
2180
- runBeforeButtonClick
2287
+ runBeforeButtonClick,
2288
+ onLoadStateChange: setWalletLoadState
2181
2289
  }
2182
- ) }) : showWallets ? /* @__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,
2183
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2290
+ ) }) : 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,
2291
+ showInAppBrowserNotice && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InAppBrowserNotice, {}),
2292
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2184
2293
  "button",
2185
2294
  {
2186
2295
  type: "button",
@@ -2218,10 +2327,10 @@ function SplitCardFormInner({
2218
2327
  onMouseUp: (e) => {
2219
2328
  e.currentTarget.style.transform = "scale(1)";
2220
2329
  },
2221
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardButtonContentSlot, { content: cardButtonContent })
2330
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
2222
2331
  }
2223
2332
  ),
2224
- displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2333
+ displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
2225
2334
  margin: "0.25rem 0",
2226
2335
  padding: "0.625rem 0.875rem",
2227
2336
  background: "#FEF2F2",
@@ -2235,11 +2344,11 @@ function SplitCardFormInner({
2235
2344
  gap: "0.5rem",
2236
2345
  ...bStyles.errorBanner ? bStyles.errorBanner : {}
2237
2346
  }, children: [
2238
- /* @__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" }) }),
2347
+ /* @__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" }) }),
2239
2348
  displayError
2240
2349
  ] })
2241
2350
  ] }),
2242
- isCardView && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
2351
+ isCardView && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
2243
2352
  gridArea: "1 / 1",
2244
2353
  ...cardAnim ? { animation: cardAnim } : {},
2245
2354
  ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -2247,10 +2356,10 @@ function SplitCardFormInner({
2247
2356
  ] })
2248
2357
  ] });
2249
2358
  }
2250
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2251
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayKeyframes, {}),
2252
- overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2253
- showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2359
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2360
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloPayKeyframes, {}),
2361
+ overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
2362
+ showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2254
2363
  WalletButtonInner,
2255
2364
  {
2256
2365
  sessionId,
@@ -2260,10 +2369,11 @@ function SplitCardFormInner({
2260
2369
  showGooglePay,
2261
2370
  onTokenizedBody: dispatchTokenizedBody,
2262
2371
  onErrorChange: updateError,
2263
- onDecline
2372
+ onDecline,
2373
+ onLoadStateChange: setWalletLoadState
2264
2374
  }
2265
2375
  ) }),
2266
- showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2376
+ showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2267
2377
  PayPalButtonInner,
2268
2378
  {
2269
2379
  sessionId,
@@ -2272,10 +2382,12 @@ function SplitCardFormInner({
2272
2382
  onTokenizedBody: dispatchTokenizedBody,
2273
2383
  onErrorChange: updateError,
2274
2384
  isProcessing: isSubmitting,
2275
- onDecline
2385
+ onDecline,
2386
+ onLoadStateChange: setPaypalLoadState
2276
2387
  }
2277
2388
  ) }),
2278
- (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
2389
+ showInAppBrowserNotice && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InAppBrowserNotice, {}),
2390
+ (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
2279
2391
  display: "flex",
2280
2392
  alignItems: "center",
2281
2393
  gap: "0.75rem",
@@ -2283,9 +2395,9 @@ function SplitCardFormInner({
2283
2395
  color: "#999",
2284
2396
  fontSize: "0.85rem"
2285
2397
  }, children: [
2286
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
2287
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "or pay with card" }),
2288
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
2398
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
2399
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "or pay with card" }),
2400
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
2289
2401
  ] }),
2290
2402
  cardFormBlock
2291
2403
  ] });
@@ -2726,15 +2838,31 @@ async function handleSavedPaymentRedirectResult(redirectResult, {
2726
2838
  { checkoutMethod: "paypal" }
2727
2839
  );
2728
2840
  }
2729
- const confirmParams = {
2730
- return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href
2731
- };
2732
2841
  if (redirectResult.paymentMethodId) {
2733
- confirmParams["payment_method"] = redirectResult.paymentMethodId;
2842
+ const { error: error2 } = await paypalStripe.handleNextAction({
2843
+ clientSecret: redirectResult.threeDSecureToken
2844
+ });
2845
+ if (error2) {
2846
+ throw Object.assign(
2847
+ new import_shared6.FloPayError(
2848
+ error2.message ?? "PayPal authorization failed.",
2849
+ "api_error",
2850
+ { code: error2.code }
2851
+ ),
2852
+ { checkoutMethod: "paypal" }
2853
+ );
2854
+ }
2855
+ return {
2856
+ status: "succeeded",
2857
+ checkoutMethod: "paypal"
2858
+ };
2734
2859
  }
2735
2860
  const { error } = await paypalStripe.confirmPayment({
2736
2861
  clientSecret: redirectResult.threeDSecureToken,
2737
- confirmParams,
2862
+ confirmParams: {
2863
+ return_url: returnUrl ?? resolveSavedPaymentReturnUrl(session) ?? window.location.href,
2864
+ payment_method_data: { type: "paypal" }
2865
+ },
2738
2866
  redirect: "if_required"
2739
2867
  });
2740
2868
  if (error) {
@@ -2808,7 +2936,7 @@ async function loadSavedPaymentProviders({
2808
2936
  }
2809
2937
 
2810
2938
  // src/flopay-checkout.tsx
2811
- var import_jsx_runtime6 = require("react/jsx-runtime");
2939
+ var import_jsx_runtime7 = require("react/jsx-runtime");
2812
2940
  var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
2813
2941
  var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
2814
2942
  var sessionInflightMap = /* @__PURE__ */ new Map();
@@ -2911,37 +3039,37 @@ function FloPayCheckout({
2911
3039
  const resolvedBillingUrl = (0, import_shared7.resolveBillingApiUrl)(billingApiUrl);
2912
3040
  const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
2913
3041
  const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
2914
- const [unified, setUnified] = (0, import_react8.useState)(null);
2915
- const [flopay, setFloPay] = (0, import_react8.useState)(null);
2916
- const flopayRef = (0, import_react8.useRef)(null);
2917
- const [paypalFlopay, setPaypalFloPay] = (0, import_react8.useState)(null);
2918
- const paypalFlopayRef = (0, import_react8.useRef)(null);
2919
- const [session, setSession] = (0, import_react8.useState)(null);
2920
- const [resolvedSessionId, setResolvedSessionId] = (0, import_react8.useState)(sessionIdProp ?? "");
3042
+ const [unified, setUnified] = (0, import_react9.useState)(null);
3043
+ const [flopay, setFloPay] = (0, import_react9.useState)(null);
3044
+ const flopayRef = (0, import_react9.useRef)(null);
3045
+ const [paypalFlopay, setPaypalFloPay] = (0, import_react9.useState)(null);
3046
+ const paypalFlopayRef = (0, import_react9.useRef)(null);
3047
+ const [session, setSession] = (0, import_react9.useState)(null);
3048
+ const [resolvedSessionId, setResolvedSessionId] = (0, import_react9.useState)(sessionIdProp ?? "");
2921
3049
  const activeSessionId = sessionIdProp ?? resolvedSessionId;
2922
3050
  const initSessionDependency = createSessionParams ? "" : activeSessionId;
2923
- const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
2924
- const [loadError, setLoadError] = (0, import_react8.useState)(null);
2925
- const [currentMode, setCurrentMode] = (0, import_react8.useState)("full");
2926
- const [confirmProcessing, setConfirmProcessing] = (0, import_react8.useState)(false);
2927
- const [modeError, setModeError] = (0, import_react8.useState)(initialErrorMessage);
2928
- const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react8.useState)(null);
2929
- const [modeOverlayError, setModeOverlayError] = (0, import_react8.useState)(null);
2930
- const [createSessionPatch, setCreateSessionPatch] = (0, import_react8.useState)(void 0);
2931
- const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react8.useState)("");
2932
- const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react8.useState)(false);
2933
- const autoCheckoutAttempted = (0, import_react8.useRef)(false);
2934
- const paypalResumeAttempted = (0, import_react8.useRef)(false);
2935
- const savedPaymentKeysRef = (0, import_react8.useRef)(null);
2936
- const onCompleteRef = (0, import_react8.useRef)(onComplete);
3051
+ const [isLoading, setIsLoading] = (0, import_react9.useState)(true);
3052
+ const [loadError, setLoadError] = (0, import_react9.useState)(null);
3053
+ const [currentMode, setCurrentMode] = (0, import_react9.useState)("full");
3054
+ const [confirmProcessing, setConfirmProcessing] = (0, import_react9.useState)(false);
3055
+ const [modeError, setModeError] = (0, import_react9.useState)(initialErrorMessage);
3056
+ const [modeOverlayStatus, setModeOverlayStatus] = (0, import_react9.useState)(null);
3057
+ const [modeOverlayError, setModeOverlayError] = (0, import_react9.useState)(null);
3058
+ const [createSessionPatch, setCreateSessionPatch] = (0, import_react9.useState)(void 0);
3059
+ const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react9.useState)("");
3060
+ const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react9.useState)(false);
3061
+ const autoCheckoutAttempted = (0, import_react9.useRef)(false);
3062
+ const paypalResumeAttempted = (0, import_react9.useRef)(false);
3063
+ const savedPaymentKeysRef = (0, import_react9.useRef)(null);
3064
+ const onCompleteRef = (0, import_react9.useRef)(onComplete);
2937
3065
  onCompleteRef.current = onComplete;
2938
- const onErrorRef = (0, import_react8.useRef)(onError);
3066
+ const onErrorRef = (0, import_react9.useRef)(onError);
2939
3067
  onErrorRef.current = onError;
2940
- const onDeclineRef = (0, import_react8.useRef)(onDecline);
3068
+ const onDeclineRef = (0, import_react9.useRef)(onDecline);
2941
3069
  onDeclineRef.current = onDecline;
2942
- const onSessionCompletedRef = (0, import_react8.useRef)(onSessionCompleted);
3070
+ const onSessionCompletedRef = (0, import_react9.useRef)(onSessionCompleted);
2943
3071
  onSessionCompletedRef.current = onSessionCompleted;
2944
- (0, import_react8.useEffect)(() => {
3072
+ (0, import_react9.useEffect)(() => {
2945
3073
  console.info("[FloPay] Checkout initialized", {
2946
3074
  sdk_version: import_shared7.SDK_VERSION,
2947
3075
  checkout_type: checkoutType,
@@ -2949,40 +3077,40 @@ function FloPayCheckout({
2949
3077
  billing_api_url: resolvedBillingUrl
2950
3078
  });
2951
3079
  }, [checkoutLayout, checkoutType, resolvedBillingUrl]);
2952
- const baseCreateSessionHash = (0, import_react8.useMemo)(
3080
+ const baseCreateSessionHash = (0, import_react9.useMemo)(
2953
3081
  () => createSessionParams ? hashCreateParams(createSessionParams) : "",
2954
3082
  [createSessionParams]
2955
3083
  );
2956
- const activeCreateSessionPatch = (0, import_react8.useMemo)(
3084
+ const activeCreateSessionPatch = (0, import_react9.useMemo)(
2957
3085
  () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
2958
3086
  [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
2959
3087
  );
2960
- const effectiveCreateSessionBase = (0, import_react8.useMemo)(
3088
+ const effectiveCreateSessionBase = (0, import_react9.useMemo)(
2961
3089
  () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
2962
3090
  [createSessionParams, activeCreateSessionPatch]
2963
3091
  );
2964
3092
  const effectiveCreateSessionMode = checkoutModeProp ?? effectiveCreateSessionBase?.checkoutMode ?? "full";
2965
- const effectiveCreateSession = (0, import_react8.useMemo)(
3093
+ const effectiveCreateSession = (0, import_react9.useMemo)(
2966
3094
  () => effectiveCreateSessionBase ? {
2967
3095
  ...effectiveCreateSessionBase,
2968
3096
  checkoutMode: effectiveCreateSessionMode
2969
3097
  } : void 0,
2970
3098
  [effectiveCreateSessionBase, effectiveCreateSessionMode]
2971
3099
  );
2972
- (0, import_react8.useEffect)(() => {
3100
+ (0, import_react9.useEffect)(() => {
2973
3101
  setCreateSessionPatch(void 0);
2974
3102
  setCreateSessionPatchBaseHash(baseCreateSessionHash);
2975
3103
  }, [baseCreateSessionHash]);
2976
- (0, import_react8.useEffect)(() => {
3104
+ (0, import_react9.useEffect)(() => {
2977
3105
  setModeError(initialErrorMessage);
2978
3106
  }, [initialErrorMessage]);
2979
- const emitDecline = (0, import_react8.useCallback)(
3107
+ const emitDecline = (0, import_react9.useCallback)(
2980
3108
  (method, input, overrides) => {
2981
3109
  onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
2982
3110
  },
2983
3111
  []
2984
3112
  );
2985
- const runSavedPaymentFlow = (0, import_react8.useCallback)(
3113
+ const runSavedPaymentFlow = (0, import_react9.useCallback)(
2986
3114
  async (sess, options) => {
2987
3115
  setModeError(null);
2988
3116
  setModeOverlayError(null);
@@ -3089,7 +3217,7 @@ function FloPayCheckout({
3089
3217
  resolvedBillingUrl
3090
3218
  ]
3091
3219
  );
3092
- (0, import_react8.useEffect)(() => {
3220
+ (0, import_react9.useEffect)(() => {
3093
3221
  if (typeof window === "undefined" || paypalResumeAttempted.current) {
3094
3222
  return;
3095
3223
  }
@@ -3150,6 +3278,7 @@ function FloPayCheckout({
3150
3278
  );
3151
3279
  }
3152
3280
  const paymentMethodId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
3281
+ let finalResultStatus = resultStatus;
3153
3282
  if (resumeState.sessionId) {
3154
3283
  const resumeApi = new import_js2.PaymentAPI(resolvedBillingUrl);
3155
3284
  const resumeSessionResult = await resumeApi.getUnifiedCheckoutSession(resumeState.sessionId);
@@ -3172,13 +3301,14 @@ function FloPayCheckout({
3172
3301
  { checkoutMethod: "paypal" }
3173
3302
  );
3174
3303
  }
3304
+ finalResultStatus = processResult.result.status;
3175
3305
  }
3176
3306
  }
3177
3307
  if (resumeState.sessionId) markSessionRecentlyCompleted(resumeState.sessionId);
3178
3308
  setModeOverlayStatus("success");
3179
3309
  await sleep(PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
3180
3310
  onCompleteRef.current?.({
3181
- status: resultStatus,
3311
+ status: finalResultStatus,
3182
3312
  paymentIntentId: paymentIntent.id,
3183
3313
  paymentMethodId,
3184
3314
  checkoutMethod: "paypal"
@@ -3204,7 +3334,7 @@ function FloPayCheckout({
3204
3334
  }
3205
3335
  })();
3206
3336
  }, [emitDecline, locale, normalizeSavedPaymentError, resolvedBillingUrl]);
3207
- const initializedHashRef = (0, import_react8.useRef)(null);
3337
+ const initializedHashRef = (0, import_react9.useRef)(null);
3208
3338
  function hashCreateParams(params) {
3209
3339
  const key = JSON.stringify({
3210
3340
  c: params?.clientId,
@@ -3228,16 +3358,16 @@ function FloPayCheckout({
3228
3358
  }
3229
3359
  return `flopay_session_${Math.abs(h).toString(36)}`;
3230
3360
  }
3231
- const createSessionHash = (0, import_react8.useMemo)(
3361
+ const createSessionHash = (0, import_react9.useMemo)(
3232
3362
  () => effectiveCreateSession ? hashCreateParams(effectiveCreateSession) : "",
3233
3363
  [effectiveCreateSession]
3234
3364
  );
3235
- const createSessionParamsRef = (0, import_react8.useRef)(effectiveCreateSession);
3365
+ const createSessionParamsRef = (0, import_react9.useRef)(effectiveCreateSession);
3236
3366
  createSessionParamsRef.current = effectiveCreateSession;
3237
- (0, import_react8.useEffect)(() => {
3367
+ (0, import_react9.useEffect)(() => {
3238
3368
  setResolvedSessionId(sessionIdProp ?? "");
3239
3369
  }, [sessionIdProp]);
3240
- (0, import_react8.useEffect)(() => {
3370
+ (0, import_react9.useEffect)(() => {
3241
3371
  autoCheckoutAttempted.current = false;
3242
3372
  setModeError(initialErrorMessage);
3243
3373
  setModeOverlayError(null);
@@ -3280,7 +3410,7 @@ function FloPayCheckout({
3280
3410
  }
3281
3411
  return { sid: sid ?? "", result: realResult };
3282
3412
  }
3283
- const bootstrapInlineSession = (0, import_react8.useCallback)(
3413
+ const bootstrapInlineSession = (0, import_react9.useCallback)(
3284
3414
  async (patch) => {
3285
3415
  const baseParams = createSessionParamsRef.current;
3286
3416
  if (!baseParams) {
@@ -3341,7 +3471,7 @@ function FloPayCheckout({
3341
3471
  },
3342
3472
  [locale, resolvedBillingUrl]
3343
3473
  );
3344
- const handleInlineSessionPatch = (0, import_react8.useCallback)(async (patch) => {
3474
+ const handleInlineSessionPatch = (0, import_react9.useCallback)(async (patch) => {
3345
3475
  if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
3346
3476
  return {
3347
3477
  sessionId: resolvedSessionId,
@@ -3364,7 +3494,7 @@ function FloPayCheckout({
3364
3494
  resolvedSessionId,
3365
3495
  session
3366
3496
  ]);
3367
- (0, import_react8.useEffect)(() => {
3497
+ (0, import_react9.useEffect)(() => {
3368
3498
  let cancelled = false;
3369
3499
  setLoadError(null);
3370
3500
  if (createSessionHash) {
@@ -3518,7 +3648,7 @@ function FloPayCheckout({
3518
3648
  initSessionDependency,
3519
3649
  runSavedPaymentFlow
3520
3650
  ]);
3521
- const handleConfirmCheckout = (0, import_react8.useCallback)(async () => {
3651
+ const handleConfirmCheckout = (0, import_react9.useCallback)(async () => {
3522
3652
  if (confirmProcessing || !session) return;
3523
3653
  setConfirmProcessing(true);
3524
3654
  setModeError(null);
@@ -3531,7 +3661,7 @@ function FloPayCheckout({
3531
3661
  setConfirmProcessing(false);
3532
3662
  }
3533
3663
  }, [activeSessionId, confirmProcessing, runSavedPaymentFlow, session]);
3534
- const providerOptions = (0, import_react8.useMemo)(() => {
3664
+ const providerOptions = (0, import_react9.useMemo)(() => {
3535
3665
  if (!unified || !session) return void 0;
3536
3666
  const opts = {
3537
3667
  appearance,
@@ -3550,7 +3680,7 @@ function FloPayCheckout({
3550
3680
  const shouldHandleInlineSessionPatch = Boolean(
3551
3681
  createSessionParams && !children && layout === "buttons" && onBeforeButtonClick && effectiveCreateSessionMode === "full"
3552
3682
  );
3553
- const checkoutValue = (0, import_react8.useMemo)(
3683
+ const checkoutValue = (0, import_react9.useMemo)(
3554
3684
  () => ({
3555
3685
  session,
3556
3686
  loading: isLoading,
@@ -3572,7 +3702,7 @@ function FloPayCheckout({
3572
3702
  ]
3573
3703
  );
3574
3704
  const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
3575
- const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3705
+ const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3576
3706
  ProcessingOverlay,
3577
3707
  {
3578
3708
  status: modeOverlayStatus,
@@ -3581,31 +3711,31 @@ function FloPayCheckout({
3581
3711
  ) : null;
3582
3712
  if (isLoading) {
3583
3713
  if (loadingNode) {
3584
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3714
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3585
3715
  loadingNode,
3586
3716
  modeOverlay
3587
3717
  ] });
3588
3718
  }
3589
3719
  if (layout === "buttons") {
3590
- const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
3720
+ const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3591
3721
  height: h,
3592
3722
  borderRadius: 8,
3593
3723
  background: "#e5e7eb",
3594
3724
  animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
3595
3725
  } });
3596
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3597
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3726
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3727
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3598
3728
  showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3599
3729
  (showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3600
3730
  skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3601
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
3731
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
3602
3732
  ] }),
3603
3733
  modeOverlay
3604
3734
  ] });
3605
3735
  }
3606
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3607
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
3608
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
3736
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3737
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
3738
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3609
3739
  width: 24,
3610
3740
  height: 24,
3611
3741
  border: "2px solid #e5e7eb",
@@ -3613,14 +3743,14 @@ function FloPayCheckout({
3613
3743
  borderRadius: "50%",
3614
3744
  animation: "spin 0.6s linear infinite"
3615
3745
  } }),
3616
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
3746
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
3617
3747
  ] }),
3618
3748
  modeOverlay
3619
3749
  ] });
3620
3750
  }
3621
3751
  if (loadError) {
3622
- if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: errorNode(loadError) });
3623
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3752
+ if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: errorNode(loadError) });
3753
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3624
3754
  "div",
3625
3755
  {
3626
3756
  style: {
@@ -3634,8 +3764,8 @@ function FloPayCheckout({
3634
3764
  );
3635
3765
  }
3636
3766
  if (shouldShowInterimButtons) {
3637
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3638
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3767
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3768
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3639
3769
  InterimButtonsView,
3640
3770
  {
3641
3771
  onButtonClick,
@@ -3653,12 +3783,12 @@ function FloPayCheckout({
3653
3783
  ] });
3654
3784
  }
3655
3785
  if (!flopay || !providerOptions) {
3656
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: modeOverlay });
3786
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: modeOverlay });
3657
3787
  }
3658
3788
  if (currentMode === "confirm") {
3659
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3660
- /* @__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: [
3661
- modeError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3789
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3790
+ /* @__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: [
3791
+ modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3662
3792
  "div",
3663
3793
  {
3664
3794
  style: {
@@ -3673,7 +3803,7 @@ function FloPayCheckout({
3673
3803
  renderConfirmButton ? renderConfirmButton({
3674
3804
  onConfirm: handleConfirmCheckout,
3675
3805
  isProcessing: confirmProcessing
3676
- }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3806
+ }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3677
3807
  "button",
3678
3808
  {
3679
3809
  type: "button",
@@ -3698,9 +3828,9 @@ function FloPayCheckout({
3698
3828
  modeOverlay
3699
3829
  ] });
3700
3830
  }
3701
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
3702
- /* @__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: [
3703
- modeError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3831
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
3832
+ /* @__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: [
3833
+ modeError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3704
3834
  "div",
3705
3835
  {
3706
3836
  style: {
@@ -3715,7 +3845,7 @@ function FloPayCheckout({
3715
3845
  children: modeError
3716
3846
  }
3717
3847
  ),
3718
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3848
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3719
3849
  SessionInjector,
3720
3850
  {
3721
3851
  sessionId: activeSessionId,
@@ -3724,7 +3854,7 @@ function FloPayCheckout({
3724
3854
  children
3725
3855
  }
3726
3856
  )
3727
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3857
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3728
3858
  SplitCardForm,
3729
3859
  {
3730
3860
  sessionId: activeSessionId,
@@ -3775,8 +3905,8 @@ function SessionInjector({
3775
3905
  session,
3776
3906
  children
3777
3907
  }) {
3778
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: import_react8.default.Children.map(children, (child) => {
3779
- if (!import_react8.default.isValidElement(child)) return child;
3908
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: import_react9.default.Children.map(children, (child) => {
3909
+ if (!import_react9.default.isValidElement(child)) return child;
3780
3910
  const existing = child.props;
3781
3911
  const injected = {};
3782
3912
  if (!existing.sessionId) injected.sessionId = sessionId;
@@ -3790,7 +3920,7 @@ function SessionInjector({
3790
3920
  injected.lastName = session.customer.lastName;
3791
3921
  }
3792
3922
  if (Object.keys(injected).length === 0) return child;
3793
- return import_react8.default.cloneElement(child, injected);
3923
+ return import_react9.default.cloneElement(child, injected);
3794
3924
  }) });
3795
3925
  }
3796
3926
  function InterimButtonsView({
@@ -3808,14 +3938,14 @@ function InterimButtonsView({
3808
3938
  cardBackButtonContent,
3809
3939
  cardTitleContent
3810
3940
  }) {
3811
- const [showCardForm, setShowCardForm] = (0, import_react8.useState)(false);
3941
+ const [showCardForm, setShowCardForm] = (0, import_react9.useState)(false);
3812
3942
  const isCardOpenControlled = typeof cardOpen === "boolean";
3813
- (0, import_react8.useEffect)(() => {
3943
+ (0, import_react9.useEffect)(() => {
3814
3944
  if (isCardOpenControlled) {
3815
3945
  setShowCardForm(cardOpen);
3816
3946
  }
3817
3947
  }, [cardOpen, isCardOpenControlled]);
3818
- const bStyles = (0, import_react8.useMemo)(() => {
3948
+ const bStyles = (0, import_react9.useMemo)(() => {
3819
3949
  const base = (0, import_shared7.resolveButtonsLayoutTheme)(buttonsTheme);
3820
3950
  if (!stylesOverride) return base;
3821
3951
  return {
@@ -3829,7 +3959,7 @@ function InterimButtonsView({
3829
3959
  title: { ...base.title, ...stylesOverride.title }
3830
3960
  };
3831
3961
  }, [buttonsTheme, stylesOverride]);
3832
- const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
3962
+ const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3833
3963
  height: h,
3834
3964
  borderRadius: 8,
3835
3965
  background: "#e5e7eb",
@@ -3841,15 +3971,15 @@ function InterimButtonsView({
3841
3971
  const inputBg = bStyles.cardInputBackground ?? "white";
3842
3972
  const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
3843
3973
  const hideTitle = isEmptySlotContent(cardTitleContent);
3844
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
3974
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
3845
3975
  backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
3846
3976
  borderRadius: "8px",
3847
3977
  animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
3848
3978
  overflow: "hidden",
3849
3979
  ...bStyles.cardFormContainer
3850
3980
  }, children: [
3851
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
3852
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
3981
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
3982
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
3853
3983
  "button",
3854
3984
  {
3855
3985
  type: "button",
@@ -3876,7 +4006,7 @@ function InterimButtonsView({
3876
4006
  ...bStyles.backButton
3877
4007
  },
3878
4008
  children: [
3879
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
4009
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
3880
4010
  display: "inline-flex",
3881
4011
  alignItems: "center",
3882
4012
  justifyContent: "center",
@@ -3885,12 +4015,12 @@ function InterimButtonsView({
3885
4015
  borderRadius: "50%",
3886
4016
  backgroundColor: "#f3f4f6",
3887
4017
  ...bStyles.backButtonIcon
3888
- }, 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" }) }) }),
3889
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
4018
+ }, 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" }) }) }),
4019
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
3890
4020
  ]
3891
4021
  }
3892
4022
  ),
3893
- hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
4023
+ hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3894
4024
  flex: 1,
3895
4025
  textAlign: "center",
3896
4026
  fontWeight: 600,
@@ -3898,15 +4028,15 @@ function InterimButtonsView({
3898
4028
  color: "#262833",
3899
4029
  paddingRight: 80,
3900
4030
  ...bStyles.title
3901
- }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleContentSlot, { content: cardTitleContent }) })
4031
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TitleContentSlot, { content: cardTitleContent }) })
3902
4032
  ] }),
3903
- /* @__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" } }) }),
3904
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
3905
- /* @__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" } }) }),
3906
- /* @__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" } }) })
4033
+ /* @__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" } }) }),
4034
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex" }, children: [
4035
+ /* @__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" } }) }),
4036
+ /* @__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" } }) })
3907
4037
  ] }),
3908
- /* @__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" } }) }),
3909
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
4038
+ /* @__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" } }) }),
4039
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
3910
4040
  height: 50,
3911
4041
  borderRadius: 8,
3912
4042
  marginTop: 16,
@@ -3915,7 +4045,7 @@ function InterimButtonsView({
3915
4045
  ...bStyles.submitButton,
3916
4046
  opacity: 0.5
3917
4047
  } }),
3918
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
4048
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
3919
4049
  @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
3920
4050
  @keyframes flopay-interim-expand {
3921
4051
  0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -3925,10 +4055,10 @@ function InterimButtonsView({
3925
4055
  ` })
3926
4056
  ] });
3927
4057
  }
3928
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
4058
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
3929
4059
  showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3930
4060
  (showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
3931
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
4061
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3932
4062
  "button",
3933
4063
  {
3934
4064
  type: "button",
@@ -3968,10 +4098,10 @@ function InterimButtonsView({
3968
4098
  onMouseUp: (e) => {
3969
4099
  e.currentTarget.style.transform = "scale(1)";
3970
4100
  },
3971
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardButtonContentSlot, { content: cardButtonContent })
4101
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardButtonContentSlot, { content: cardButtonContent })
3972
4102
  }
3973
4103
  ),
3974
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
4104
+ errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
3975
4105
  margin: "0.25rem 0",
3976
4106
  padding: "0.625rem 0.875rem",
3977
4107
  background: "#FEF2F2",
@@ -3985,21 +4115,21 @@ function InterimButtonsView({
3985
4115
  gap: "0.5rem",
3986
4116
  ...bStyles.errorBanner
3987
4117
  }, children: [
3988
- /* @__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" }) }),
4118
+ /* @__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" }) }),
3989
4119
  errorMessage
3990
4120
  ] }),
3991
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
4121
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
3992
4122
  ] });
3993
4123
  }
3994
4124
 
3995
4125
  // src/checkout-form.tsx
3996
4126
  var import_shared8 = require("@flopay/shared");
3997
- var import_react9 = require("react");
3998
- var import_jsx_runtime7 = require("react/jsx-runtime");
4127
+ var import_react10 = require("react");
4128
+ var import_jsx_runtime8 = require("react/jsx-runtime");
3999
4129
  var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
4000
- var CheckoutForm = (0, import_react9.forwardRef)(
4130
+ var CheckoutForm = (0, import_react10.forwardRef)(
4001
4131
  function CheckoutForm2(props, ref) {
4002
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
4132
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
4003
4133
  }
4004
4134
  );
4005
4135
  function CheckoutFormInner({
@@ -4028,27 +4158,27 @@ function CheckoutFormInner({
4028
4158
  const paypalFlopay = usePayPalFloPay();
4029
4159
  const elements = useElements();
4030
4160
  const contextBillingUrl = useBillingApiUrl();
4031
- const [processing, setProcessing] = (0, import_react9.useState)(false);
4032
- const [error, setError] = (0, import_react9.useState)(null);
4033
- const [is3DSActive, setIs3DSActive] = (0, import_react9.useState)(false);
4161
+ const [processing, setProcessing] = (0, import_react10.useState)(false);
4162
+ const [error, setError] = (0, import_react10.useState)(null);
4163
+ const [is3DSActive, setIs3DSActive] = (0, import_react10.useState)(false);
4034
4164
  const displayError = externalError ?? error;
4035
4165
  const isSubmitting = externalProcessing ?? processing;
4036
4166
  const isSelfContained = !onTokenizedBody;
4037
4167
  const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
4038
- const updateError = (0, import_react9.useCallback)(
4168
+ const updateError = (0, import_react10.useCallback)(
4039
4169
  (err) => {
4040
4170
  setError(err);
4041
4171
  onErrorChange?.(err);
4042
4172
  },
4043
4173
  [onErrorChange]
4044
4174
  );
4045
- const emitDecline = (0, import_react9.useCallback)(
4175
+ const emitDecline = (0, import_react10.useCallback)(
4046
4176
  (input, overrides) => {
4047
4177
  onDecline?.(buildDeclineEvent("card", input, overrides));
4048
4178
  },
4049
4179
  [onDecline]
4050
4180
  );
4051
- const processPaymentInternal = (0, import_react9.useCallback)(
4181
+ const processPaymentInternal = (0, import_react10.useCallback)(
4052
4182
  async (tokenizedBody, completionPaymentMethodId) => {
4053
4183
  setProcessing(true);
4054
4184
  updateError(null);
@@ -4165,7 +4295,7 @@ function CheckoutFormInner({
4165
4295
  },
4166
4296
  [baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
4167
4297
  );
4168
- const dispatchTokenizedBody = (0, import_react9.useCallback)(
4298
+ const dispatchTokenizedBody = (0, import_react10.useCallback)(
4169
4299
  (tokenizedBody) => {
4170
4300
  if (onTokenizedBody) {
4171
4301
  onTokenizedBody(tokenizedBody);
@@ -4175,7 +4305,7 @@ function CheckoutFormInner({
4175
4305
  },
4176
4306
  [onTokenizedBody, processPaymentInternal]
4177
4307
  );
4178
- (0, import_react9.useImperativeHandle)(innerRef, () => ({
4308
+ (0, import_react10.useImperativeHandle)(innerRef, () => ({
4179
4309
  async handleNextAction(secret) {
4180
4310
  if (!flopay) return;
4181
4311
  setIs3DSActive(true);
@@ -4202,7 +4332,7 @@ function CheckoutFormInner({
4202
4332
  }
4203
4333
  }
4204
4334
  }), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
4205
- (0, import_react9.useEffect)(() => {
4335
+ (0, import_react10.useEffect)(() => {
4206
4336
  if (typeof window === "undefined") return;
4207
4337
  const stored = localStorage.getItem(WALLET_RESUME_KEY2);
4208
4338
  if (!stored) return;
@@ -4220,7 +4350,7 @@ function CheckoutFormInner({
4220
4350
  localStorage.removeItem(WALLET_RESUME_KEY2);
4221
4351
  }
4222
4352
  }, [sessionId, dispatchTokenizedBody]);
4223
- const handleSubmit = (0, import_react9.useCallback)(
4353
+ const handleSubmit = (0, import_react10.useCallback)(
4224
4354
  async (e) => {
4225
4355
  e.preventDefault();
4226
4356
  if (!flopay || !elements || isSubmitting) return;
@@ -4310,8 +4440,8 @@ function CheckoutFormInner({
4310
4440
  [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
4311
4441
  );
4312
4442
  const isReady = flopay !== null && elements !== null;
4313
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
4314
- (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-overlay", style: {
4443
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
4444
+ (is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-overlay", style: {
4315
4445
  position: "absolute",
4316
4446
  inset: 0,
4317
4447
  background: "rgba(255,255,255,0.7)",
@@ -4320,12 +4450,12 @@ function CheckoutFormInner({
4320
4450
  justifyContent: "center",
4321
4451
  zIndex: 10
4322
4452
  }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
4323
- !isReady && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
4324
- isReady && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
4325
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaymentElement, { options: { layout } }),
4326
- showAddress && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
4327
- displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
4328
- children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4453
+ !isReady && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
4454
+ isReady && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
4455
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaymentElement, { options: { layout } }),
4456
+ showAddress && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
4457
+ displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
4458
+ children ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4329
4459
  "button",
4330
4460
  {
4331
4461
  type: "submit",
@@ -4340,8 +4470,8 @@ function CheckoutFormInner({
4340
4470
 
4341
4471
  // src/paypal-button.tsx
4342
4472
  var import_shared9 = require("@flopay/shared");
4343
- var import_react10 = require("react");
4344
- var import_jsx_runtime8 = require("react/jsx-runtime");
4473
+ var import_react11 = require("react");
4474
+ var import_jsx_runtime9 = require("react/jsx-runtime");
4345
4475
  function PayPalButton({
4346
4476
  sessionId,
4347
4477
  billingApiUrl,
@@ -4358,11 +4488,11 @@ function PayPalButton({
4358
4488
  const flopay = useFloPay();
4359
4489
  const elements = useElements();
4360
4490
  const contextBillingUrl = useBillingApiUrl();
4361
- const [ready, setReady] = (0, import_react10.useState)(false);
4362
- const [submitting, setSubmitting] = (0, import_react10.useState)(false);
4363
- const paypalResumeAttempted = (0, import_react10.useRef)(false);
4491
+ const [ready, setReady] = (0, import_react11.useState)(false);
4492
+ const [submitting, setSubmitting] = (0, import_react11.useState)(false);
4493
+ const paypalResumeAttempted = (0, import_react11.useRef)(false);
4364
4494
  const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
4365
- const processPaymentInternal = (0, import_react10.useCallback)(
4495
+ const processPaymentInternal = (0, import_react11.useCallback)(
4366
4496
  async (tokenizedBody) => {
4367
4497
  try {
4368
4498
  const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
@@ -4395,7 +4525,7 @@ function PayPalButton({
4395
4525
  },
4396
4526
  [baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
4397
4527
  );
4398
- const dispatchTokenizedBody = (0, import_react10.useCallback)(
4528
+ const dispatchTokenizedBody = (0, import_react11.useCallback)(
4399
4529
  (body) => {
4400
4530
  if (onTokenizedBody) {
4401
4531
  onTokenizedBody(body);
@@ -4405,7 +4535,7 @@ function PayPalButton({
4405
4535
  },
4406
4536
  [onTokenizedBody, processPaymentInternal]
4407
4537
  );
4408
- (0, import_react10.useEffect)(() => {
4538
+ (0, import_react11.useEffect)(() => {
4409
4539
  if (!flopay || paypalResumeAttempted.current) return;
4410
4540
  const params = new URLSearchParams(window.location.search);
4411
4541
  const paymentIntentId = params.get("payment_intent");
@@ -4453,7 +4583,7 @@ function PayPalButton({
4453
4583
  }
4454
4584
  })();
4455
4585
  }, [flopay, dispatchTokenizedBody, onErrorChange]);
4456
- const handlePayPalConfirm = (0, import_react10.useCallback)(async () => {
4586
+ const handlePayPalConfirm = (0, import_react11.useCallback)(async () => {
4457
4587
  if (!flopay || !elements) return;
4458
4588
  try {
4459
4589
  setSubmitting(true);
@@ -4486,11 +4616,11 @@ function PayPalButton({
4486
4616
  }
4487
4617
  }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
4488
4618
  if (!flopay || !elements) {
4489
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
4619
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
4490
4620
  }
4491
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
4492
- !ready && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
4493
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4621
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
4622
+ !ready && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
4623
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4494
4624
  "button",
4495
4625
  {
4496
4626
  type: "button",
@@ -4512,7 +4642,7 @@ function PayPalButton({
4512
4642
  children: submitting ? "Processing..." : "PayPal"
4513
4643
  }
4514
4644
  ) }),
4515
- (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
4645
+ (submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
4516
4646
  position: "fixed",
4517
4647
  inset: 0,
4518
4648
  background: "rgba(0,0,0,0.4)",
@@ -4520,7 +4650,7 @@ function PayPalButton({
4520
4650
  alignItems: "center",
4521
4651
  justifyContent: "center",
4522
4652
  zIndex: 1e3
4523
- }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: {
4653
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
4524
4654
  background: "white",
4525
4655
  borderRadius: 8,
4526
4656
  padding: "1.5rem",
@@ -4532,10 +4662,10 @@ function PayPalButton({
4532
4662
  }
4533
4663
 
4534
4664
  // src/automatic-payment-button.tsx
4535
- var import_react11 = require("react");
4665
+ var import_react12 = require("react");
4536
4666
  var import_js3 = require("@flopay/js");
4537
4667
  var import_shared10 = require("@flopay/shared");
4538
- var import_jsx_runtime9 = require("react/jsx-runtime");
4668
+ var import_jsx_runtime10 = require("react/jsx-runtime");
4539
4669
  var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
4540
4670
  var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
4541
4671
  function sleep2(ms) {
@@ -4652,11 +4782,11 @@ function FloPayAutomaticPaymentButton({
4652
4782
  style,
4653
4783
  ...buttonProps
4654
4784
  }) {
4655
- const resolvedBillingUrl = (0, import_react11.useMemo)(
4785
+ const resolvedBillingUrl = (0, import_react12.useMemo)(
4656
4786
  () => (0, import_shared10.resolveBillingApiUrl)(billingApiUrl),
4657
4787
  [billingApiUrl]
4658
4788
  );
4659
- const createSessionDraft = (0, import_react11.useMemo)(
4789
+ const createSessionDraft = (0, import_react12.useMemo)(
4660
4790
  () => resolveCreateSessionDraft({
4661
4791
  createSession,
4662
4792
  clientId,
@@ -4682,11 +4812,11 @@ function FloPayAutomaticPaymentButton({
4682
4812
  utmMetadata
4683
4813
  ]
4684
4814
  );
4685
- const [isProcessing, setIsProcessing] = (0, import_react11.useState)(false);
4686
- const [overlayStatus, setOverlayStatus] = (0, import_react11.useState)(null);
4687
- const [overlayError, setOverlayError] = (0, import_react11.useState)(null);
4688
- const [fallbackSession, setFallbackSession] = (0, import_react11.useState)(null);
4689
- const automaticPaymentToken = (0, import_react11.useMemo)(
4815
+ const [isProcessing, setIsProcessing] = (0, import_react12.useState)(false);
4816
+ const [overlayStatus, setOverlayStatus] = (0, import_react12.useState)(null);
4817
+ const [overlayError, setOverlayError] = (0, import_react12.useState)(null);
4818
+ const [fallbackSession, setFallbackSession] = (0, import_react12.useState)(null);
4819
+ const automaticPaymentToken = (0, import_react12.useMemo)(
4690
4820
  () => paymentMethodId ? {
4691
4821
  id: paymentMethodId,
4692
4822
  type: "card",
@@ -4694,31 +4824,31 @@ function FloPayAutomaticPaymentButton({
4694
4824
  } : void 0,
4695
4825
  [checkoutMethod, paymentMethodId]
4696
4826
  );
4697
- const isMountedRef = (0, import_react11.useRef)(true);
4698
- const resumeAttemptedRef = (0, import_react11.useRef)(false);
4699
- const fallbackSessionRef = (0, import_react11.useRef)(fallbackSession);
4700
- const onSuccessRef = (0, import_react11.useRef)(onSuccess);
4701
- const onErrorRef = (0, import_react11.useRef)(onError);
4702
- const onDeclineRef = (0, import_react11.useRef)(onDecline);
4703
- (0, import_react11.useEffect)(() => {
4827
+ const isMountedRef = (0, import_react12.useRef)(true);
4828
+ const resumeAttemptedRef = (0, import_react12.useRef)(false);
4829
+ const fallbackSessionRef = (0, import_react12.useRef)(fallbackSession);
4830
+ const onSuccessRef = (0, import_react12.useRef)(onSuccess);
4831
+ const onErrorRef = (0, import_react12.useRef)(onError);
4832
+ const onDeclineRef = (0, import_react12.useRef)(onDecline);
4833
+ (0, import_react12.useEffect)(() => {
4704
4834
  fallbackSessionRef.current = fallbackSession;
4705
4835
  }, [fallbackSession]);
4706
- (0, import_react11.useEffect)(() => {
4836
+ (0, import_react12.useEffect)(() => {
4707
4837
  onSuccessRef.current = onSuccess;
4708
4838
  }, [onSuccess]);
4709
- (0, import_react11.useEffect)(() => {
4839
+ (0, import_react12.useEffect)(() => {
4710
4840
  onErrorRef.current = onError;
4711
4841
  }, [onError]);
4712
- (0, import_react11.useEffect)(() => {
4842
+ (0, import_react12.useEffect)(() => {
4713
4843
  onDeclineRef.current = onDecline;
4714
4844
  }, [onDecline]);
4715
- (0, import_react11.useEffect)(() => {
4845
+ (0, import_react12.useEffect)(() => {
4716
4846
  isMountedRef.current = true;
4717
4847
  return () => {
4718
4848
  isMountedRef.current = false;
4719
4849
  };
4720
4850
  }, []);
4721
- (0, import_react11.useEffect)(() => {
4851
+ (0, import_react12.useEffect)(() => {
4722
4852
  if (!fallbackSession || typeof window === "undefined") {
4723
4853
  return;
4724
4854
  }
@@ -4732,13 +4862,13 @@ function FloPayAutomaticPaymentButton({
4732
4862
  window.removeEventListener("keydown", handleKeyDown);
4733
4863
  };
4734
4864
  }, [fallbackSession]);
4735
- const emitDecline = (0, import_react11.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
4865
+ const emitDecline = (0, import_react12.useCallback)((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
4736
4866
  onDeclineRef.current?.(buildDeclineEvent(method, error, {
4737
4867
  code: error.code,
4738
4868
  declineCode: error.declineCode
4739
4869
  }));
4740
4870
  }, []);
4741
- const showSuccess = (0, import_react11.useCallback)(async (event) => {
4871
+ const showSuccess = (0, import_react12.useCallback)(async (event) => {
4742
4872
  if (!isMountedRef.current) return;
4743
4873
  setOverlayError(null);
4744
4874
  setOverlayStatus("success");
@@ -4746,7 +4876,7 @@ function FloPayAutomaticPaymentButton({
4746
4876
  if (!isMountedRef.current) return;
4747
4877
  onSuccessRef.current?.(event);
4748
4878
  }, []);
4749
- const showError = (0, import_react11.useCallback)(async (error, options) => {
4879
+ const showError = (0, import_react12.useCallback)(async (error, options) => {
4750
4880
  if (!isMountedRef.current) return;
4751
4881
  onErrorRef.current?.(error);
4752
4882
  if (options?.emitDecline) {
@@ -4756,7 +4886,7 @@ function FloPayAutomaticPaymentButton({
4756
4886
  setOverlayStatus("error");
4757
4887
  await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
4758
4888
  }, [emitDecline]);
4759
- const processResolvedSession = (0, import_react11.useCallback)(async (apiResult, resolvedSessionId, options) => {
4889
+ const processResolvedSession = (0, import_react12.useCallback)(async (apiResult, resolvedSessionId, options) => {
4760
4890
  const session = apiResult.data.session ?? null;
4761
4891
  if (!session) {
4762
4892
  throw new import_shared10.FloPayError("No session data returned", "api_error");
@@ -4923,6 +5053,14 @@ function FloPayAutomaticPaymentButton({
4923
5053
  if (floPayErr.code === "payment_intent_unexpected_state" && inResumeWindow) {
4924
5054
  return;
4925
5055
  }
5056
+ const isSilentFallbackCase = (floPayErr.code === "paypal_requires_user_interaction" || floPayErr.code === "payment_intent_unexpected_state") && shouldShowFallbackCheckout(floPayErr, fallbackSessionId) && !!fallbackSessionId && isMountedRef.current;
5057
+ if (isSilentFallbackCase) {
5058
+ setFallbackSession({
5059
+ sessionId: fallbackSessionId,
5060
+ errorMessage: ""
5061
+ });
5062
+ return;
5063
+ }
4926
5064
  await showError(floPayErr, {
4927
5065
  emitDecline: true,
4928
5066
  method: floPayErr.checkoutMethod ?? DEFAULT_SAVED_PAYMENT_DECLINE_METHOD
@@ -4943,7 +5081,7 @@ function FloPayAutomaticPaymentButton({
4943
5081
  showError,
4944
5082
  showSuccess
4945
5083
  ]);
4946
- const handleButtonClick = (0, import_react11.useCallback)(async (event) => {
5084
+ const handleButtonClick = (0, import_react12.useCallback)(async (event) => {
4947
5085
  buttonProps.onClick?.(event);
4948
5086
  if (event.defaultPrevented || disabled || isProcessing) {
4949
5087
  return;
@@ -5025,7 +5163,7 @@ function FloPayAutomaticPaymentButton({
5025
5163
  showError,
5026
5164
  showSuccess
5027
5165
  ]);
5028
- const handleFallbackComplete = (0, import_react11.useCallback)((result) => {
5166
+ const handleFallbackComplete = (0, import_react12.useCallback)((result) => {
5029
5167
  const activeFallback = fallbackSessionRef.current;
5030
5168
  setFallbackSession(null);
5031
5169
  onSuccessRef.current?.({
@@ -5035,13 +5173,13 @@ function FloPayAutomaticPaymentButton({
5035
5173
  autoCompleted: false
5036
5174
  });
5037
5175
  }, []);
5038
- const handleFallbackError = (0, import_react11.useCallback)((error) => {
5176
+ const handleFallbackError = (0, import_react12.useCallback)((error) => {
5039
5177
  onErrorRef.current?.(error);
5040
5178
  }, []);
5041
- const handleFallbackDecline = (0, import_react11.useCallback)((decline) => {
5179
+ const handleFallbackDecline = (0, import_react12.useCallback)((decline) => {
5042
5180
  onDeclineRef.current?.(decline);
5043
5181
  }, []);
5044
- (0, import_react11.useEffect)(() => {
5182
+ (0, import_react12.useEffect)(() => {
5045
5183
  if (typeof window === "undefined" || resumeAttemptedRef.current) {
5046
5184
  return;
5047
5185
  }
@@ -5109,13 +5247,14 @@ function FloPayAutomaticPaymentButton({
5109
5247
  }
5110
5248
  const api = new import_js3.PaymentAPI(resolvedBillingUrl);
5111
5249
  const sessionResult = await api.getUnifiedCheckoutSession(resumeState.sessionId);
5112
- const resumeSession = sessionResult.data.session;
5250
+ let resumeSession = sessionResult.data.session;
5113
5251
  if (!resumeSession) {
5114
5252
  throw Object.assign(
5115
5253
  new import_shared10.FloPayError("Could not load session to capture PayPal payment.", "api_error"),
5116
5254
  { checkoutMethod: "paypal" }
5117
5255
  );
5118
5256
  }
5257
+ let finalResultStatus = resultStatus;
5119
5258
  if (resumeSession.status !== "complete") {
5120
5259
  const processResult = await processSavedPaymentForMode({
5121
5260
  billingApiUrl: resolvedBillingUrl,
@@ -5134,10 +5273,18 @@ function FloPayAutomaticPaymentButton({
5134
5273
  { checkoutMethod: "paypal" }
5135
5274
  );
5136
5275
  }
5276
+ finalResultStatus = processResult.result.status;
5277
+ try {
5278
+ const refreshed = await api.getUnifiedCheckoutSession(resumeState.sessionId);
5279
+ if (refreshed.data.session) {
5280
+ resumeSession = refreshed.data.session;
5281
+ }
5282
+ } catch {
5283
+ }
5137
5284
  }
5138
5285
  await showSuccess({
5139
5286
  result: {
5140
- status: resultStatus,
5287
+ status: finalResultStatus,
5141
5288
  paymentIntentId: paymentIntent.id,
5142
5289
  paymentMethodId: paymentMethodId2,
5143
5290
  checkoutMethod: "paypal"
@@ -5163,7 +5310,7 @@ function FloPayAutomaticPaymentButton({
5163
5310
  }
5164
5311
  })();
5165
5312
  }, [locale, resolvedBillingUrl, showError, showSuccess]);
5166
- const bStyles = (0, import_react11.useMemo)(() => {
5313
+ const bStyles = (0, import_react12.useMemo)(() => {
5167
5314
  const base = (0, import_shared10.resolveButtonsLayoutTheme)(buttonsTheme);
5168
5315
  if (!stylesOverride) return base;
5169
5316
  return {
@@ -5173,8 +5320,8 @@ function FloPayAutomaticPaymentButton({
5173
5320
  };
5174
5321
  }, [buttonsTheme, stylesOverride]);
5175
5322
  const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
5176
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
5177
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5323
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
5324
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5178
5325
  "button",
5179
5326
  {
5180
5327
  ...buttonProps,
@@ -5215,17 +5362,17 @@ function FloPayAutomaticPaymentButton({
5215
5362
  e.currentTarget.style.transform = "scale(1)";
5216
5363
  }
5217
5364
  },
5218
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CardButtonContentSlot, { content: children })
5365
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardButtonContentSlot, { content: children })
5219
5366
  }
5220
5367
  ),
5221
- overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5368
+ overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5222
5369
  ProcessingOverlay,
5223
5370
  {
5224
5371
  status: overlayStatus,
5225
5372
  errorMessage: overlayError
5226
5373
  }
5227
5374
  ),
5228
- fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5375
+ fallbackSession && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5229
5376
  "div",
5230
5377
  {
5231
5378
  "data-testid": "flopay-automatic-payment-fallback",
@@ -5246,7 +5393,7 @@ function FloPayAutomaticPaymentButton({
5246
5393
  padding: "1.5rem",
5247
5394
  zIndex: 1100
5248
5395
  },
5249
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5396
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5250
5397
  "div",
5251
5398
  {
5252
5399
  style: {
@@ -5262,7 +5409,7 @@ function FloPayAutomaticPaymentButton({
5262
5409
  flexDirection: "column",
5263
5410
  gap: "1rem"
5264
5411
  },
5265
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
5412
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
5266
5413
  FloPayCheckout,
5267
5414
  {
5268
5415
  sessionId: fallbackSession.sessionId,
@@ -5293,6 +5440,7 @@ function FloPayAutomaticPaymentButton({
5293
5440
  FloPayAutomaticPaymentButton,
5294
5441
  FloPayCheckout,
5295
5442
  FloPayProvider,
5443
+ InAppBrowserNotice,
5296
5444
  PayPalButton,
5297
5445
  PaymentElement,
5298
5446
  SplitCardForm,