@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.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). Shows country dropdown + ZIP/postcode input
115
- * in the card form. When enabled, billing_details are passed to Stripe for AVS checks.
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). Shows country dropdown + ZIP/postcode input.
446
- * When enabled, billing_details are passed to Stripe's createPaymentMethod for AVS checks.
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). Shows country dropdown + ZIP/postcode input
115
- * in the card form. When enabled, billing_details are passed to Stripe for AVS checks.
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). Shows country dropdown + ZIP/postcode input.
446
- * When enabled, billing_details are passed to Stripe's createPaymentMethod for AVS checks.
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 { resolveButtonsLayoutTheme, getPostalCodeLabel, COUNTRY_OPTIONS } from "@flopay/shared";
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 = false,
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
- ...enableAVS ? { zip: zipCodeRef.current, country: selectedCountryRef.current } : {}
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
- ...(enableAVS ? selectedCountryRef.current : effectiveAccount.country) ? {
1236
- country: enableAVS ? selectedCountryRef.current : effectiveAccount.country
1237
- } : {},
1238
- ...(enableAVS ? zipCodeRef.current.trim() : effectiveAccount.zip) || "" ? {
1239
- postal_code: enableAVS ? zipCodeRef.current.trim() : effectiveAccount.zip
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 (enableAVS && !zipCodeRef.current.trim()) {
1400
- updateError(getPostalCodeLabel(selectedCountryRef.current) + " is required");
1401
- return;
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
- ...(enableAVS ? selectedCountryRef.current : resolvedAccount.country) ? {
1411
- country: enableAVS ? selectedCountryRef.current : resolvedAccount.country
1412
- } : {},
1413
- ...(enableAVS ? zipCodeRef.current.trim() : resolvedAccount.zip) || "" ? {
1414
- postal_code: enableAVS ? zipCodeRef.current.trim() : resolvedAccount.zip
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
- enableAVS && /* @__PURE__ */ jsxs3("div", { style: {
1644
- display: "flex",
1645
- flexDirection: avsLayoutProp === "column" ? "column" : "row",
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
- ...avsLayoutProp === "row" ? { borderRadius: "0", borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", borderRight: "none" } : { borderRadius: "8px" },
1655
- ...isButtons && bStyles.countrySelect ? bStyles.countrySelect : {}
1656
- }, children: /* @__PURE__ */ jsx5(
1657
- "select",
1658
- {
1659
- value: selectedCountry,
1660
- onChange: (e) => {
1661
- selectedCountryRef.current = e.target.value;
1662
- setSelectedCountry(e.target.value);
1663
- onCountryChange?.(e.target.value);
1664
- },
1665
- disabled: isSubmitting,
1666
- autoComplete: "country",
1667
- "data-testid": "flopay-country",
1668
- style: {
1669
- width: "100%",
1670
- border: "none",
1671
- outline: "none",
1672
- background: "transparent",
1673
- ...sharedInputTypography,
1674
- cursor: "pointer",
1675
- ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
1676
- },
1677
- children: COUNTRY_OPTIONS.map((c) => /* @__PURE__ */ jsxs3("option", { value: c.code, children: [
1678
- c.flag,
1679
- " ",
1680
- c.name
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
- realResult = await api.createAndFetchSession(params);
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
  }