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