fontdue-js 2.18.2 → 2.18.3

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.18.3
+
+- Adds missing reCAPTCHA support to the "customer information" step of the checkout
+
 ## 2.18.2
 
 - Fixes error caused by 2.18.1 bugfix with 100% coupon codes 

package/dist/__generated__/StoreModalCartQuery.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<a630ed5ce31009146a5c99d316f11ab9>>
+ * @generated SignedSource<<fcbe77c4d0e8c794f4153db4cb46abec>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalCartQuery.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<a630ed5ce31009146a5c99d316f11ab9>>
+ * @generated SignedSource<<fcbe77c4d0e8c794f4153db4cb46abec>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -427,6 +427,18 @@ const node = function () {
             "kind": "ScalarField",
             "name": "newsletterOptInLabel",
             "storageKey": "newsletterOptInLabel(format:\"HTML\")"
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "recaptchaEnabled",
+            "storageKey": null
+          }, {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "recaptchaSiteKey",
+            "storageKey": null
           }],
           "storageKey": null
         }, {
@@ -936,12 +948,12 @@ const node = function () {
       }]
     },
     "params": {
-      "cacheID": "abbe36c5163d799fdd06edf0789c4aeb",
+      "cacheID": "7b0e7fae5f931cd4a2baaca7dc445f11",
       "id": null,
       "metadata": {},
       "name": "StoreModalCartQuery",
       "operationKind": "query",
-      "text": "query StoreModalCartQuery {\n  viewer {\n    ...StripeProvider_viewer\n    ...OrderVariableSelection_variables\n    ...StoreModalOrderVariableSelection_viewer\n    ...StoreModalUnifiedCheckout_viewer\n    settings {\n      taxSystem\n    }\n    currentOrder {\n      ...CartState_order\n      ...CartTotals_order\n      ...StoreModalUnifiedCheckout_order\n      ...StoreModalOrderVariableSelection_order\n      id\n      total {\n        amount\n      }\n      orderVariableSelections {\n        id\n      }\n      orderItems {\n        id\n        ...CartItem_node\n        licenseSelections {\n          licenseVariable {\n            variableType\n            id\n          }\n          variableText\n          id\n        }\n      }\n      discount {\n        id\n      }\n      stripePaymentMethod {\n        id\n      }\n      billingIdentity {\n        name\n      }\n    }\n    id\n  }\n}\n\nfragment AddressFields_viewer on Viewer {\n  countries {\n    code\n    name\n  }\n  settings {\n    checkoutAddressCollection\n    checkoutPhoneNumberCollection\n  }\n}\n\nfragment CartItemAdditionalLicenses_licenses on License {\n  id\n  name\n}\n\nfragment CartItemAdditionalLicenses_orderItem on OrderItem {\n  licenseSelections {\n    license {\n      id\n    }\n    id\n  }\n}\n\nfragment CartItemLicense_selection on LicenseSelection {\n  id\n  license {\n    id\n    name\n    licenseVariables {\n      id\n      ...CartItemVariable_variable\n    }\n  }\n  licenseVariable {\n    id\n  }\n  ...CartItemVariable_selection\n}\n\nfragment CartItemProduct_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ...CollectionAa_product\n  ...FontStyle_fontStyle\n  ... on FontStyle {\n    family {\n      name\n      cssUrl\n      id\n    }\n    name\n    variableInstances {\n      name\n    }\n  }\n  ... on Bundle {\n    name\n  }\n  ... on FontCollection {\n    name\n    isVariableFont\n    totalStyles\n    featureStyle {\n      family {\n        cssUrl\n        id\n      }\n      id\n    }\n  }\n  ... on CollectionBundle {\n    name\n    totalStyles\n  }\n}\n\nfragment CartItemVariable_selection on LicenseSelection {\n  id\n  variableText\n  license {\n    id\n  }\n  licenseVariable {\n    ...VariableTableAmounts_variable\n    id\n    name\n    variableType\n    licenseOptions {\n      id\n    }\n  }\n  licenseOption {\n    ...VariableTableAmounts_option\n    id\n    name\n    amount\n  }\n}\n\nfragment CartItemVariable_variable on LicenseVariable {\n  id\n  licenseOptions {\n    id\n    name\n    amount\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  ...CartItemAdditionalLicenses_orderItem\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      ...CartItemProduct_product\n      __typename\n      ... on Licenseable {\n        __isLicenseable: __typename\n        licenses {\n          ...CartItemAdditionalLicenses_licenses\n          id\n          licenseVariables {\n            id\n            licenseOptions {\n              id\n            }\n          }\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    ...CartItemLicense_selection\n    id\n    license {\n      id\n    }\n    licenseVariable {\n      id\n    }\n    licenseOption {\n      id\n    }\n    variableText\n  }\n}\n\nfragment CartState_order on Order {\n  id\n  orderItems {\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  orderVariableSelections {\n    orderVariable {\n      id\n    }\n    orderVariableOption {\n      id\n    }\n    countryCode\n    id\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxRate\n  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment CollectionAa_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ... on FontCollection {\n    featureStyle {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n  ... on Bundle {\n    fontStyles {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmount {\n    amount\n    currency\n  }\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment OrderVariableSelection_variables on Viewer {\n  orderVariables {\n    id\n    name\n    variableType\n    description(format: HTML, orderVariables: [])\n    orderVariableOptions {\n      id\n      amount\n    }\n  }\n  countries {\n    code\n    name\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment StoreModalOrderVariableSelection_order on Order {\n  id\n  orderVariableSelections {\n    orderVariable {\n      id\n      name\n      variableType\n    }\n    orderVariableDescription(format: HTML)\n    orderVariableOption {\n      id\n      amount\n    }\n    countryCode\n    id\n  }\n}\n\nfragment StoreModalOrderVariableSelection_viewer on Viewer {\n  ...OrderVariableSelection_variables\n  orderVariables {\n    id\n  }\n  settings {\n    storeModalSelectOrderVariablesLabel(format: HTML)\n  }\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalUnifiedCheckout_order on Order {\n  completeUrl\n  canCompleteWithCoupon\n  total {\n    amount\n  }\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  licenseeIsBillingIdentity\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n    name\n    organization\n    email\n    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  billingIdentity {\n    ...StoreModalReviewIdentity_identity\n    name\n    organization\n    email\n    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  stripePaymentIntent {\n    clientSecret\n    amount\n    currency\n  }\n  orderVariableSelections {\n    orderVariable {\n      id\n      variableType\n    }\n    orderVariableOption {\n      id\n    }\n    countryCode\n    id\n  }\n}\n\nfragment StoreModalUnifiedCheckout_viewer on Viewer {\n  ...AddressFields_viewer\n  country\n  detectedCountry\n  settings {\n    uiFontName\n    eulaAgreementLabel(format: HTML)\n    storeModalSelectLicenseeLabel(format: HTML)\n    newsletterOptInLabel(format: HTML)\n    taxSystem\n  }\n  themeConfig {\n    customProperties\n  }\n}\n\nfragment StripeProvider_viewer on Viewer {\n  settings {\n    taxSystem\n    uiFontStyle {\n      name\n      cssFamily\n      webfontSources {\n        format\n        url\n      }\n      id\n    }\n  }\n  themeConfig {\n    customProperties\n  }\n  stripeAccountId\n  stripePublishableKey\n  currentOrder {\n    stripePaymentIntent {\n      clientSecret\n    }\n    id\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n"
+      "text": "query StoreModalCartQuery {\n  viewer {\n    ...StripeProvider_viewer\n    ...OrderVariableSelection_variables\n    ...StoreModalOrderVariableSelection_viewer\n    ...StoreModalUnifiedCheckout_viewer\n    settings {\n      taxSystem\n    }\n    currentOrder {\n      ...CartState_order\n      ...CartTotals_order\n      ...StoreModalUnifiedCheckout_order\n      ...StoreModalOrderVariableSelection_order\n      id\n      total {\n        amount\n      }\n      orderVariableSelections {\n        id\n      }\n      orderItems {\n        id\n        ...CartItem_node\n        licenseSelections {\n          licenseVariable {\n            variableType\n            id\n          }\n          variableText\n          id\n        }\n      }\n      discount {\n        id\n      }\n      stripePaymentMethod {\n        id\n      }\n      billingIdentity {\n        name\n      }\n    }\n    id\n  }\n}\n\nfragment AddressFields_viewer on Viewer {\n  countries {\n    code\n    name\n  }\n  settings {\n    checkoutAddressCollection\n    checkoutPhoneNumberCollection\n  }\n}\n\nfragment CartItemAdditionalLicenses_licenses on License {\n  id\n  name\n}\n\nfragment CartItemAdditionalLicenses_orderItem on OrderItem {\n  licenseSelections {\n    license {\n      id\n    }\n    id\n  }\n}\n\nfragment CartItemLicense_selection on LicenseSelection {\n  id\n  license {\n    id\n    name\n    licenseVariables {\n      id\n      ...CartItemVariable_variable\n    }\n  }\n  licenseVariable {\n    id\n  }\n  ...CartItemVariable_selection\n}\n\nfragment CartItemProduct_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ...CollectionAa_product\n  ...FontStyle_fontStyle\n  ... on FontStyle {\n    family {\n      name\n      cssUrl\n      id\n    }\n    name\n    variableInstances {\n      name\n    }\n  }\n  ... on Bundle {\n    name\n  }\n  ... on FontCollection {\n    name\n    isVariableFont\n    totalStyles\n    featureStyle {\n      family {\n        cssUrl\n        id\n      }\n      id\n    }\n  }\n  ... on CollectionBundle {\n    name\n    totalStyles\n  }\n}\n\nfragment CartItemVariable_selection on LicenseSelection {\n  id\n  variableText\n  license {\n    id\n  }\n  licenseVariable {\n    ...VariableTableAmounts_variable\n    id\n    name\n    variableType\n    licenseOptions {\n      id\n    }\n  }\n  licenseOption {\n    ...VariableTableAmounts_option\n    id\n    name\n    amount\n  }\n}\n\nfragment CartItemVariable_variable on LicenseVariable {\n  id\n  licenseOptions {\n    id\n    name\n    amount\n  }\n}\n\nfragment CartItem_node on OrderItem {\n  ...CartItemAdditionalLicenses_orderItem\n  id\n  price {\n    ...Price_price\n  }\n  sku {\n    price {\n      ...Price_price\n    }\n    product {\n      ...CartItemProduct_product\n      __typename\n      ... on Licenseable {\n        __isLicenseable: __typename\n        licenses {\n          ...CartItemAdditionalLicenses_licenses\n          id\n          licenseVariables {\n            id\n            licenseOptions {\n              id\n            }\n          }\n        }\n      }\n      ... on Node {\n        __isNode: __typename\n        id\n      }\n    }\n    id\n  }\n  licenseSelections {\n    ...CartItemLicense_selection\n    id\n    license {\n      id\n    }\n    licenseVariable {\n      id\n    }\n    licenseOption {\n      id\n    }\n    variableText\n  }\n}\n\nfragment CartState_order on Order {\n  id\n  orderItems {\n    id\n    licenseSelections {\n      license {\n        id\n      }\n      licenseVariable {\n        id\n      }\n      licenseOption {\n        id\n      }\n      variableText\n      id\n    }\n  }\n  orderVariableSelections {\n    orderVariable {\n      id\n    }\n    orderVariableOption {\n      id\n    }\n    countryCode\n    id\n  }\n}\n\nfragment CartTotals_order on Order {\n  subtotal {\n    ...Price_price\n  }\n  discount {\n    amount {\n      amount\n      ...Price_price\n    }\n    coupon {\n      ...CouponText_coupon\n      id\n    }\n    id\n  }\n  discountedSubtotal {\n    ...Price_price\n  }\n  total {\n    amount\n    ...Price_price\n  }\n  taxRate\n  taxes {\n    ...Price_price\n  }\n  taxName\n  gstIncluded\n}\n\nfragment CollectionAa_product on SkuProduct {\n  __isSkuProduct: __typename\n  __typename\n  ... on FontCollection {\n    featureStyle {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n  ... on Bundle {\n    fontStyles {\n      ...FontStyle_fontStyle\n      id\n    }\n  }\n}\n\nfragment CouponText_coupon on Coupon {\n  type\n  percentAmount\n  creditAmount {\n    amount\n    currency\n  }\n  creditAmountRemaining {\n    amount\n    currency\n  }\n}\n\nfragment FontStyle_fontStyle on FontStyle {\n  cssFamily\n  name\n}\n\nfragment OrderVariableSelection_variables on Viewer {\n  orderVariables {\n    id\n    name\n    variableType\n    description(format: HTML, orderVariables: [])\n    orderVariableOptions {\n      id\n      amount\n    }\n  }\n  countries {\n    code\n    name\n  }\n}\n\nfragment Price_price on Money {\n  amount\n  currency\n}\n\nfragment StoreModalOrderVariableSelection_order on Order {\n  id\n  orderVariableSelections {\n    orderVariable {\n      id\n      name\n      variableType\n    }\n    orderVariableDescription(format: HTML)\n    orderVariableOption {\n      id\n      amount\n    }\n    countryCode\n    id\n  }\n}\n\nfragment StoreModalOrderVariableSelection_viewer on Viewer {\n  ...OrderVariableSelection_variables\n  orderVariables {\n    id\n  }\n  settings {\n    storeModalSelectOrderVariablesLabel(format: HTML)\n  }\n}\n\nfragment StoreModalReviewIdentity_identity on Identity {\n  email\n  phoneFormatted\n  addressFormatted\n  vatNumber\n}\n\nfragment StoreModalUnifiedCheckout_order on Order {\n  completeUrl\n  canCompleteWithCoupon\n  total {\n    amount\n  }\n  customer {\n    name\n    email\n    newsletterOptIn\n    id\n  }\n  licenseeIsBillingIdentity\n  licenseeIdentity {\n    ...StoreModalReviewIdentity_identity\n    name\n    organization\n    email\n    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  billingIdentity {\n    ...StoreModalReviewIdentity_identity\n    name\n    organization\n    email\n    phoneNullable\n    street\n    locality\n    sublocality\n    country\n    administrativeArea\n    zip\n    vatNumber\n  }\n  stripePaymentIntent {\n    clientSecret\n    amount\n    currency\n  }\n  orderVariableSelections {\n    orderVariable {\n      id\n      variableType\n    }\n    orderVariableOption {\n      id\n    }\n    countryCode\n    id\n  }\n}\n\nfragment StoreModalUnifiedCheckout_viewer on Viewer {\n  ...AddressFields_viewer\n  country\n  detectedCountry\n  settings {\n    uiFontName\n    eulaAgreementLabel(format: HTML)\n    storeModalSelectLicenseeLabel(format: HTML)\n    newsletterOptInLabel(format: HTML)\n    taxSystem\n    recaptchaEnabled\n    recaptchaSiteKey\n  }\n  themeConfig {\n    customProperties\n  }\n}\n\nfragment StripeProvider_viewer on Viewer {\n  settings {\n    taxSystem\n    uiFontStyle {\n      name\n      cssFamily\n      webfontSources {\n        format\n        url\n      }\n      id\n    }\n  }\n  themeConfig {\n    customProperties\n  }\n  stripeAccountId\n  stripePublishableKey\n  currentOrder {\n    stripePaymentIntent {\n      clientSecret\n    }\n    id\n  }\n}\n\nfragment VariableTableAmounts_option on LicenseOption {\n  amounts\n}\n\nfragment VariableTableAmounts_variable on LicenseVariable {\n  units\n}\n"
     }
   };
 }();

package/dist/__generated__/StoreModalUnifiedCheckout_viewer.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<cc9fc7acff42885f262d5497151786e2>>
+ * @generated SignedSource<<ca5c7d5a8678cb68a0990463a7bb9c53>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -11,6 +11,8 @@ export type StoreModalUnifiedCheckout_viewer$data = {
     readonly settings: {
         readonly eulaAgreementLabel: string | null;
         readonly newsletterOptInLabel: string | null;
+        readonly recaptchaEnabled: boolean;
+        readonly recaptchaSiteKey: string | null;
         readonly storeModalSelectLicenseeLabel: string | null;
         readonly taxSystem: string;
         readonly uiFontName: string | null;

package/dist/__generated__/StoreModalUnifiedCheckout_viewer.graphql.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 /**
- * @generated SignedSource<<cc9fc7acff42885f262d5497151786e2>>
+ * @generated SignedSource<<ca5c7d5a8678cb68a0990463a7bb9c53>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -78,6 +78,18 @@ const node = function () {
         "kind": "ScalarField",
         "name": "taxSystem",
         "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "recaptchaEnabled",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "recaptchaSiteKey",
+        "storageKey": null
       }],
       "storageKey": null
     }, {
@@ -100,6 +112,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = "83cc5e6f8d508fb1c2356a72b040f9b0";
+node.hash = "048ce405742611f6684cb5306d28478b";
 var _default = node;
 exports.default = _default;

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -10,6 +10,7 @@ var _StoreModalUnifiedCheckoutUpdateCustomerMutation2 = _interopRequireDefault(r
 var _StoreModalUnifiedCheckout_order2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckout_order.graphql"));
 var _StoreModalUnifiedCheckout_viewer2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckout_viewer.graphql"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
 var Sentry = _interopRequireWildcard(require("@sentry/react"));
 var _reactRelay = require("react-relay");
 var _AddressFields = _interopRequireDefault(require("../Cart/AddressFields"));
@@ -168,14 +169,14 @@ function EditableSection(_ref) {
   }, "Change")));
 }
 function StoreModalUnifiedCheckout(_ref2) {
-  var _order$orderVariableS, _viewer$settings, _viewer$settings2, _order$stripePaymentI, _viewer$settings3, _order$stripePaymentI2, _order$stripePaymentI3;
+  var _order$orderVariableS, _viewer$settings, _viewer$settings2, _viewer$settings3, _viewer$settings4, _order$stripePaymentI, _viewer$settings5, _order$stripePaymentI2, _order$stripePaymentI3;
   let {
     order: orderKey,
     viewer: viewerKey,
     onScrollToTop,
     onUpdateOrderVariableSelections
   } = _ref2;
-  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "83cc5e6f8d508fb1c2356a72b040f9b0" && console.error("The definition of 'StoreModalUnifiedCheckout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_viewer2.default), viewerKey);
+  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "048ce405742611f6684cb5306d28478b" && console.error("The definition of 'StoreModalUnifiedCheckout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_viewer2.default), viewerKey);
   const order = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_order2.default.hash && _StoreModalUnifiedCheckout_order2.default.hash !== "7c5503876a562732ebaead9b2ae97180" && console.error("The definition of 'StoreModalUnifiedCheckout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_order2.default), orderKey);
 
   // Check if order has a country-type order variable with a different country than detected
@@ -292,6 +293,13 @@ function StoreModalUnifiedCheckout(_ref2) {
   const {
     form: config
   } = (0, _react.useContext)(_ConfigContext.default);
+
+  // reCAPTCHA state
+  const [recaptchaToken, setRecaptchaToken] = (0, _react.useState)(null);
+  const [pendingCustomerSubmit, setPendingCustomerSubmit] = (0, _react.useState)(null);
+  const recaptchaRef = (0, _react.useRef)(null);
+  const recaptchaEnabled = ((_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.recaptchaEnabled) ?? false;
+  const recaptchaSiteKey = (_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.recaptchaSiteKey;
   const onCompleted = (res, errors, onSuccess, onError) => {
     var _res$updateCustomer, _res$updateOrder;
     if (errors && errors.length > 0) {
@@ -402,11 +410,10 @@ function StoreModalUnifiedCheckout(_ref2) {
   // set initial state depending on if checkout is already in progress
   if (!order.customer) initialEditingState = 'customer';
   const [editing, setEditing] = (0, _react.useState)(initialEditingState);
-  const handleCustomerSubmit = _ref3 => {
-    let {
-      onSuccess,
-      onError
-    } = _ref3;
+
+  // Submit customer data with optional reCAPTCHA token
+  const submitCustomer = (0, _react.useCallback)((token, callbacks) => {
+    setPendingCustomerSubmit(null);
     if (!billingIdentity.name && !billingIdentity.email) {
       setBillingIdentity({
         ...billingIdentity,
@@ -415,11 +422,46 @@ function StoreModalUnifiedCheckout(_ref2) {
       });
     }
     updateCustomer({
-      input: customer
+      input: {
+        ...customer,
+        recaptchaToken: token ?? undefined
+      }
     }, () => {
-      onSuccess();
+      var _recaptchaRef$current;
+      callbacks.onSuccess();
       setEditing(null);
-    }, onError);
+      // Reset reCAPTCHA after successful submission
+      (_recaptchaRef$current = recaptchaRef.current) === null || _recaptchaRef$current === void 0 ? void 0 : _recaptchaRef$current.reset();
+      setRecaptchaToken(null);
+    }, () => {
+      var _recaptchaRef$current2;
+      callbacks.onError();
+      // Reset reCAPTCHA on error so user can retry
+      (_recaptchaRef$current2 = recaptchaRef.current) === null || _recaptchaRef$current2 === void 0 ? void 0 : _recaptchaRef$current2.reset();
+      setRecaptchaToken(null);
+    });
+  }, [customer, billingIdentity, updateCustomer]);
+  const handleRecaptchaChange = (0, _react.useCallback)(token => {
+    setRecaptchaToken(token);
+    // If we were waiting for a token to submit, do it now
+    if (token && pendingCustomerSubmit) {
+      submitCustomer(token, pendingCustomerSubmit.callbacks);
+    }
+  }, [pendingCustomerSubmit, submitCustomer]);
+  const handleRecaptchaExpired = (0, _react.useCallback)(() => {
+    setRecaptchaToken(null);
+  }, []);
+  const handleCustomerSubmit = callbacks => {
+    // If reCAPTCHA is enabled but no token, execute it and wait for callback
+    if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
+      var _recaptchaRef$current3;
+      setPendingCustomerSubmit({
+        callbacks
+      });
+      (_recaptchaRef$current3 = recaptchaRef.current) === null || _recaptchaRef$current3 === void 0 ? void 0 : _recaptchaRef$current3.execute();
+      return;
+    }
+    submitCustomer(recaptchaToken, callbacks);
   };
   const handleLicenseeIsBillingIdentityChange = (0, _react.useCallback)(value => {
     updateOrder({
@@ -613,8 +655,14 @@ function StoreModalUnifiedCheckout(_ref2) {
     }, "Contact information"), /*#__PURE__*/_react.default.createElement(_CustomerFields.default, {
       value: customer,
       onChange: handleCustomerChange,
-      optInLabel: (_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.newsletterOptInLabel,
+      optInLabel: (_viewer$settings3 = viewer.settings) === null || _viewer$settings3 === void 0 ? void 0 : _viewer$settings3.newsletterOptInLabel,
       errors: customerErrorsObject
+    }), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/_react.default.createElement(_reactGoogleRecaptcha.default, {
+      ref: recaptchaRef,
+      sitekey: recaptchaSiteKey,
+      size: "invisible",
+      onChange: handleRecaptchaChange,
+      onExpired: handleRecaptchaExpired
     }))
   }), order.customer && !hasCountryMismatch ? /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingIdentityElement.default, {
     disabled: false,
@@ -623,7 +671,7 @@ function StoreModalUnifiedCheckout(_ref2) {
   }, {
     label: /*#__PURE__*/_react.default.createElement("div", {
       dangerouslySetInnerHTML: {
-        __html: ((_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.storeModalSelectLicenseeLabel) ?? ''
+        __html: ((_viewer$settings4 = viewer.settings) === null || _viewer$settings4 === void 0 ? void 0 : _viewer$settings4.storeModalSelectLicenseeLabel) ?? ''
       }
     })
   }) : null, showLicenseeSection ? /*#__PURE__*/_react.default.createElement("div", {
@@ -702,7 +750,7 @@ function StoreModalUnifiedCheckout(_ref2) {
     htmlFor: "eula-agreement"
   }, /*#__PURE__*/_react.default.createElement("div", {
     dangerouslySetInnerHTML: {
-      __html: ((_viewer$settings3 = viewer.settings) === null || _viewer$settings3 === void 0 ? void 0 : _viewer$settings3.eulaAgreementLabel) ?? ''
+      __html: ((_viewer$settings5 = viewer.settings) === null || _viewer$settings5 === void 0 ? void 0 : _viewer$settings5.eulaAgreementLabel) ?? ''
     }
   }))), /*#__PURE__*/_react.default.createElement("button", {
     type: "submit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.18.2",
+  "version": "2.18.3",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",