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