@flopay/react 0.3.1 → 0.3.5
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 +286 -239
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.mjs +197 -150
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -116,13 +116,61 @@ function FloPayProvider({
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
// src/flopay-checkout.tsx
|
|
119
|
-
var
|
|
119
|
+
var import_react7 = __toESM(require("react"), 1);
|
|
120
120
|
var import_js = require("@flopay/js");
|
|
121
121
|
var import_shared5 = require("@flopay/shared");
|
|
122
122
|
|
|
123
|
-
// src/
|
|
123
|
+
// src/card-button-content.tsx
|
|
124
124
|
var import_react3 = require("react");
|
|
125
125
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
126
|
+
function DefaultCardButtonContent() {
|
|
127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
129
|
+
"svg",
|
|
130
|
+
{
|
|
131
|
+
width: "20",
|
|
132
|
+
height: "20",
|
|
133
|
+
viewBox: "0 0 24 24",
|
|
134
|
+
fill: "none",
|
|
135
|
+
stroke: "currentColor",
|
|
136
|
+
strokeWidth: "1.5",
|
|
137
|
+
strokeLinecap: "round",
|
|
138
|
+
strokeLinejoin: "round",
|
|
139
|
+
"aria-hidden": "true",
|
|
140
|
+
children: [
|
|
141
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
|
|
142
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
),
|
|
146
|
+
"Credit / Debit Card",
|
|
147
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
148
|
+
"svg",
|
|
149
|
+
{
|
|
150
|
+
width: "16",
|
|
151
|
+
height: "16",
|
|
152
|
+
viewBox: "0 0 24 24",
|
|
153
|
+
fill: "none",
|
|
154
|
+
stroke: "#9ca3af",
|
|
155
|
+
strokeWidth: "2",
|
|
156
|
+
strokeLinecap: "round",
|
|
157
|
+
strokeLinejoin: "round",
|
|
158
|
+
style: { position: "absolute", right: "1rem" },
|
|
159
|
+
"aria-hidden": "true",
|
|
160
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 18l6-6-6-6" })
|
|
161
|
+
}
|
|
162
|
+
)
|
|
163
|
+
] });
|
|
164
|
+
}
|
|
165
|
+
function CardButtonContentSlot({
|
|
166
|
+
content
|
|
167
|
+
}) {
|
|
168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultCardButtonContent, {}) });
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// src/elements.tsx
|
|
172
|
+
var import_react4 = require("react");
|
|
173
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
126
174
|
function createElementComponent(elementType, displayName) {
|
|
127
175
|
function ElementComponent({
|
|
128
176
|
className,
|
|
@@ -135,10 +183,10 @@ function createElementComponent(elementType, displayName) {
|
|
|
135
183
|
onBlur,
|
|
136
184
|
onEscape
|
|
137
185
|
}) {
|
|
138
|
-
const containerRef = (0,
|
|
139
|
-
const elementRef = (0,
|
|
140
|
-
const { elements } = (0,
|
|
141
|
-
(0,
|
|
186
|
+
const containerRef = (0, import_react4.useRef)(null);
|
|
187
|
+
const elementRef = (0, import_react4.useRef)(null);
|
|
188
|
+
const { elements } = (0, import_react4.useContext)(FloPayContext);
|
|
189
|
+
(0, import_react4.useEffect)(() => {
|
|
142
190
|
if (!elements || !containerRef.current) return;
|
|
143
191
|
let mounted = true;
|
|
144
192
|
(async () => {
|
|
@@ -168,7 +216,7 @@ function createElementComponent(elementType, displayName) {
|
|
|
168
216
|
}
|
|
169
217
|
};
|
|
170
218
|
}, [elements]);
|
|
171
|
-
return /* @__PURE__ */ (0,
|
|
219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, className, id, style });
|
|
172
220
|
}
|
|
173
221
|
ElementComponent.displayName = displayName;
|
|
174
222
|
return ElementComponent;
|
|
@@ -183,30 +231,30 @@ var AddressElement = createElementComponent("address", "AddressElement");
|
|
|
183
231
|
// src/split-card-form.tsx
|
|
184
232
|
var import_react_stripe_js = require("@stripe/react-stripe-js");
|
|
185
233
|
var import_shared3 = require("@flopay/shared");
|
|
186
|
-
var
|
|
234
|
+
var import_react6 = require("react");
|
|
187
235
|
|
|
188
236
|
// src/hooks.ts
|
|
189
|
-
var
|
|
237
|
+
var import_react5 = require("react");
|
|
190
238
|
var import_shared2 = require("@flopay/shared");
|
|
191
239
|
function useFloPay() {
|
|
192
|
-
const ctx = (0,
|
|
240
|
+
const ctx = (0, import_react5.useContext)(FloPayContext);
|
|
193
241
|
return ctx.flopay;
|
|
194
242
|
}
|
|
195
243
|
function useElements() {
|
|
196
|
-
const ctx = (0,
|
|
244
|
+
const ctx = (0, import_react5.useContext)(FloPayContext);
|
|
197
245
|
return ctx.elements;
|
|
198
246
|
}
|
|
199
247
|
function useCheckout() {
|
|
200
|
-
return (0,
|
|
248
|
+
return (0, import_react5.useContext)(CheckoutContext);
|
|
201
249
|
}
|
|
202
250
|
function useBillingApiUrl() {
|
|
203
|
-
const ctx = (0,
|
|
251
|
+
const ctx = (0, import_react5.useContext)(FloPayContext);
|
|
204
252
|
return ctx.billingApiUrl || (0, import_shared2.resolveBillingApiUrl)();
|
|
205
253
|
}
|
|
206
254
|
|
|
207
255
|
// src/split-card-form.tsx
|
|
208
256
|
var import_shared4 = require("@flopay/shared");
|
|
209
|
-
var
|
|
257
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
210
258
|
var WALLET_RESUME_KEY = "flopay_wallet_resume";
|
|
211
259
|
var FLOPAY_KEYFRAMES = `
|
|
212
260
|
@keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
|
|
@@ -229,10 +277,10 @@ var FLOPAY_KEYFRAMES = `
|
|
|
229
277
|
}
|
|
230
278
|
`;
|
|
231
279
|
function FloPayKeyframes() {
|
|
232
|
-
return /* @__PURE__ */ (0,
|
|
280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: FLOPAY_KEYFRAMES });
|
|
233
281
|
}
|
|
234
282
|
function ProcessingOverlay({ status, errorMessage }) {
|
|
235
|
-
return /* @__PURE__ */ (0,
|
|
283
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
236
284
|
position: "fixed",
|
|
237
285
|
inset: 0,
|
|
238
286
|
background: "rgba(0,0,0,0.35)",
|
|
@@ -241,7 +289,7 @@ function ProcessingOverlay({ status, errorMessage }) {
|
|
|
241
289
|
justifyContent: "center",
|
|
242
290
|
zIndex: 1e3,
|
|
243
291
|
backdropFilter: "blur(2px)"
|
|
244
|
-
}, children: /* @__PURE__ */ (0,
|
|
292
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
|
|
245
293
|
background: "white",
|
|
246
294
|
borderRadius: 12,
|
|
247
295
|
padding: "2rem 2.5rem",
|
|
@@ -253,8 +301,8 @@ function ProcessingOverlay({ status, errorMessage }) {
|
|
|
253
301
|
alignItems: "center",
|
|
254
302
|
gap: 16
|
|
255
303
|
}, children: [
|
|
256
|
-
/* @__PURE__ */ (0,
|
|
257
|
-
status === "processing" && /* @__PURE__ */ (0,
|
|
304
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { width: 48, height: 48, position: "relative" }, children: [
|
|
305
|
+
status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
258
306
|
"svg",
|
|
259
307
|
{
|
|
260
308
|
width: "48",
|
|
@@ -264,14 +312,14 @@ function ProcessingOverlay({ status, errorMessage }) {
|
|
|
264
312
|
xmlns: "http://www.w3.org/2000/svg",
|
|
265
313
|
style: { animation: "flopay-spin 0.8s linear infinite" },
|
|
266
314
|
children: [
|
|
267
|
-
/* @__PURE__ */ (0,
|
|
268
|
-
/* @__PURE__ */ (0,
|
|
315
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
|
|
316
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
|
|
269
317
|
]
|
|
270
318
|
}
|
|
271
319
|
),
|
|
272
|
-
status === "success" && /* @__PURE__ */ (0,
|
|
273
|
-
/* @__PURE__ */ (0,
|
|
274
|
-
/* @__PURE__ */ (0,
|
|
320
|
+
status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
321
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
|
|
322
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
275
323
|
"path",
|
|
276
324
|
{
|
|
277
325
|
d: "M7 12.5l3 3 7-7",
|
|
@@ -283,9 +331,9 @@ function ProcessingOverlay({ status, errorMessage }) {
|
|
|
283
331
|
}
|
|
284
332
|
)
|
|
285
333
|
] }) }),
|
|
286
|
-
status === "error" && /* @__PURE__ */ (0,
|
|
287
|
-
/* @__PURE__ */ (0,
|
|
288
|
-
/* @__PURE__ */ (0,
|
|
334
|
+
status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
335
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
|
|
336
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
289
337
|
"path",
|
|
290
338
|
{
|
|
291
339
|
d: "M8 8l8 8M16 8l-8 8",
|
|
@@ -297,7 +345,7 @@ function ProcessingOverlay({ status, errorMessage }) {
|
|
|
297
345
|
)
|
|
298
346
|
] }) })
|
|
299
347
|
] }),
|
|
300
|
-
/* @__PURE__ */ (0,
|
|
348
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: {
|
|
301
349
|
fontSize: 14,
|
|
302
350
|
fontWeight: 600,
|
|
303
351
|
letterSpacing: "0.05em",
|
|
@@ -307,7 +355,15 @@ function ProcessingOverlay({ status, errorMessage }) {
|
|
|
307
355
|
status === "success" && "PAYMENT SUCCESSFUL",
|
|
308
356
|
status === "error" && "PAYMENT FAILED"
|
|
309
357
|
] }),
|
|
310
|
-
status === "
|
|
358
|
+
status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: {
|
|
359
|
+
fontSize: 13,
|
|
360
|
+
color: "#6b7280",
|
|
361
|
+
fontWeight: 400,
|
|
362
|
+
maxWidth: 260,
|
|
363
|
+
lineHeight: 1.4,
|
|
364
|
+
margin: 0
|
|
365
|
+
}, children: "You will be automatically redirected, do not close or navigate away from this window." }),
|
|
366
|
+
status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: {
|
|
311
367
|
fontSize: 13,
|
|
312
368
|
color: "#6b7280",
|
|
313
369
|
fontWeight: 400,
|
|
@@ -315,7 +371,7 @@ function ProcessingOverlay({ status, errorMessage }) {
|
|
|
315
371
|
lineHeight: 1.4,
|
|
316
372
|
margin: 0
|
|
317
373
|
}, children: errorMessage }),
|
|
318
|
-
/* @__PURE__ */ (0,
|
|
374
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
|
|
319
375
|
@keyframes flopay-spin { to { transform: rotate(360deg); } }
|
|
320
376
|
@keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
|
|
321
377
|
@keyframes flopay-draw { to { stroke-dashoffset: 0; } }
|
|
@@ -323,9 +379,9 @@ function ProcessingOverlay({ status, errorMessage }) {
|
|
|
323
379
|
` })
|
|
324
380
|
] }) });
|
|
325
381
|
}
|
|
326
|
-
var SplitCardForm = (0,
|
|
382
|
+
var SplitCardForm = (0, import_react6.forwardRef)(
|
|
327
383
|
function SplitCardForm2(props, ref) {
|
|
328
|
-
return /* @__PURE__ */ (0,
|
|
384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SplitCardFormInner, { ...props, innerRef: ref });
|
|
329
385
|
}
|
|
330
386
|
);
|
|
331
387
|
function PayPalButtonInner({
|
|
@@ -339,11 +395,11 @@ function PayPalButtonInner({
|
|
|
339
395
|
}) {
|
|
340
396
|
const stripe = (0, import_react_stripe_js.useStripe)();
|
|
341
397
|
const elements = (0, import_react_stripe_js.useElements)();
|
|
342
|
-
const [ready, setReady] = (0,
|
|
343
|
-
const [submitting, setSubmitting] = (0,
|
|
344
|
-
const paypalResumeAttempted = (0,
|
|
398
|
+
const [ready, setReady] = (0, import_react6.useState)(false);
|
|
399
|
+
const [submitting, setSubmitting] = (0, import_react6.useState)(false);
|
|
400
|
+
const paypalResumeAttempted = (0, import_react6.useRef)(false);
|
|
345
401
|
const baseUrl = billingApiUrl.replace(/\/+$/, "");
|
|
346
|
-
(0,
|
|
402
|
+
(0, import_react6.useEffect)(() => {
|
|
347
403
|
if (!stripe || paypalResumeAttempted.current) return;
|
|
348
404
|
const params = new URLSearchParams(window.location.search);
|
|
349
405
|
const paymentIntentId = params.get("payment_intent");
|
|
@@ -386,7 +442,7 @@ function PayPalButtonInner({
|
|
|
386
442
|
}
|
|
387
443
|
})();
|
|
388
444
|
}, [stripe, onTokenizedBody, onErrorChange]);
|
|
389
|
-
const handlePayPalConfirm = (0,
|
|
445
|
+
const handlePayPalConfirm = (0, import_react6.useCallback)(async (_event) => {
|
|
390
446
|
if (!stripe || !elements) return;
|
|
391
447
|
onButtonClick?.("paypal");
|
|
392
448
|
try {
|
|
@@ -442,8 +498,8 @@ function PayPalButtonInner({
|
|
|
442
498
|
setSubmitting(false);
|
|
443
499
|
}
|
|
444
500
|
}, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]);
|
|
445
|
-
return /* @__PURE__ */ (0,
|
|
446
|
-
/* @__PURE__ */ (0,
|
|
501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
502
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
447
503
|
import_react_stripe_js.ExpressCheckoutElement,
|
|
448
504
|
{
|
|
449
505
|
onReady: () => setReady(true),
|
|
@@ -461,7 +517,7 @@ function PayPalButtonInner({
|
|
|
461
517
|
}
|
|
462
518
|
}
|
|
463
519
|
) }),
|
|
464
|
-
submitting && /* @__PURE__ */ (0,
|
|
520
|
+
submitting && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: "processing" })
|
|
465
521
|
] });
|
|
466
522
|
}
|
|
467
523
|
function WalletButtonInner({
|
|
@@ -476,10 +532,10 @@ function WalletButtonInner({
|
|
|
476
532
|
}) {
|
|
477
533
|
const stripe = (0, import_react_stripe_js.useStripe)();
|
|
478
534
|
const elements = (0, import_react_stripe_js.useElements)();
|
|
479
|
-
const [ready, setReady] = (0,
|
|
480
|
-
const [submitting, setSubmitting] = (0,
|
|
535
|
+
const [ready, setReady] = (0, import_react6.useState)(false);
|
|
536
|
+
const [submitting, setSubmitting] = (0, import_react6.useState)(false);
|
|
481
537
|
const baseUrl = billingApiUrl.replace(/\/+$/, "");
|
|
482
|
-
const handleWalletConfirm = (0,
|
|
538
|
+
const handleWalletConfirm = (0, import_react6.useCallback)(
|
|
483
539
|
async (_event) => {
|
|
484
540
|
if (!stripe || !elements) return;
|
|
485
541
|
const walletType = _event.expressPaymentType;
|
|
@@ -535,8 +591,8 @@ function WalletButtonInner({
|
|
|
535
591
|
},
|
|
536
592
|
[stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]
|
|
537
593
|
);
|
|
538
|
-
return /* @__PURE__ */ (0,
|
|
539
|
-
/* @__PURE__ */ (0,
|
|
594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
595
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
540
596
|
import_react_stripe_js.ExpressCheckoutElement,
|
|
541
597
|
{
|
|
542
598
|
onReady: () => setReady(true),
|
|
@@ -557,7 +613,7 @@ function WalletButtonInner({
|
|
|
557
613
|
}
|
|
558
614
|
}
|
|
559
615
|
) }),
|
|
560
|
-
submitting && /* @__PURE__ */ (0,
|
|
616
|
+
submitting && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: "processing" })
|
|
561
617
|
] });
|
|
562
618
|
}
|
|
563
619
|
function SplitCardFormInner({
|
|
@@ -585,6 +641,7 @@ function SplitCardFormInner({
|
|
|
585
641
|
layout = "default",
|
|
586
642
|
buttonsTheme,
|
|
587
643
|
buttonsStyles: buttonsStylesOverride,
|
|
644
|
+
cardButtonContent,
|
|
588
645
|
onButtonClick,
|
|
589
646
|
enableAVS = false,
|
|
590
647
|
avsLayout: avsLayoutProp = "row",
|
|
@@ -599,31 +656,31 @@ function SplitCardFormInner({
|
|
|
599
656
|
const flopay = useFloPay();
|
|
600
657
|
const elements = useElements();
|
|
601
658
|
const contextBillingUrl = useBillingApiUrl();
|
|
602
|
-
const [processing, setProcessing] = (0,
|
|
603
|
-
const [error, setError] = (0,
|
|
604
|
-
const [is3DSActive, setIs3DSActive] = (0,
|
|
605
|
-
const [selectedCountry, setSelectedCountry] = (0,
|
|
606
|
-
const [zipCode, setZipCode] = (0,
|
|
607
|
-
const zipCodeRef = (0,
|
|
608
|
-
const selectedCountryRef = (0,
|
|
609
|
-
const [viewState, setViewState] = (0,
|
|
659
|
+
const [processing, setProcessing] = (0, import_react6.useState)(false);
|
|
660
|
+
const [error, setError] = (0, import_react6.useState)(null);
|
|
661
|
+
const [is3DSActive, setIs3DSActive] = (0, import_react6.useState)(false);
|
|
662
|
+
const [selectedCountry, setSelectedCountry] = (0, import_react6.useState)(countryProp ?? "US");
|
|
663
|
+
const [zipCode, setZipCode] = (0, import_react6.useState)(zipProp ?? "");
|
|
664
|
+
const zipCodeRef = (0, import_react6.useRef)(zipProp ?? "");
|
|
665
|
+
const selectedCountryRef = (0, import_react6.useRef)(countryProp ?? "US");
|
|
666
|
+
const [viewState, setViewState] = (0, import_react6.useState)("buttons");
|
|
610
667
|
const showCardForm = viewState === "expanding" || viewState === "card";
|
|
611
668
|
const TRANSITION_MS = 280;
|
|
612
|
-
const expandToCard = (0,
|
|
669
|
+
const expandToCard = (0, import_react6.useCallback)(() => {
|
|
613
670
|
setViewState("expanding");
|
|
614
671
|
setTimeout(() => setViewState("card"), TRANSITION_MS);
|
|
615
672
|
}, []);
|
|
616
|
-
const collapseToButtons = (0,
|
|
673
|
+
const collapseToButtons = (0, import_react6.useCallback)(() => {
|
|
617
674
|
setViewState("collapsing");
|
|
618
675
|
setTimeout(() => setViewState("buttons"), TRANSITION_MS);
|
|
619
676
|
}, []);
|
|
620
|
-
const [fullName, setFullName] = (0,
|
|
621
|
-
const [formReady, setFormReady] = (0,
|
|
622
|
-
const [overlayStatus, setOverlayStatus] = (0,
|
|
623
|
-
const processingRef = (0,
|
|
677
|
+
const [fullName, setFullName] = (0, import_react6.useState)("");
|
|
678
|
+
const [formReady, setFormReady] = (0, import_react6.useState)(false);
|
|
679
|
+
const [overlayStatus, setOverlayStatus] = (0, import_react6.useState)(null);
|
|
680
|
+
const processingRef = (0, import_react6.useRef)(false);
|
|
624
681
|
const resolvedBillingApiUrl = billingApiUrl || contextBillingUrl;
|
|
625
682
|
const displayError = externalError ?? error;
|
|
626
|
-
const bStyles = (0,
|
|
683
|
+
const bStyles = (0, import_react6.useMemo)(() => {
|
|
627
684
|
const base = (0, import_shared3.resolveButtonsLayoutTheme)(buttonsTheme);
|
|
628
685
|
if (!buttonsStylesOverride) return base;
|
|
629
686
|
return {
|
|
@@ -640,25 +697,25 @@ function SplitCardFormInner({
|
|
|
640
697
|
const isSubmitting = externalProcessing ?? processing;
|
|
641
698
|
const isSelfContained = !onTokenizedBody;
|
|
642
699
|
const baseUrl = resolvedBillingApiUrl.replace(/\/+$/, "");
|
|
643
|
-
const stripeInstance = (0,
|
|
700
|
+
const stripeInstance = (0, import_react6.useMemo)(() => {
|
|
644
701
|
if (!flopay) return null;
|
|
645
702
|
return flopay.getRawProvider();
|
|
646
703
|
}, [flopay]);
|
|
647
704
|
const amountInCents = totalAmount || 100;
|
|
648
|
-
const walletOptions = (0,
|
|
705
|
+
const walletOptions = (0, import_react6.useMemo)(() => ({
|
|
649
706
|
mode: "payment",
|
|
650
707
|
amount: amountInCents,
|
|
651
708
|
currency: currency.toLowerCase(),
|
|
652
709
|
paymentMethodCreation: "manual",
|
|
653
710
|
captureMethod: "manual"
|
|
654
711
|
}), [amountInCents, currency]);
|
|
655
|
-
const paypalOptions = (0,
|
|
712
|
+
const paypalOptions = (0, import_react6.useMemo)(() => ({
|
|
656
713
|
mode: "payment",
|
|
657
714
|
amount: amountInCents,
|
|
658
715
|
currency: currency.toLowerCase(),
|
|
659
716
|
captureMethod: "manual"
|
|
660
717
|
}), [amountInCents, currency]);
|
|
661
|
-
const updateError = (0,
|
|
718
|
+
const updateError = (0, import_react6.useCallback)(
|
|
662
719
|
(err) => {
|
|
663
720
|
setError(err);
|
|
664
721
|
onErrorChange?.(err);
|
|
@@ -666,13 +723,13 @@ function SplitCardFormInner({
|
|
|
666
723
|
[onErrorChange]
|
|
667
724
|
);
|
|
668
725
|
const showWallets = showApplePay || showGooglePay;
|
|
669
|
-
const handleNameChange = (0,
|
|
726
|
+
const handleNameChange = (0, import_react6.useCallback)((value) => {
|
|
670
727
|
setFullName(value);
|
|
671
728
|
const parts = value.trim().split(/\s+/);
|
|
672
729
|
onFirstNameChange?.(parts[0] ?? "");
|
|
673
730
|
onLastNameChange?.(parts.length > 1 ? parts.slice(1).join(" ") : "");
|
|
674
731
|
}, [onFirstNameChange, onLastNameChange]);
|
|
675
|
-
const processPaymentInternal = (0,
|
|
732
|
+
const processPaymentInternal = (0, import_react6.useCallback)(
|
|
676
733
|
async (tokenizedBody) => {
|
|
677
734
|
if (processingRef.current) return;
|
|
678
735
|
processingRef.current = true;
|
|
@@ -791,7 +848,7 @@ function SplitCardFormInner({
|
|
|
791
848
|
},
|
|
792
849
|
[baseUrl, sessionId, userId, email, firstName, lastName, fullName, chv, flopay, onComplete, onError, updateError]
|
|
793
850
|
);
|
|
794
|
-
const dispatchTokenizedBody = (0,
|
|
851
|
+
const dispatchTokenizedBody = (0, import_react6.useCallback)(
|
|
795
852
|
(tokenizedBody) => {
|
|
796
853
|
if (onTokenizedBody) {
|
|
797
854
|
onTokenizedBody(tokenizedBody);
|
|
@@ -801,7 +858,7 @@ function SplitCardFormInner({
|
|
|
801
858
|
},
|
|
802
859
|
[onTokenizedBody, processPaymentInternal]
|
|
803
860
|
);
|
|
804
|
-
(0,
|
|
861
|
+
(0, import_react6.useImperativeHandle)(innerRef, () => ({
|
|
805
862
|
async handleNextAction(secret) {
|
|
806
863
|
if (!flopay) return;
|
|
807
864
|
setIs3DSActive(true);
|
|
@@ -827,7 +884,7 @@ function SplitCardFormInner({
|
|
|
827
884
|
}
|
|
828
885
|
}
|
|
829
886
|
}), [flopay, dispatchTokenizedBody, onError, updateError]);
|
|
830
|
-
(0,
|
|
887
|
+
(0, import_react6.useEffect)(() => {
|
|
831
888
|
if (typeof window === "undefined") return;
|
|
832
889
|
const stored = localStorage.getItem(WALLET_RESUME_KEY);
|
|
833
890
|
if (!stored) return;
|
|
@@ -845,7 +902,7 @@ function SplitCardFormInner({
|
|
|
845
902
|
localStorage.removeItem(WALLET_RESUME_KEY);
|
|
846
903
|
}
|
|
847
904
|
}, [sessionId, dispatchTokenizedBody]);
|
|
848
|
-
const handleSubmit = (0,
|
|
905
|
+
const handleSubmit = (0, import_react6.useCallback)(
|
|
849
906
|
async (e) => {
|
|
850
907
|
e.preventDefault();
|
|
851
908
|
if (!flopay || !elements || isSubmitting || processingRef.current) return;
|
|
@@ -925,7 +982,7 @@ function SplitCardFormInner({
|
|
|
925
982
|
);
|
|
926
983
|
const isReady = flopay !== null && elements !== null;
|
|
927
984
|
if (!isReady) {
|
|
928
|
-
return /* @__PURE__ */ (0,
|
|
985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
|
|
929
986
|
}
|
|
930
987
|
const isButtons = layout === "buttons";
|
|
931
988
|
const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
|
|
@@ -941,19 +998,19 @@ function SplitCardFormInner({
|
|
|
941
998
|
invalid: { color: "#ef4444" }
|
|
942
999
|
}
|
|
943
1000
|
} : {};
|
|
944
|
-
const cardFormBlock = /* @__PURE__ */ (0,
|
|
1001
|
+
const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
|
|
945
1002
|
backgroundColor: cardBg,
|
|
946
1003
|
borderRadius: "8px",
|
|
947
1004
|
padding: isButtons ? "0" : "1rem",
|
|
948
1005
|
...isButtons ? bStyles.cardFormContainer : {},
|
|
949
1006
|
...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {}
|
|
950
1007
|
}, children: [
|
|
951
|
-
isButtons && showCardForm && /* @__PURE__ */ (0,
|
|
1008
|
+
isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
|
|
952
1009
|
display: "flex",
|
|
953
1010
|
alignItems: "center",
|
|
954
1011
|
padding: "0.75rem 0 0.625rem"
|
|
955
1012
|
}, children: [
|
|
956
|
-
/* @__PURE__ */ (0,
|
|
1013
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
957
1014
|
"button",
|
|
958
1015
|
{
|
|
959
1016
|
type: "button",
|
|
@@ -975,7 +1032,7 @@ function SplitCardFormInner({
|
|
|
975
1032
|
},
|
|
976
1033
|
"aria-label": "Back to payment methods",
|
|
977
1034
|
children: [
|
|
978
|
-
/* @__PURE__ */ (0,
|
|
1035
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
|
|
979
1036
|
display: "inline-flex",
|
|
980
1037
|
alignItems: "center",
|
|
981
1038
|
justifyContent: "center",
|
|
@@ -985,12 +1042,12 @@ function SplitCardFormInner({
|
|
|
985
1042
|
backgroundColor: "#f3f4f6",
|
|
986
1043
|
transition: "background-color 0.15s",
|
|
987
1044
|
...bStyles.backButtonIcon
|
|
988
|
-
}, children: /* @__PURE__ */ (0,
|
|
1045
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
|
|
989
1046
|
"Go back"
|
|
990
1047
|
]
|
|
991
1048
|
}
|
|
992
1049
|
),
|
|
993
|
-
/* @__PURE__ */ (0,
|
|
1050
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
994
1051
|
flex: 1,
|
|
995
1052
|
textAlign: "center",
|
|
996
1053
|
fontWeight: 600,
|
|
@@ -1000,16 +1057,16 @@ function SplitCardFormInner({
|
|
|
1000
1057
|
...bStyles.title
|
|
1001
1058
|
}, children: "Secure card checkout" })
|
|
1002
1059
|
] }),
|
|
1003
|
-
!isButtons && /* @__PURE__ */ (0,
|
|
1004
|
-
/* @__PURE__ */ (0,
|
|
1060
|
+
!isButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
1005
1062
|
backgroundColor: cardInputBg,
|
|
1006
1063
|
border: `1px solid ${resolvedBorder}`,
|
|
1007
1064
|
borderTopLeftRadius: "8px",
|
|
1008
1065
|
borderTopRightRadius: "8px",
|
|
1009
1066
|
padding: "10px"
|
|
1010
|
-
}, children: /* @__PURE__ */ (0,
|
|
1011
|
-
/* @__PURE__ */ (0,
|
|
1012
|
-
/* @__PURE__ */ (0,
|
|
1067
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
|
|
1068
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex" }, children: [
|
|
1069
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
1013
1070
|
flex: 1,
|
|
1014
1071
|
backgroundColor: cardInputBg,
|
|
1015
1072
|
border: `1px solid ${resolvedBorder}`,
|
|
@@ -1017,23 +1074,23 @@ function SplitCardFormInner({
|
|
|
1017
1074
|
borderRight: "none",
|
|
1018
1075
|
borderBottomLeftRadius: "8px",
|
|
1019
1076
|
padding: "10px"
|
|
1020
|
-
}, children: /* @__PURE__ */ (0,
|
|
1021
|
-
/* @__PURE__ */ (0,
|
|
1077
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardExpiryElement, { options: stripeElementStyle }) }),
|
|
1078
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
1022
1079
|
flex: 1,
|
|
1023
1080
|
backgroundColor: cardInputBg,
|
|
1024
1081
|
border: `1px solid ${resolvedBorder}`,
|
|
1025
1082
|
borderTop: "none",
|
|
1026
1083
|
borderBottomRightRadius: "8px",
|
|
1027
1084
|
padding: "10px"
|
|
1028
|
-
}, children: /* @__PURE__ */ (0,
|
|
1085
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardCvcElement, { options: stripeElementStyle }) })
|
|
1029
1086
|
] }),
|
|
1030
|
-
/* @__PURE__ */ (0,
|
|
1087
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
1031
1088
|
backgroundColor: cardInputBg,
|
|
1032
1089
|
border: `1px solid ${resolvedBorder}`,
|
|
1033
1090
|
borderRadius: "8px",
|
|
1034
1091
|
marginTop: "0.5rem",
|
|
1035
1092
|
padding: "10px"
|
|
1036
|
-
}, children: /* @__PURE__ */ (0,
|
|
1093
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1037
1094
|
"input",
|
|
1038
1095
|
{
|
|
1039
1096
|
placeholder: "Full Name on Card",
|
|
@@ -1054,20 +1111,20 @@ function SplitCardFormInner({
|
|
|
1054
1111
|
}
|
|
1055
1112
|
}
|
|
1056
1113
|
) }),
|
|
1057
|
-
enableAVS && /* @__PURE__ */ (0,
|
|
1114
|
+
enableAVS && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
|
|
1058
1115
|
display: "flex",
|
|
1059
1116
|
flexDirection: avsLayoutProp === "column" ? "column" : "row",
|
|
1060
1117
|
gap: avsLayoutProp === "column" ? "0.5rem" : "0",
|
|
1061
1118
|
marginTop: "0.5rem"
|
|
1062
1119
|
}, children: [
|
|
1063
|
-
/* @__PURE__ */ (0,
|
|
1120
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
1064
1121
|
flex: avsLayoutProp === "row" ? 1 : void 0,
|
|
1065
1122
|
backgroundColor: cardInputBg,
|
|
1066
1123
|
border: `1px solid ${resolvedBorder}`,
|
|
1067
1124
|
padding: "10px",
|
|
1068
1125
|
...avsLayoutProp === "row" ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
|
|
1069
1126
|
...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
|
|
1070
|
-
}, children: /* @__PURE__ */ (0,
|
|
1127
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1071
1128
|
"select",
|
|
1072
1129
|
{
|
|
1073
1130
|
value: selectedCountry,
|
|
@@ -1090,21 +1147,21 @@ function SplitCardFormInner({
|
|
|
1090
1147
|
cursor: "pointer",
|
|
1091
1148
|
...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
|
|
1092
1149
|
},
|
|
1093
|
-
children: import_shared3.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0,
|
|
1150
|
+
children: import_shared3.COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: c.code, children: [
|
|
1094
1151
|
c.flag,
|
|
1095
1152
|
" ",
|
|
1096
1153
|
c.name
|
|
1097
1154
|
] }, c.code))
|
|
1098
1155
|
}
|
|
1099
1156
|
) }),
|
|
1100
|
-
/* @__PURE__ */ (0,
|
|
1157
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
1101
1158
|
flex: avsLayoutProp === "row" ? 1 : void 0,
|
|
1102
1159
|
backgroundColor: cardInputBg,
|
|
1103
1160
|
border: `1px solid ${resolvedBorder}`,
|
|
1104
1161
|
padding: "10px",
|
|
1105
1162
|
...avsLayoutProp === "row" ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
|
|
1106
1163
|
...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
|
|
1107
|
-
}, children: /* @__PURE__ */ (0,
|
|
1164
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1108
1165
|
"input",
|
|
1109
1166
|
{
|
|
1110
1167
|
placeholder: (0, import_shared3.getPostalCodeLabel)(selectedCountry),
|
|
@@ -1131,7 +1188,7 @@ function SplitCardFormInner({
|
|
|
1131
1188
|
}
|
|
1132
1189
|
) })
|
|
1133
1190
|
] }),
|
|
1134
|
-
displayError && /* @__PURE__ */ (0,
|
|
1191
|
+
displayError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
|
|
1135
1192
|
margin: "0.75rem 0",
|
|
1136
1193
|
padding: "0.625rem 0.875rem",
|
|
1137
1194
|
background: "#FEF2F2",
|
|
@@ -1145,10 +1202,10 @@ function SplitCardFormInner({
|
|
|
1145
1202
|
gap: "0.5rem",
|
|
1146
1203
|
...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
|
|
1147
1204
|
}, children: [
|
|
1148
|
-
/* @__PURE__ */ (0,
|
|
1205
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.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" }) }),
|
|
1149
1206
|
displayError
|
|
1150
1207
|
] }),
|
|
1151
|
-
children ?? /* @__PURE__ */ (0,
|
|
1208
|
+
children ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1152
1209
|
"button",
|
|
1153
1210
|
{
|
|
1154
1211
|
type: "submit",
|
|
@@ -1171,7 +1228,7 @@ function SplitCardFormInner({
|
|
|
1171
1228
|
children: isSubmitting ? "PROCESSING..." : submitLabel
|
|
1172
1229
|
}
|
|
1173
1230
|
),
|
|
1174
|
-
!isButtons && /* @__PURE__ */ (0,
|
|
1231
|
+
!isButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
1175
1232
|
backgroundColor: "#EFF9F0",
|
|
1176
1233
|
borderRadius: "8px",
|
|
1177
1234
|
padding: "0.75rem",
|
|
@@ -1187,11 +1244,11 @@ function SplitCardFormInner({
|
|
|
1187
1244
|
const isCardView = viewState === "expanding" || viewState === "card" || viewState === "collapsing";
|
|
1188
1245
|
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;
|
|
1189
1246
|
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;
|
|
1190
|
-
return /* @__PURE__ */ (0,
|
|
1191
|
-
/* @__PURE__ */ (0,
|
|
1192
|
-
overlayStatus && /* @__PURE__ */ (0,
|
|
1193
|
-
/* @__PURE__ */ (0,
|
|
1194
|
-
/* @__PURE__ */ (0,
|
|
1247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
|
|
1248
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayKeyframes, {}),
|
|
1249
|
+
overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
|
|
1250
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "grid" }, children: [
|
|
1251
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
|
|
1195
1252
|
gridArea: "1 / 1",
|
|
1196
1253
|
display: "flex",
|
|
1197
1254
|
flexDirection: "column",
|
|
@@ -1200,7 +1257,7 @@ function SplitCardFormInner({
|
|
|
1200
1257
|
...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
|
|
1201
1258
|
...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
|
|
1202
1259
|
}, children: [
|
|
1203
|
-
showPayPal && stripeInstance ? /* @__PURE__ */ (0,
|
|
1260
|
+
showPayPal && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1204
1261
|
PayPalButtonInner,
|
|
1205
1262
|
{
|
|
1206
1263
|
sessionId,
|
|
@@ -1211,8 +1268,8 @@ function SplitCardFormInner({
|
|
|
1211
1268
|
isProcessing: isSubmitting,
|
|
1212
1269
|
onButtonClick
|
|
1213
1270
|
}
|
|
1214
|
-
) }) : showPayPal ? /* @__PURE__ */ (0,
|
|
1215
|
-
showWallets && stripeInstance ? /* @__PURE__ */ (0,
|
|
1271
|
+
) }) : showPayPal ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
|
|
1272
|
+
showWallets && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1216
1273
|
WalletButtonInner,
|
|
1217
1274
|
{
|
|
1218
1275
|
sessionId,
|
|
@@ -1224,8 +1281,8 @@ function SplitCardFormInner({
|
|
|
1224
1281
|
onErrorChange: updateError,
|
|
1225
1282
|
onButtonClick
|
|
1226
1283
|
}
|
|
1227
|
-
) }) : showWallets ? /* @__PURE__ */ (0,
|
|
1228
|
-
/* @__PURE__ */ (0,
|
|
1284
|
+
) }) : showWallets ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
|
|
1285
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1229
1286
|
"button",
|
|
1230
1287
|
{
|
|
1231
1288
|
type: "button",
|
|
@@ -1258,17 +1315,10 @@ function SplitCardFormInner({
|
|
|
1258
1315
|
onMouseUp: (e) => {
|
|
1259
1316
|
e.currentTarget.style.transform = "scale(1)";
|
|
1260
1317
|
},
|
|
1261
|
-
children:
|
|
1262
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
1263
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
|
|
1264
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
|
|
1265
|
-
] }),
|
|
1266
|
-
"Credit / Debit Card",
|
|
1267
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { position: "absolute", right: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 18l6-6-6-6" }) })
|
|
1268
|
-
]
|
|
1318
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardButtonContentSlot, { content: cardButtonContent })
|
|
1269
1319
|
}
|
|
1270
1320
|
),
|
|
1271
|
-
displayError && viewState === "buttons" && /* @__PURE__ */ (0,
|
|
1321
|
+
displayError && viewState === "buttons" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", "data-testid": "flopay-error", style: {
|
|
1272
1322
|
margin: "0.25rem 0",
|
|
1273
1323
|
padding: "0.625rem 0.875rem",
|
|
1274
1324
|
background: "#FEF2F2",
|
|
@@ -1282,11 +1332,11 @@ function SplitCardFormInner({
|
|
|
1282
1332
|
gap: "0.5rem",
|
|
1283
1333
|
...bStyles.errorBanner ? bStyles.errorBanner : {}
|
|
1284
1334
|
}, children: [
|
|
1285
|
-
/* @__PURE__ */ (0,
|
|
1335
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.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" }) }),
|
|
1286
1336
|
displayError
|
|
1287
1337
|
] })
|
|
1288
1338
|
] }),
|
|
1289
|
-
isCardView && /* @__PURE__ */ (0,
|
|
1339
|
+
isCardView && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
|
|
1290
1340
|
gridArea: "1 / 1",
|
|
1291
1341
|
...cardAnim ? { animation: cardAnim } : {},
|
|
1292
1342
|
...viewState === "collapsing" ? { pointerEvents: "none" } : {}
|
|
@@ -1294,10 +1344,10 @@ function SplitCardFormInner({
|
|
|
1294
1344
|
] })
|
|
1295
1345
|
] });
|
|
1296
1346
|
}
|
|
1297
|
-
return /* @__PURE__ */ (0,
|
|
1298
|
-
/* @__PURE__ */ (0,
|
|
1299
|
-
overlayStatus && /* @__PURE__ */ (0,
|
|
1300
|
-
showWallets && stripeInstance && /* @__PURE__ */ (0,
|
|
1347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
|
|
1348
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloPayKeyframes, {}),
|
|
1349
|
+
overlayStatus && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
|
|
1350
|
+
showWallets && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1301
1351
|
WalletButtonInner,
|
|
1302
1352
|
{
|
|
1303
1353
|
sessionId,
|
|
@@ -1309,7 +1359,7 @@ function SplitCardFormInner({
|
|
|
1309
1359
|
onErrorChange: updateError
|
|
1310
1360
|
}
|
|
1311
1361
|
) }),
|
|
1312
|
-
showPayPal && stripeInstance && /* @__PURE__ */ (0,
|
|
1362
|
+
showPayPal && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1313
1363
|
PayPalButtonInner,
|
|
1314
1364
|
{
|
|
1315
1365
|
sessionId,
|
|
@@ -1320,7 +1370,7 @@ function SplitCardFormInner({
|
|
|
1320
1370
|
isProcessing: isSubmitting
|
|
1321
1371
|
}
|
|
1322
1372
|
) }),
|
|
1323
|
-
(showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ (0,
|
|
1373
|
+
(showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
|
|
1324
1374
|
display: "flex",
|
|
1325
1375
|
alignItems: "center",
|
|
1326
1376
|
gap: "0.75rem",
|
|
@@ -1328,16 +1378,16 @@ function SplitCardFormInner({
|
|
|
1328
1378
|
color: "#999",
|
|
1329
1379
|
fontSize: "0.85rem"
|
|
1330
1380
|
}, children: [
|
|
1331
|
-
/* @__PURE__ */ (0,
|
|
1332
|
-
/* @__PURE__ */ (0,
|
|
1333
|
-
/* @__PURE__ */ (0,
|
|
1381
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
|
|
1382
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "or pay with card" }),
|
|
1383
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
|
|
1334
1384
|
] }),
|
|
1335
1385
|
cardFormBlock
|
|
1336
1386
|
] });
|
|
1337
1387
|
}
|
|
1338
1388
|
|
|
1339
1389
|
// src/flopay-checkout.tsx
|
|
1340
|
-
var
|
|
1390
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
1341
1391
|
function FloPayCheckout({
|
|
1342
1392
|
sessionId: sessionIdProp,
|
|
1343
1393
|
createSession: createSessionParams,
|
|
@@ -1355,6 +1405,7 @@ function FloPayCheckout({
|
|
|
1355
1405
|
layout,
|
|
1356
1406
|
buttonsTheme,
|
|
1357
1407
|
buttonsStyles,
|
|
1408
|
+
cardButtonContent,
|
|
1358
1409
|
onButtonClick,
|
|
1359
1410
|
enableAVS,
|
|
1360
1411
|
avsLayout,
|
|
@@ -1367,24 +1418,24 @@ function FloPayCheckout({
|
|
|
1367
1418
|
onSessionCompleted
|
|
1368
1419
|
}) {
|
|
1369
1420
|
const resolvedBillingUrl = (0, import_shared5.resolveBillingApiUrl)(billingApiUrl);
|
|
1370
|
-
const [unified, setUnified] = (0,
|
|
1371
|
-
const [flopay, setFloPay] = (0,
|
|
1372
|
-
const flopayRef = (0,
|
|
1373
|
-
const [session, setSession] = (0,
|
|
1374
|
-
const [resolvedSessionId, setResolvedSessionId] = (0,
|
|
1375
|
-
const [isLoading, setIsLoading] = (0,
|
|
1376
|
-
const [loadError, setLoadError] = (0,
|
|
1377
|
-
const [currentMode, setCurrentMode] = (0,
|
|
1378
|
-
const [confirmProcessing, setConfirmProcessing] = (0,
|
|
1379
|
-
const [modeError, setModeError] = (0,
|
|
1380
|
-
const autoCheckoutAttempted = (0,
|
|
1381
|
-
const onCompleteRef = (0,
|
|
1421
|
+
const [unified, setUnified] = (0, import_react7.useState)(null);
|
|
1422
|
+
const [flopay, setFloPay] = (0, import_react7.useState)(null);
|
|
1423
|
+
const flopayRef = (0, import_react7.useRef)(null);
|
|
1424
|
+
const [session, setSession] = (0, import_react7.useState)(null);
|
|
1425
|
+
const [resolvedSessionId, setResolvedSessionId] = (0, import_react7.useState)(sessionIdProp ?? "");
|
|
1426
|
+
const [isLoading, setIsLoading] = (0, import_react7.useState)(true);
|
|
1427
|
+
const [loadError, setLoadError] = (0, import_react7.useState)(null);
|
|
1428
|
+
const [currentMode, setCurrentMode] = (0, import_react7.useState)("full");
|
|
1429
|
+
const [confirmProcessing, setConfirmProcessing] = (0, import_react7.useState)(false);
|
|
1430
|
+
const [modeError, setModeError] = (0, import_react7.useState)(null);
|
|
1431
|
+
const autoCheckoutAttempted = (0, import_react7.useRef)(false);
|
|
1432
|
+
const onCompleteRef = (0, import_react7.useRef)(onComplete);
|
|
1382
1433
|
onCompleteRef.current = onComplete;
|
|
1383
|
-
const onErrorRef = (0,
|
|
1434
|
+
const onErrorRef = (0, import_react7.useRef)(onError);
|
|
1384
1435
|
onErrorRef.current = onError;
|
|
1385
|
-
const onSessionCompletedRef = (0,
|
|
1436
|
+
const onSessionCompletedRef = (0, import_react7.useRef)(onSessionCompleted);
|
|
1386
1437
|
onSessionCompletedRef.current = onSessionCompleted;
|
|
1387
|
-
const processPaymentForMode = (0,
|
|
1438
|
+
const processPaymentForMode = (0, import_react7.useCallback)(
|
|
1388
1439
|
async (sess) => {
|
|
1389
1440
|
const baseUrl = resolvedBillingUrl.replace(/\/+$/, "");
|
|
1390
1441
|
const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
|
|
@@ -1430,7 +1481,7 @@ function FloPayCheckout({
|
|
|
1430
1481
|
},
|
|
1431
1482
|
[resolvedBillingUrl, resolvedSessionId]
|
|
1432
1483
|
);
|
|
1433
|
-
const handleRedirectResult = (0,
|
|
1484
|
+
const handleRedirectResult = (0, import_react7.useCallback)(
|
|
1434
1485
|
async (redirectResult, sess, options) => {
|
|
1435
1486
|
const stripe = flopayRef.current?.getRawProvider();
|
|
1436
1487
|
if (!stripe) return false;
|
|
@@ -1475,8 +1526,8 @@ function FloPayCheckout({
|
|
|
1475
1526
|
},
|
|
1476
1527
|
[resolvedBillingUrl, resolvedSessionId]
|
|
1477
1528
|
);
|
|
1478
|
-
const inflightRef = (0,
|
|
1479
|
-
const initializedHashRef = (0,
|
|
1529
|
+
const inflightRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
|
|
1530
|
+
const initializedHashRef = (0, import_react7.useRef)(null);
|
|
1480
1531
|
function hashCreateParams(params) {
|
|
1481
1532
|
const key = JSON.stringify({
|
|
1482
1533
|
c: params?.clientId,
|
|
@@ -1491,7 +1542,7 @@ function FloPayCheckout({
|
|
|
1491
1542
|
}
|
|
1492
1543
|
return `flopay_session_${Math.abs(h).toString(36)}`;
|
|
1493
1544
|
}
|
|
1494
|
-
const createSessionHash = (0,
|
|
1545
|
+
const createSessionHash = (0, import_react7.useMemo)(
|
|
1495
1546
|
() => createSessionParams ? hashCreateParams(createSessionParams) : "",
|
|
1496
1547
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1497
1548
|
[
|
|
@@ -1502,9 +1553,9 @@ function FloPayCheckout({
|
|
|
1502
1553
|
JSON.stringify(createSessionParams?.subscriptions)
|
|
1503
1554
|
]
|
|
1504
1555
|
);
|
|
1505
|
-
const createSessionParamsRef = (0,
|
|
1556
|
+
const createSessionParamsRef = (0, import_react7.useRef)(createSessionParams);
|
|
1506
1557
|
createSessionParamsRef.current = createSessionParams;
|
|
1507
|
-
(0,
|
|
1558
|
+
(0, import_react7.useEffect)(() => {
|
|
1508
1559
|
let cancelled = false;
|
|
1509
1560
|
setLoadError(null);
|
|
1510
1561
|
if (createSessionHash) {
|
|
@@ -1709,7 +1760,7 @@ function FloPayCheckout({
|
|
|
1709
1760
|
cancelled = true;
|
|
1710
1761
|
};
|
|
1711
1762
|
}, [resolvedSessionId, createSessionHash, resolvedBillingUrl, fallbackPublishableKey, locale, checkoutModeProp]);
|
|
1712
|
-
const handleConfirmCheckout = (0,
|
|
1763
|
+
const handleConfirmCheckout = (0, import_react7.useCallback)(async () => {
|
|
1713
1764
|
if (confirmProcessing || !session) return;
|
|
1714
1765
|
setConfirmProcessing(true);
|
|
1715
1766
|
setModeError(null);
|
|
@@ -1734,7 +1785,7 @@ function FloPayCheckout({
|
|
|
1734
1785
|
setConfirmProcessing(false);
|
|
1735
1786
|
}
|
|
1736
1787
|
}, [confirmProcessing, session, processPaymentForMode, handleRedirectResult, onError]);
|
|
1737
|
-
const providerOptions = (0,
|
|
1788
|
+
const providerOptions = (0, import_react7.useMemo)(() => {
|
|
1738
1789
|
if (!unified || !session) return void 0;
|
|
1739
1790
|
const opts = {
|
|
1740
1791
|
appearance,
|
|
@@ -1750,7 +1801,7 @@ function FloPayCheckout({
|
|
|
1750
1801
|
}
|
|
1751
1802
|
return opts;
|
|
1752
1803
|
}, [unified, session, appearance, resolvedBillingUrl]);
|
|
1753
|
-
const checkoutValue = (0,
|
|
1804
|
+
const checkoutValue = (0, import_react7.useMemo)(
|
|
1754
1805
|
() => ({
|
|
1755
1806
|
session,
|
|
1756
1807
|
loading: isLoading,
|
|
@@ -1760,23 +1811,23 @@ function FloPayCheckout({
|
|
|
1760
1811
|
[session, isLoading, loadError, currentMode]
|
|
1761
1812
|
);
|
|
1762
1813
|
if (isLoading) {
|
|
1763
|
-
if (loadingNode) return /* @__PURE__ */ (0,
|
|
1814
|
+
if (loadingNode) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: loadingNode });
|
|
1764
1815
|
if (layout === "buttons") {
|
|
1765
|
-
const skeletonBar = (h) => /* @__PURE__ */ (0,
|
|
1816
|
+
const skeletonBar = (h) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
|
|
1766
1817
|
height: h,
|
|
1767
1818
|
borderRadius: 8,
|
|
1768
1819
|
background: "#e5e7eb",
|
|
1769
1820
|
animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
|
|
1770
1821
|
} });
|
|
1771
|
-
return /* @__PURE__ */ (0,
|
|
1822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
1772
1823
|
showPayPal && skeletonBar(44),
|
|
1773
1824
|
(showApplePay || showGooglePay) && skeletonBar(44),
|
|
1774
1825
|
skeletonBar(48),
|
|
1775
|
-
/* @__PURE__ */ (0,
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
|
|
1776
1827
|
] });
|
|
1777
1828
|
}
|
|
1778
|
-
return /* @__PURE__ */ (0,
|
|
1779
|
-
/* @__PURE__ */ (0,
|
|
1829
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
|
|
1830
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
|
|
1780
1831
|
width: 24,
|
|
1781
1832
|
height: 24,
|
|
1782
1833
|
border: "2px solid #e5e7eb",
|
|
@@ -1784,12 +1835,12 @@ function FloPayCheckout({
|
|
|
1784
1835
|
borderRadius: "50%",
|
|
1785
1836
|
animation: "spin 0.6s linear infinite"
|
|
1786
1837
|
} }),
|
|
1787
|
-
/* @__PURE__ */ (0,
|
|
1838
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
|
|
1788
1839
|
] });
|
|
1789
1840
|
}
|
|
1790
1841
|
if (loadError) {
|
|
1791
|
-
if (errorNode) return /* @__PURE__ */ (0,
|
|
1792
|
-
return /* @__PURE__ */ (0,
|
|
1842
|
+
if (errorNode) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: errorNode(loadError) });
|
|
1843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1793
1844
|
"div",
|
|
1794
1845
|
{
|
|
1795
1846
|
style: {
|
|
@@ -1803,7 +1854,7 @@ function FloPayCheckout({
|
|
|
1803
1854
|
);
|
|
1804
1855
|
}
|
|
1805
1856
|
if ((!flopay || !providerOptions) && createSessionParams && layout === "buttons") {
|
|
1806
|
-
return /* @__PURE__ */ (0,
|
|
1857
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1807
1858
|
InterimButtonsView,
|
|
1808
1859
|
{
|
|
1809
1860
|
onButtonClick,
|
|
@@ -1811,14 +1862,15 @@ function FloPayCheckout({
|
|
|
1811
1862
|
showApplePay,
|
|
1812
1863
|
showGooglePay,
|
|
1813
1864
|
buttonsTheme,
|
|
1814
|
-
buttonsStyles
|
|
1865
|
+
buttonsStyles,
|
|
1866
|
+
cardButtonContent
|
|
1815
1867
|
}
|
|
1816
1868
|
) });
|
|
1817
1869
|
}
|
|
1818
|
-
if (!flopay || !providerOptions) return /* @__PURE__ */ (0,
|
|
1870
|
+
if (!flopay || !providerOptions) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
|
|
1819
1871
|
if (currentMode === "confirm") {
|
|
1820
|
-
return /* @__PURE__ */ (0,
|
|
1821
|
-
modeError && /* @__PURE__ */ (0,
|
|
1872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
|
|
1873
|
+
modeError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1822
1874
|
"div",
|
|
1823
1875
|
{
|
|
1824
1876
|
style: {
|
|
@@ -1833,7 +1885,7 @@ function FloPayCheckout({
|
|
|
1833
1885
|
renderConfirmButton ? renderConfirmButton({
|
|
1834
1886
|
onConfirm: handleConfirmCheckout,
|
|
1835
1887
|
isProcessing: confirmProcessing
|
|
1836
|
-
}) : /* @__PURE__ */ (0,
|
|
1888
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1837
1889
|
"button",
|
|
1838
1890
|
{
|
|
1839
1891
|
type: "button",
|
|
@@ -1856,8 +1908,8 @@ function FloPayCheckout({
|
|
|
1856
1908
|
)
|
|
1857
1909
|
] }) }) });
|
|
1858
1910
|
}
|
|
1859
|
-
return /* @__PURE__ */ (0,
|
|
1860
|
-
modeError && /* @__PURE__ */ (0,
|
|
1911
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FloPayProvider, { flopay, options: providerOptions, children: [
|
|
1912
|
+
modeError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1861
1913
|
"div",
|
|
1862
1914
|
{
|
|
1863
1915
|
style: {
|
|
@@ -1872,7 +1924,7 @@ function FloPayCheckout({
|
|
|
1872
1924
|
children: modeError
|
|
1873
1925
|
}
|
|
1874
1926
|
),
|
|
1875
|
-
children ? /* @__PURE__ */ (0,
|
|
1927
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1876
1928
|
SessionInjector,
|
|
1877
1929
|
{
|
|
1878
1930
|
sessionId: resolvedSessionId,
|
|
@@ -1880,7 +1932,7 @@ function FloPayCheckout({
|
|
|
1880
1932
|
session,
|
|
1881
1933
|
children
|
|
1882
1934
|
}
|
|
1883
|
-
) : /* @__PURE__ */ (0,
|
|
1935
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1884
1936
|
SplitCardForm,
|
|
1885
1937
|
{
|
|
1886
1938
|
sessionId: resolvedSessionId,
|
|
@@ -1898,6 +1950,7 @@ function FloPayCheckout({
|
|
|
1898
1950
|
layout,
|
|
1899
1951
|
buttonsTheme,
|
|
1900
1952
|
buttonsStyles,
|
|
1953
|
+
cardButtonContent,
|
|
1901
1954
|
onButtonClick,
|
|
1902
1955
|
enableAVS,
|
|
1903
1956
|
avsLayout,
|
|
@@ -1915,8 +1968,8 @@ function SessionInjector({
|
|
|
1915
1968
|
session,
|
|
1916
1969
|
children
|
|
1917
1970
|
}) {
|
|
1918
|
-
return /* @__PURE__ */ (0,
|
|
1919
|
-
if (!
|
|
1971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: import_react7.default.Children.map(children, (child) => {
|
|
1972
|
+
if (!import_react7.default.isValidElement(child)) return child;
|
|
1920
1973
|
const existing = child.props;
|
|
1921
1974
|
const injected = {};
|
|
1922
1975
|
if (!existing.sessionId) injected.sessionId = sessionId;
|
|
@@ -1930,7 +1983,7 @@ function SessionInjector({
|
|
|
1930
1983
|
injected.lastName = session.customer.lastName;
|
|
1931
1984
|
}
|
|
1932
1985
|
if (Object.keys(injected).length === 0) return child;
|
|
1933
|
-
return
|
|
1986
|
+
return import_react7.default.cloneElement(child, injected);
|
|
1934
1987
|
}) });
|
|
1935
1988
|
}
|
|
1936
1989
|
function InterimButtonsView({
|
|
@@ -1939,10 +1992,11 @@ function InterimButtonsView({
|
|
|
1939
1992
|
showApplePay,
|
|
1940
1993
|
showGooglePay,
|
|
1941
1994
|
buttonsTheme,
|
|
1942
|
-
buttonsStyles: stylesOverride
|
|
1995
|
+
buttonsStyles: stylesOverride,
|
|
1996
|
+
cardButtonContent
|
|
1943
1997
|
}) {
|
|
1944
|
-
const [showCardForm, setShowCardForm] = (0,
|
|
1945
|
-
const bStyles = (0,
|
|
1998
|
+
const [showCardForm, setShowCardForm] = (0, import_react7.useState)(false);
|
|
1999
|
+
const bStyles = (0, import_react7.useMemo)(() => {
|
|
1946
2000
|
const base = (0, import_shared5.resolveButtonsLayoutTheme)(buttonsTheme);
|
|
1947
2001
|
if (!stylesOverride) return base;
|
|
1948
2002
|
return {
|
|
@@ -1954,7 +2008,7 @@ function InterimButtonsView({
|
|
|
1954
2008
|
title: { ...base.title, ...stylesOverride.title }
|
|
1955
2009
|
};
|
|
1956
2010
|
}, [buttonsTheme, stylesOverride]);
|
|
1957
|
-
const skeleton = (h) => /* @__PURE__ */ (0,
|
|
2011
|
+
const skeleton = (h) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
|
|
1958
2012
|
height: h,
|
|
1959
2013
|
borderRadius: 8,
|
|
1960
2014
|
background: "#e5e7eb",
|
|
@@ -1963,15 +2017,15 @@ function InterimButtonsView({
|
|
|
1963
2017
|
if (showCardForm) {
|
|
1964
2018
|
const inputBorder = bStyles.cardInputBorder ?? "#e5e7eb";
|
|
1965
2019
|
const inputBg = bStyles.cardInputBackground ?? "white";
|
|
1966
|
-
return /* @__PURE__ */ (0,
|
|
2020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
|
|
1967
2021
|
backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
|
|
1968
2022
|
borderRadius: "8px",
|
|
1969
2023
|
animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
|
|
1970
2024
|
overflow: "hidden",
|
|
1971
2025
|
...bStyles.cardFormContainer
|
|
1972
2026
|
}, children: [
|
|
1973
|
-
/* @__PURE__ */ (0,
|
|
1974
|
-
/* @__PURE__ */ (0,
|
|
2027
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
|
|
2028
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
1975
2029
|
"button",
|
|
1976
2030
|
{
|
|
1977
2031
|
type: "button",
|
|
@@ -1991,7 +2045,7 @@ function InterimButtonsView({
|
|
|
1991
2045
|
...bStyles.backButton
|
|
1992
2046
|
},
|
|
1993
2047
|
children: [
|
|
1994
|
-
/* @__PURE__ */ (0,
|
|
2048
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: {
|
|
1995
2049
|
display: "inline-flex",
|
|
1996
2050
|
alignItems: "center",
|
|
1997
2051
|
justifyContent: "center",
|
|
@@ -2000,12 +2054,12 @@ function InterimButtonsView({
|
|
|
2000
2054
|
borderRadius: "50%",
|
|
2001
2055
|
backgroundColor: "#f3f4f6",
|
|
2002
2056
|
...bStyles.backButtonIcon
|
|
2003
|
-
}, children: /* @__PURE__ */ (0,
|
|
2057
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
|
|
2004
2058
|
"Go back"
|
|
2005
2059
|
]
|
|
2006
2060
|
}
|
|
2007
2061
|
),
|
|
2008
|
-
/* @__PURE__ */ (0,
|
|
2062
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
|
|
2009
2063
|
flex: 1,
|
|
2010
2064
|
textAlign: "center",
|
|
2011
2065
|
fontWeight: 600,
|
|
@@ -2015,13 +2069,13 @@ function InterimButtonsView({
|
|
|
2015
2069
|
...bStyles.title
|
|
2016
2070
|
}, children: "Secure card checkout" })
|
|
2017
2071
|
] }),
|
|
2018
|
-
/* @__PURE__ */ (0,
|
|
2019
|
-
/* @__PURE__ */ (0,
|
|
2020
|
-
/* @__PURE__ */ (0,
|
|
2021
|
-
/* @__PURE__ */ (0,
|
|
2072
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
|
|
2073
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex" }, children: [
|
|
2074
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
|
|
2075
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
|
|
2022
2076
|
] }),
|
|
2023
|
-
/* @__PURE__ */ (0,
|
|
2024
|
-
/* @__PURE__ */ (0,
|
|
2077
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
|
|
2078
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
|
|
2025
2079
|
height: 50,
|
|
2026
2080
|
borderRadius: 8,
|
|
2027
2081
|
marginTop: 16,
|
|
@@ -2030,7 +2084,7 @@ function InterimButtonsView({
|
|
|
2030
2084
|
...bStyles.submitButton,
|
|
2031
2085
|
opacity: 0.5
|
|
2032
2086
|
} }),
|
|
2033
|
-
/* @__PURE__ */ (0,
|
|
2087
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
|
|
2034
2088
|
@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
|
|
2035
2089
|
@keyframes flopay-interim-expand {
|
|
2036
2090
|
0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
|
|
@@ -2040,10 +2094,10 @@ function InterimButtonsView({
|
|
|
2040
2094
|
` })
|
|
2041
2095
|
] });
|
|
2042
2096
|
}
|
|
2043
|
-
return /* @__PURE__ */ (0,
|
|
2097
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
|
|
2044
2098
|
showPayPal && skeleton(44),
|
|
2045
2099
|
(showApplePay || showGooglePay) && skeleton(44),
|
|
2046
|
-
/* @__PURE__ */ (0,
|
|
2100
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2047
2101
|
"button",
|
|
2048
2102
|
{
|
|
2049
2103
|
type: "button",
|
|
@@ -2076,28 +2130,21 @@ function InterimButtonsView({
|
|
|
2076
2130
|
onMouseUp: (e) => {
|
|
2077
2131
|
e.currentTarget.style.transform = "scale(1)";
|
|
2078
2132
|
},
|
|
2079
|
-
children:
|
|
2080
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
2081
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
|
|
2082
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
|
|
2083
|
-
] }),
|
|
2084
|
-
"Credit / Debit Card",
|
|
2085
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { position: "absolute", right: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 18l6-6-6-6" }) })
|
|
2086
|
-
]
|
|
2133
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardButtonContentSlot, { content: cardButtonContent })
|
|
2087
2134
|
}
|
|
2088
2135
|
),
|
|
2089
|
-
/* @__PURE__ */ (0,
|
|
2136
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
|
|
2090
2137
|
] });
|
|
2091
2138
|
}
|
|
2092
2139
|
|
|
2093
2140
|
// src/checkout-form.tsx
|
|
2094
2141
|
var import_shared6 = require("@flopay/shared");
|
|
2095
|
-
var
|
|
2096
|
-
var
|
|
2142
|
+
var import_react8 = require("react");
|
|
2143
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
2097
2144
|
var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
|
|
2098
|
-
var CheckoutForm = (0,
|
|
2145
|
+
var CheckoutForm = (0, import_react8.forwardRef)(
|
|
2099
2146
|
function CheckoutForm2(props, ref) {
|
|
2100
|
-
return /* @__PURE__ */ (0,
|
|
2147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckoutFormInner, { ...props, innerRef: ref });
|
|
2101
2148
|
}
|
|
2102
2149
|
);
|
|
2103
2150
|
function CheckoutFormInner({
|
|
@@ -2124,21 +2171,21 @@ function CheckoutFormInner({
|
|
|
2124
2171
|
const flopay = useFloPay();
|
|
2125
2172
|
const elements = useElements();
|
|
2126
2173
|
const contextBillingUrl = useBillingApiUrl();
|
|
2127
|
-
const [processing, setProcessing] = (0,
|
|
2128
|
-
const [error, setError] = (0,
|
|
2129
|
-
const [is3DSActive, setIs3DSActive] = (0,
|
|
2174
|
+
const [processing, setProcessing] = (0, import_react8.useState)(false);
|
|
2175
|
+
const [error, setError] = (0, import_react8.useState)(null);
|
|
2176
|
+
const [is3DSActive, setIs3DSActive] = (0, import_react8.useState)(false);
|
|
2130
2177
|
const displayError = externalError ?? error;
|
|
2131
2178
|
const isSubmitting = externalProcessing ?? processing;
|
|
2132
2179
|
const isSelfContained = !onTokenizedBody;
|
|
2133
2180
|
const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
|
|
2134
|
-
const updateError = (0,
|
|
2181
|
+
const updateError = (0, import_react8.useCallback)(
|
|
2135
2182
|
(err) => {
|
|
2136
2183
|
setError(err);
|
|
2137
2184
|
onErrorChange?.(err);
|
|
2138
2185
|
},
|
|
2139
2186
|
[onErrorChange]
|
|
2140
2187
|
);
|
|
2141
|
-
const processPaymentInternal = (0,
|
|
2188
|
+
const processPaymentInternal = (0, import_react8.useCallback)(
|
|
2142
2189
|
async (tokenizedBody) => {
|
|
2143
2190
|
setProcessing(true);
|
|
2144
2191
|
updateError(null);
|
|
@@ -2226,7 +2273,7 @@ function CheckoutFormInner({
|
|
|
2226
2273
|
},
|
|
2227
2274
|
[baseUrl, sessionId, userId, email, firstName, lastName, chv, flopay, onComplete, onError, updateError]
|
|
2228
2275
|
);
|
|
2229
|
-
const dispatchTokenizedBody = (0,
|
|
2276
|
+
const dispatchTokenizedBody = (0, import_react8.useCallback)(
|
|
2230
2277
|
(tokenizedBody) => {
|
|
2231
2278
|
if (onTokenizedBody) {
|
|
2232
2279
|
onTokenizedBody(tokenizedBody);
|
|
@@ -2236,7 +2283,7 @@ function CheckoutFormInner({
|
|
|
2236
2283
|
},
|
|
2237
2284
|
[onTokenizedBody, processPaymentInternal]
|
|
2238
2285
|
);
|
|
2239
|
-
(0,
|
|
2286
|
+
(0, import_react8.useImperativeHandle)(innerRef, () => ({
|
|
2240
2287
|
async handleNextAction(secret) {
|
|
2241
2288
|
if (!flopay) return;
|
|
2242
2289
|
setIs3DSActive(true);
|
|
@@ -2262,7 +2309,7 @@ function CheckoutFormInner({
|
|
|
2262
2309
|
}
|
|
2263
2310
|
}
|
|
2264
2311
|
}), [flopay, dispatchTokenizedBody, onError, updateError]);
|
|
2265
|
-
(0,
|
|
2312
|
+
(0, import_react8.useEffect)(() => {
|
|
2266
2313
|
if (typeof window === "undefined") return;
|
|
2267
2314
|
const stored = localStorage.getItem(WALLET_RESUME_KEY2);
|
|
2268
2315
|
if (!stored) return;
|
|
@@ -2280,7 +2327,7 @@ function CheckoutFormInner({
|
|
|
2280
2327
|
localStorage.removeItem(WALLET_RESUME_KEY2);
|
|
2281
2328
|
}
|
|
2282
2329
|
}, [sessionId, dispatchTokenizedBody]);
|
|
2283
|
-
const handleSubmit = (0,
|
|
2330
|
+
const handleSubmit = (0, import_react8.useCallback)(
|
|
2284
2331
|
async (e) => {
|
|
2285
2332
|
e.preventDefault();
|
|
2286
2333
|
if (!flopay || !elements || isSubmitting) return;
|
|
@@ -2340,8 +2387,8 @@ function CheckoutFormInner({
|
|
|
2340
2387
|
[flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError]
|
|
2341
2388
|
);
|
|
2342
2389
|
const isReady = flopay !== null && elements !== null;
|
|
2343
|
-
return /* @__PURE__ */ (0,
|
|
2344
|
-
(is3DSActive || isSubmitting) && /* @__PURE__ */ (0,
|
|
2390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
|
|
2391
|
+
(is3DSActive || isSubmitting) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-overlay", style: {
|
|
2345
2392
|
position: "absolute",
|
|
2346
2393
|
inset: 0,
|
|
2347
2394
|
background: "rgba(255,255,255,0.7)",
|
|
@@ -2350,12 +2397,12 @@ function CheckoutFormInner({
|
|
|
2350
2397
|
justifyContent: "center",
|
|
2351
2398
|
zIndex: 10
|
|
2352
2399
|
}, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
|
|
2353
|
-
!isReady && /* @__PURE__ */ (0,
|
|
2354
|
-
isReady && /* @__PURE__ */ (0,
|
|
2355
|
-
/* @__PURE__ */ (0,
|
|
2356
|
-
showAddress && /* @__PURE__ */ (0,
|
|
2357
|
-
displayError && /* @__PURE__ */ (0,
|
|
2358
|
-
children ?? /* @__PURE__ */ (0,
|
|
2400
|
+
!isReady && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
|
|
2401
|
+
isReady && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
|
2402
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaymentElement, { options: { layout } }),
|
|
2403
|
+
showAddress && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
|
|
2404
|
+
displayError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
|
|
2405
|
+
children ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
2359
2406
|
"button",
|
|
2360
2407
|
{
|
|
2361
2408
|
type: "submit",
|
|
@@ -2370,8 +2417,8 @@ function CheckoutFormInner({
|
|
|
2370
2417
|
|
|
2371
2418
|
// src/paypal-button.tsx
|
|
2372
2419
|
var import_shared7 = require("@flopay/shared");
|
|
2373
|
-
var
|
|
2374
|
-
var
|
|
2420
|
+
var import_react9 = require("react");
|
|
2421
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
2375
2422
|
function PayPalButton({
|
|
2376
2423
|
sessionId,
|
|
2377
2424
|
billingApiUrl,
|
|
@@ -2388,11 +2435,11 @@ function PayPalButton({
|
|
|
2388
2435
|
const flopay = useFloPay();
|
|
2389
2436
|
const elements = useElements();
|
|
2390
2437
|
const contextBillingUrl = useBillingApiUrl();
|
|
2391
|
-
const [ready, setReady] = (0,
|
|
2392
|
-
const [submitting, setSubmitting] = (0,
|
|
2393
|
-
const paypalResumeAttempted = (0,
|
|
2438
|
+
const [ready, setReady] = (0, import_react9.useState)(false);
|
|
2439
|
+
const [submitting, setSubmitting] = (0, import_react9.useState)(false);
|
|
2440
|
+
const paypalResumeAttempted = (0, import_react9.useRef)(false);
|
|
2394
2441
|
const baseUrl = (billingApiUrl || contextBillingUrl).replace(/\/+$/, "");
|
|
2395
|
-
const processPaymentInternal = (0,
|
|
2442
|
+
const processPaymentInternal = (0, import_react9.useCallback)(
|
|
2396
2443
|
async (tokenizedBody) => {
|
|
2397
2444
|
try {
|
|
2398
2445
|
const response = await fetch(`${baseUrl}/v1/checkouts/sessions/process`, {
|
|
@@ -2425,7 +2472,7 @@ function PayPalButton({
|
|
|
2425
2472
|
},
|
|
2426
2473
|
[baseUrl, sessionId, userId, email, firstName, lastName, chv, onComplete, onErrorChange]
|
|
2427
2474
|
);
|
|
2428
|
-
const dispatchTokenizedBody = (0,
|
|
2475
|
+
const dispatchTokenizedBody = (0, import_react9.useCallback)(
|
|
2429
2476
|
(body) => {
|
|
2430
2477
|
if (onTokenizedBody) {
|
|
2431
2478
|
onTokenizedBody(body);
|
|
@@ -2435,7 +2482,7 @@ function PayPalButton({
|
|
|
2435
2482
|
},
|
|
2436
2483
|
[onTokenizedBody, processPaymentInternal]
|
|
2437
2484
|
);
|
|
2438
|
-
(0,
|
|
2485
|
+
(0, import_react9.useEffect)(() => {
|
|
2439
2486
|
if (!flopay || paypalResumeAttempted.current) return;
|
|
2440
2487
|
const params = new URLSearchParams(window.location.search);
|
|
2441
2488
|
const paymentIntentId = params.get("payment_intent");
|
|
@@ -2483,7 +2530,7 @@ function PayPalButton({
|
|
|
2483
2530
|
}
|
|
2484
2531
|
})();
|
|
2485
2532
|
}, [flopay, dispatchTokenizedBody, onErrorChange]);
|
|
2486
|
-
const handlePayPalConfirm = (0,
|
|
2533
|
+
const handlePayPalConfirm = (0, import_react9.useCallback)(async () => {
|
|
2487
2534
|
if (!flopay || !elements) return;
|
|
2488
2535
|
try {
|
|
2489
2536
|
setSubmitting(true);
|
|
@@ -2526,11 +2573,11 @@ function PayPalButton({
|
|
|
2526
2573
|
}
|
|
2527
2574
|
}, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
|
|
2528
2575
|
if (!flopay || !elements) {
|
|
2529
|
-
return /* @__PURE__ */ (0,
|
|
2576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
|
|
2530
2577
|
}
|
|
2531
|
-
return /* @__PURE__ */ (0,
|
|
2532
|
-
!ready && /* @__PURE__ */ (0,
|
|
2533
|
-
/* @__PURE__ */ (0,
|
|
2578
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
2579
|
+
!ready && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
|
|
2580
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
2534
2581
|
"button",
|
|
2535
2582
|
{
|
|
2536
2583
|
type: "button",
|
|
@@ -2552,7 +2599,7 @@ function PayPalButton({
|
|
|
2552
2599
|
children: submitting ? "Processing..." : "PayPal"
|
|
2553
2600
|
}
|
|
2554
2601
|
) }),
|
|
2555
|
-
(submitting || isProcessing) && /* @__PURE__ */ (0,
|
|
2602
|
+
(submitting || isProcessing) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
|
|
2556
2603
|
position: "fixed",
|
|
2557
2604
|
inset: 0,
|
|
2558
2605
|
background: "rgba(0,0,0,0.4)",
|
|
@@ -2560,7 +2607,7 @@ function PayPalButton({
|
|
|
2560
2607
|
alignItems: "center",
|
|
2561
2608
|
justifyContent: "center",
|
|
2562
2609
|
zIndex: 1e3
|
|
2563
|
-
}, children: /* @__PURE__ */ (0,
|
|
2610
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
|
|
2564
2611
|
background: "white",
|
|
2565
2612
|
borderRadius: 8,
|
|
2566
2613
|
padding: "1.5rem",
|