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