@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.
Files changed (7) hide show
  1. package/dist/index.cjs +286 -239
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +5 -1
  4. package/dist/index.d.ts +5 -1
  5. package/dist/index.mjs +197 -150
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
package/dist/index.mjs CHANGED
@@ -67,13 +67,61 @@ function FloPayProvider({
67
67
  }
68
68
 
69
69
  // src/flopay-checkout.tsx
70
- import React4, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
70
+ import React5, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
71
71
  import { loadFloPay, PaymentAPI } from "@flopay/js";
72
72
  import { FloPayError as FloPayError2, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
73
73
 
74
+ // src/card-button-content.tsx
75
+ import "react";
76
+ import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
77
+ function DefaultCardButtonContent() {
78
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
79
+ /* @__PURE__ */ jsxs(
80
+ "svg",
81
+ {
82
+ width: "20",
83
+ height: "20",
84
+ viewBox: "0 0 24 24",
85
+ fill: "none",
86
+ stroke: "currentColor",
87
+ strokeWidth: "1.5",
88
+ strokeLinecap: "round",
89
+ strokeLinejoin: "round",
90
+ "aria-hidden": "true",
91
+ children: [
92
+ /* @__PURE__ */ jsx2("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
93
+ /* @__PURE__ */ jsx2("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
94
+ ]
95
+ }
96
+ ),
97
+ "Credit / Debit Card",
98
+ /* @__PURE__ */ jsx2(
99
+ "svg",
100
+ {
101
+ width: "16",
102
+ height: "16",
103
+ viewBox: "0 0 24 24",
104
+ fill: "none",
105
+ stroke: "#9ca3af",
106
+ strokeWidth: "2",
107
+ strokeLinecap: "round",
108
+ strokeLinejoin: "round",
109
+ style: { position: "absolute", right: "1rem" },
110
+ "aria-hidden": "true",
111
+ children: /* @__PURE__ */ jsx2("path", { d: "M9 18l6-6-6-6" })
112
+ }
113
+ )
114
+ ] });
115
+ }
116
+ function CardButtonContentSlot({
117
+ content
118
+ }) {
119
+ return /* @__PURE__ */ jsx2(Fragment, { children: content ?? /* @__PURE__ */ jsx2(DefaultCardButtonContent, {}) });
120
+ }
121
+
74
122
  // src/elements.tsx
75
123
  import { useEffect as useEffect2, useRef, useContext } from "react";
76
- import { jsx as jsx2 } from "react/jsx-runtime";
124
+ import { jsx as jsx3 } from "react/jsx-runtime";
77
125
  function createElementComponent(elementType, displayName) {
78
126
  function ElementComponent({
79
127
  className,
@@ -119,7 +167,7 @@ function createElementComponent(elementType, displayName) {
119
167
  }
120
168
  };
121
169
  }, [elements]);
122
- return /* @__PURE__ */ jsx2("div", { ref: containerRef, className, id, style });
170
+ return /* @__PURE__ */ jsx3("div", { ref: containerRef, className, id, style });
123
171
  }
124
172
  ElementComponent.displayName = displayName;
125
173
  return ElementComponent;
@@ -162,7 +210,7 @@ function useBillingApiUrl() {
162
210
 
163
211
  // src/split-card-form.tsx
164
212
  import { FloPayError } from "@flopay/shared";
165
- import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
213
+ import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
166
214
  var WALLET_RESUME_KEY = "flopay_wallet_resume";
167
215
  var FLOPAY_KEYFRAMES = `
168
216
  @keyframes flopay-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -185,10 +233,10 @@ var FLOPAY_KEYFRAMES = `
185
233
  }
186
234
  `;
187
235
  function FloPayKeyframes() {
188
- return /* @__PURE__ */ jsx3("style", { children: FLOPAY_KEYFRAMES });
236
+ return /* @__PURE__ */ jsx4("style", { children: FLOPAY_KEYFRAMES });
189
237
  }
190
238
  function ProcessingOverlay({ status, errorMessage }) {
191
- return /* @__PURE__ */ jsx3("div", { style: {
239
+ return /* @__PURE__ */ jsx4("div", { style: {
192
240
  position: "fixed",
193
241
  inset: 0,
194
242
  background: "rgba(0,0,0,0.35)",
@@ -197,7 +245,7 @@ function ProcessingOverlay({ status, errorMessage }) {
197
245
  justifyContent: "center",
198
246
  zIndex: 1e3,
199
247
  backdropFilter: "blur(2px)"
200
- }, children: /* @__PURE__ */ jsxs("div", { style: {
248
+ }, children: /* @__PURE__ */ jsxs2("div", { style: {
201
249
  background: "white",
202
250
  borderRadius: 12,
203
251
  padding: "2rem 2.5rem",
@@ -209,8 +257,8 @@ function ProcessingOverlay({ status, errorMessage }) {
209
257
  alignItems: "center",
210
258
  gap: 16
211
259
  }, children: [
212
- /* @__PURE__ */ jsxs("div", { style: { width: 48, height: 48, position: "relative" }, children: [
213
- status === "processing" && /* @__PURE__ */ jsxs(
260
+ /* @__PURE__ */ jsxs2("div", { style: { width: 48, height: 48, position: "relative" }, children: [
261
+ status === "processing" && /* @__PURE__ */ jsxs2(
214
262
  "svg",
215
263
  {
216
264
  width: "48",
@@ -220,14 +268,14 @@ function ProcessingOverlay({ status, errorMessage }) {
220
268
  xmlns: "http://www.w3.org/2000/svg",
221
269
  style: { animation: "flopay-spin 0.8s linear infinite" },
222
270
  children: [
223
- /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
224
- /* @__PURE__ */ jsx3("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
271
+ /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10", stroke: "#e5e7eb", strokeWidth: "3" }),
272
+ /* @__PURE__ */ jsx4("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: "#4A49FF" })
225
273
  ]
226
274
  }
227
275
  ),
228
- status === "success" && /* @__PURE__ */ jsx3("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
229
- /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
230
- /* @__PURE__ */ jsx3(
276
+ status === "success" && /* @__PURE__ */ jsx4("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
277
+ /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
278
+ /* @__PURE__ */ jsx4(
231
279
  "path",
232
280
  {
233
281
  d: "M7 12.5l3 3 7-7",
@@ -239,9 +287,9 @@ function ProcessingOverlay({ status, errorMessage }) {
239
287
  }
240
288
  )
241
289
  ] }) }),
242
- status === "error" && /* @__PURE__ */ jsx3("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
243
- /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
244
- /* @__PURE__ */ jsx3(
290
+ status === "error" && /* @__PURE__ */ jsx4("div", { style: { animation: "flopay-shake 0.4s ease" }, children: /* @__PURE__ */ jsxs2("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
291
+ /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
292
+ /* @__PURE__ */ jsx4(
245
293
  "path",
246
294
  {
247
295
  d: "M8 8l8 8M16 8l-8 8",
@@ -253,7 +301,7 @@ function ProcessingOverlay({ status, errorMessage }) {
253
301
  )
254
302
  ] }) })
255
303
  ] }),
256
- /* @__PURE__ */ jsxs("span", { style: {
304
+ /* @__PURE__ */ jsxs2("span", { style: {
257
305
  fontSize: 14,
258
306
  fontWeight: 600,
259
307
  letterSpacing: "0.05em",
@@ -263,7 +311,15 @@ function ProcessingOverlay({ status, errorMessage }) {
263
311
  status === "success" && "PAYMENT SUCCESSFUL",
264
312
  status === "error" && "PAYMENT FAILED"
265
313
  ] }),
266
- status === "error" && errorMessage && /* @__PURE__ */ jsx3("p", { style: {
314
+ status === "success" && /* @__PURE__ */ jsx4("p", { style: {
315
+ fontSize: 13,
316
+ color: "#6b7280",
317
+ fontWeight: 400,
318
+ maxWidth: 260,
319
+ lineHeight: 1.4,
320
+ margin: 0
321
+ }, children: "You will be automatically redirected, do not close or navigate away from this window." }),
322
+ status === "error" && errorMessage && /* @__PURE__ */ jsx4("p", { style: {
267
323
  fontSize: 13,
268
324
  color: "#6b7280",
269
325
  fontWeight: 400,
@@ -271,7 +327,7 @@ function ProcessingOverlay({ status, errorMessage }) {
271
327
  lineHeight: 1.4,
272
328
  margin: 0
273
329
  }, children: errorMessage }),
274
- /* @__PURE__ */ jsx3("style", { children: `
330
+ /* @__PURE__ */ jsx4("style", { children: `
275
331
  @keyframes flopay-spin { to { transform: rotate(360deg); } }
276
332
  @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
277
333
  @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
@@ -281,7 +337,7 @@ function ProcessingOverlay({ status, errorMessage }) {
281
337
  }
282
338
  var SplitCardForm = forwardRef(
283
339
  function SplitCardForm2(props, ref) {
284
- return /* @__PURE__ */ jsx3(SplitCardFormInner, { ...props, innerRef: ref });
340
+ return /* @__PURE__ */ jsx4(SplitCardFormInner, { ...props, innerRef: ref });
285
341
  }
286
342
  );
287
343
  function PayPalButtonInner({
@@ -398,8 +454,8 @@ function PayPalButtonInner({
398
454
  setSubmitting(false);
399
455
  }
400
456
  }, [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]);
401
- return /* @__PURE__ */ jsxs(Fragment, { children: [
402
- /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
457
+ return /* @__PURE__ */ jsxs2(Fragment2, { children: [
458
+ /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
403
459
  ExpressCheckoutElement,
404
460
  {
405
461
  onReady: () => setReady(true),
@@ -417,7 +473,7 @@ function PayPalButtonInner({
417
473
  }
418
474
  }
419
475
  ) }),
420
- submitting && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: "processing" })
476
+ submitting && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: "processing" })
421
477
  ] });
422
478
  }
423
479
  function WalletButtonInner({
@@ -491,8 +547,8 @@ function WalletButtonInner({
491
547
  },
492
548
  [stripe, elements, sessionId, email, baseUrl, onTokenizedBody, onErrorChange]
493
549
  );
494
- return /* @__PURE__ */ jsxs(Fragment, { children: [
495
- /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
550
+ return /* @__PURE__ */ jsxs2(Fragment2, { children: [
551
+ /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
496
552
  ExpressCheckoutElement,
497
553
  {
498
554
  onReady: () => setReady(true),
@@ -513,7 +569,7 @@ function WalletButtonInner({
513
569
  }
514
570
  }
515
571
  ) }),
516
- submitting && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: "processing" })
572
+ submitting && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: "processing" })
517
573
  ] });
518
574
  }
519
575
  function SplitCardFormInner({
@@ -541,6 +597,7 @@ function SplitCardFormInner({
541
597
  layout = "default",
542
598
  buttonsTheme,
543
599
  buttonsStyles: buttonsStylesOverride,
600
+ cardButtonContent,
544
601
  onButtonClick,
545
602
  enableAVS = false,
546
603
  avsLayout: avsLayoutProp = "row",
@@ -881,7 +938,7 @@ function SplitCardFormInner({
881
938
  );
882
939
  const isReady = flopay !== null && elements !== null;
883
940
  if (!isReady) {
884
- return /* @__PURE__ */ jsx3("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
941
+ return /* @__PURE__ */ jsx4("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." });
885
942
  }
886
943
  const isButtons = layout === "buttons";
887
944
  const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
@@ -897,19 +954,19 @@ function SplitCardFormInner({
897
954
  invalid: { color: "#ef4444" }
898
955
  }
899
956
  } : {};
900
- const cardFormBlock = /* @__PURE__ */ jsxs("div", { style: {
957
+ const cardFormBlock = /* @__PURE__ */ jsxs2("div", { style: {
901
958
  backgroundColor: cardBg,
902
959
  borderRadius: "8px",
903
960
  padding: isButtons ? "0" : "1rem",
904
961
  ...isButtons ? bStyles.cardFormContainer : {},
905
962
  ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {}
906
963
  }, children: [
907
- isButtons && showCardForm && /* @__PURE__ */ jsxs("div", { style: {
964
+ isButtons && showCardForm && /* @__PURE__ */ jsxs2("div", { style: {
908
965
  display: "flex",
909
966
  alignItems: "center",
910
967
  padding: "0.75rem 0 0.625rem"
911
968
  }, children: [
912
- /* @__PURE__ */ jsxs(
969
+ /* @__PURE__ */ jsxs2(
913
970
  "button",
914
971
  {
915
972
  type: "button",
@@ -931,7 +988,7 @@ function SplitCardFormInner({
931
988
  },
932
989
  "aria-label": "Back to payment methods",
933
990
  children: [
934
- /* @__PURE__ */ jsx3("span", { style: {
991
+ /* @__PURE__ */ jsx4("span", { style: {
935
992
  display: "inline-flex",
936
993
  alignItems: "center",
937
994
  justifyContent: "center",
@@ -941,12 +998,12 @@ function SplitCardFormInner({
941
998
  backgroundColor: "#f3f4f6",
942
999
  transition: "background-color 0.15s",
943
1000
  ...bStyles.backButtonIcon
944
- }, children: /* @__PURE__ */ jsx3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M15 18l-6-6 6-6" }) }) }),
1001
+ }, children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M15 18l-6-6 6-6" }) }) }),
945
1002
  "Go back"
946
1003
  ]
947
1004
  }
948
1005
  ),
949
- /* @__PURE__ */ jsx3("div", { style: {
1006
+ /* @__PURE__ */ jsx4("div", { style: {
950
1007
  flex: 1,
951
1008
  textAlign: "center",
952
1009
  fontWeight: 600,
@@ -956,16 +1013,16 @@ function SplitCardFormInner({
956
1013
  ...bStyles.title
957
1014
  }, children: "Secure card checkout" })
958
1015
  ] }),
959
- !isButtons && /* @__PURE__ */ jsx3("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
960
- /* @__PURE__ */ jsx3("div", { style: {
1016
+ !isButtons && /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
1017
+ /* @__PURE__ */ jsx4("div", { style: {
961
1018
  backgroundColor: cardInputBg,
962
1019
  border: `1px solid ${resolvedBorder}`,
963
1020
  borderTopLeftRadius: "8px",
964
1021
  borderTopRightRadius: "8px",
965
1022
  padding: "10px"
966
- }, children: /* @__PURE__ */ jsx3(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
967
- /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
968
- /* @__PURE__ */ jsx3("div", { style: {
1023
+ }, children: /* @__PURE__ */ jsx4(CardNumberElement, { onReady: () => setFormReady(true), options: stripeElementStyle }) }),
1024
+ /* @__PURE__ */ jsxs2("div", { style: { display: "flex" }, children: [
1025
+ /* @__PURE__ */ jsx4("div", { style: {
969
1026
  flex: 1,
970
1027
  backgroundColor: cardInputBg,
971
1028
  border: `1px solid ${resolvedBorder}`,
@@ -973,23 +1030,23 @@ function SplitCardFormInner({
973
1030
  borderRight: "none",
974
1031
  borderBottomLeftRadius: "8px",
975
1032
  padding: "10px"
976
- }, children: /* @__PURE__ */ jsx3(CardExpiryElement, { options: stripeElementStyle }) }),
977
- /* @__PURE__ */ jsx3("div", { style: {
1033
+ }, children: /* @__PURE__ */ jsx4(CardExpiryElement, { options: stripeElementStyle }) }),
1034
+ /* @__PURE__ */ jsx4("div", { style: {
978
1035
  flex: 1,
979
1036
  backgroundColor: cardInputBg,
980
1037
  border: `1px solid ${resolvedBorder}`,
981
1038
  borderTop: "none",
982
1039
  borderBottomRightRadius: "8px",
983
1040
  padding: "10px"
984
- }, children: /* @__PURE__ */ jsx3(CardCvcElement, { options: stripeElementStyle }) })
1041
+ }, children: /* @__PURE__ */ jsx4(CardCvcElement, { options: stripeElementStyle }) })
985
1042
  ] }),
986
- /* @__PURE__ */ jsx3("div", { style: {
1043
+ /* @__PURE__ */ jsx4("div", { style: {
987
1044
  backgroundColor: cardInputBg,
988
1045
  border: `1px solid ${resolvedBorder}`,
989
1046
  borderRadius: "8px",
990
1047
  marginTop: "0.5rem",
991
1048
  padding: "10px"
992
- }, children: /* @__PURE__ */ jsx3(
1049
+ }, children: /* @__PURE__ */ jsx4(
993
1050
  "input",
994
1051
  {
995
1052
  placeholder: "Full Name on Card",
@@ -1010,20 +1067,20 @@ function SplitCardFormInner({
1010
1067
  }
1011
1068
  }
1012
1069
  ) }),
1013
- enableAVS && /* @__PURE__ */ jsxs("div", { style: {
1070
+ enableAVS && /* @__PURE__ */ jsxs2("div", { style: {
1014
1071
  display: "flex",
1015
1072
  flexDirection: avsLayoutProp === "column" ? "column" : "row",
1016
1073
  gap: avsLayoutProp === "column" ? "0.5rem" : "0",
1017
1074
  marginTop: "0.5rem"
1018
1075
  }, children: [
1019
- /* @__PURE__ */ jsx3("div", { style: {
1076
+ /* @__PURE__ */ jsx4("div", { style: {
1020
1077
  flex: avsLayoutProp === "row" ? 1 : void 0,
1021
1078
  backgroundColor: cardInputBg,
1022
1079
  border: `1px solid ${resolvedBorder}`,
1023
1080
  padding: "10px",
1024
1081
  ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
1025
1082
  ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
1026
- }, children: /* @__PURE__ */ jsx3(
1083
+ }, children: /* @__PURE__ */ jsx4(
1027
1084
  "select",
1028
1085
  {
1029
1086
  value: selectedCountry,
@@ -1046,21 +1103,21 @@ function SplitCardFormInner({
1046
1103
  cursor: "pointer",
1047
1104
  ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
1048
1105
  },
1049
- children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs("option", { value: c.code, children: [
1106
+ children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs2("option", { value: c.code, children: [
1050
1107
  c.flag,
1051
1108
  " ",
1052
1109
  c.name
1053
1110
  ] }, c.code))
1054
1111
  }
1055
1112
  ) }),
1056
- /* @__PURE__ */ jsx3("div", { style: {
1113
+ /* @__PURE__ */ jsx4("div", { style: {
1057
1114
  flex: avsLayoutProp === "row" ? 1 : void 0,
1058
1115
  backgroundColor: cardInputBg,
1059
1116
  border: `1px solid ${resolvedBorder}`,
1060
1117
  padding: "10px",
1061
1118
  ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
1062
1119
  ...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
1063
- }, children: /* @__PURE__ */ jsx3(
1120
+ }, children: /* @__PURE__ */ jsx4(
1064
1121
  "input",
1065
1122
  {
1066
1123
  placeholder: getPostalCodeLabel(selectedCountry),
@@ -1087,7 +1144,7 @@ function SplitCardFormInner({
1087
1144
  }
1088
1145
  ) })
1089
1146
  ] }),
1090
- displayError && /* @__PURE__ */ jsxs("div", { role: "alert", "data-testid": "flopay-error", style: {
1147
+ displayError && /* @__PURE__ */ jsxs2("div", { role: "alert", "data-testid": "flopay-error", style: {
1091
1148
  margin: "0.75rem 0",
1092
1149
  padding: "0.625rem 0.875rem",
1093
1150
  background: "#FEF2F2",
@@ -1101,10 +1158,10 @@ function SplitCardFormInner({
1101
1158
  gap: "0.5rem",
1102
1159
  ...isButtons && bStyles.errorBanner ? bStyles.errorBanner : {}
1103
1160
  }, children: [
1104
- /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx3("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" }) }),
1161
+ /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx4("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" }) }),
1105
1162
  displayError
1106
1163
  ] }),
1107
- children ?? /* @__PURE__ */ jsx3(
1164
+ children ?? /* @__PURE__ */ jsx4(
1108
1165
  "button",
1109
1166
  {
1110
1167
  type: "submit",
@@ -1127,7 +1184,7 @@ function SplitCardFormInner({
1127
1184
  children: isSubmitting ? "PROCESSING..." : submitLabel
1128
1185
  }
1129
1186
  ),
1130
- !isButtons && /* @__PURE__ */ jsx3("div", { style: {
1187
+ !isButtons && /* @__PURE__ */ jsx4("div", { style: {
1131
1188
  backgroundColor: "#EFF9F0",
1132
1189
  borderRadius: "8px",
1133
1190
  padding: "0.75rem",
@@ -1143,11 +1200,11 @@ function SplitCardFormInner({
1143
1200
  const isCardView = viewState === "expanding" || viewState === "card" || viewState === "collapsing";
1144
1201
  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;
1145
1202
  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;
1146
- return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
1147
- /* @__PURE__ */ jsx3(FloPayKeyframes, {}),
1148
- overlayStatus && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
1149
- /* @__PURE__ */ jsxs("div", { style: { display: "grid" }, children: [
1150
- /* @__PURE__ */ jsxs("div", { style: {
1203
+ return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
1204
+ /* @__PURE__ */ jsx4(FloPayKeyframes, {}),
1205
+ overlayStatus && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
1206
+ /* @__PURE__ */ jsxs2("div", { style: { display: "grid" }, children: [
1207
+ /* @__PURE__ */ jsxs2("div", { style: {
1151
1208
  gridArea: "1 / 1",
1152
1209
  display: "flex",
1153
1210
  flexDirection: "column",
@@ -1156,7 +1213,7 @@ function SplitCardFormInner({
1156
1213
  ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
1157
1214
  ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
1158
1215
  }, children: [
1159
- showPayPal && stripeInstance ? /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx3(
1216
+ showPayPal && stripeInstance ? /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
1160
1217
  PayPalButtonInner,
1161
1218
  {
1162
1219
  sessionId,
@@ -1167,8 +1224,8 @@ function SplitCardFormInner({
1167
1224
  isProcessing: isSubmitting,
1168
1225
  onButtonClick
1169
1226
  }
1170
- ) }) : showPayPal ? /* @__PURE__ */ jsx3("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
1171
- showWallets && stripeInstance ? /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx3(
1227
+ ) }) : showPayPal ? /* @__PURE__ */ jsx4("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
1228
+ showWallets && stripeInstance ? /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx4(
1172
1229
  WalletButtonInner,
1173
1230
  {
1174
1231
  sessionId,
@@ -1180,8 +1237,8 @@ function SplitCardFormInner({
1180
1237
  onErrorChange: updateError,
1181
1238
  onButtonClick
1182
1239
  }
1183
- ) }) : showWallets ? /* @__PURE__ */ jsx3("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
1184
- /* @__PURE__ */ jsxs(
1240
+ ) }) : showWallets ? /* @__PURE__ */ jsx4("div", { style: { height: 44, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
1241
+ /* @__PURE__ */ jsx4(
1185
1242
  "button",
1186
1243
  {
1187
1244
  type: "button",
@@ -1214,17 +1271,10 @@ function SplitCardFormInner({
1214
1271
  onMouseUp: (e) => {
1215
1272
  e.currentTarget.style.transform = "scale(1)";
1216
1273
  },
1217
- children: [
1218
- /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
1219
- /* @__PURE__ */ jsx3("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
1220
- /* @__PURE__ */ jsx3("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
1221
- ] }),
1222
- "Credit / Debit Card",
1223
- /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M9 18l6-6-6-6" }) })
1224
- ]
1274
+ children: /* @__PURE__ */ jsx4(CardButtonContentSlot, { content: cardButtonContent })
1225
1275
  }
1226
1276
  ),
1227
- displayError && viewState === "buttons" && /* @__PURE__ */ jsxs("div", { role: "alert", "data-testid": "flopay-error", style: {
1277
+ displayError && viewState === "buttons" && /* @__PURE__ */ jsxs2("div", { role: "alert", "data-testid": "flopay-error", style: {
1228
1278
  margin: "0.25rem 0",
1229
1279
  padding: "0.625rem 0.875rem",
1230
1280
  background: "#FEF2F2",
@@ -1238,11 +1288,11 @@ function SplitCardFormInner({
1238
1288
  gap: "0.5rem",
1239
1289
  ...bStyles.errorBanner ? bStyles.errorBanner : {}
1240
1290
  }, children: [
1241
- /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx3("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" }) }),
1291
+ /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx4("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" }) }),
1242
1292
  displayError
1243
1293
  ] })
1244
1294
  ] }),
1245
- isCardView && /* @__PURE__ */ jsx3("div", { style: {
1295
+ isCardView && /* @__PURE__ */ jsx4("div", { style: {
1246
1296
  gridArea: "1 / 1",
1247
1297
  ...cardAnim ? { animation: cardAnim } : {},
1248
1298
  ...viewState === "collapsing" ? { pointerEvents: "none" } : {}
@@ -1250,10 +1300,10 @@ function SplitCardFormInner({
1250
1300
  ] })
1251
1301
  ] });
1252
1302
  }
1253
- return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
1254
- /* @__PURE__ */ jsx3(FloPayKeyframes, {}),
1255
- overlayStatus && /* @__PURE__ */ jsx3(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
1256
- showWallets && stripeInstance && /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx3(
1303
+ return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
1304
+ /* @__PURE__ */ jsx4(FloPayKeyframes, {}),
1305
+ overlayStatus && /* @__PURE__ */ jsx4(ProcessingOverlay, { status: overlayStatus, errorMessage: displayError }),
1306
+ showWallets && stripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx4(
1257
1307
  WalletButtonInner,
1258
1308
  {
1259
1309
  sessionId,
@@ -1265,7 +1315,7 @@ function SplitCardFormInner({
1265
1315
  onErrorChange: updateError
1266
1316
  }
1267
1317
  ) }),
1268
- showPayPal && stripeInstance && /* @__PURE__ */ jsx3(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx3(
1318
+ showPayPal && stripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
1269
1319
  PayPalButtonInner,
1270
1320
  {
1271
1321
  sessionId,
@@ -1276,7 +1326,7 @@ function SplitCardFormInner({
1276
1326
  isProcessing: isSubmitting
1277
1327
  }
1278
1328
  ) }),
1279
- (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ jsxs("div", { style: {
1329
+ (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ jsxs2("div", { style: {
1280
1330
  display: "flex",
1281
1331
  alignItems: "center",
1282
1332
  gap: "0.75rem",
@@ -1284,16 +1334,16 @@ function SplitCardFormInner({
1284
1334
  color: "#999",
1285
1335
  fontSize: "0.85rem"
1286
1336
  }, children: [
1287
- /* @__PURE__ */ jsx3("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
1288
- /* @__PURE__ */ jsx3("span", { children: "or pay with card" }),
1289
- /* @__PURE__ */ jsx3("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
1337
+ /* @__PURE__ */ jsx4("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } }),
1338
+ /* @__PURE__ */ jsx4("span", { children: "or pay with card" }),
1339
+ /* @__PURE__ */ jsx4("div", { style: { flex: 1, height: 1, backgroundColor: "#ddd" } })
1290
1340
  ] }),
1291
1341
  cardFormBlock
1292
1342
  ] });
1293
1343
  }
1294
1344
 
1295
1345
  // src/flopay-checkout.tsx
1296
- import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
1346
+ import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
1297
1347
  function FloPayCheckout({
1298
1348
  sessionId: sessionIdProp,
1299
1349
  createSession: createSessionParams,
@@ -1311,6 +1361,7 @@ function FloPayCheckout({
1311
1361
  layout,
1312
1362
  buttonsTheme,
1313
1363
  buttonsStyles,
1364
+ cardButtonContent,
1314
1365
  onButtonClick,
1315
1366
  enableAVS,
1316
1367
  avsLayout,
@@ -1716,23 +1767,23 @@ function FloPayCheckout({
1716
1767
  [session, isLoading, loadError, currentMode]
1717
1768
  );
1718
1769
  if (isLoading) {
1719
- if (loadingNode) return /* @__PURE__ */ jsx4(Fragment2, { children: loadingNode });
1770
+ if (loadingNode) return /* @__PURE__ */ jsx5(Fragment3, { children: loadingNode });
1720
1771
  if (layout === "buttons") {
1721
- const skeletonBar = (h) => /* @__PURE__ */ jsx4("div", { style: {
1772
+ const skeletonBar = (h) => /* @__PURE__ */ jsx5("div", { style: {
1722
1773
  height: h,
1723
1774
  borderRadius: 8,
1724
1775
  background: "#e5e7eb",
1725
1776
  animation: "flopay-loading-pulse 1.5s ease-in-out infinite"
1726
1777
  } });
1727
- return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1778
+ return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
1728
1779
  showPayPal && skeletonBar(44),
1729
1780
  (showApplePay || showGooglePay) && skeletonBar(44),
1730
1781
  skeletonBar(48),
1731
- /* @__PURE__ */ jsx4("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
1782
+ /* @__PURE__ */ jsx5("style", { children: `@keyframes flopay-loading-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
1732
1783
  ] });
1733
1784
  }
1734
- return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
1735
- /* @__PURE__ */ jsx4("div", { style: {
1785
+ return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: [
1786
+ /* @__PURE__ */ jsx5("div", { style: {
1736
1787
  width: 24,
1737
1788
  height: 24,
1738
1789
  border: "2px solid #e5e7eb",
@@ -1740,12 +1791,12 @@ function FloPayCheckout({
1740
1791
  borderRadius: "50%",
1741
1792
  animation: "spin 0.6s linear infinite"
1742
1793
  } }),
1743
- /* @__PURE__ */ jsx4("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
1794
+ /* @__PURE__ */ jsx5("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
1744
1795
  ] });
1745
1796
  }
1746
1797
  if (loadError) {
1747
- if (errorNode) return /* @__PURE__ */ jsx4(Fragment2, { children: errorNode(loadError) });
1748
- return /* @__PURE__ */ jsx4(
1798
+ if (errorNode) return /* @__PURE__ */ jsx5(Fragment3, { children: errorNode(loadError) });
1799
+ return /* @__PURE__ */ jsx5(
1749
1800
  "div",
1750
1801
  {
1751
1802
  style: {
@@ -1759,7 +1810,7 @@ function FloPayCheckout({
1759
1810
  );
1760
1811
  }
1761
1812
  if ((!flopay || !providerOptions) && createSessionParams && layout === "buttons") {
1762
- return /* @__PURE__ */ jsx4(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx4(
1813
+ return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx5(
1763
1814
  InterimButtonsView,
1764
1815
  {
1765
1816
  onButtonClick,
@@ -1767,14 +1818,15 @@ function FloPayCheckout({
1767
1818
  showApplePay,
1768
1819
  showGooglePay,
1769
1820
  buttonsTheme,
1770
- buttonsStyles
1821
+ buttonsStyles,
1822
+ cardButtonContent
1771
1823
  }
1772
1824
  ) });
1773
1825
  }
1774
- if (!flopay || !providerOptions) return /* @__PURE__ */ jsx4(Fragment2, {});
1826
+ if (!flopay || !providerOptions) return /* @__PURE__ */ jsx5(Fragment3, {});
1775
1827
  if (currentMode === "confirm") {
1776
- return /* @__PURE__ */ jsx4(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx4(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ jsxs2("div", { className, children: [
1777
- modeError && /* @__PURE__ */ jsx4(
1828
+ return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx5(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ jsxs3("div", { className, children: [
1829
+ modeError && /* @__PURE__ */ jsx5(
1778
1830
  "div",
1779
1831
  {
1780
1832
  style: {
@@ -1789,7 +1841,7 @@ function FloPayCheckout({
1789
1841
  renderConfirmButton ? renderConfirmButton({
1790
1842
  onConfirm: handleConfirmCheckout,
1791
1843
  isProcessing: confirmProcessing
1792
- }) : /* @__PURE__ */ jsx4(
1844
+ }) : /* @__PURE__ */ jsx5(
1793
1845
  "button",
1794
1846
  {
1795
1847
  type: "button",
@@ -1812,8 +1864,8 @@ function FloPayCheckout({
1812
1864
  )
1813
1865
  ] }) }) });
1814
1866
  }
1815
- return /* @__PURE__ */ jsx4(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs2(FloPayProvider, { flopay, options: providerOptions, children: [
1816
- modeError && /* @__PURE__ */ jsx4(
1867
+ return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsxs3(FloPayProvider, { flopay, options: providerOptions, children: [
1868
+ modeError && /* @__PURE__ */ jsx5(
1817
1869
  "div",
1818
1870
  {
1819
1871
  style: {
@@ -1828,7 +1880,7 @@ function FloPayCheckout({
1828
1880
  children: modeError
1829
1881
  }
1830
1882
  ),
1831
- children ? /* @__PURE__ */ jsx4(
1883
+ children ? /* @__PURE__ */ jsx5(
1832
1884
  SessionInjector,
1833
1885
  {
1834
1886
  sessionId: resolvedSessionId,
@@ -1836,7 +1888,7 @@ function FloPayCheckout({
1836
1888
  session,
1837
1889
  children
1838
1890
  }
1839
- ) : /* @__PURE__ */ jsx4(
1891
+ ) : /* @__PURE__ */ jsx5(
1840
1892
  SplitCardForm,
1841
1893
  {
1842
1894
  sessionId: resolvedSessionId,
@@ -1854,6 +1906,7 @@ function FloPayCheckout({
1854
1906
  layout,
1855
1907
  buttonsTheme,
1856
1908
  buttonsStyles,
1909
+ cardButtonContent,
1857
1910
  onButtonClick,
1858
1911
  enableAVS,
1859
1912
  avsLayout,
@@ -1871,8 +1924,8 @@ function SessionInjector({
1871
1924
  session,
1872
1925
  children
1873
1926
  }) {
1874
- return /* @__PURE__ */ jsx4(Fragment2, { children: React4.Children.map(children, (child) => {
1875
- if (!React4.isValidElement(child)) return child;
1927
+ return /* @__PURE__ */ jsx5(Fragment3, { children: React5.Children.map(children, (child) => {
1928
+ if (!React5.isValidElement(child)) return child;
1876
1929
  const existing = child.props;
1877
1930
  const injected = {};
1878
1931
  if (!existing.sessionId) injected.sessionId = sessionId;
@@ -1886,7 +1939,7 @@ function SessionInjector({
1886
1939
  injected.lastName = session.customer.lastName;
1887
1940
  }
1888
1941
  if (Object.keys(injected).length === 0) return child;
1889
- return React4.cloneElement(child, injected);
1942
+ return React5.cloneElement(child, injected);
1890
1943
  }) });
1891
1944
  }
1892
1945
  function InterimButtonsView({
@@ -1895,7 +1948,8 @@ function InterimButtonsView({
1895
1948
  showApplePay,
1896
1949
  showGooglePay,
1897
1950
  buttonsTheme,
1898
- buttonsStyles: stylesOverride
1951
+ buttonsStyles: stylesOverride,
1952
+ cardButtonContent
1899
1953
  }) {
1900
1954
  const [showCardForm, setShowCardForm] = useState3(false);
1901
1955
  const bStyles = useMemo3(() => {
@@ -1910,7 +1964,7 @@ function InterimButtonsView({
1910
1964
  title: { ...base.title, ...stylesOverride.title }
1911
1965
  };
1912
1966
  }, [buttonsTheme, stylesOverride]);
1913
- const skeleton = (h) => /* @__PURE__ */ jsx4("div", { style: {
1967
+ const skeleton = (h) => /* @__PURE__ */ jsx5("div", { style: {
1914
1968
  height: h,
1915
1969
  borderRadius: 8,
1916
1970
  background: "#e5e7eb",
@@ -1919,15 +1973,15 @@ function InterimButtonsView({
1919
1973
  if (showCardForm) {
1920
1974
  const inputBorder = bStyles.cardInputBorder ?? "#e5e7eb";
1921
1975
  const inputBg = bStyles.cardInputBackground ?? "white";
1922
- return /* @__PURE__ */ jsxs2("div", { style: {
1976
+ return /* @__PURE__ */ jsxs3("div", { style: {
1923
1977
  backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
1924
1978
  borderRadius: "8px",
1925
1979
  animation: "flopay-interim-expand 0.35s cubic-bezier(0.4, 0, 0.2, 1) both",
1926
1980
  overflow: "hidden",
1927
1981
  ...bStyles.cardFormContainer
1928
1982
  }, children: [
1929
- /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
1930
- /* @__PURE__ */ jsxs2(
1983
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }, children: [
1984
+ /* @__PURE__ */ jsxs3(
1931
1985
  "button",
1932
1986
  {
1933
1987
  type: "button",
@@ -1947,7 +2001,7 @@ function InterimButtonsView({
1947
2001
  ...bStyles.backButton
1948
2002
  },
1949
2003
  children: [
1950
- /* @__PURE__ */ jsx4("span", { style: {
2004
+ /* @__PURE__ */ jsx5("span", { style: {
1951
2005
  display: "inline-flex",
1952
2006
  alignItems: "center",
1953
2007
  justifyContent: "center",
@@ -1956,12 +2010,12 @@ function InterimButtonsView({
1956
2010
  borderRadius: "50%",
1957
2011
  backgroundColor: "#f3f4f6",
1958
2012
  ...bStyles.backButtonIcon
1959
- }, children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M15 18l-6-6 6-6" }) }) }),
2013
+ }, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
1960
2014
  "Go back"
1961
2015
  ]
1962
2016
  }
1963
2017
  ),
1964
- /* @__PURE__ */ jsx4("div", { style: {
2018
+ /* @__PURE__ */ jsx5("div", { style: {
1965
2019
  flex: 1,
1966
2020
  textAlign: "center",
1967
2021
  fontWeight: 600,
@@ -1971,13 +2025,13 @@ function InterimButtonsView({
1971
2025
  ...bStyles.title
1972
2026
  }, children: "Secure card checkout" })
1973
2027
  ] }),
1974
- /* @__PURE__ */ jsx4("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx4("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
1975
- /* @__PURE__ */ jsxs2("div", { style: { display: "flex" }, children: [
1976
- /* @__PURE__ */ jsx4("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx4("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
1977
- /* @__PURE__ */ jsx4("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx4("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
2028
+ /* @__PURE__ */ jsx5("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
2029
+ /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [
2030
+ /* @__PURE__ */ jsx5("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderRight: "none", borderBottomLeftRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "50%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
2031
+ /* @__PURE__ */ jsx5("div", { style: { flex: 1, backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTop: "none", borderBottomRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "40%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) })
1978
2032
  ] }),
1979
- /* @__PURE__ */ jsx4("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx4("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
1980
- /* @__PURE__ */ jsx4("div", { style: {
2033
+ /* @__PURE__ */ jsx5("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderRadius: 8, marginTop: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "45%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
2034
+ /* @__PURE__ */ jsx5("div", { style: {
1981
2035
  height: 50,
1982
2036
  borderRadius: 8,
1983
2037
  marginTop: 16,
@@ -1986,7 +2040,7 @@ function InterimButtonsView({
1986
2040
  ...bStyles.submitButton,
1987
2041
  opacity: 0.5
1988
2042
  } }),
1989
- /* @__PURE__ */ jsx4("style", { children: `
2043
+ /* @__PURE__ */ jsx5("style", { children: `
1990
2044
  @keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
1991
2045
  @keyframes flopay-interim-expand {
1992
2046
  0% { opacity: 0; max-height: 0; transform: translateY(-12px); }
@@ -1996,10 +2050,10 @@ function InterimButtonsView({
1996
2050
  ` })
1997
2051
  ] });
1998
2052
  }
1999
- return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
2053
+ return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
2000
2054
  showPayPal && skeleton(44),
2001
2055
  (showApplePay || showGooglePay) && skeleton(44),
2002
- /* @__PURE__ */ jsxs2(
2056
+ /* @__PURE__ */ jsx5(
2003
2057
  "button",
2004
2058
  {
2005
2059
  type: "button",
@@ -2032,28 +2086,21 @@ function InterimButtonsView({
2032
2086
  onMouseUp: (e) => {
2033
2087
  e.currentTarget.style.transform = "scale(1)";
2034
2088
  },
2035
- children: [
2036
- /* @__PURE__ */ jsxs2("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
2037
- /* @__PURE__ */ jsx4("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
2038
- /* @__PURE__ */ jsx4("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
2039
- ] }),
2040
- "Credit / Debit Card",
2041
- /* @__PURE__ */ jsx4("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__ */ jsx4("path", { d: "M9 18l6-6-6-6" }) })
2042
- ]
2089
+ children: /* @__PURE__ */ jsx5(CardButtonContentSlot, { content: cardButtonContent })
2043
2090
  }
2044
2091
  ),
2045
- /* @__PURE__ */ jsx4("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
2092
+ /* @__PURE__ */ jsx5("style", { children: `@keyframes flopay-interim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }` })
2046
2093
  ] });
2047
2094
  }
2048
2095
 
2049
2096
  // src/checkout-form.tsx
2050
2097
  import { FloPayError as FloPayError3 } from "@flopay/shared";
2051
2098
  import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useState as useState4 } from "react";
2052
- import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
2099
+ import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
2053
2100
  var WALLET_RESUME_KEY2 = "flopay_wallet_resume";
2054
2101
  var CheckoutForm = forwardRef2(
2055
2102
  function CheckoutForm2(props, ref) {
2056
- return /* @__PURE__ */ jsx5(CheckoutFormInner, { ...props, innerRef: ref });
2103
+ return /* @__PURE__ */ jsx6(CheckoutFormInner, { ...props, innerRef: ref });
2057
2104
  }
2058
2105
  );
2059
2106
  function CheckoutFormInner({
@@ -2296,8 +2343,8 @@ function CheckoutFormInner({
2296
2343
  [flopay, elements, isSubmitting, sessionId, email, baseUrl, isSelfContained, dispatchTokenizedBody, onError, updateError]
2297
2344
  );
2298
2345
  const isReady = flopay !== null && elements !== null;
2299
- return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2300
- (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-overlay", style: {
2346
+ return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className, style: { position: "relative" }, children: [
2347
+ (is3DSActive || isSubmitting) && /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-overlay", style: {
2301
2348
  position: "absolute",
2302
2349
  inset: 0,
2303
2350
  background: "rgba(255,255,255,0.7)",
@@ -2306,12 +2353,12 @@ function CheckoutFormInner({
2306
2353
  justifyContent: "center",
2307
2354
  zIndex: 10
2308
2355
  }, children: is3DSActive ? "Verifying payment..." : "Processing..." }),
2309
- !isReady && /* @__PURE__ */ jsx5("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
2310
- isReady && /* @__PURE__ */ jsxs3(Fragment3, { children: [
2311
- /* @__PURE__ */ jsx5(PaymentElement, { options: { layout } }),
2312
- showAddress && /* @__PURE__ */ jsx5(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
2313
- displayError && /* @__PURE__ */ jsx5("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
2314
- children ?? /* @__PURE__ */ jsx5(
2356
+ !isReady && /* @__PURE__ */ jsx6("div", { "data-testid": "flopay-loading", "aria-busy": "true", children: "Loading payment form..." }),
2357
+ isReady && /* @__PURE__ */ jsxs4(Fragment4, { children: [
2358
+ /* @__PURE__ */ jsx6(PaymentElement, { options: { layout } }),
2359
+ showAddress && /* @__PURE__ */ jsx6(AddressElement, { options: { mode: showAddress === true ? "billing" : showAddress } }),
2360
+ displayError && /* @__PURE__ */ jsx6("div", { role: "alert", "data-testid": "flopay-error", style: { color: "red", margin: "0.75rem 0" }, children: displayError }),
2361
+ children ?? /* @__PURE__ */ jsx6(
2315
2362
  "button",
2316
2363
  {
2317
2364
  type: "submit",
@@ -2327,7 +2374,7 @@ function CheckoutFormInner({
2327
2374
  // src/paypal-button.tsx
2328
2375
  import { FloPayError as FloPayError4 } from "@flopay/shared";
2329
2376
  import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
2330
- import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
2377
+ import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
2331
2378
  function PayPalButton({
2332
2379
  sessionId,
2333
2380
  billingApiUrl,
@@ -2482,11 +2529,11 @@ function PayPalButton({
2482
2529
  }
2483
2530
  }, [flopay, elements, sessionId, email, baseUrl, dispatchTokenizedBody, onErrorChange]);
2484
2531
  if (!flopay || !elements) {
2485
- return /* @__PURE__ */ jsx6("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
2532
+ return /* @__PURE__ */ jsx7("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6, animation: "pulse 1.5s infinite" } });
2486
2533
  }
2487
- return /* @__PURE__ */ jsxs4(Fragment4, { children: [
2488
- !ready && /* @__PURE__ */ jsx6("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
2489
- /* @__PURE__ */ jsx6("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx6(
2534
+ return /* @__PURE__ */ jsxs5(Fragment5, { children: [
2535
+ !ready && /* @__PURE__ */ jsx7("div", { style: { height: 45, background: "#f0f0f0", borderRadius: 6 } }),
2536
+ /* @__PURE__ */ jsx7("div", { style: ready ? {} : { display: "none" }, children: /* @__PURE__ */ jsx7(
2490
2537
  "button",
2491
2538
  {
2492
2539
  type: "button",
@@ -2508,7 +2555,7 @@ function PayPalButton({
2508
2555
  children: submitting ? "Processing..." : "PayPal"
2509
2556
  }
2510
2557
  ) }),
2511
- (submitting || isProcessing) && /* @__PURE__ */ jsx6("div", { style: {
2558
+ (submitting || isProcessing) && /* @__PURE__ */ jsx7("div", { style: {
2512
2559
  position: "fixed",
2513
2560
  inset: 0,
2514
2561
  background: "rgba(0,0,0,0.4)",
@@ -2516,7 +2563,7 @@ function PayPalButton({
2516
2563
  alignItems: "center",
2517
2564
  justifyContent: "center",
2518
2565
  zIndex: 1e3
2519
- }, children: /* @__PURE__ */ jsx6("div", { style: {
2566
+ }, children: /* @__PURE__ */ jsx7("div", { style: {
2520
2567
  background: "white",
2521
2568
  borderRadius: 8,
2522
2569
  padding: "1.5rem",