@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.mjs
CHANGED
|
@@ -100,7 +100,7 @@ function FloPayProvider({
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
// src/flopay-checkout.tsx
|
|
103
|
-
import
|
|
103
|
+
import React6, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
|
|
104
104
|
import { PaymentAPI as PaymentAPI3 } from "@flopay/js";
|
|
105
105
|
import { SDK_VERSION, FloPayError as FloPayError4, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
|
|
106
106
|
|
|
@@ -249,7 +249,7 @@ import {
|
|
|
249
249
|
getStateFromPostalCode
|
|
250
250
|
} from "@flopay/shared";
|
|
251
251
|
import { PaymentAPI } from "@flopay/js";
|
|
252
|
-
import { forwardRef, useCallback
|
|
252
|
+
import { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
|
|
253
253
|
|
|
254
254
|
// src/hooks.ts
|
|
255
255
|
import { useContext as useContext2 } from "react";
|
|
@@ -622,9 +622,6 @@ function wasSessionRecentlyCompleted(sessionId) {
|
|
|
622
622
|
}
|
|
623
623
|
}
|
|
624
624
|
|
|
625
|
-
// src/in-app-browser-notice.tsx
|
|
626
|
-
import { useCallback, useEffect as useEffect3, useState as useState2 } from "react";
|
|
627
|
-
|
|
628
625
|
// src/in-app-browser.ts
|
|
629
626
|
function isInAppBrowser(userAgent) {
|
|
630
627
|
const ua = userAgent ?? (typeof navigator !== "undefined" ? navigator.userAgent : "");
|
|
@@ -640,101 +637,9 @@ function isInAppBrowser(userAgent) {
|
|
|
640
637
|
return false;
|
|
641
638
|
}
|
|
642
639
|
|
|
643
|
-
// src/in-app-browser-notice.tsx
|
|
644
|
-
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
645
|
-
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.";
|
|
646
|
-
function InAppBrowserNotice({
|
|
647
|
-
message,
|
|
648
|
-
openButtonLabel,
|
|
649
|
-
copiedButtonLabel,
|
|
650
|
-
containerStyle,
|
|
651
|
-
buttonStyle,
|
|
652
|
-
onOpenInBrowser
|
|
653
|
-
}) {
|
|
654
|
-
const [copied, setCopied] = useState2(false);
|
|
655
|
-
const [inAppBrowser, setInAppBrowser] = useState2(false);
|
|
656
|
-
useEffect3(() => {
|
|
657
|
-
setInAppBrowser(isInAppBrowser());
|
|
658
|
-
}, []);
|
|
659
|
-
const defaultOpenLabel = inAppBrowser ? "Copy link" : "Open in browser";
|
|
660
|
-
const defaultCopiedLabel = inAppBrowser ? "Link copied \u2014 open Safari/Chrome and paste" : "Link copied \u2014 paste in your browser";
|
|
661
|
-
const effectiveOpenLabel = openButtonLabel ?? defaultOpenLabel;
|
|
662
|
-
const effectiveCopiedLabel = copiedButtonLabel ?? defaultCopiedLabel;
|
|
663
|
-
const handleClick = useCallback(async () => {
|
|
664
|
-
if (typeof window === "undefined") return;
|
|
665
|
-
const url = window.location.href;
|
|
666
|
-
let opened = false;
|
|
667
|
-
if (!inAppBrowser) {
|
|
668
|
-
try {
|
|
669
|
-
const win = window.open(url, "_blank");
|
|
670
|
-
opened = !!win;
|
|
671
|
-
} catch {
|
|
672
|
-
opened = false;
|
|
673
|
-
}
|
|
674
|
-
}
|
|
675
|
-
let didCopy = false;
|
|
676
|
-
if (!opened) {
|
|
677
|
-
if (typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function") {
|
|
678
|
-
try {
|
|
679
|
-
await navigator.clipboard.writeText(url);
|
|
680
|
-
didCopy = true;
|
|
681
|
-
setCopied(true);
|
|
682
|
-
} catch {
|
|
683
|
-
didCopy = false;
|
|
684
|
-
}
|
|
685
|
-
}
|
|
686
|
-
}
|
|
687
|
-
onOpenInBrowser?.({ opened, copied: didCopy });
|
|
688
|
-
}, [inAppBrowser, onOpenInBrowser]);
|
|
689
|
-
return /* @__PURE__ */ jsxs3(
|
|
690
|
-
"div",
|
|
691
|
-
{
|
|
692
|
-
role: "status",
|
|
693
|
-
"data-testid": "flopay-in-app-browser-notice",
|
|
694
|
-
style: {
|
|
695
|
-
marginTop: "0.75rem",
|
|
696
|
-
padding: "0.75rem 0.875rem",
|
|
697
|
-
background: "#FFFBEB",
|
|
698
|
-
border: "1px solid #FDE68A",
|
|
699
|
-
borderRadius: 8,
|
|
700
|
-
color: "#92400E",
|
|
701
|
-
fontSize: "0.85rem",
|
|
702
|
-
lineHeight: 1.4,
|
|
703
|
-
display: "flex",
|
|
704
|
-
flexDirection: "column",
|
|
705
|
-
gap: "0.5rem",
|
|
706
|
-
...containerStyle
|
|
707
|
-
},
|
|
708
|
-
children: [
|
|
709
|
-
/* @__PURE__ */ jsx5("span", { children: message ?? DEFAULT_MESSAGE }),
|
|
710
|
-
/* @__PURE__ */ jsx5(
|
|
711
|
-
"button",
|
|
712
|
-
{
|
|
713
|
-
type: "button",
|
|
714
|
-
onClick: handleClick,
|
|
715
|
-
style: {
|
|
716
|
-
alignSelf: "flex-start",
|
|
717
|
-
padding: "0.4rem 0.75rem",
|
|
718
|
-
background: "transparent",
|
|
719
|
-
border: "1px solid #92400E",
|
|
720
|
-
borderRadius: 6,
|
|
721
|
-
color: "#92400E",
|
|
722
|
-
fontSize: "0.85rem",
|
|
723
|
-
fontWeight: 600,
|
|
724
|
-
cursor: "pointer",
|
|
725
|
-
...buttonStyle
|
|
726
|
-
},
|
|
727
|
-
children: copied ? effectiveCopiedLabel : effectiveOpenLabel
|
|
728
|
-
}
|
|
729
|
-
)
|
|
730
|
-
]
|
|
731
|
-
}
|
|
732
|
-
);
|
|
733
|
-
}
|
|
734
|
-
|
|
735
640
|
// src/split-card-form.tsx
|
|
736
641
|
import { FloPayError as FloPayError2 } from "@flopay/shared";
|
|
737
|
-
import { Fragment as Fragment2, jsx as
|
|
642
|
+
import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
738
643
|
var WALLET_RESUME_KEY = "flopay_wallet_resume";
|
|
739
644
|
var FLOPAY_KEYFRAMES = `
|
|
740
645
|
@keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
|
|
@@ -776,7 +681,7 @@ function normalizeBeforeButtonClickError(method, err) {
|
|
|
776
681
|
);
|
|
777
682
|
}
|
|
778
683
|
function FloPayKeyframes() {
|
|
779
|
-
return /* @__PURE__ */
|
|
684
|
+
return /* @__PURE__ */ jsx5("style", { children: FLOPAY_KEYFRAMES });
|
|
780
685
|
}
|
|
781
686
|
function toCssSize(value) {
|
|
782
687
|
if (typeof value === "number") return `${value}px`;
|
|
@@ -797,8 +702,8 @@ function ExpressCheckoutReadySwap({
|
|
|
797
702
|
children
|
|
798
703
|
}) {
|
|
799
704
|
if (state === "unavailable" || state === "load_error") return null;
|
|
800
|
-
return /* @__PURE__ */
|
|
801
|
-
/* @__PURE__ */
|
|
705
|
+
return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", minHeight: 44 }, children: [
|
|
706
|
+
/* @__PURE__ */ jsx5(
|
|
802
707
|
"div",
|
|
803
708
|
{
|
|
804
709
|
"data-testid": placeholderTestId,
|
|
@@ -817,7 +722,7 @@ function ExpressCheckoutReadySwap({
|
|
|
817
722
|
}
|
|
818
723
|
}
|
|
819
724
|
),
|
|
820
|
-
/* @__PURE__ */
|
|
725
|
+
/* @__PURE__ */ jsx5(
|
|
821
726
|
"div",
|
|
822
727
|
{
|
|
823
728
|
style: {
|
|
@@ -832,9 +737,12 @@ function ExpressCheckoutReadySwap({
|
|
|
832
737
|
)
|
|
833
738
|
] });
|
|
834
739
|
}
|
|
740
|
+
function isExpressCheckoutRowVisible(state) {
|
|
741
|
+
return state !== "unavailable" && state !== "load_error";
|
|
742
|
+
}
|
|
835
743
|
var SplitCardForm = forwardRef(
|
|
836
744
|
function SplitCardForm2(props, ref) {
|
|
837
|
-
return /* @__PURE__ */
|
|
745
|
+
return /* @__PURE__ */ jsx5(SplitCardFormInner, { ...props, innerRef: ref });
|
|
838
746
|
}
|
|
839
747
|
);
|
|
840
748
|
function PayPalButtonInner({
|
|
@@ -851,19 +759,15 @@ function PayPalButtonInner({
|
|
|
851
759
|
}) {
|
|
852
760
|
const stripe = useStripeRaw();
|
|
853
761
|
const elements = useStripeElements();
|
|
854
|
-
const [loadState, setLoadState] =
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
useEffect4(() => {
|
|
860
|
-
onLoadStateChangeRef.current?.(loadState);
|
|
861
|
-
}, [loadState]);
|
|
862
|
-
const [submitting, setSubmitting] = useState3(false);
|
|
762
|
+
const [loadState, setLoadState] = useState2("loading");
|
|
763
|
+
useEffect3(() => {
|
|
764
|
+
onLoadStateChange?.(loadState);
|
|
765
|
+
}, [loadState, onLoadStateChange]);
|
|
766
|
+
const [submitting, setSubmitting] = useState2(false);
|
|
863
767
|
const paypalResumeAttempted = useRef2(false);
|
|
864
768
|
const beforeClickRef = useRef2(null);
|
|
865
769
|
const baseUrl = billingApiUrl.replace(/\/+$/, "");
|
|
866
|
-
|
|
770
|
+
useEffect3(() => {
|
|
867
771
|
if (!stripe || paypalResumeAttempted.current) return;
|
|
868
772
|
const params = new URLSearchParams(window.location.search);
|
|
869
773
|
const paymentIntentId = params.get("payment_intent");
|
|
@@ -910,7 +814,7 @@ function PayPalButtonInner({
|
|
|
910
814
|
}
|
|
911
815
|
})();
|
|
912
816
|
}, [stripe, onTokenizedBody, onErrorChange, onDecline]);
|
|
913
|
-
const handlePayPalClick =
|
|
817
|
+
const handlePayPalClick = useCallback(async (event) => {
|
|
914
818
|
if (isProcessing || submitting) {
|
|
915
819
|
event.reject();
|
|
916
820
|
return;
|
|
@@ -928,7 +832,7 @@ function PayPalButtonInner({
|
|
|
928
832
|
onButtonClick?.("paypal");
|
|
929
833
|
event.resolve();
|
|
930
834
|
}, [isProcessing, onButtonClick, runBeforeButtonClick, submitting]);
|
|
931
|
-
const handlePayPalConfirm =
|
|
835
|
+
const handlePayPalConfirm = useCallback(async (event) => {
|
|
932
836
|
if (!stripe || !elements) return;
|
|
933
837
|
let prepared = beforeClickRef.current;
|
|
934
838
|
beforeClickRef.current = null;
|
|
@@ -1020,8 +924,8 @@ function PayPalButtonInner({
|
|
|
1020
924
|
setSubmitting(false);
|
|
1021
925
|
}
|
|
1022
926
|
}, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]);
|
|
1023
|
-
return /* @__PURE__ */
|
|
1024
|
-
/* @__PURE__ */
|
|
927
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
928
|
+
/* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-paypal-placeholder", children: /* @__PURE__ */ jsx5(
|
|
1025
929
|
ExpressCheckoutElement,
|
|
1026
930
|
{
|
|
1027
931
|
onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["paypal"])),
|
|
@@ -1046,7 +950,7 @@ function PayPalButtonInner({
|
|
|
1046
950
|
}
|
|
1047
951
|
}
|
|
1048
952
|
) }),
|
|
1049
|
-
submitting && /* @__PURE__ */
|
|
953
|
+
submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
|
|
1050
954
|
] });
|
|
1051
955
|
}
|
|
1052
956
|
function WalletButtonInner({
|
|
@@ -1064,19 +968,15 @@ function WalletButtonInner({
|
|
|
1064
968
|
}) {
|
|
1065
969
|
const stripe = useStripeRaw();
|
|
1066
970
|
const elements = useStripeElements();
|
|
1067
|
-
const [loadState, setLoadState] =
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
useEffect4(() => {
|
|
1073
|
-
onLoadStateChangeRef.current?.(loadState);
|
|
1074
|
-
}, [loadState]);
|
|
1075
|
-
const [submitting, setSubmitting] = useState3(false);
|
|
971
|
+
const [loadState, setLoadState] = useState2("loading");
|
|
972
|
+
useEffect3(() => {
|
|
973
|
+
onLoadStateChange?.(loadState);
|
|
974
|
+
}, [loadState, onLoadStateChange]);
|
|
975
|
+
const [submitting, setSubmitting] = useState2(false);
|
|
1076
976
|
const baseUrl = billingApiUrl.replace(/\/+$/, "");
|
|
1077
977
|
const lastWalletMethodRef = useRef2("card");
|
|
1078
978
|
const beforeClickRef = useRef2(null);
|
|
1079
|
-
const handleWalletConfirm =
|
|
979
|
+
const handleWalletConfirm = useCallback(
|
|
1080
980
|
async (event) => {
|
|
1081
981
|
if (!stripe || !elements) return;
|
|
1082
982
|
const walletType = event.expressPaymentType;
|
|
@@ -1165,8 +1065,8 @@ function WalletButtonInner({
|
|
|
1165
1065
|
},
|
|
1166
1066
|
[stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange, onDecline, runBeforeButtonClick]
|
|
1167
1067
|
);
|
|
1168
|
-
return /* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1068
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1069
|
+
/* @__PURE__ */ jsx5(ExpressCheckoutReadySwap, { state: loadState, placeholderTestId: "flopay-wallet-placeholder", children: /* @__PURE__ */ jsx5(
|
|
1170
1070
|
ExpressCheckoutElement,
|
|
1171
1071
|
{
|
|
1172
1072
|
onReady: (event) => setLoadState(resolveExpressCheckoutLoadState(event, ["applePay", "googlePay"])),
|
|
@@ -1205,7 +1105,7 @@ function WalletButtonInner({
|
|
|
1205
1105
|
}
|
|
1206
1106
|
}
|
|
1207
1107
|
) }),
|
|
1208
|
-
submitting && /* @__PURE__ */
|
|
1108
|
+
submitting && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: "processing" })
|
|
1209
1109
|
] });
|
|
1210
1110
|
}
|
|
1211
1111
|
function SplitCardFormInner({
|
|
@@ -1264,16 +1164,16 @@ function SplitCardFormInner({
|
|
|
1264
1164
|
const elements = useElements();
|
|
1265
1165
|
const checkout = useContext3(CheckoutContext);
|
|
1266
1166
|
const contextBillingUrl = useBillingApiUrl();
|
|
1267
|
-
const [processing, setProcessing] =
|
|
1268
|
-
const [error, setError] =
|
|
1269
|
-
const [is3DSActive, setIs3DSActive] =
|
|
1270
|
-
const [selectedCountry, setSelectedCountry] =
|
|
1271
|
-
const [zipCode, setZipCode] =
|
|
1272
|
-
const [addressLine1, setAddressLine1] =
|
|
1273
|
-
const [addressLine2, setAddressLine2] =
|
|
1274
|
-
const [city, setCity] =
|
|
1275
|
-
const [stateValue, setStateValue] =
|
|
1276
|
-
const [accountPatch, setAccountPatch] =
|
|
1167
|
+
const [processing, setProcessing] = useState2(false);
|
|
1168
|
+
const [error, setError] = useState2(null);
|
|
1169
|
+
const [is3DSActive, setIs3DSActive] = useState2(false);
|
|
1170
|
+
const [selectedCountry, setSelectedCountry] = useState2(countryProp ?? "US");
|
|
1171
|
+
const [zipCode, setZipCode] = useState2(zipProp ?? "");
|
|
1172
|
+
const [addressLine1, setAddressLine1] = useState2(addressLine1Prop ?? "");
|
|
1173
|
+
const [addressLine2, setAddressLine2] = useState2(addressLine2Prop ?? "");
|
|
1174
|
+
const [city, setCity] = useState2(cityProp ?? "");
|
|
1175
|
+
const [stateValue, setStateValue] = useState2(stateProp ?? "");
|
|
1176
|
+
const [accountPatch, setAccountPatch] = useState2({});
|
|
1277
1177
|
const zipCodeRef = useRef2(zipProp ?? "");
|
|
1278
1178
|
const selectedCountryRef = useRef2(countryProp ?? "US");
|
|
1279
1179
|
const addressLine1Ref = useRef2(addressLine1Prop ?? "");
|
|
@@ -1282,25 +1182,25 @@ function SplitCardFormInner({
|
|
|
1282
1182
|
const stateRef = useRef2(stateProp ?? "");
|
|
1283
1183
|
const avsConfig = useMemo2(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
|
|
1284
1184
|
const enableAVS = avsConfig !== null;
|
|
1285
|
-
const [viewState, setViewState] =
|
|
1185
|
+
const [viewState, setViewState] = useState2(initialCardOpen ? "card" : "buttons");
|
|
1286
1186
|
const showCardForm = viewState === "expanding" || viewState === "card";
|
|
1287
1187
|
const TRANSITION_MS = 280;
|
|
1288
|
-
const expandToCard =
|
|
1188
|
+
const expandToCard = useCallback(() => {
|
|
1289
1189
|
setViewState("expanding");
|
|
1290
1190
|
setTimeout(() => setViewState("card"), TRANSITION_MS);
|
|
1291
1191
|
}, []);
|
|
1292
|
-
const collapseToButtons =
|
|
1192
|
+
const collapseToButtons = useCallback(() => {
|
|
1293
1193
|
setViewState("collapsing");
|
|
1294
1194
|
setTimeout(() => setViewState("buttons"), TRANSITION_MS);
|
|
1295
1195
|
}, []);
|
|
1296
|
-
|
|
1196
|
+
useEffect3(() => {
|
|
1297
1197
|
if (layout === "buttons" && initialCardOpen) {
|
|
1298
1198
|
setViewState("card");
|
|
1299
1199
|
}
|
|
1300
1200
|
}, [layout, initialCardOpen]);
|
|
1301
|
-
const [fullName, setFullName] =
|
|
1302
|
-
const [formReady, setFormReady] =
|
|
1303
|
-
const [overlayStatus, setOverlayStatus] =
|
|
1201
|
+
const [fullName, setFullName] = useState2("");
|
|
1202
|
+
const [formReady, setFormReady] = useState2(false);
|
|
1203
|
+
const [overlayStatus, setOverlayStatus] = useState2(null);
|
|
1304
1204
|
const processingRef = useRef2(false);
|
|
1305
1205
|
const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
|
|
1306
1206
|
const displayError = externalError ?? error;
|
|
@@ -1353,39 +1253,40 @@ function SplitCardFormInner({
|
|
|
1353
1253
|
captureMethod: "manual",
|
|
1354
1254
|
setupFutureUsage: "off_session"
|
|
1355
1255
|
}), [amountInCents, currency]);
|
|
1356
|
-
const updateError =
|
|
1256
|
+
const updateError = useCallback(
|
|
1357
1257
|
(err) => {
|
|
1358
1258
|
setError(err);
|
|
1359
1259
|
onErrorChange?.(err);
|
|
1360
1260
|
},
|
|
1361
1261
|
[onErrorChange]
|
|
1362
1262
|
);
|
|
1363
|
-
const emitDecline =
|
|
1263
|
+
const emitDecline = useCallback(
|
|
1364
1264
|
(method, input, overrides) => {
|
|
1365
1265
|
onDecline?.(buildDeclineEvent(method, input, overrides));
|
|
1366
1266
|
},
|
|
1367
1267
|
[onDecline]
|
|
1368
1268
|
);
|
|
1369
1269
|
const showWallets = showApplePay || showGooglePay;
|
|
1370
|
-
const [paypalLoadState, setPaypalLoadState] =
|
|
1371
|
-
const [walletLoadState, setWalletLoadState] =
|
|
1372
|
-
const [inAppBrowserDetected, setInAppBrowserDetected] =
|
|
1373
|
-
|
|
1270
|
+
const [paypalLoadState, setPaypalLoadState] = useState2("loading");
|
|
1271
|
+
const [walletLoadState, setWalletLoadState] = useState2("loading");
|
|
1272
|
+
const [inAppBrowserDetected, setInAppBrowserDetected] = useState2();
|
|
1273
|
+
useEffect3(() => {
|
|
1374
1274
|
setInAppBrowserDetected(isInAppBrowser());
|
|
1375
1275
|
}, []);
|
|
1376
|
-
const
|
|
1377
|
-
const
|
|
1378
|
-
const
|
|
1379
|
-
const
|
|
1380
|
-
const
|
|
1381
|
-
const
|
|
1276
|
+
const shouldShowPayPal = showPayPal && inAppBrowserDetected === false;
|
|
1277
|
+
const shouldShowWallets = showWallets && inAppBrowserDetected === false;
|
|
1278
|
+
const shouldRenderPayPal = shouldShowPayPal && !!paypalStripeInstance;
|
|
1279
|
+
const shouldRenderWallets = shouldShowWallets && !!stripeInstance;
|
|
1280
|
+
const shouldDisplayPayPalRow = shouldRenderPayPal && isExpressCheckoutRowVisible(paypalLoadState);
|
|
1281
|
+
const shouldDisplayWalletRow = shouldRenderWallets && isExpressCheckoutRowVisible(walletLoadState);
|
|
1282
|
+
const handleNameChange = useCallback((value) => {
|
|
1382
1283
|
setFullName(value);
|
|
1383
1284
|
onFullNameChange?.(value);
|
|
1384
1285
|
const parts = value.trim().split(/\s+/);
|
|
1385
1286
|
onFirstNameChange?.(parts[0] ?? "");
|
|
1386
1287
|
onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
|
|
1387
1288
|
}, [onFullNameChange, onFirstNameChange, onLastNameChange]);
|
|
1388
|
-
const applyInlineSessionPatch =
|
|
1289
|
+
const applyInlineSessionPatch = useCallback(
|
|
1389
1290
|
(patch, method) => {
|
|
1390
1291
|
if (!checkout.applyInlineSessionPatch) {
|
|
1391
1292
|
return Promise.resolve({ error: null, sessionId });
|
|
@@ -1402,7 +1303,7 @@ function SplitCardFormInner({
|
|
|
1402
1303
|
},
|
|
1403
1304
|
[checkout.applyInlineSessionPatch, onError, sessionId, updateError]
|
|
1404
1305
|
);
|
|
1405
|
-
const runBeforeButtonClick =
|
|
1306
|
+
const runBeforeButtonClick = useCallback(async (method) => {
|
|
1406
1307
|
if (!onBeforeButtonClick) return { proceed: true };
|
|
1407
1308
|
try {
|
|
1408
1309
|
const result = await onBeforeButtonClick({
|
|
@@ -1438,7 +1339,7 @@ function SplitCardFormInner({
|
|
|
1438
1339
|
return { proceed: false };
|
|
1439
1340
|
}
|
|
1440
1341
|
}, [applyInlineSessionPatch, checkout.inlineSessionDraft, onBeforeButtonClick, onError, sessionId, updateError]);
|
|
1441
|
-
const processPaymentInternal =
|
|
1342
|
+
const processPaymentInternal = useCallback(
|
|
1442
1343
|
async (tokenizedBody, overrides) => {
|
|
1443
1344
|
if (processingRef.current) return;
|
|
1444
1345
|
processingRef.current = true;
|
|
@@ -1622,7 +1523,7 @@ function SplitCardFormInner({
|
|
|
1622
1523
|
},
|
|
1623
1524
|
[baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
|
|
1624
1525
|
);
|
|
1625
|
-
const dispatchTokenizedBody =
|
|
1526
|
+
const dispatchTokenizedBody = useCallback(
|
|
1626
1527
|
(tokenizedBody, overrides) => {
|
|
1627
1528
|
if (onTokenizedBody) {
|
|
1628
1529
|
onTokenizedBody(tokenizedBody);
|
|
@@ -1659,7 +1560,7 @@ function SplitCardFormInner({
|
|
|
1659
1560
|
}
|
|
1660
1561
|
}
|
|
1661
1562
|
}), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
|
|
1662
|
-
|
|
1563
|
+
useEffect3(() => {
|
|
1663
1564
|
if (typeof window === "undefined") return;
|
|
1664
1565
|
const stored = localStorage.getItem(WALLET_RESUME_KEY);
|
|
1665
1566
|
if (!stored) return;
|
|
@@ -1677,7 +1578,7 @@ function SplitCardFormInner({
|
|
|
1677
1578
|
localStorage.removeItem(WALLET_RESUME_KEY);
|
|
1678
1579
|
}
|
|
1679
1580
|
}, [sessionId, dispatchTokenizedBody]);
|
|
1680
|
-
const handleSubmit =
|
|
1581
|
+
const handleSubmit = useCallback(
|
|
1681
1582
|
async (e) => {
|
|
1682
1583
|
e.preventDefault();
|
|
1683
1584
|
if (!flopay || !elements || isSubmitting || processingRef.current) return;
|
|
@@ -1819,7 +1720,7 @@ function SplitCardFormInner({
|
|
|
1819
1720
|
);
|
|
1820
1721
|
const isReady = flopay !== null && elements !== null;
|
|
1821
1722
|
if (!isReady) {
|
|
1822
|
-
return /* @__PURE__ */
|
|
1723
|
+
return /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
|
|
1823
1724
|
}
|
|
1824
1725
|
const isButtons = layout === "buttons";
|
|
1825
1726
|
const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
|
|
@@ -1862,7 +1763,7 @@ function SplitCardFormInner({
|
|
|
1862
1763
|
invalid: { color: "#ef4444" }
|
|
1863
1764
|
}
|
|
1864
1765
|
};
|
|
1865
|
-
const cardFormBlock = /* @__PURE__ */
|
|
1766
|
+
const cardFormBlock = /* @__PURE__ */ jsxs3("div", { style: {
|
|
1866
1767
|
backgroundColor: cardBg,
|
|
1867
1768
|
borderRadius: "8px",
|
|
1868
1769
|
padding: isButtons ? "0" : "1rem",
|
|
@@ -1870,7 +1771,7 @@ function SplitCardFormInner({
|
|
|
1870
1771
|
...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
|
|
1871
1772
|
...sharedInputPlaceholderVars
|
|
1872
1773
|
}, children: [
|
|
1873
|
-
/* @__PURE__ */
|
|
1774
|
+
/* @__PURE__ */ jsx5("style", { children: `
|
|
1874
1775
|
.flopay-shared-input::placeholder {
|
|
1875
1776
|
color: var(--flopay-input-placeholder-color);
|
|
1876
1777
|
opacity: 1;
|
|
@@ -1879,12 +1780,12 @@ function SplitCardFormInner({
|
|
|
1879
1780
|
font-weight: var(--flopay-input-font-weight);
|
|
1880
1781
|
}
|
|
1881
1782
|
` }),
|
|
1882
|
-
isButtons && showCardForm && /* @__PURE__ */
|
|
1783
|
+
isButtons && showCardForm && /* @__PURE__ */ jsxs3("div", { style: {
|
|
1883
1784
|
display: "flex",
|
|
1884
1785
|
alignItems: "center",
|
|
1885
1786
|
padding: "0.75rem 0 0.625rem"
|
|
1886
1787
|
}, children: [
|
|
1887
|
-
/* @__PURE__ */
|
|
1788
|
+
/* @__PURE__ */ jsxs3(
|
|
1888
1789
|
"button",
|
|
1889
1790
|
{
|
|
1890
1791
|
type: "button",
|
|
@@ -1906,7 +1807,7 @@ function SplitCardFormInner({
|
|
|
1906
1807
|
},
|
|
1907
1808
|
"aria-label": "Back to payment methods",
|
|
1908
1809
|
children: [
|
|
1909
|
-
/* @__PURE__ */
|
|
1810
|
+
/* @__PURE__ */ jsx5("span", { style: {
|
|
1910
1811
|
display: "inline-flex",
|
|
1911
1812
|
alignItems: "center",
|
|
1912
1813
|
justifyContent: "center",
|
|
@@ -1916,12 +1817,12 @@ function SplitCardFormInner({
|
|
|
1916
1817
|
backgroundColor: "#f3f4f6",
|
|
1917
1818
|
transition: "background-color 0.15s",
|
|
1918
1819
|
...bStyles.backButtonIcon
|
|
1919
|
-
}, children: /* @__PURE__ */
|
|
1920
|
-
/* @__PURE__ */
|
|
1820
|
+
}, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
|
|
1821
|
+
/* @__PURE__ */ jsx5(BackButtonContentSlot, { content: cardBackButtonContent })
|
|
1921
1822
|
]
|
|
1922
1823
|
}
|
|
1923
1824
|
),
|
|
1924
|
-
hideTitle ? /* @__PURE__ */
|
|
1825
|
+
hideTitle ? /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx5("div", { style: {
|
|
1925
1826
|
flex: 1,
|
|
1926
1827
|
textAlign: "center",
|
|
1927
1828
|
fontWeight: 600,
|
|
@@ -1929,18 +1830,18 @@ function SplitCardFormInner({
|
|
|
1929
1830
|
color: "#262833",
|
|
1930
1831
|
paddingRight: 80,
|
|
1931
1832
|
...bStyles.title
|
|
1932
|
-
}, children: /* @__PURE__ */
|
|
1833
|
+
}, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) })
|
|
1933
1834
|
] }),
|
|
1934
|
-
!isButtons && !hideTitle && /* @__PURE__ */
|
|
1935
|
-
/* @__PURE__ */
|
|
1835
|
+
!isButtons && !hideTitle && /* @__PURE__ */ jsx5("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) }),
|
|
1836
|
+
/* @__PURE__ */ jsx5("div", { style: {
|
|
1936
1837
|
backgroundColor: cardInputBg,
|
|
1937
1838
|
border: `1px solid ${resolvedBorder}`,
|
|
1938
1839
|
borderTopLeftRadius: "8px",
|
|
1939
1840
|
borderTopRightRadius: "8px",
|
|
1940
1841
|
padding: "10px"
|
|
1941
|
-
}, children: /* @__PURE__ */
|
|
1942
|
-
/* @__PURE__ */
|
|
1943
|
-
/* @__PURE__ */
|
|
1842
|
+
}, children: /* @__PURE__ */ jsx5(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
|
|
1843
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
|
|
1844
|
+
/* @__PURE__ */ jsx5("div", { style: {
|
|
1944
1845
|
flex: 1,
|
|
1945
1846
|
backgroundColor: cardInputBg,
|
|
1946
1847
|
border: `1px solid ${resolvedBorder}`,
|
|
@@ -1948,23 +1849,23 @@ function SplitCardFormInner({
|
|
|
1948
1849
|
borderRight: "none",
|
|
1949
1850
|
borderBottomLeftRadius: "8px",
|
|
1950
1851
|
padding: "10px"
|
|
1951
|
-
}, children: /* @__PURE__ */
|
|
1952
|
-
/* @__PURE__ */
|
|
1852
|
+
}, children: /* @__PURE__ */ jsx5(CardExpiryElement, { options: stripeElementStyle }) }),
|
|
1853
|
+
/* @__PURE__ */ jsx5("div", { style: {
|
|
1953
1854
|
flex: 1,
|
|
1954
1855
|
backgroundColor: cardInputBg,
|
|
1955
1856
|
border: `1px solid ${resolvedBorder}`,
|
|
1956
1857
|
borderTop: "none",
|
|
1957
1858
|
borderBottomRightRadius: "8px",
|
|
1958
1859
|
padding: "10px"
|
|
1959
|
-
}, children: /* @__PURE__ */
|
|
1860
|
+
}, children: /* @__PURE__ */ jsx5(CardCvcElement, { options: stripeElementStyle }) })
|
|
1960
1861
|
] }),
|
|
1961
|
-
/* @__PURE__ */
|
|
1862
|
+
/* @__PURE__ */ jsx5("div", { style: {
|
|
1962
1863
|
backgroundColor: cardInputBg,
|
|
1963
1864
|
border: `1px solid ${resolvedBorder}`,
|
|
1964
1865
|
borderRadius: "8px",
|
|
1965
1866
|
marginTop: "0.5rem",
|
|
1966
1867
|
padding: "10px"
|
|
1967
|
-
}, children: /* @__PURE__ */
|
|
1868
|
+
}, children: /* @__PURE__ */ jsx5(
|
|
1968
1869
|
"input",
|
|
1969
1870
|
{
|
|
1970
1871
|
className: "flopay-shared-input",
|
|
@@ -2003,8 +1904,8 @@ function SplitCardFormInner({
|
|
|
2003
1904
|
...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
|
|
2004
1905
|
});
|
|
2005
1906
|
const stateOpts = getStateOptions(cc);
|
|
2006
|
-
return /* @__PURE__ */
|
|
2007
|
-
isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */
|
|
1907
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1908
|
+
isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx5(
|
|
2008
1909
|
"input",
|
|
2009
1910
|
{
|
|
2010
1911
|
className: "flopay-shared-input",
|
|
@@ -2021,7 +1922,7 @@ function SplitCardFormInner({
|
|
|
2021
1922
|
style: inputFieldStyle()
|
|
2022
1923
|
}
|
|
2023
1924
|
) }),
|
|
2024
|
-
isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */
|
|
1925
|
+
isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx5(
|
|
2025
1926
|
"input",
|
|
2026
1927
|
{
|
|
2027
1928
|
className: "flopay-shared-input",
|
|
@@ -2037,12 +1938,12 @@ function SplitCardFormInner({
|
|
|
2037
1938
|
style: inputFieldStyle()
|
|
2038
1939
|
}
|
|
2039
1940
|
) }),
|
|
2040
|
-
(isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */
|
|
1941
|
+
(isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
|
|
2041
1942
|
display: "flex",
|
|
2042
1943
|
gap: "0",
|
|
2043
1944
|
marginTop: "0.5rem"
|
|
2044
1945
|
}, children: [
|
|
2045
|
-
isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */
|
|
1946
|
+
isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx5("div", { style: {
|
|
2046
1947
|
flex: 1,
|
|
2047
1948
|
backgroundColor: cardInputBg,
|
|
2048
1949
|
border: `1px solid ${resolvedBorder}`,
|
|
@@ -2051,7 +1952,7 @@ function SplitCardFormInner({
|
|
|
2051
1952
|
borderBottomLeftRadius: "8px",
|
|
2052
1953
|
...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
|
|
2053
1954
|
...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
|
|
2054
|
-
}, children: /* @__PURE__ */
|
|
1955
|
+
}, children: /* @__PURE__ */ jsx5(
|
|
2055
1956
|
"input",
|
|
2056
1957
|
{
|
|
2057
1958
|
className: "flopay-shared-input",
|
|
@@ -2068,7 +1969,7 @@ function SplitCardFormInner({
|
|
|
2068
1969
|
style: inputFieldStyle()
|
|
2069
1970
|
}
|
|
2070
1971
|
) }),
|
|
2071
|
-
isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */
|
|
1972
|
+
isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx5("div", { style: {
|
|
2072
1973
|
flex: 1,
|
|
2073
1974
|
backgroundColor: cardInputBg,
|
|
2074
1975
|
border: `1px solid ${resolvedBorder}`,
|
|
@@ -2077,7 +1978,7 @@ function SplitCardFormInner({
|
|
|
2077
1978
|
borderBottomRightRadius: "8px",
|
|
2078
1979
|
...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
|
|
2079
1980
|
...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
|
|
2080
|
-
}, children: stateOpts ? /* @__PURE__ */
|
|
1981
|
+
}, children: stateOpts ? /* @__PURE__ */ jsxs3(
|
|
2081
1982
|
"select",
|
|
2082
1983
|
{
|
|
2083
1984
|
value: stateValue,
|
|
@@ -2091,11 +1992,11 @@ function SplitCardFormInner({
|
|
|
2091
1992
|
"data-testid": "flopay-state",
|
|
2092
1993
|
style: { ...inputFieldStyle(), cursor: "pointer" },
|
|
2093
1994
|
children: [
|
|
2094
|
-
/* @__PURE__ */
|
|
2095
|
-
stateOpts.map((s) => /* @__PURE__ */
|
|
1995
|
+
/* @__PURE__ */ jsx5("option", { value: "", children: getStateLabel(cc) }),
|
|
1996
|
+
stateOpts.map((s) => /* @__PURE__ */ jsx5("option", { value: s.code, children: s.name }, s.code))
|
|
2096
1997
|
]
|
|
2097
1998
|
}
|
|
2098
|
-
) : /* @__PURE__ */
|
|
1999
|
+
) : /* @__PURE__ */ jsx5(
|
|
2099
2000
|
"input",
|
|
2100
2001
|
{
|
|
2101
2002
|
className: "flopay-shared-input",
|
|
@@ -2113,20 +2014,20 @@ function SplitCardFormInner({
|
|
|
2113
2014
|
}
|
|
2114
2015
|
) })
|
|
2115
2016
|
] }),
|
|
2116
|
-
(isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */
|
|
2017
|
+
(isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
|
|
2117
2018
|
display: "flex",
|
|
2118
2019
|
flexDirection: avsLayoutProp === "column" ? "column" : "row",
|
|
2119
2020
|
gap: avsLayoutProp === "column" ? "0.5rem" : "0",
|
|
2120
2021
|
marginTop: "0.5rem"
|
|
2121
2022
|
}, children: [
|
|
2122
|
-
isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */
|
|
2023
|
+
isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx5("div", { style: {
|
|
2123
2024
|
flex: avsLayoutProp === "row" ? 1 : void 0,
|
|
2124
2025
|
backgroundColor: cardInputBg,
|
|
2125
2026
|
border: `1px solid ${resolvedBorder}`,
|
|
2126
2027
|
padding: "10px",
|
|
2127
2028
|
...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
|
|
2128
2029
|
...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
|
|
2129
|
-
}, children: /* @__PURE__ */
|
|
2030
|
+
}, children: /* @__PURE__ */ jsx5(
|
|
2130
2031
|
"select",
|
|
2131
2032
|
{
|
|
2132
2033
|
value: selectedCountry,
|
|
@@ -2141,21 +2042,21 @@ function SplitCardFormInner({
|
|
|
2141
2042
|
autoComplete: "country",
|
|
2142
2043
|
"data-testid": "flopay-country",
|
|
2143
2044
|
style: { ...inputFieldStyle(), cursor: "pointer" },
|
|
2144
|
-
children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */
|
|
2045
|
+
children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs3("option", { value: c.code, children: [
|
|
2145
2046
|
c.flag,
|
|
2146
2047
|
" ",
|
|
2147
2048
|
c.name
|
|
2148
2049
|
] }, c.code))
|
|
2149
2050
|
}
|
|
2150
2051
|
) }),
|
|
2151
|
-
isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */
|
|
2052
|
+
isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx5("div", { style: {
|
|
2152
2053
|
flex: avsLayoutProp === "row" ? 1 : void 0,
|
|
2153
2054
|
backgroundColor: cardInputBg,
|
|
2154
2055
|
border: `1px solid ${resolvedBorder}`,
|
|
2155
2056
|
padding: "10px",
|
|
2156
2057
|
...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
|
|
2157
2058
|
...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
|
|
2158
|
-
}, children: /* @__PURE__ */
|
|
2059
|
+
}, children: /* @__PURE__ */ jsx5(
|
|
2159
2060
|
"input",
|
|
2160
2061
|
{
|
|
2161
2062
|
className: "flopay-shared-input",
|
|
@@ -2176,7 +2077,7 @@ function SplitCardFormInner({
|
|
|
2176
2077
|
] })
|
|
2177
2078
|
] });
|
|
2178
2079
|
})(),
|
|
2179
|
-
displayError && /* @__PURE__ */
|
|
2080
|
+
displayError && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
|
|
2180
2081
|
margin: "0.75rem 0",
|
|
2181
2082
|
padding: "0.625rem 0.875rem",
|
|
2182
2083
|
background: "#FEF2F2",
|
|
@@ -2190,10 +2091,10 @@ function SplitCardFormInner({
|
|
|
2190
2091
|
gap: "0.5rem",
|
|
2191
2092
|
...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
|
|
2192
2093
|
}, children: [
|
|
2193
|
-
/* @__PURE__ */
|
|
2094
|
+
/* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2194
2095
|
displayError
|
|
2195
2096
|
] }),
|
|
2196
|
-
children ?? /* @__PURE__ */
|
|
2097
|
+
children ?? /* @__PURE__ */ jsx5(
|
|
2197
2098
|
"button",
|
|
2198
2099
|
{
|
|
2199
2100
|
type: "submit",
|
|
@@ -2216,7 +2117,7 @@ function SplitCardFormInner({
|
|
|
2216
2117
|
children: isSubmitting ? "PROCESSING..." : submitLabel
|
|
2217
2118
|
}
|
|
2218
2119
|
),
|
|
2219
|
-
!isButtons && showSecurityFooter && /* @__PURE__ */
|
|
2120
|
+
!isButtons && showSecurityFooter && /* @__PURE__ */ jsx5("div", { style: {
|
|
2220
2121
|
backgroundColor: "#EFF9F0",
|
|
2221
2122
|
borderRadius: "8px",
|
|
2222
2123
|
padding: "0.75rem",
|
|
@@ -2233,11 +2134,11 @@ function SplitCardFormInner({
|
|
|
2233
2134
|
const cardButtonSizing = cardButtonContent === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
|
|
2234
2135
|
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;
|
|
2235
2136
|
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;
|
|
2236
|
-
return /* @__PURE__ */
|
|
2237
|
-
/* @__PURE__ */
|
|
2238
|
-
overlayStatus && /* @__PURE__ */
|
|
2239
|
-
/* @__PURE__ */
|
|
2240
|
-
/* @__PURE__ */
|
|
2137
|
+
return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
|
|
2138
|
+
/* @__PURE__ */ jsx5(FloPayKeyframes, {}),
|
|
2139
|
+
overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
|
|
2140
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "grid" }, children: [
|
|
2141
|
+
/* @__PURE__ */ jsxs3("div", { style: {
|
|
2241
2142
|
gridArea: "1 / 1",
|
|
2242
2143
|
display: "flex",
|
|
2243
2144
|
flexDirection: "column",
|
|
@@ -2246,7 +2147,7 @@ function SplitCardFormInner({
|
|
|
2246
2147
|
...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
|
|
2247
2148
|
...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
|
|
2248
2149
|
}, children: [
|
|
2249
|
-
|
|
2150
|
+
shouldRenderPayPal && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
|
|
2250
2151
|
PayPalButtonInner,
|
|
2251
2152
|
{
|
|
2252
2153
|
sessionId,
|
|
@@ -2261,7 +2162,7 @@ function SplitCardFormInner({
|
|
|
2261
2162
|
onLoadStateChange: setPaypalLoadState
|
|
2262
2163
|
}
|
|
2263
2164
|
) }),
|
|
2264
|
-
|
|
2165
|
+
shouldRenderWallets ? /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
|
|
2265
2166
|
WalletButtonInner,
|
|
2266
2167
|
{
|
|
2267
2168
|
sessionId,
|
|
@@ -2276,9 +2177,8 @@ function SplitCardFormInner({
|
|
|
2276
2177
|
runBeforeButtonClick,
|
|
2277
2178
|
onLoadStateChange: setWalletLoadState
|
|
2278
2179
|
}
|
|
2279
|
-
) }) :
|
|
2280
|
-
|
|
2281
|
-
/* @__PURE__ */ jsx6(
|
|
2180
|
+
) }) : shouldShowWallets ? /* @__PURE__ */ jsx5("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
|
|
2181
|
+
/* @__PURE__ */ jsx5(
|
|
2282
2182
|
"button",
|
|
2283
2183
|
{
|
|
2284
2184
|
type: "button",
|
|
@@ -2316,10 +2216,10 @@ function SplitCardFormInner({
|
|
|
2316
2216
|
onMouseUp: (e) => {
|
|
2317
2217
|
e.currentTarget.style.transform = "scale(1)";
|
|
2318
2218
|
},
|
|
2319
|
-
children: /* @__PURE__ */
|
|
2219
|
+
children: /* @__PURE__ */ jsx5(CardButtonContentSlot, { content: cardButtonContent })
|
|
2320
2220
|
}
|
|
2321
2221
|
),
|
|
2322
|
-
displayError && viewState === "buttons" && /* @__PURE__ */
|
|
2222
|
+
displayError && viewState === "buttons" && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
|
|
2323
2223
|
margin: "0.25rem 0",
|
|
2324
2224
|
padding: "0.625rem 0.875rem",
|
|
2325
2225
|
background: "#FEF2F2",
|
|
@@ -2333,11 +2233,11 @@ function SplitCardFormInner({
|
|
|
2333
2233
|
gap: "0.5rem",
|
|
2334
2234
|
...bStyles.errorBanner ? bStyles.errorBanner : {}
|
|
2335
2235
|
}, children: [
|
|
2336
|
-
/* @__PURE__ */
|
|
2236
|
+
/* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx5("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
2337
2237
|
displayError
|
|
2338
2238
|
] })
|
|
2339
2239
|
] }),
|
|
2340
|
-
isCardView && /* @__PURE__ */
|
|
2240
|
+
isCardView && /* @__PURE__ */ jsx5("div", { style: {
|
|
2341
2241
|
gridArea: "1 / 1",
|
|
2342
2242
|
...cardAnim ? { animation: cardAnim } : {},
|
|
2343
2243
|
...viewState === "collapsing" ? { pointerEvents: "none" } : {}
|
|
@@ -2345,10 +2245,10 @@ function SplitCardFormInner({
|
|
|
2345
2245
|
] })
|
|
2346
2246
|
] });
|
|
2347
2247
|
}
|
|
2348
|
-
return /* @__PURE__ */
|
|
2349
|
-
/* @__PURE__ */
|
|
2350
|
-
overlayStatus && /* @__PURE__ */
|
|
2351
|
-
|
|
2248
|
+
return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
|
|
2249
|
+
/* @__PURE__ */ jsx5(FloPayKeyframes, {}),
|
|
2250
|
+
overlayStatus && /* @__PURE__ */ jsx5(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
|
|
2251
|
+
shouldRenderWallets && /* @__PURE__ */ jsx5(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx5(
|
|
2352
2252
|
WalletButtonInner,
|
|
2353
2253
|
{
|
|
2354
2254
|
sessionId,
|
|
@@ -2362,7 +2262,7 @@ function SplitCardFormInner({
|
|
|
2362
2262
|
onLoadStateChange: setWalletLoadState
|
|
2363
2263
|
}
|
|
2364
2264
|
) }),
|
|
2365
|
-
|
|
2265
|
+
shouldRenderPayPal && /* @__PURE__ */ jsx5(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx5(
|
|
2366
2266
|
PayPalButtonInner,
|
|
2367
2267
|
{
|
|
2368
2268
|
sessionId,
|
|
@@ -2375,8 +2275,7 @@ function SplitCardFormInner({
|
|
|
2375
2275
|
onLoadStateChange: setPaypalLoadState
|
|
2376
2276
|
}
|
|
2377
2277
|
) }),
|
|
2378
|
-
|
|
2379
|
-
(showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ jsxs4("div", { style: {
|
|
2278
|
+
(shouldDisplayWalletRow || shouldDisplayPayPalRow) && /* @__PURE__ */ jsxs3("div", { style: {
|
|
2380
2279
|
display: "flex",
|
|
2381
2280
|
alignItems: "center",
|
|
2382
2281
|
gap: "0.75rem",
|
|
@@ -2384,9 +2283,9 @@ function SplitCardFormInner({
|
|
|
2384
2283
|
color: "#999",
|
|
2385
2284
|
fontSize: "0.85rem"
|
|
2386
2285
|
}, children: [
|
|
2387
|
-
/* @__PURE__ */
|
|
2388
|
-
/* @__PURE__ */
|
|
2389
|
-
/* @__PURE__ */
|
|
2286
|
+
/* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
|
|
2287
|
+
/* @__PURE__ */ jsx5("span", { children: "or pay with card" }),
|
|
2288
|
+
/* @__PURE__ */ jsx5("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
|
|
2390
2289
|
] }),
|
|
2391
2290
|
cardFormBlock
|
|
2392
2291
|
] });
|
|
@@ -2919,7 +2818,7 @@ async function loadSavedPaymentProviders({
|
|
|
2919
2818
|
}
|
|
2920
2819
|
|
|
2921
2820
|
// src/flopay-checkout.tsx
|
|
2922
|
-
import { Fragment as Fragment3, jsx as
|
|
2821
|
+
import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
2923
2822
|
var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2 = 44;
|
|
2924
2823
|
var PAYPAL_RESUME_STORAGE_KEY = "flopay_checkout_saved_payment_resume";
|
|
2925
2824
|
var sessionInflightMap = /* @__PURE__ */ new Map();
|
|
@@ -3022,25 +2921,25 @@ function FloPayCheckout({
|
|
|
3022
2921
|
const resolvedBillingUrl = resolveBillingApiUrl3(billingApiUrl);
|
|
3023
2922
|
const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
|
|
3024
2923
|
const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
|
|
3025
|
-
const [unified, setUnified] =
|
|
3026
|
-
const [flopay, setFloPay] =
|
|
2924
|
+
const [unified, setUnified] = useState3(null);
|
|
2925
|
+
const [flopay, setFloPay] = useState3(null);
|
|
3027
2926
|
const flopayRef = useRef3(null);
|
|
3028
|
-
const [paypalFlopay, setPaypalFloPay] =
|
|
2927
|
+
const [paypalFlopay, setPaypalFloPay] = useState3(null);
|
|
3029
2928
|
const paypalFlopayRef = useRef3(null);
|
|
3030
|
-
const [session, setSession] =
|
|
3031
|
-
const [resolvedSessionId, setResolvedSessionId] =
|
|
2929
|
+
const [session, setSession] = useState3(null);
|
|
2930
|
+
const [resolvedSessionId, setResolvedSessionId] = useState3(sessionIdProp ?? "");
|
|
3032
2931
|
const activeSessionId = sessionIdProp ?? resolvedSessionId;
|
|
3033
2932
|
const initSessionDependency = createSessionParams ? "" : activeSessionId;
|
|
3034
|
-
const [isLoading, setIsLoading] =
|
|
3035
|
-
const [loadError, setLoadError] =
|
|
3036
|
-
const [currentMode, setCurrentMode] =
|
|
3037
|
-
const [confirmProcessing, setConfirmProcessing] =
|
|
3038
|
-
const [modeError, setModeError] =
|
|
3039
|
-
const [modeOverlayStatus, setModeOverlayStatus] =
|
|
3040
|
-
const [modeOverlayError, setModeOverlayError] =
|
|
3041
|
-
const [createSessionPatch, setCreateSessionPatch] =
|
|
3042
|
-
const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] =
|
|
3043
|
-
const [cardBootstrapPending, setCardBootstrapPending] =
|
|
2933
|
+
const [isLoading, setIsLoading] = useState3(true);
|
|
2934
|
+
const [loadError, setLoadError] = useState3(null);
|
|
2935
|
+
const [currentMode, setCurrentMode] = useState3("full");
|
|
2936
|
+
const [confirmProcessing, setConfirmProcessing] = useState3(false);
|
|
2937
|
+
const [modeError, setModeError] = useState3(initialErrorMessage);
|
|
2938
|
+
const [modeOverlayStatus, setModeOverlayStatus] = useState3(null);
|
|
2939
|
+
const [modeOverlayError, setModeOverlayError] = useState3(null);
|
|
2940
|
+
const [createSessionPatch, setCreateSessionPatch] = useState3(void 0);
|
|
2941
|
+
const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = useState3("");
|
|
2942
|
+
const [cardBootstrapPending, setCardBootstrapPending] = useState3(false);
|
|
3044
2943
|
const autoCheckoutAttempted = useRef3(false);
|
|
3045
2944
|
const paypalResumeAttempted = useRef3(false);
|
|
3046
2945
|
const savedPaymentKeysRef = useRef3(null);
|
|
@@ -3052,7 +2951,7 @@ function FloPayCheckout({
|
|
|
3052
2951
|
onDeclineRef.current = onDecline;
|
|
3053
2952
|
const onSessionCompletedRef = useRef3(onSessionCompleted);
|
|
3054
2953
|
onSessionCompletedRef.current = onSessionCompleted;
|
|
3055
|
-
|
|
2954
|
+
useEffect4(() => {
|
|
3056
2955
|
console.info("[FloPay] Checkout initialized", {
|
|
3057
2956
|
sdk_version: SDK_VERSION,
|
|
3058
2957
|
checkout_type: checkoutType,
|
|
@@ -3080,20 +2979,20 @@ function FloPayCheckout({
|
|
|
3080
2979
|
} : void 0,
|
|
3081
2980
|
[effectiveCreateSessionBase, effectiveCreateSessionMode]
|
|
3082
2981
|
);
|
|
3083
|
-
|
|
2982
|
+
useEffect4(() => {
|
|
3084
2983
|
setCreateSessionPatch(void 0);
|
|
3085
2984
|
setCreateSessionPatchBaseHash(baseCreateSessionHash);
|
|
3086
2985
|
}, [baseCreateSessionHash]);
|
|
3087
|
-
|
|
2986
|
+
useEffect4(() => {
|
|
3088
2987
|
setModeError(initialErrorMessage);
|
|
3089
2988
|
}, [initialErrorMessage]);
|
|
3090
|
-
const emitDecline =
|
|
2989
|
+
const emitDecline = useCallback2(
|
|
3091
2990
|
(method, input, overrides) => {
|
|
3092
2991
|
onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
|
|
3093
2992
|
},
|
|
3094
2993
|
[]
|
|
3095
2994
|
);
|
|
3096
|
-
const runSavedPaymentFlow =
|
|
2995
|
+
const runSavedPaymentFlow = useCallback2(
|
|
3097
2996
|
async (sess, options) => {
|
|
3098
2997
|
setModeError(null);
|
|
3099
2998
|
setModeOverlayError(null);
|
|
@@ -3211,7 +3110,7 @@ function FloPayCheckout({
|
|
|
3211
3110
|
resolvedBillingUrl
|
|
3212
3111
|
]
|
|
3213
3112
|
);
|
|
3214
|
-
|
|
3113
|
+
useEffect4(() => {
|
|
3215
3114
|
if (typeof window === "undefined" || paypalResumeAttempted.current) {
|
|
3216
3115
|
return;
|
|
3217
3116
|
}
|
|
@@ -3358,10 +3257,10 @@ function FloPayCheckout({
|
|
|
3358
3257
|
);
|
|
3359
3258
|
const createSessionParamsRef = useRef3(effectiveCreateSession);
|
|
3360
3259
|
createSessionParamsRef.current = effectiveCreateSession;
|
|
3361
|
-
|
|
3260
|
+
useEffect4(() => {
|
|
3362
3261
|
setResolvedSessionId(sessionIdProp ?? "");
|
|
3363
3262
|
}, [sessionIdProp]);
|
|
3364
|
-
|
|
3263
|
+
useEffect4(() => {
|
|
3365
3264
|
autoCheckoutAttempted.current = false;
|
|
3366
3265
|
setModeError(initialErrorMessage);
|
|
3367
3266
|
setModeOverlayError(null);
|
|
@@ -3404,7 +3303,7 @@ function FloPayCheckout({
|
|
|
3404
3303
|
}
|
|
3405
3304
|
return { sid: sid ?? "", result: realResult };
|
|
3406
3305
|
}
|
|
3407
|
-
const bootstrapInlineSession =
|
|
3306
|
+
const bootstrapInlineSession = useCallback2(
|
|
3408
3307
|
async (patch) => {
|
|
3409
3308
|
const baseParams = createSessionParamsRef.current;
|
|
3410
3309
|
if (!baseParams) {
|
|
@@ -3465,7 +3364,7 @@ function FloPayCheckout({
|
|
|
3465
3364
|
},
|
|
3466
3365
|
[locale, resolvedBillingUrl]
|
|
3467
3366
|
);
|
|
3468
|
-
const handleInlineSessionPatch =
|
|
3367
|
+
const handleInlineSessionPatch = useCallback2(async (patch) => {
|
|
3469
3368
|
if (!hasInlineSessionPatchData(patch) || cardBootstrapPending) {
|
|
3470
3369
|
return {
|
|
3471
3370
|
sessionId: resolvedSessionId,
|
|
@@ -3488,7 +3387,7 @@ function FloPayCheckout({
|
|
|
3488
3387
|
resolvedSessionId,
|
|
3489
3388
|
session
|
|
3490
3389
|
]);
|
|
3491
|
-
|
|
3390
|
+
useEffect4(() => {
|
|
3492
3391
|
let cancelled = false;
|
|
3493
3392
|
setLoadError(null);
|
|
3494
3393
|
if (createSessionHash) {
|
|
@@ -3648,7 +3547,7 @@ function FloPayCheckout({
|
|
|
3648
3547
|
initSessionDependency,
|
|
3649
3548
|
runSavedPaymentFlow
|
|
3650
3549
|
]);
|
|
3651
|
-
const handleConfirmCheckout =
|
|
3550
|
+
const handleConfirmCheckout = useCallback2(async () => {
|
|
3652
3551
|
if (confirmProcessing || !session) return;
|
|
3653
3552
|
setConfirmProcessing(true);
|
|
3654
3553
|
setModeError(null);
|
|
@@ -3702,7 +3601,7 @@ function FloPayCheckout({
|
|
|
3702
3601
|
]
|
|
3703
3602
|
);
|
|
3704
3603
|
const shouldShowInterimButtons = Boolean(createSessionParams) && layout === "buttons" && (!flopay || !providerOptions);
|
|
3705
|
-
const modeOverlay = modeOverlayStatus ? /* @__PURE__ */
|
|
3604
|
+
const modeOverlay = modeOverlayStatus ? /* @__PURE__ */ jsx6(
|
|
3706
3605
|
ProcessingOverlay,
|
|
3707
3606
|
{
|
|
3708
3607
|
status: modeOverlayStatus,
|
|
@@ -3711,31 +3610,31 @@ function FloPayCheckout({
|
|
|
3711
3610
|
) : null;
|
|
3712
3611
|
if (isLoading) {
|
|
3713
3612
|
if (loadingNode) {
|
|
3714
|
-
return /* @__PURE__ */
|
|
3613
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
3715
3614
|
loadingNode,
|
|
3716
3615
|
modeOverlay
|
|
3717
3616
|
] });
|
|
3718
3617
|
}
|
|
3719
3618
|
if (layout === "buttons") {
|
|
3720
|
-
const skeletonBar = (h) => /* @__PURE__ */
|
|
3619
|
+
const skeletonBar = (h) => /* @__PURE__ */ jsx6("div", { style: {
|
|
3721
3620
|
height: h,
|
|
3722
3621
|
borderRadius: 8,
|
|
3723
3622
|
background: "#e5e7eb",
|
|
3724
3623
|
animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
|
|
3725
3624
|
} });
|
|
3726
|
-
return /* @__PURE__ */
|
|
3727
|
-
/* @__PURE__ */
|
|
3625
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
3626
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
3728
3627
|
showPayPal && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
|
|
3729
3628
|
(showApplePay || showGooglePay) && skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
|
|
3730
3629
|
skeletonBar(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
|
|
3731
|
-
/* @__PURE__ */
|
|
3630
|
+
/* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
|
|
3732
3631
|
] }),
|
|
3733
3632
|
modeOverlay
|
|
3734
3633
|
] });
|
|
3735
3634
|
}
|
|
3736
|
-
return /* @__PURE__ */
|
|
3737
|
-
/* @__PURE__ */
|
|
3738
|
-
/* @__PURE__ */
|
|
3635
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
3636
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
|
|
3637
|
+
/* @__PURE__ */ jsx6("div", { style: {
|
|
3739
3638
|
width: 24,
|
|
3740
3639
|
height: 24,
|
|
3741
3640
|
border: "2px solid #e5e7eb",
|
|
@@ -3743,16 +3642,16 @@ function FloPayCheckout({
|
|
|
3743
3642
|
borderRadius: "50%",
|
|
3744
3643
|
animation: "spin 0.6s linear infinite"
|
|
3745
3644
|
} }),
|
|
3746
|
-
/* @__PURE__ */
|
|
3645
|
+
/* @__PURE__ */ jsx6("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
|
|
3747
3646
|
] }),
|
|
3748
3647
|
modeOverlay
|
|
3749
3648
|
] });
|
|
3750
3649
|
}
|
|
3751
3650
|
if (loadError) {
|
|
3752
3651
|
if (errorNode) {
|
|
3753
|
-
return /* @__PURE__ */
|
|
3652
|
+
return /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: errorNode(loadError) });
|
|
3754
3653
|
}
|
|
3755
|
-
return /* @__PURE__ */
|
|
3654
|
+
return /* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(
|
|
3756
3655
|
"div",
|
|
3757
3656
|
{
|
|
3758
3657
|
style: {
|
|
@@ -3766,8 +3665,8 @@ function FloPayCheckout({
|
|
|
3766
3665
|
) });
|
|
3767
3666
|
}
|
|
3768
3667
|
if (shouldShowInterimButtons) {
|
|
3769
|
-
return /* @__PURE__ */
|
|
3770
|
-
/* @__PURE__ */
|
|
3668
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
3669
|
+
/* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(
|
|
3771
3670
|
InterimButtonsView,
|
|
3772
3671
|
{
|
|
3773
3672
|
onButtonClick,
|
|
@@ -3785,12 +3684,12 @@ function FloPayCheckout({
|
|
|
3785
3684
|
] });
|
|
3786
3685
|
}
|
|
3787
3686
|
if (!flopay || !providerOptions) {
|
|
3788
|
-
return /* @__PURE__ */
|
|
3687
|
+
return /* @__PURE__ */ jsx6(Fragment3, { children: modeOverlay });
|
|
3789
3688
|
}
|
|
3790
3689
|
if (currentMode === "confirm") {
|
|
3791
|
-
return /* @__PURE__ */
|
|
3792
|
-
/* @__PURE__ */
|
|
3793
|
-
modeError && /* @__PURE__ */
|
|
3690
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
3691
|
+
/* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs4("div", { className, children: [
|
|
3692
|
+
modeError && /* @__PURE__ */ jsx6(
|
|
3794
3693
|
"div",
|
|
3795
3694
|
{
|
|
3796
3695
|
style: {
|
|
@@ -3805,7 +3704,7 @@ function FloPayCheckout({
|
|
|
3805
3704
|
renderConfirmButton ? renderConfirmButton({
|
|
3806
3705
|
onConfirm: handleConfirmCheckout,
|
|
3807
3706
|
isProcessing: confirmProcessing
|
|
3808
|
-
}) : /* @__PURE__ */
|
|
3707
|
+
}) : /* @__PURE__ */ jsx6(
|
|
3809
3708
|
"button",
|
|
3810
3709
|
{
|
|
3811
3710
|
type: "button",
|
|
@@ -3830,9 +3729,9 @@ function FloPayCheckout({
|
|
|
3830
3729
|
modeOverlay
|
|
3831
3730
|
] });
|
|
3832
3731
|
}
|
|
3833
|
-
return /* @__PURE__ */
|
|
3834
|
-
/* @__PURE__ */
|
|
3835
|
-
modeError && /* @__PURE__ */
|
|
3732
|
+
return /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
3733
|
+
/* @__PURE__ */ jsx6(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx6(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: children ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
3734
|
+
modeError && /* @__PURE__ */ jsx6(
|
|
3836
3735
|
"div",
|
|
3837
3736
|
{
|
|
3838
3737
|
style: {
|
|
@@ -3847,7 +3746,7 @@ function FloPayCheckout({
|
|
|
3847
3746
|
children: modeError
|
|
3848
3747
|
}
|
|
3849
3748
|
),
|
|
3850
|
-
/* @__PURE__ */
|
|
3749
|
+
/* @__PURE__ */ jsx6(
|
|
3851
3750
|
SessionInjector,
|
|
3852
3751
|
{
|
|
3853
3752
|
sessionId: activeSessionId,
|
|
@@ -3856,7 +3755,7 @@ function FloPayCheckout({
|
|
|
3856
3755
|
children
|
|
3857
3756
|
}
|
|
3858
3757
|
)
|
|
3859
|
-
] }) : /* @__PURE__ */
|
|
3758
|
+
] }) : /* @__PURE__ */ jsx6(
|
|
3860
3759
|
SplitCardForm,
|
|
3861
3760
|
{
|
|
3862
3761
|
sessionId: activeSessionId,
|
|
@@ -3907,8 +3806,8 @@ function SessionInjector({
|
|
|
3907
3806
|
session,
|
|
3908
3807
|
children
|
|
3909
3808
|
}) {
|
|
3910
|
-
return /* @__PURE__ */
|
|
3911
|
-
if (!
|
|
3809
|
+
return /* @__PURE__ */ jsx6(Fragment3, { children: React6.Children.map(children, (child) => {
|
|
3810
|
+
if (!React6.isValidElement(child)) return child;
|
|
3912
3811
|
const existing = child.props;
|
|
3913
3812
|
const injected = {};
|
|
3914
3813
|
if (!existing.sessionId) injected.sessionId = sessionId;
|
|
@@ -3922,7 +3821,7 @@ function SessionInjector({
|
|
|
3922
3821
|
injected.lastName = session.customer.lastName;
|
|
3923
3822
|
}
|
|
3924
3823
|
if (Object.keys(injected).length === 0) return child;
|
|
3925
|
-
return
|
|
3824
|
+
return React6.cloneElement(child, injected);
|
|
3926
3825
|
}) });
|
|
3927
3826
|
}
|
|
3928
3827
|
function InterimButtonsView({
|
|
@@ -3940,9 +3839,9 @@ function InterimButtonsView({
|
|
|
3940
3839
|
cardBackButtonContent,
|
|
3941
3840
|
cardTitleContent
|
|
3942
3841
|
}) {
|
|
3943
|
-
const [showCardForm, setShowCardForm] =
|
|
3842
|
+
const [showCardForm, setShowCardForm] = useState3(false);
|
|
3944
3843
|
const isCardOpenControlled = typeof cardOpen === "boolean";
|
|
3945
|
-
|
|
3844
|
+
useEffect4(() => {
|
|
3946
3845
|
if (isCardOpenControlled) {
|
|
3947
3846
|
setShowCardForm(cardOpen);
|
|
3948
3847
|
}
|
|
@@ -3961,7 +3860,7 @@ function InterimButtonsView({
|
|
|
3961
3860
|
title: { ...base.title, ...stylesOverride.title }
|
|
3962
3861
|
};
|
|
3963
3862
|
}, [buttonsTheme, stylesOverride]);
|
|
3964
|
-
const skeleton = (h) => /* @__PURE__ */
|
|
3863
|
+
const skeleton = (h) => /* @__PURE__ */ jsx6("div", { style: {
|
|
3965
3864
|
height: h,
|
|
3966
3865
|
borderRadius: 8,
|
|
3967
3866
|
background: "#e5e7eb",
|
|
@@ -3973,15 +3872,15 @@ function InterimButtonsView({
|
|
|
3973
3872
|
const inputBg = bStyles.cardInputBackground ?? "white";
|
|
3974
3873
|
const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
|
|
3975
3874
|
const hideTitle = isEmptySlotContent(cardTitleContent);
|
|
3976
|
-
return /* @__PURE__ */
|
|
3875
|
+
return /* @__PURE__ */ jsxs4("div", { style: {
|
|
3977
3876
|
backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
|
|
3978
3877
|
borderRadius: "8px",
|
|
3979
3878
|
animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
|
|
3980
3879
|
overflow: "hidden",
|
|
3981
3880
|
...bStyles.cardFormContainer
|
|
3982
3881
|
}, children: [
|
|
3983
|
-
/* @__PURE__ */
|
|
3984
|
-
/* @__PURE__ */
|
|
3882
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
|
|
3883
|
+
/* @__PURE__ */ jsxs4(
|
|
3985
3884
|
"button",
|
|
3986
3885
|
{
|
|
3987
3886
|
type: "button",
|
|
@@ -4008,7 +3907,7 @@ function InterimButtonsView({
|
|
|
4008
3907
|
...bStyles.backButton
|
|
4009
3908
|
},
|
|
4010
3909
|
children: [
|
|
4011
|
-
/* @__PURE__ */
|
|
3910
|
+
/* @__PURE__ */ jsx6("span", { style: {
|
|
4012
3911
|
display: "inline-flex",
|
|
4013
3912
|
alignItems: "center",
|
|
4014
3913
|
justifyContent: "center",
|
|
@@ -4017,12 +3916,12 @@ function InterimButtonsView({
|
|
|
4017
3916
|
borderRadius: "50%",
|
|
4018
3917
|
backgroundColor: "#f3f4f6",
|
|
4019
3918
|
...bStyles.backButtonIcon
|
|
4020
|
-
}, children: /* @__PURE__ */
|
|
4021
|
-
/* @__PURE__ */
|
|
3919
|
+
}, children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M15 18l-6-6 6-6" }) }) }),
|
|
3920
|
+
/* @__PURE__ */ jsx6(BackButtonContentSlot, { content: cardBackButtonContent })
|
|
4022
3921
|
]
|
|
4023
3922
|
}
|
|
4024
3923
|
),
|
|
4025
|
-
hideTitle ? /* @__PURE__ */
|
|
3924
|
+
hideTitle ? /* @__PURE__ */ jsx6("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx6("div", { style: {
|
|
4026
3925
|
flex: 1,
|
|
4027
3926
|
textAlign: "center",
|
|
4028
3927
|
fontWeight: 600,
|
|
@@ -4030,15 +3929,15 @@ function InterimButtonsView({
|
|
|
4030
3929
|
color: "#262833",
|
|
4031
3930
|
paddingRight: 80,
|
|
4032
3931
|
...bStyles.title
|
|
4033
|
-
}, children: /* @__PURE__ */
|
|
3932
|
+
}, children: /* @__PURE__ */ jsx6(TitleContentSlot, { content: cardTitleContent }) })
|
|
4034
3933
|
] }),
|
|
4035
|
-
/* @__PURE__ */
|
|
4036
|
-
/* @__PURE__ */
|
|
4037
|
-
/* @__PURE__ */
|
|
4038
|
-
/* @__PURE__ */
|
|
3934
|
+
/* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
|
|
3935
|
+
/* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
|
|
3936
|
+
/* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
|
|
3937
|
+
/* @__PURE__ */ jsx6("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
|
|
4039
3938
|
] }),
|
|
4040
|
-
/* @__PURE__ */
|
|
4041
|
-
/* @__PURE__ */
|
|
3939
|
+
/* @__PURE__ */ jsx6("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx6("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
|
|
3940
|
+
/* @__PURE__ */ jsx6("div", { style: {
|
|
4042
3941
|
height: 50,
|
|
4043
3942
|
borderRadius: 8,
|
|
4044
3943
|
marginTop: 16,
|
|
@@ -4047,7 +3946,7 @@ function InterimButtonsView({
|
|
|
4047
3946
|
...bStyles.submitButton,
|
|
4048
3947
|
opacity: 0.5
|
|
4049
3948
|
} }),
|
|
4050
|
-
/* @__PURE__ */
|
|
3949
|
+
/* @__PURE__ */ jsx6("style", { children: `
|
|
4051
3950
|
@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
|
|
4052
3951
|
@keyframes flopay-interim-expand {
|
|
4053
3952
|
0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
|
|
@@ -4057,10 +3956,10 @@ function InterimButtonsView({
|
|
|
4057
3956
|
` })
|
|
4058
3957
|
] });
|
|
4059
3958
|
}
|
|
4060
|
-
return /* @__PURE__ */
|
|
3959
|
+
return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
4061
3960
|
showPayPal && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
|
|
4062
3961
|
(showApplePay || showGooglePay) && skeleton(DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT2),
|
|
4063
|
-
/* @__PURE__ */
|
|
3962
|
+
/* @__PURE__ */ jsx6(
|
|
4064
3963
|
"button",
|
|
4065
3964
|
{
|
|
4066
3965
|
type: "button",
|
|
@@ -4100,10 +3999,10 @@ function InterimButtonsView({
|
|
|
4100
3999
|
onMouseUp: (e) => {
|
|
4101
4000
|
e.currentTarget.style.transform = "scale(1)";
|
|
4102
4001
|
},
|
|
4103
|
-
children: /* @__PURE__ */
|
|
4002
|
+
children: /* @__PURE__ */ jsx6(CardButtonContentSlot, { content: cardButtonContent })
|
|
4104
4003
|
}
|
|
4105
4004
|
),
|
|
4106
|
-
errorMessage && /* @__PURE__ */
|
|
4005
|
+
errorMessage && /* @__PURE__ */ jsxs4("div", { style: {
|
|
4107
4006
|
margin: "0.25rem 0",
|
|
4108
4007
|
padding: "0.625rem 0.875rem",
|
|
4109
4008
|
background: "#FEF2F2",
|
|
@@ -4117,22 +4016,22 @@ function InterimButtonsView({
|
|
|
4117
4016
|
gap: "0.5rem",
|
|
4118
4017
|
...bStyles.errorBanner
|
|
4119
4018
|
}, children: [
|
|
4120
|
-
/* @__PURE__ */
|
|
4019
|
+
/* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx6("path", { d: "M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", stroke: "#DC2626", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
4121
4020
|
errorMessage
|
|
4122
4021
|
] }),
|
|
4123
|
-
/* @__PURE__ */
|
|
4022
|
+
/* @__PURE__ */ jsx6("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
|
|
4124
4023
|
] });
|
|
4125
4024
|
}
|
|
4126
4025
|
|
|
4127
4026
|
// src/checkout-form.tsx
|
|
4128
4027
|
import { PaymentAPI as PaymentAPI4 } from "@flopay/js";
|
|
4129
4028
|
import { FloPayError as FloPayError5 } from "@flopay/shared";
|
|
4130
|
-
import { forwardRef as forwardRef2, useCallback as
|
|
4131
|
-
import { Fragment as Fragment4, jsx as
|
|
4029
|
+
import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useState as useState4 } from "react";
|
|
4030
|
+
import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
4132
4031
|
var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
|
|
4133
4032
|
var CheckoutForm = forwardRef2(
|
|
4134
4033
|
function CheckoutForm2(props, ref) {
|
|
4135
|
-
return /* @__PURE__ */
|
|
4034
|
+
return /* @__PURE__ */ jsx7(CheckoutFormInner, { ...props, innerRef: ref });
|
|
4136
4035
|
}
|
|
4137
4036
|
);
|
|
4138
4037
|
function CheckoutFormInner({
|
|
@@ -4161,27 +4060,27 @@ function CheckoutFormInner({
|
|
|
4161
4060
|
const paypalFlopay = usePayPalFloPay();
|
|
4162
4061
|
const elements = useElements();
|
|
4163
4062
|
const contextBillingUrl = useBillingApiUrl();
|
|
4164
|
-
const [processing, setProcessing] =
|
|
4165
|
-
const [error, setError] =
|
|
4166
|
-
const [is3DSActive, setIs3DSActive] =
|
|
4063
|
+
const [processing, setProcessing] = useState4(false);
|
|
4064
|
+
const [error, setError] = useState4(null);
|
|
4065
|
+
const [is3DSActive, setIs3DSActive] = useState4(false);
|
|
4167
4066
|
const displayError = externalError ?? error;
|
|
4168
4067
|
const isSubmitting = externalProcessing ?? processing;
|
|
4169
4068
|
const isSelfContained = !onTokenizedBody;
|
|
4170
4069
|
const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
|
|
4171
|
-
const updateError =
|
|
4070
|
+
const updateError = useCallback3(
|
|
4172
4071
|
(err) => {
|
|
4173
4072
|
setError(err);
|
|
4174
4073
|
onErrorChange?.(err);
|
|
4175
4074
|
},
|
|
4176
4075
|
[onErrorChange]
|
|
4177
4076
|
);
|
|
4178
|
-
const emitDecline =
|
|
4077
|
+
const emitDecline = useCallback3(
|
|
4179
4078
|
(input, overrides) => {
|
|
4180
4079
|
onDecline?.(buildDeclineEvent("card", input, overrides));
|
|
4181
4080
|
},
|
|
4182
4081
|
[onDecline]
|
|
4183
4082
|
);
|
|
4184
|
-
const processPaymentInternal =
|
|
4083
|
+
const processPaymentInternal = useCallback3(
|
|
4185
4084
|
async (tokenizedBody, completionPaymentMethodId) => {
|
|
4186
4085
|
setProcessing(true);
|
|
4187
4086
|
updateError(null);
|
|
@@ -4292,7 +4191,7 @@ function CheckoutFormInner({
|
|
|
4292
4191
|
},
|
|
4293
4192
|
[baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, paypalFlopay, onComplete, onError, onDecline, updateError, emitDecline]
|
|
4294
4193
|
);
|
|
4295
|
-
const dispatchTokenizedBody =
|
|
4194
|
+
const dispatchTokenizedBody = useCallback3(
|
|
4296
4195
|
(tokenizedBody) => {
|
|
4297
4196
|
if (onTokenizedBody) {
|
|
4298
4197
|
onTokenizedBody(tokenizedBody);
|
|
@@ -4329,7 +4228,7 @@ function CheckoutFormInner({
|
|
|
4329
4228
|
}
|
|
4330
4229
|
}
|
|
4331
4230
|
}), [flopay, dispatchTokenizedBody, onError, updateError, emitDecline]);
|
|
4332
|
-
|
|
4231
|
+
useEffect5(() => {
|
|
4333
4232
|
if (typeof window === "undefined") return;
|
|
4334
4233
|
const stored = localStorage.getItem(WALLET_RESUME_KEY2);
|
|
4335
4234
|
if (!stored) return;
|
|
@@ -4347,7 +4246,7 @@ function CheckoutFormInner({
|
|
|
4347
4246
|
localStorage.removeItem(WALLET_RESUME_KEY2);
|
|
4348
4247
|
}
|
|
4349
4248
|
}, [sessionId, dispatchTokenizedBody]);
|
|
4350
|
-
const handleSubmit =
|
|
4249
|
+
const handleSubmit = useCallback3(
|
|
4351
4250
|
async (e) => {
|
|
4352
4251
|
e.preventDefault();
|
|
4353
4252
|
if (!flopay || !elements || isSubmitting) return;
|
|
@@ -4437,8 +4336,8 @@ function CheckoutFormInner({
|
|
|
4437
4336
|
[flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError, emitDecline]
|
|
4438
4337
|
);
|
|
4439
4338
|
const isReady = flopay !== null && elements !== null;
|
|
4440
|
-
return /* @__PURE__ */
|
|
4441
|
-
(is3DSActive || isSubmitting) && /* @__PURE__ */
|
|
4339
|
+
return /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
|
|
4340
|
+
(is3DSActive || isSubmitting) && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-overlay", style: {
|
|
4442
4341
|
position: "absolute",
|
|
4443
4342
|
inset: 0,
|
|
4444
4343
|
background: "rgba(255,255,255,0.7)",
|
|
@@ -4447,12 +4346,12 @@ function CheckoutFormInner({
|
|
|
4447
4346
|
justifyContent: "center",
|
|
4448
4347
|
zIndex: 10
|
|
4449
4348
|
}, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
|
|
4450
|
-
!isReady && /* @__PURE__ */
|
|
4451
|
-
isReady && /* @__PURE__ */
|
|
4452
|
-
/* @__PURE__ */
|
|
4453
|
-
showAddress && /* @__PURE__ */
|
|
4454
|
-
displayError && /* @__PURE__ */
|
|
4455
|
-
children ?? /* @__PURE__ */
|
|
4349
|
+
!isReady && /* @__PURE__ */ jsx7("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
|
|
4350
|
+
isReady && /* @__PURE__ */ jsxs5(Fragment4, { children: [
|
|
4351
|
+
/* @__PURE__ */ jsx7(PaymentElement, { options: { layout } }),
|
|
4352
|
+
showAddress && /* @__PURE__ */ jsx7(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
|
|
4353
|
+
displayError && /* @__PURE__ */ jsx7("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
|
|
4354
|
+
children ?? /* @__PURE__ */ jsx7(
|
|
4456
4355
|
"button",
|
|
4457
4356
|
{
|
|
4458
4357
|
type: "submit",
|
|
@@ -4468,8 +4367,8 @@ function CheckoutFormInner({
|
|
|
4468
4367
|
// src/paypal-button.tsx
|
|
4469
4368
|
import { PaymentAPI as PaymentAPI5 } from "@flopay/js";
|
|
4470
4369
|
import { FloPayError as FloPayError6 } from "@flopay/shared";
|
|
4471
|
-
import { useCallback as
|
|
4472
|
-
import { Fragment as Fragment5, jsx as
|
|
4370
|
+
import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
|
|
4371
|
+
import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
4473
4372
|
function PayPalButton({
|
|
4474
4373
|
sessionId,
|
|
4475
4374
|
billingApiUrl,
|
|
@@ -4486,11 +4385,11 @@ function PayPalButton({
|
|
|
4486
4385
|
const flopay = useFloPay();
|
|
4487
4386
|
const elements = useElements();
|
|
4488
4387
|
const contextBillingUrl = useBillingApiUrl();
|
|
4489
|
-
const [ready, setReady] =
|
|
4490
|
-
const [submitting, setSubmitting] =
|
|
4388
|
+
const [ready, setReady] = useState5(false);
|
|
4389
|
+
const [submitting, setSubmitting] = useState5(false);
|
|
4491
4390
|
const paypalResumeAttempted = useRef4(false);
|
|
4492
4391
|
const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
|
|
4493
|
-
const processPaymentInternal =
|
|
4392
|
+
const processPaymentInternal = useCallback4(
|
|
4494
4393
|
async (tokenizedBody) => {
|
|
4495
4394
|
try {
|
|
4496
4395
|
const api = new PaymentAPI5(baseUrl);
|
|
@@ -4517,7 +4416,7 @@ function PayPalButton({
|
|
|
4517
4416
|
},
|
|
4518
4417
|
[baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
|
|
4519
4418
|
);
|
|
4520
|
-
const dispatchTokenizedBody =
|
|
4419
|
+
const dispatchTokenizedBody = useCallback4(
|
|
4521
4420
|
(body) => {
|
|
4522
4421
|
if (onTokenizedBody) {
|
|
4523
4422
|
onTokenizedBody(body);
|
|
@@ -4527,7 +4426,7 @@ function PayPalButton({
|
|
|
4527
4426
|
},
|
|
4528
4427
|
[onTokenizedBody, processPaymentInternal]
|
|
4529
4428
|
);
|
|
4530
|
-
|
|
4429
|
+
useEffect6(() => {
|
|
4531
4430
|
if (!flopay || paypalResumeAttempted.current) return;
|
|
4532
4431
|
const params = new URLSearchParams(window.location.search);
|
|
4533
4432
|
const paymentIntentId = params.get("payment_intent");
|
|
@@ -4575,7 +4474,7 @@ function PayPalButton({
|
|
|
4575
4474
|
}
|
|
4576
4475
|
})();
|
|
4577
4476
|
}, [flopay, dispatchTokenizedBody, onErrorChange]);
|
|
4578
|
-
const handlePayPalConfirm =
|
|
4477
|
+
const handlePayPalConfirm = useCallback4(async () => {
|
|
4579
4478
|
if (!flopay || !elements) return;
|
|
4580
4479
|
try {
|
|
4581
4480
|
setSubmitting(true);
|
|
@@ -4608,11 +4507,11 @@ function PayPalButton({
|
|
|
4608
4507
|
}
|
|
4609
4508
|
}, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
|
|
4610
4509
|
if (!flopay || !elements) {
|
|
4611
|
-
return /* @__PURE__ */
|
|
4510
|
+
return /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
|
|
4612
4511
|
}
|
|
4613
|
-
return /* @__PURE__ */
|
|
4614
|
-
!ready && /* @__PURE__ */
|
|
4615
|
-
/* @__PURE__ */
|
|
4512
|
+
return /* @__PURE__ */ jsxs6(Fragment5, { children: [
|
|
4513
|
+
!ready && /* @__PURE__ */ jsx8("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
|
|
4514
|
+
/* @__PURE__ */ jsx8("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx8(
|
|
4616
4515
|
"button",
|
|
4617
4516
|
{
|
|
4618
4517
|
type: "button",
|
|
@@ -4634,7 +4533,7 @@ function PayPalButton({
|
|
|
4634
4533
|
children: submitting ? "Processing..." : "PayPal"
|
|
4635
4534
|
}
|
|
4636
4535
|
) }),
|
|
4637
|
-
(submitting || isProcessing) && /* @__PURE__ */
|
|
4536
|
+
(submitting || isProcessing) && /* @__PURE__ */ jsx8("div", { style: {
|
|
4638
4537
|
position: "fixed",
|
|
4639
4538
|
inset: 0,
|
|
4640
4539
|
background: "rgba(0,0,0,0.4)",
|
|
@@ -4642,7 +4541,7 @@ function PayPalButton({
|
|
|
4642
4541
|
alignItems: "center",
|
|
4643
4542
|
justifyContent: "center",
|
|
4644
4543
|
zIndex: 1e3
|
|
4645
|
-
}, children: /* @__PURE__ */
|
|
4544
|
+
}, children: /* @__PURE__ */ jsx8("div", { style: {
|
|
4646
4545
|
background: "white",
|
|
4647
4546
|
borderRadius: 8,
|
|
4648
4547
|
padding: "1.5rem",
|
|
@@ -4654,10 +4553,10 @@ function PayPalButton({
|
|
|
4654
4553
|
}
|
|
4655
4554
|
|
|
4656
4555
|
// src/automatic-payment-button.tsx
|
|
4657
|
-
import { useCallback as
|
|
4556
|
+
import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
|
|
4658
4557
|
import { PaymentAPI as PaymentAPI6 } from "@flopay/js";
|
|
4659
4558
|
import { FloPayError as FloPayError7, resolveBillingApiUrl as resolveBillingApiUrl4, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme3 } from "@flopay/shared";
|
|
4660
|
-
import { Fragment as Fragment6, jsx as
|
|
4559
|
+
import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
4661
4560
|
var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3 = 44;
|
|
4662
4561
|
var PAYPAL_RESUME_STORAGE_KEY2 = "flopay_automatic_payment_button_resume";
|
|
4663
4562
|
function sleep2(ms) {
|
|
@@ -4804,10 +4703,10 @@ function FloPayAutomaticPaymentButton({
|
|
|
4804
4703
|
utmMetadata
|
|
4805
4704
|
]
|
|
4806
4705
|
);
|
|
4807
|
-
const [isProcessing, setIsProcessing] =
|
|
4808
|
-
const [overlayStatus, setOverlayStatus] =
|
|
4809
|
-
const [overlayError, setOverlayError] =
|
|
4810
|
-
const [fallbackSession, setFallbackSession] =
|
|
4706
|
+
const [isProcessing, setIsProcessing] = useState6(false);
|
|
4707
|
+
const [overlayStatus, setOverlayStatus] = useState6(null);
|
|
4708
|
+
const [overlayError, setOverlayError] = useState6(null);
|
|
4709
|
+
const [fallbackSession, setFallbackSession] = useState6(null);
|
|
4811
4710
|
const automaticPaymentToken = useMemo4(
|
|
4812
4711
|
() => paymentMethodId ? {
|
|
4813
4712
|
id: paymentMethodId,
|
|
@@ -4822,25 +4721,25 @@ function FloPayAutomaticPaymentButton({
|
|
|
4822
4721
|
const onSuccessRef = useRef5(onSuccess);
|
|
4823
4722
|
const onErrorRef = useRef5(onError);
|
|
4824
4723
|
const onDeclineRef = useRef5(onDecline);
|
|
4825
|
-
|
|
4724
|
+
useEffect7(() => {
|
|
4826
4725
|
fallbackSessionRef.current = fallbackSession;
|
|
4827
4726
|
}, [fallbackSession]);
|
|
4828
|
-
|
|
4727
|
+
useEffect7(() => {
|
|
4829
4728
|
onSuccessRef.current = onSuccess;
|
|
4830
4729
|
}, [onSuccess]);
|
|
4831
|
-
|
|
4730
|
+
useEffect7(() => {
|
|
4832
4731
|
onErrorRef.current = onError;
|
|
4833
4732
|
}, [onError]);
|
|
4834
|
-
|
|
4733
|
+
useEffect7(() => {
|
|
4835
4734
|
onDeclineRef.current = onDecline;
|
|
4836
4735
|
}, [onDecline]);
|
|
4837
|
-
|
|
4736
|
+
useEffect7(() => {
|
|
4838
4737
|
isMountedRef.current = true;
|
|
4839
4738
|
return () => {
|
|
4840
4739
|
isMountedRef.current = false;
|
|
4841
4740
|
};
|
|
4842
4741
|
}, []);
|
|
4843
|
-
|
|
4742
|
+
useEffect7(() => {
|
|
4844
4743
|
if (!fallbackSession || typeof window === "undefined") {
|
|
4845
4744
|
return;
|
|
4846
4745
|
}
|
|
@@ -4854,13 +4753,13 @@ function FloPayAutomaticPaymentButton({
|
|
|
4854
4753
|
window.removeEventListener("keydown", handleKeyDown);
|
|
4855
4754
|
};
|
|
4856
4755
|
}, [fallbackSession]);
|
|
4857
|
-
const emitDecline =
|
|
4756
|
+
const emitDecline = useCallback5((error, method = DEFAULT_SAVED_PAYMENT_DECLINE_METHOD) => {
|
|
4858
4757
|
onDeclineRef.current?.(buildDeclineEvent(method, error, {
|
|
4859
4758
|
code: error.code,
|
|
4860
4759
|
declineCode: error.declineCode
|
|
4861
4760
|
}));
|
|
4862
4761
|
}, []);
|
|
4863
|
-
const showSuccess =
|
|
4762
|
+
const showSuccess = useCallback5(async (event) => {
|
|
4864
4763
|
if (!isMountedRef.current) return;
|
|
4865
4764
|
setOverlayError(null);
|
|
4866
4765
|
setOverlayStatus("success");
|
|
@@ -4868,7 +4767,7 @@ function FloPayAutomaticPaymentButton({
|
|
|
4868
4767
|
if (!isMountedRef.current) return;
|
|
4869
4768
|
onSuccessRef.current?.(event);
|
|
4870
4769
|
}, []);
|
|
4871
|
-
const showError =
|
|
4770
|
+
const showError = useCallback5(async (error, options) => {
|
|
4872
4771
|
if (!isMountedRef.current) return;
|
|
4873
4772
|
onErrorRef.current?.(error);
|
|
4874
4773
|
if (options?.emitDecline) {
|
|
@@ -4878,7 +4777,7 @@ function FloPayAutomaticPaymentButton({
|
|
|
4878
4777
|
setOverlayStatus("error");
|
|
4879
4778
|
await sleep2(PROCESSING_OVERLAY_ERROR_DELAY_MS);
|
|
4880
4779
|
}, [emitDecline]);
|
|
4881
|
-
const processResolvedSession =
|
|
4780
|
+
const processResolvedSession = useCallback5(async (apiResult, resolvedSessionId, options) => {
|
|
4882
4781
|
const session = apiResult.data.session ?? null;
|
|
4883
4782
|
if (!session) {
|
|
4884
4783
|
throw new FloPayError7("No session data returned", "api_error");
|
|
@@ -5101,7 +5000,7 @@ function FloPayAutomaticPaymentButton({
|
|
|
5101
5000
|
showError,
|
|
5102
5001
|
showSuccess
|
|
5103
5002
|
]);
|
|
5104
|
-
const handleButtonClick =
|
|
5003
|
+
const handleButtonClick = useCallback5(async (event) => {
|
|
5105
5004
|
buttonProps.onClick?.(event);
|
|
5106
5005
|
if (event.defaultPrevented || disabled || isProcessing) {
|
|
5107
5006
|
return;
|
|
@@ -5183,7 +5082,7 @@ function FloPayAutomaticPaymentButton({
|
|
|
5183
5082
|
showError,
|
|
5184
5083
|
showSuccess
|
|
5185
5084
|
]);
|
|
5186
|
-
const handleFallbackComplete =
|
|
5085
|
+
const handleFallbackComplete = useCallback5((result) => {
|
|
5187
5086
|
const activeFallback = fallbackSessionRef.current;
|
|
5188
5087
|
setFallbackSession(null);
|
|
5189
5088
|
onSuccessRef.current?.({
|
|
@@ -5193,13 +5092,13 @@ function FloPayAutomaticPaymentButton({
|
|
|
5193
5092
|
autoCompleted: false
|
|
5194
5093
|
});
|
|
5195
5094
|
}, []);
|
|
5196
|
-
const handleFallbackError =
|
|
5095
|
+
const handleFallbackError = useCallback5((error) => {
|
|
5197
5096
|
onErrorRef.current?.(error);
|
|
5198
5097
|
}, []);
|
|
5199
|
-
const handleFallbackDecline =
|
|
5098
|
+
const handleFallbackDecline = useCallback5((decline) => {
|
|
5200
5099
|
onDeclineRef.current?.(decline);
|
|
5201
5100
|
}, []);
|
|
5202
|
-
|
|
5101
|
+
useEffect7(() => {
|
|
5203
5102
|
if (typeof window === "undefined" || resumeAttemptedRef.current) {
|
|
5204
5103
|
return;
|
|
5205
5104
|
}
|
|
@@ -5340,8 +5239,8 @@ function FloPayAutomaticPaymentButton({
|
|
|
5340
5239
|
};
|
|
5341
5240
|
}, [buttonsTheme, stylesOverride]);
|
|
5342
5241
|
const cardButtonSizing = children === void 0 ? { boxSizing: "border-box", height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT3, padding: "0 1rem" } : { padding: "0.9rem 1rem" };
|
|
5343
|
-
return /* @__PURE__ */
|
|
5344
|
-
/* @__PURE__ */
|
|
5242
|
+
return /* @__PURE__ */ jsxs7(Fragment6, { children: [
|
|
5243
|
+
/* @__PURE__ */ jsx9(
|
|
5345
5244
|
"button",
|
|
5346
5245
|
{
|
|
5347
5246
|
...buttonProps,
|
|
@@ -5382,17 +5281,17 @@ function FloPayAutomaticPaymentButton({
|
|
|
5382
5281
|
e.currentTarget.style.transform = "scale(1)";
|
|
5383
5282
|
}
|
|
5384
5283
|
},
|
|
5385
|
-
children: /* @__PURE__ */
|
|
5284
|
+
children: /* @__PURE__ */ jsx9(CardButtonContentSlot, { content: children })
|
|
5386
5285
|
}
|
|
5387
5286
|
),
|
|
5388
|
-
overlayStatus && /* @__PURE__ */
|
|
5287
|
+
overlayStatus && /* @__PURE__ */ jsx9(
|
|
5389
5288
|
ProcessingOverlay,
|
|
5390
5289
|
{
|
|
5391
5290
|
status: overlayStatus,
|
|
5392
5291
|
errorMessage: overlayError
|
|
5393
5292
|
}
|
|
5394
5293
|
),
|
|
5395
|
-
fallbackSession && /* @__PURE__ */
|
|
5294
|
+
fallbackSession && /* @__PURE__ */ jsx9(
|
|
5396
5295
|
"div",
|
|
5397
5296
|
{
|
|
5398
5297
|
"data-testid": "flopay-automatic-payment-fallback",
|
|
@@ -5413,7 +5312,7 @@ function FloPayAutomaticPaymentButton({
|
|
|
5413
5312
|
padding: "1.5rem",
|
|
5414
5313
|
zIndex: 1100
|
|
5415
5314
|
},
|
|
5416
|
-
children: /* @__PURE__ */
|
|
5315
|
+
children: /* @__PURE__ */ jsx9(
|
|
5417
5316
|
"div",
|
|
5418
5317
|
{
|
|
5419
5318
|
style: {
|
|
@@ -5429,7 +5328,7 @@ function FloPayAutomaticPaymentButton({
|
|
|
5429
5328
|
flexDirection: "column",
|
|
5430
5329
|
gap: "1rem"
|
|
5431
5330
|
},
|
|
5432
|
-
children: /* @__PURE__ */
|
|
5331
|
+
children: /* @__PURE__ */ jsx9(
|
|
5433
5332
|
FloPayCheckout,
|
|
5434
5333
|
{
|
|
5435
5334
|
sessionId: fallbackSession.sessionId,
|
|
@@ -5459,11 +5358,9 @@ export {
|
|
|
5459
5358
|
FloPayAutomaticPaymentButton,
|
|
5460
5359
|
FloPayCheckout,
|
|
5461
5360
|
FloPayProvider,
|
|
5462
|
-
InAppBrowserNotice,
|
|
5463
5361
|
PayPalButton,
|
|
5464
5362
|
PaymentElement,
|
|
5465
5363
|
SplitCardForm,
|
|
5466
|
-
isInAppBrowser,
|
|
5467
5364
|
useCheckout,
|
|
5468
5365
|
useElements,
|
|
5469
5366
|
useFloPay,
|