@flopay/react 0.4.11 → 0.5.0
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 +283 -93
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +17 -7
- package/dist/index.d.ts +17 -7
- package/dist/index.mjs +292 -94
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FloPay, FloPayElements } from '@flopay/js';
|
|
3
3
|
import * as _flopay_shared from '@flopay/shared';
|
|
4
|
-
import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, CheckoutItem, CheckoutSubscription, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
|
|
4
|
+
import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, CheckoutItem, CheckoutSubscription, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
|
|
5
5
|
export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessionDraft, InlineSessionPatch } from '@flopay/shared';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
7
|
|
|
@@ -111,10 +111,12 @@ interface FloPayCheckoutProps {
|
|
|
111
111
|
*/
|
|
112
112
|
onBeforeButtonClick?: (event: BeforeButtonClickEvent) => void | false | Promise<void | false | InlineSessionPatch> | InlineSessionPatch;
|
|
113
113
|
/**
|
|
114
|
-
* Enable AVS (Address Verification).
|
|
115
|
-
*
|
|
114
|
+
* Enable AVS (Address Verification).
|
|
115
|
+
* - `true` — show country + postal code (backward compatible default)
|
|
116
|
+
* - `AVSFieldConfig` — granular per-field control, optionally scoped to country codes
|
|
117
|
+
* - `false` / omitted — AVS disabled
|
|
116
118
|
*/
|
|
117
|
-
enableAVS?: boolean;
|
|
119
|
+
enableAVS?: boolean | _flopay_shared.AVSFieldConfig;
|
|
118
120
|
/** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
|
|
119
121
|
avsLayout?: 'row' | 'column';
|
|
120
122
|
/** Label for the submit button. */
|
|
@@ -442,10 +444,12 @@ interface SplitCardFormProps {
|
|
|
442
444
|
*/
|
|
443
445
|
onBeforeButtonClick?: (event: BeforeButtonClickEvent) => MaybePromise<void | false | InlineSessionPatch>;
|
|
444
446
|
/**
|
|
445
|
-
* Enable AVS (Address Verification).
|
|
446
|
-
*
|
|
447
|
+
* Enable AVS (Address Verification).
|
|
448
|
+
* - `true` — show country + postal code (backward compatible default)
|
|
449
|
+
* - `AVSFieldConfig` — granular per-field control, optionally scoped to country codes
|
|
450
|
+
* - `false` / omitted — AVS disabled
|
|
447
451
|
*/
|
|
448
|
-
enableAVS?: boolean;
|
|
452
|
+
enableAVS?: boolean | AVSFieldConfig;
|
|
449
453
|
/** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
|
|
450
454
|
avsLayout?: 'row' | 'column';
|
|
451
455
|
/** Pre-filled country code (ISO 3166-1 alpha-2) for AVS. */
|
|
@@ -456,6 +460,12 @@ interface SplitCardFormProps {
|
|
|
456
460
|
onCountryChange?: (country: string) => void;
|
|
457
461
|
/** Callback when AVS ZIP/postal code changes. */
|
|
458
462
|
onZipChange?: (zip: string) => void;
|
|
463
|
+
/** Whether AVS was enabled (sent to backend for analytics). */
|
|
464
|
+
avsCheck?: boolean;
|
|
465
|
+
/** Checkout type: 'standard_checkout' or 'embedded_checkout'. */
|
|
466
|
+
checkoutType?: string;
|
|
467
|
+
/** Checkout layout: 'default_layout', 'buttons_layout', or 'custom_layout'. */
|
|
468
|
+
checkoutLayout?: string;
|
|
459
469
|
/** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
|
|
460
470
|
totalAmount?: number;
|
|
461
471
|
/** Currency code (used for PayPal Elements config). */
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FloPay, FloPayElements } from '@flopay/js';
|
|
3
3
|
import * as _flopay_shared from '@flopay/shared';
|
|
4
|
-
import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, CheckoutItem, CheckoutSubscription, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
|
|
4
|
+
import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, CheckoutItem, CheckoutSubscription, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
|
|
5
5
|
export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessionDraft, InlineSessionPatch } from '@flopay/shared';
|
|
6
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
7
|
|
|
@@ -111,10 +111,12 @@ interface FloPayCheckoutProps {
|
|
|
111
111
|
*/
|
|
112
112
|
onBeforeButtonClick?: (event: BeforeButtonClickEvent) => void | false | Promise<void | false | InlineSessionPatch> | InlineSessionPatch;
|
|
113
113
|
/**
|
|
114
|
-
* Enable AVS (Address Verification).
|
|
115
|
-
*
|
|
114
|
+
* Enable AVS (Address Verification).
|
|
115
|
+
* - `true` — show country + postal code (backward compatible default)
|
|
116
|
+
* - `AVSFieldConfig` — granular per-field control, optionally scoped to country codes
|
|
117
|
+
* - `false` / omitted — AVS disabled
|
|
116
118
|
*/
|
|
117
|
-
enableAVS?: boolean;
|
|
119
|
+
enableAVS?: boolean | _flopay_shared.AVSFieldConfig;
|
|
118
120
|
/** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
|
|
119
121
|
avsLayout?: 'row' | 'column';
|
|
120
122
|
/** Label for the submit button. */
|
|
@@ -442,10 +444,12 @@ interface SplitCardFormProps {
|
|
|
442
444
|
*/
|
|
443
445
|
onBeforeButtonClick?: (event: BeforeButtonClickEvent) => MaybePromise<void | false | InlineSessionPatch>;
|
|
444
446
|
/**
|
|
445
|
-
* Enable AVS (Address Verification).
|
|
446
|
-
*
|
|
447
|
+
* Enable AVS (Address Verification).
|
|
448
|
+
* - `true` — show country + postal code (backward compatible default)
|
|
449
|
+
* - `AVSFieldConfig` — granular per-field control, optionally scoped to country codes
|
|
450
|
+
* - `false` / omitted — AVS disabled
|
|
447
451
|
*/
|
|
448
|
-
enableAVS?: boolean;
|
|
452
|
+
enableAVS?: boolean | AVSFieldConfig;
|
|
449
453
|
/** Layout for AVS fields: 'row' (side-by-side, default) or 'column' (stacked). */
|
|
450
454
|
avsLayout?: 'row' | 'column';
|
|
451
455
|
/** Pre-filled country code (ISO 3166-1 alpha-2) for AVS. */
|
|
@@ -456,6 +460,12 @@ interface SplitCardFormProps {
|
|
|
456
460
|
onCountryChange?: (country: string) => void;
|
|
457
461
|
/** Callback when AVS ZIP/postal code changes. */
|
|
458
462
|
onZipChange?: (zip: string) => void;
|
|
463
|
+
/** Whether AVS was enabled (sent to backend for analytics). */
|
|
464
|
+
avsCheck?: boolean;
|
|
465
|
+
/** Checkout type: 'standard_checkout' or 'embedded_checkout'. */
|
|
466
|
+
checkoutType?: string;
|
|
467
|
+
/** Checkout layout: 'default_layout', 'buttons_layout', or 'custom_layout'. */
|
|
468
|
+
checkoutLayout?: string;
|
|
459
469
|
/** Total amount in cents (smallest currency unit). Used for wallet/PayPal Elements config. */
|
|
460
470
|
totalAmount?: number;
|
|
461
471
|
/** Currency code (used for PayPal Elements config). */
|
package/dist/index.mjs
CHANGED
|
@@ -238,7 +238,15 @@ import {
|
|
|
238
238
|
useElements as useStripeElements,
|
|
239
239
|
useStripe as useStripeRaw
|
|
240
240
|
} from "@stripe/react-stripe-js";
|
|
241
|
-
import {
|
|
241
|
+
import {
|
|
242
|
+
resolveButtonsLayoutTheme,
|
|
243
|
+
getPostalCodeLabel,
|
|
244
|
+
getStateLabel,
|
|
245
|
+
getStateOptions,
|
|
246
|
+
COUNTRY_OPTIONS,
|
|
247
|
+
resolveAVSConfig,
|
|
248
|
+
isAVSFieldVisible
|
|
249
|
+
} from "@flopay/shared";
|
|
242
250
|
import { forwardRef, useCallback, useContext as useContext3, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
|
|
243
251
|
|
|
244
252
|
// src/hooks.ts
|
|
@@ -1010,12 +1018,15 @@ function SplitCardFormInner({
|
|
|
1010
1018
|
showSecurityFooter = true,
|
|
1011
1019
|
onButtonClick,
|
|
1012
1020
|
onBeforeButtonClick,
|
|
1013
|
-
enableAVS
|
|
1021
|
+
enableAVS: enableAVSProp,
|
|
1014
1022
|
avsLayout: avsLayoutProp = "row",
|
|
1015
1023
|
country: countryProp,
|
|
1016
1024
|
zip: zipProp,
|
|
1017
1025
|
onCountryChange,
|
|
1018
1026
|
onZipChange,
|
|
1027
|
+
avsCheck: avsCheckProp,
|
|
1028
|
+
checkoutType: checkoutTypeProp,
|
|
1029
|
+
checkoutLayout: checkoutLayoutProp,
|
|
1019
1030
|
totalAmount = 0,
|
|
1020
1031
|
currency = "usd",
|
|
1021
1032
|
initialCardOpen = false,
|
|
@@ -1031,9 +1042,19 @@ function SplitCardFormInner({
|
|
|
1031
1042
|
const [is3DSActive, setIs3DSActive] = useState2(false);
|
|
1032
1043
|
const [selectedCountry, setSelectedCountry] = useState2(countryProp ?? "US");
|
|
1033
1044
|
const [zipCode, setZipCode] = useState2(zipProp ?? "");
|
|
1045
|
+
const [addressLine1, setAddressLine1] = useState2("");
|
|
1046
|
+
const [addressLine2, setAddressLine2] = useState2("");
|
|
1047
|
+
const [city, setCity] = useState2("");
|
|
1048
|
+
const [stateValue, setStateValue] = useState2("");
|
|
1034
1049
|
const [accountPatch, setAccountPatch] = useState2({});
|
|
1035
1050
|
const zipCodeRef = useRef2(zipProp ?? "");
|
|
1036
1051
|
const selectedCountryRef = useRef2(countryProp ?? "US");
|
|
1052
|
+
const addressLine1Ref = useRef2("");
|
|
1053
|
+
const addressLine2Ref = useRef2("");
|
|
1054
|
+
const cityRef = useRef2("");
|
|
1055
|
+
const stateRef = useRef2("");
|
|
1056
|
+
const avsConfig = useMemo2(() => resolveAVSConfig(enableAVSProp), [enableAVSProp]);
|
|
1057
|
+
const enableAVS = avsConfig !== null;
|
|
1037
1058
|
const [viewState, setViewState] = useState2(initialCardOpen ? "card" : "buttons");
|
|
1038
1059
|
const showCardForm = viewState === "expanding" || viewState === "card";
|
|
1039
1060
|
const TRANSITION_MS = 280;
|
|
@@ -1205,9 +1226,33 @@ function SplitCardFormInner({
|
|
|
1205
1226
|
email: effectiveAccount.email ?? "",
|
|
1206
1227
|
firstName: effectiveAccount.firstName ?? fullName.trim().split(/\s+/)[0] ?? "",
|
|
1207
1228
|
lastName: effectiveAccount.lastName ?? fullName.trim().split(/\s+/).slice(1).join(" ") ?? "",
|
|
1208
|
-
...
|
|
1229
|
+
...avsConfig ? (() => {
|
|
1230
|
+
const c = selectedCountryRef.current;
|
|
1231
|
+
return {
|
|
1232
|
+
country: c,
|
|
1233
|
+
...isAVSFieldVisible(avsConfig.postal_code, c) && zipCodeRef.current ? { zip: zipCodeRef.current } : {},
|
|
1234
|
+
...isAVSFieldVisible(avsConfig.city, c) && cityRef.current ? { city: cityRef.current } : {},
|
|
1235
|
+
...isAVSFieldVisible(avsConfig.state, c) && stateRef.current ? { state: stateRef.current } : {},
|
|
1236
|
+
...isAVSFieldVisible(avsConfig.address_line_1, c) && addressLine1Ref.current ? { addressLine1: addressLine1Ref.current } : {},
|
|
1237
|
+
...isAVSFieldVisible(avsConfig.address_line_2, c) && addressLine2Ref.current ? { addressLine2: addressLine2Ref.current } : {}
|
|
1238
|
+
};
|
|
1239
|
+
})() : {}
|
|
1209
1240
|
},
|
|
1210
|
-
chv
|
|
1241
|
+
chv,
|
|
1242
|
+
// Checkout analytics metadata
|
|
1243
|
+
avsCheck: avsCheckProp ?? false,
|
|
1244
|
+
checkoutType: checkoutTypeProp,
|
|
1245
|
+
checkoutLayout: checkoutLayoutProp,
|
|
1246
|
+
// Resolved exposure: which fields were actually shown for the active country.
|
|
1247
|
+
// Country-scoped rules (e.g. ['US', 'CA']) are flattened to booleans here.
|
|
1248
|
+
avsConfig: avsConfig ? {
|
|
1249
|
+
country: isAVSFieldVisible(avsConfig.country, selectedCountryRef.current),
|
|
1250
|
+
postal_code: isAVSFieldVisible(avsConfig.postal_code, selectedCountryRef.current),
|
|
1251
|
+
address_line_1: isAVSFieldVisible(avsConfig.address_line_1, selectedCountryRef.current),
|
|
1252
|
+
address_line_2: isAVSFieldVisible(avsConfig.address_line_2, selectedCountryRef.current),
|
|
1253
|
+
city: isAVSFieldVisible(avsConfig.city, selectedCountryRef.current),
|
|
1254
|
+
state: isAVSFieldVisible(avsConfig.state, selectedCountryRef.current)
|
|
1255
|
+
} : void 0
|
|
1211
1256
|
})
|
|
1212
1257
|
});
|
|
1213
1258
|
if (response.ok) {
|
|
@@ -1231,14 +1276,19 @@ function SplitCardFormInner({
|
|
|
1231
1276
|
}
|
|
1232
1277
|
setIs3DSActive(true);
|
|
1233
1278
|
try {
|
|
1234
|
-
const retryBillingAddress = {
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1279
|
+
const retryBillingAddress = {};
|
|
1280
|
+
const retryCC = selectedCountryRef.current;
|
|
1281
|
+
const retryCountry = enableAVS ? retryCC : effectiveAccount.country;
|
|
1282
|
+
if (retryCountry) retryBillingAddress["country"] = retryCountry;
|
|
1283
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.postal_code, retryCC) && zipCodeRef.current.trim()) {
|
|
1284
|
+
retryBillingAddress["postal_code"] = zipCodeRef.current.trim();
|
|
1285
|
+
} else if (!avsConfig && effectiveAccount.zip) {
|
|
1286
|
+
retryBillingAddress["postal_code"] = effectiveAccount.zip;
|
|
1287
|
+
}
|
|
1288
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.address_line_1, retryCC) && addressLine1Ref.current.trim()) retryBillingAddress["line1"] = addressLine1Ref.current.trim();
|
|
1289
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.address_line_2, retryCC) && addressLine2Ref.current.trim()) retryBillingAddress["line2"] = addressLine2Ref.current.trim();
|
|
1290
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.city, retryCC) && cityRef.current.trim()) retryBillingAddress["city"] = cityRef.current.trim();
|
|
1291
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.state, retryCC) && stateRef.current.trim()) retryBillingAddress["state"] = stateRef.current.trim();
|
|
1242
1292
|
const result = await flopay.confirmPayment({
|
|
1243
1293
|
clientSecret: secret,
|
|
1244
1294
|
returnUrl: window.location.href,
|
|
@@ -1396,9 +1446,24 @@ function SplitCardFormInner({
|
|
|
1396
1446
|
updateError(null);
|
|
1397
1447
|
let handedOff = false;
|
|
1398
1448
|
try {
|
|
1399
|
-
if (
|
|
1400
|
-
|
|
1401
|
-
|
|
1449
|
+
if (avsConfig) {
|
|
1450
|
+
const country = selectedCountryRef.current;
|
|
1451
|
+
if (isAVSFieldVisible(avsConfig.postal_code, country) && !zipCodeRef.current.trim()) {
|
|
1452
|
+
updateError(getPostalCodeLabel(country) + " is required");
|
|
1453
|
+
return;
|
|
1454
|
+
}
|
|
1455
|
+
if (isAVSFieldVisible(avsConfig.address_line_1, country) && !addressLine1Ref.current.trim()) {
|
|
1456
|
+
updateError("Street address is required");
|
|
1457
|
+
return;
|
|
1458
|
+
}
|
|
1459
|
+
if (isAVSFieldVisible(avsConfig.city, country) && !cityRef.current.trim()) {
|
|
1460
|
+
updateError("City is required");
|
|
1461
|
+
return;
|
|
1462
|
+
}
|
|
1463
|
+
if (isAVSFieldVisible(avsConfig.state, country) && !stateRef.current.trim()) {
|
|
1464
|
+
updateError(getStateLabel(country) + " is required");
|
|
1465
|
+
return;
|
|
1466
|
+
}
|
|
1402
1467
|
}
|
|
1403
1468
|
const submitResult = await flopay.submitElements();
|
|
1404
1469
|
if (submitResult.error) {
|
|
@@ -1406,14 +1471,19 @@ function SplitCardFormInner({
|
|
|
1406
1471
|
onError?.(submitResult.error);
|
|
1407
1472
|
return;
|
|
1408
1473
|
}
|
|
1409
|
-
const billingAddress = {
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1474
|
+
const billingAddress = {};
|
|
1475
|
+
const cc = selectedCountryRef.current;
|
|
1476
|
+
const avsCountry = enableAVS ? cc : resolvedAccount.country;
|
|
1477
|
+
if (avsCountry) billingAddress["country"] = avsCountry;
|
|
1478
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.postal_code, cc) && zipCodeRef.current.trim()) {
|
|
1479
|
+
billingAddress["postal_code"] = zipCodeRef.current.trim();
|
|
1480
|
+
} else if (!avsConfig && resolvedAccount.zip) {
|
|
1481
|
+
billingAddress["postal_code"] = resolvedAccount.zip;
|
|
1482
|
+
}
|
|
1483
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.address_line_1, cc) && addressLine1Ref.current.trim()) billingAddress["line1"] = addressLine1Ref.current.trim();
|
|
1484
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.address_line_2, cc) && addressLine2Ref.current.trim()) billingAddress["line2"] = addressLine2Ref.current.trim();
|
|
1485
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.city, cc) && cityRef.current.trim()) billingAddress["city"] = cityRef.current.trim();
|
|
1486
|
+
if (avsConfig && isAVSFieldVisible(avsConfig.state, cc) && stateRef.current.trim()) billingAddress["state"] = stateRef.current.trim();
|
|
1417
1487
|
const billingDetails = {
|
|
1418
1488
|
...resolvedAccount.email ? { email: resolvedAccount.email } : {},
|
|
1419
1489
|
...fullName.trim() ? { name: fullName.trim() } : {},
|
|
@@ -1640,80 +1710,198 @@ function SplitCardFormInner({
|
|
|
1640
1710
|
}
|
|
1641
1711
|
}
|
|
1642
1712
|
) }),
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
gap: avsLayoutProp === "column" ? "0.5rem" : "0",
|
|
1647
|
-
marginTop: "0.5rem"
|
|
1648
|
-
}, children: [
|
|
1649
|
-
/* @__PURE__ */ jsx5("div", { style: {
|
|
1650
|
-
flex: avsLayoutProp === "row" ? 1 : void 0,
|
|
1713
|
+
avsConfig && (() => {
|
|
1714
|
+
const cc = selectedCountry;
|
|
1715
|
+
const inputWrapStyle = (extraStyle) => ({
|
|
1651
1716
|
backgroundColor: cardInputBg,
|
|
1652
1717
|
border: `1px solid ${resolvedBorder}`,
|
|
1718
|
+
borderRadius: "8px",
|
|
1719
|
+
marginTop: "0.5rem",
|
|
1653
1720
|
padding: "10px",
|
|
1654
|
-
...
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
"
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
"
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
" ",
|
|
1680
|
-
|
|
1681
|
-
] }, c.code))
|
|
1682
|
-
}
|
|
1683
|
-
) }),
|
|
1684
|
-
/* @__PURE__ */ jsx5("div", { style: {
|
|
1685
|
-
flex: avsLayoutProp === "row" ? 1 : void 0,
|
|
1686
|
-
backgroundColor: cardInputBg,
|
|
1687
|
-
border: `1px solid ${resolvedBorder}`,
|
|
1688
|
-
padding: "10px",
|
|
1689
|
-
...avsLayoutProp === "row" ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
|
|
1690
|
-
...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
|
|
1691
|
-
}, children: /* @__PURE__ */ jsx5(
|
|
1692
|
-
"input",
|
|
1693
|
-
{
|
|
1694
|
-
className: "flopay-shared-input",
|
|
1695
|
-
placeholder: getPostalCodeLabel(selectedCountry),
|
|
1696
|
-
autoComplete: "postal-code",
|
|
1697
|
-
value: zipCode,
|
|
1698
|
-
onChange: (e) => {
|
|
1699
|
-
zipCodeRef.current = e.target.value;
|
|
1700
|
-
setZipCode(e.target.value);
|
|
1701
|
-
onZipChange?.(e.target.value);
|
|
1702
|
-
},
|
|
1703
|
-
disabled: isSubmitting,
|
|
1704
|
-
required: true,
|
|
1705
|
-
"data-testid": "flopay-zip",
|
|
1706
|
-
style: {
|
|
1707
|
-
width: "100%",
|
|
1708
|
-
border: "none",
|
|
1709
|
-
outline: "none",
|
|
1710
|
-
background: "transparent",
|
|
1711
|
-
...sharedInputTypography,
|
|
1712
|
-
...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
|
|
1721
|
+
...isButtons && extraStyle ? extraStyle : {}
|
|
1722
|
+
});
|
|
1723
|
+
const inputFieldStyle = () => ({
|
|
1724
|
+
width: "100%",
|
|
1725
|
+
border: "none",
|
|
1726
|
+
outline: "none",
|
|
1727
|
+
background: "transparent",
|
|
1728
|
+
...sharedInputTypography,
|
|
1729
|
+
...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
|
|
1730
|
+
});
|
|
1731
|
+
const stateOpts = getStateOptions(cc);
|
|
1732
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1733
|
+
isAVSFieldVisible(avsConfig.address_line_1, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine1Input), children: /* @__PURE__ */ jsx5(
|
|
1734
|
+
"input",
|
|
1735
|
+
{
|
|
1736
|
+
className: "flopay-shared-input",
|
|
1737
|
+
placeholder: "Street Address (e.g. 123 Main St)",
|
|
1738
|
+
autoComplete: "address-line1",
|
|
1739
|
+
value: addressLine1,
|
|
1740
|
+
onChange: (e) => {
|
|
1741
|
+
addressLine1Ref.current = e.target.value;
|
|
1742
|
+
setAddressLine1(e.target.value);
|
|
1743
|
+
},
|
|
1744
|
+
disabled: isSubmitting,
|
|
1745
|
+
required: true,
|
|
1746
|
+
"data-testid": "flopay-address-line1",
|
|
1747
|
+
style: inputFieldStyle()
|
|
1713
1748
|
}
|
|
1714
|
-
}
|
|
1715
|
-
|
|
1716
|
-
|
|
1749
|
+
) }),
|
|
1750
|
+
isAVSFieldVisible(avsConfig.address_line_2, cc) && /* @__PURE__ */ jsx5("div", { style: inputWrapStyle(bStyles.addressLine2Input), children: /* @__PURE__ */ jsx5(
|
|
1751
|
+
"input",
|
|
1752
|
+
{
|
|
1753
|
+
className: "flopay-shared-input",
|
|
1754
|
+
placeholder: "Apt, Suite, Unit (optional)",
|
|
1755
|
+
autoComplete: "address-line2",
|
|
1756
|
+
value: addressLine2,
|
|
1757
|
+
onChange: (e) => {
|
|
1758
|
+
addressLine2Ref.current = e.target.value;
|
|
1759
|
+
setAddressLine2(e.target.value);
|
|
1760
|
+
},
|
|
1761
|
+
disabled: isSubmitting,
|
|
1762
|
+
"data-testid": "flopay-address-line2",
|
|
1763
|
+
style: inputFieldStyle()
|
|
1764
|
+
}
|
|
1765
|
+
) }),
|
|
1766
|
+
(isAVSFieldVisible(avsConfig.city, cc) || isAVSFieldVisible(avsConfig.state, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
|
|
1767
|
+
display: "flex",
|
|
1768
|
+
gap: "0",
|
|
1769
|
+
marginTop: "0.5rem"
|
|
1770
|
+
}, children: [
|
|
1771
|
+
isAVSFieldVisible(avsConfig.city, cc) && /* @__PURE__ */ jsx5("div", { style: {
|
|
1772
|
+
flex: 1,
|
|
1773
|
+
backgroundColor: cardInputBg,
|
|
1774
|
+
border: `1px solid ${resolvedBorder}`,
|
|
1775
|
+
padding: "10px",
|
|
1776
|
+
borderTopLeftRadius: "8px",
|
|
1777
|
+
borderBottomLeftRadius: "8px",
|
|
1778
|
+
...isAVSFieldVisible(avsConfig.state, cc) ? { borderRight: "none", borderTopRightRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: "8px" },
|
|
1779
|
+
...isButtons && bStyles.cityInput ? bStyles.cityInput : {}
|
|
1780
|
+
}, children: /* @__PURE__ */ jsx5(
|
|
1781
|
+
"input",
|
|
1782
|
+
{
|
|
1783
|
+
className: "flopay-shared-input",
|
|
1784
|
+
placeholder: "City",
|
|
1785
|
+
autoComplete: "address-level2",
|
|
1786
|
+
value: city,
|
|
1787
|
+
onChange: (e) => {
|
|
1788
|
+
cityRef.current = e.target.value;
|
|
1789
|
+
setCity(e.target.value);
|
|
1790
|
+
},
|
|
1791
|
+
disabled: isSubmitting,
|
|
1792
|
+
required: true,
|
|
1793
|
+
"data-testid": "flopay-city",
|
|
1794
|
+
style: inputFieldStyle()
|
|
1795
|
+
}
|
|
1796
|
+
) }),
|
|
1797
|
+
isAVSFieldVisible(avsConfig.state, cc) && /* @__PURE__ */ jsx5("div", { style: {
|
|
1798
|
+
flex: 1,
|
|
1799
|
+
backgroundColor: cardInputBg,
|
|
1800
|
+
border: `1px solid ${resolvedBorder}`,
|
|
1801
|
+
padding: "10px",
|
|
1802
|
+
borderTopRightRadius: "8px",
|
|
1803
|
+
borderBottomRightRadius: "8px",
|
|
1804
|
+
...isAVSFieldVisible(avsConfig.city, cc) ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } : { borderRadius: "8px" },
|
|
1805
|
+
...isButtons && bStyles.stateInput ? bStyles.stateInput : {}
|
|
1806
|
+
}, children: stateOpts ? /* @__PURE__ */ jsxs3(
|
|
1807
|
+
"select",
|
|
1808
|
+
{
|
|
1809
|
+
value: stateValue,
|
|
1810
|
+
onChange: (e) => {
|
|
1811
|
+
stateRef.current = e.target.value;
|
|
1812
|
+
setStateValue(e.target.value);
|
|
1813
|
+
},
|
|
1814
|
+
disabled: isSubmitting,
|
|
1815
|
+
autoComplete: "address-level1",
|
|
1816
|
+
required: true,
|
|
1817
|
+
"data-testid": "flopay-state",
|
|
1818
|
+
style: { ...inputFieldStyle(), cursor: "pointer" },
|
|
1819
|
+
children: [
|
|
1820
|
+
/* @__PURE__ */ jsx5("option", { value: "", children: getStateLabel(cc) }),
|
|
1821
|
+
stateOpts.map((s) => /* @__PURE__ */ jsx5("option", { value: s.code, children: s.name }, s.code))
|
|
1822
|
+
]
|
|
1823
|
+
}
|
|
1824
|
+
) : /* @__PURE__ */ jsx5(
|
|
1825
|
+
"input",
|
|
1826
|
+
{
|
|
1827
|
+
className: "flopay-shared-input",
|
|
1828
|
+
placeholder: getStateLabel(cc),
|
|
1829
|
+
autoComplete: "address-level1",
|
|
1830
|
+
value: stateValue,
|
|
1831
|
+
onChange: (e) => {
|
|
1832
|
+
stateRef.current = e.target.value;
|
|
1833
|
+
setStateValue(e.target.value);
|
|
1834
|
+
},
|
|
1835
|
+
disabled: isSubmitting,
|
|
1836
|
+
required: true,
|
|
1837
|
+
"data-testid": "flopay-state",
|
|
1838
|
+
style: inputFieldStyle()
|
|
1839
|
+
}
|
|
1840
|
+
) })
|
|
1841
|
+
] }),
|
|
1842
|
+
(isAVSFieldVisible(avsConfig.country, cc) || isAVSFieldVisible(avsConfig.postal_code, cc)) && /* @__PURE__ */ jsxs3("div", { style: {
|
|
1843
|
+
display: "flex",
|
|
1844
|
+
flexDirection: avsLayoutProp === "column" ? "column" : "row",
|
|
1845
|
+
gap: avsLayoutProp === "column" ? "0.5rem" : "0",
|
|
1846
|
+
marginTop: "0.5rem"
|
|
1847
|
+
}, children: [
|
|
1848
|
+
isAVSFieldVisible(avsConfig.country, cc) && /* @__PURE__ */ jsx5("div", { style: {
|
|
1849
|
+
flex: avsLayoutProp === "row" ? 1 : void 0,
|
|
1850
|
+
backgroundColor: cardInputBg,
|
|
1851
|
+
border: `1px solid ${resolvedBorder}`,
|
|
1852
|
+
padding: "10px",
|
|
1853
|
+
...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.postal_code, cc) ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
|
|
1854
|
+
...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
|
|
1855
|
+
}, children: /* @__PURE__ */ jsx5(
|
|
1856
|
+
"select",
|
|
1857
|
+
{
|
|
1858
|
+
value: selectedCountry,
|
|
1859
|
+
onChange: (e) => {
|
|
1860
|
+
selectedCountryRef.current = e.target.value;
|
|
1861
|
+
setSelectedCountry(e.target.value);
|
|
1862
|
+
onCountryChange?.(e.target.value);
|
|
1863
|
+
stateRef.current = "";
|
|
1864
|
+
setStateValue("");
|
|
1865
|
+
},
|
|
1866
|
+
disabled: isSubmitting,
|
|
1867
|
+
autoComplete: "country",
|
|
1868
|
+
"data-testid": "flopay-country",
|
|
1869
|
+
style: { ...inputFieldStyle(), cursor: "pointer" },
|
|
1870
|
+
children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs3("option", { value: c.code, children: [
|
|
1871
|
+
c.flag,
|
|
1872
|
+
" ",
|
|
1873
|
+
c.name
|
|
1874
|
+
] }, c.code))
|
|
1875
|
+
}
|
|
1876
|
+
) }),
|
|
1877
|
+
isAVSFieldVisible(avsConfig.postal_code, cc) && /* @__PURE__ */ jsx5("div", { style: {
|
|
1878
|
+
flex: avsLayoutProp === "row" ? 1 : void 0,
|
|
1879
|
+
backgroundColor: cardInputBg,
|
|
1880
|
+
border: `1px solid ${resolvedBorder}`,
|
|
1881
|
+
padding: "10px",
|
|
1882
|
+
...avsLayoutProp === "row" && isAVSFieldVisible(avsConfig.country, cc) ? { borderRadius: "0", borderTopRightRadius: "8px", borderBottomRightRadius: "8px" } : { borderRadius: "8px" },
|
|
1883
|
+
...isButtons && bStyles.zipInput ? bStyles.zipInput : {}
|
|
1884
|
+
}, children: /* @__PURE__ */ jsx5(
|
|
1885
|
+
"input",
|
|
1886
|
+
{
|
|
1887
|
+
className: "flopay-shared-input",
|
|
1888
|
+
placeholder: getPostalCodeLabel(selectedCountry),
|
|
1889
|
+
autoComplete: "postal-code",
|
|
1890
|
+
value: zipCode,
|
|
1891
|
+
onChange: (e) => {
|
|
1892
|
+
zipCodeRef.current = e.target.value;
|
|
1893
|
+
setZipCode(e.target.value);
|
|
1894
|
+
onZipChange?.(e.target.value);
|
|
1895
|
+
},
|
|
1896
|
+
disabled: isSubmitting,
|
|
1897
|
+
required: true,
|
|
1898
|
+
"data-testid": "flopay-zip",
|
|
1899
|
+
style: inputFieldStyle()
|
|
1900
|
+
}
|
|
1901
|
+
) })
|
|
1902
|
+
] })
|
|
1903
|
+
] });
|
|
1904
|
+
})(),
|
|
1717
1905
|
displayError && /* @__PURE__ */ jsxs3("div", { role: "alert", "data-testid": "flopay-error", style: {
|
|
1718
1906
|
margin: "0.75rem 0",
|
|
1719
1907
|
padding: "0.625rem 0.875rem",
|
|
@@ -2857,7 +3045,14 @@ function FloPayCheckout({
|
|
|
2857
3045
|
}
|
|
2858
3046
|
}
|
|
2859
3047
|
if (!sid) {
|
|
2860
|
-
|
|
3048
|
+
const paramsWithAnalytics = {
|
|
3049
|
+
...params,
|
|
3050
|
+
avsCheck: !!enableAVS,
|
|
3051
|
+
avsConfig: typeof enableAVS === "object" ? enableAVS : void 0,
|
|
3052
|
+
checkoutType: "embedded_checkout",
|
|
3053
|
+
checkoutLayout: children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout"
|
|
3054
|
+
};
|
|
3055
|
+
realResult = await api.createAndFetchSession(paramsWithAnalytics);
|
|
2861
3056
|
sid = realResult.data.session?.id ?? "";
|
|
2862
3057
|
if (sid && typeof window !== "undefined") {
|
|
2863
3058
|
window.sessionStorage.setItem(cacheKey, sid);
|
|
@@ -3341,6 +3536,9 @@ function FloPayCheckout({
|
|
|
3341
3536
|
country: session?.customer?.country,
|
|
3342
3537
|
onCountryChange,
|
|
3343
3538
|
onZipChange,
|
|
3539
|
+
avsCheck: !!enableAVS,
|
|
3540
|
+
checkoutType: createSessionParams ? "embedded_checkout" : "standard_checkout",
|
|
3541
|
+
checkoutLayout: children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout",
|
|
3344
3542
|
submitLabel,
|
|
3345
3543
|
className
|
|
3346
3544
|
}
|