@pelcro/react-pelcro-js 3.21.0-beta.1 → 3.21.0-beta.3

package/dist/index.cjs.js

@@ -11141,6 +11141,9 @@ const initViewFromURL = () => {
       if (view === "manage-members") {
         return showSubscriptionManageMembersFromUrl();
       }
+      if (view === "payment-method-update") {
+        return showPaymentMethodUpdateFromUrl();
+      }
       switchView(view);
     });
   }
@@ -11349,6 +11352,43 @@ const showPasswordlessRequestFromUrl = () => {
   } = usePelcro.getStore();
   return switchView("passwordless-request");
 };
+const showPaymentMethodUpdateFromUrl = () => {
+  const {
+    isAuthenticated,
+    whenSiteReady,
+    whenUserReady,
+    switchView
+  } = usePelcro.getStore();
+  whenSiteReady(() => {
+    if (!isAuthenticated()) {
+      return switchView("login");
+    }
+    whenUserReady(() => {
+      const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
+      const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
+      if (!window.Stripe && !supportsVantiv && !supportsTap) {
+        document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
+          return switchView("payment-method-update");
+        });
+        return;
+      }
+
+      //vantiv
+      if (supportsVantiv) {
+        document.querySelector("#vantiv-eprotect-sdk").addEventListener("load", () => {
+          return switchView("payment-method-update");
+        });
+        return;
+      }
+
+      //Tap
+      if (supportsTap && document.querySelector("#tap-sdk")) {
+        return switchView("payment-method-update");
+      }
+      return switchView("payment-method-update");
+    });
+  });
+};
 const showInvoiceDetailsFromUrl = () => {
   const {
     isAuthenticated,
@@ -16397,7 +16437,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       } else {
-        window.Pelcro.payment.authorize({
+        window.Pelcro.payment.verify({
           auth_token: window.Pelcro.user.read().auth_token,
           first_name: window.Pelcro.user.read().first_name || state.firstName,
           last_name: window.Pelcro.user.read().last_name || state.lastName,
@@ -16406,7 +16446,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           amount: totalAmount,
           currency: (plan === null || plan === void 0 ? void 0 : plan.currency) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency) || window.Pelcro.site.read().default_currency,
           tap_token: result.id,
-          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}`
+          funding: result.card.funding,
+          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}&type=verify_card&site_id=${window.Pelcro.siteid}`
         }, (err, res) => {
           if (err) {
             // Inform the user if there was an error
@@ -16483,6 +16524,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           type: LOADING,
           payload: false
         });
+        toggleAuthenticationSuccessPendingView(false);
         if (err) {
           onFailure(err);
           return dispatch({
@@ -16501,8 +16543,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
         onSuccess(res);
-      });
+      } //
+      );
     }
+
     function handleTapSubscription() {
       const payment = new Payment(new TapGateway());
       const createSubscription = !isGift && !subscriptionIdToRenew;
@@ -16791,7 +16835,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const tapInstanceRef = React__default['default'].useRef(null);
   const tapInstanceCard = React__default['default'].useRef(null);
   React.useEffect(() => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
       var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
       const payPageId = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.pay_page_id;
@@ -16820,7 +16864,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, [selectedPaymentMethodId]);
   React.useEffect(() => {
     whenUserReady(() => {
-      if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+      if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
       if (cardProcessor === "tap" && !window.Tapjsli) {
         window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
         window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
@@ -16834,7 +16878,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   }, [selectedPaymentMethodId]);
   const initPaymentRequest = (state, dispatch) => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
     try {
       const paymentRequest = stripe.paymentRequest({
         country: window.Pelcro.user.location.countryCode || "US",
@@ -16903,7 +16947,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    */
   const updateTotalAmountWithTax = () => {
     var _window$Pelcro$site$r4;
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
     const taxesEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.taxes_enabled;
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -17498,6 +17542,29 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
   const submitPayment = (state, dispatch) => {
+    if (skipPayment && (order === null || order === void 0 ? void 0 : order.price) === 0) {
+      const isQuickPurchase = !Array.isArray(order);
+      const mappedOrderItems = isQuickPurchase ? [{
+        sku_id: order.id,
+        quantity: order.quantity
+      }] : order.map(item => ({
+        sku_id: item.id,
+        quantity: item.quantity
+      }));
+      window.Pelcro.ecommerce.order.create({
+        items: mappedOrderItems,
+        campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+        ...(selectedAddressId && {
+          address_id: selectedAddressId
+        })
+      }, (err, res) => {
+        if (err) {
+          return handlePaymentError(err);
+        }
+        return onSuccess(res);
+      });
+      return;
+    }
     stripe.createSource({
       type: "card"
     }).then(_ref8 => {
@@ -17859,10 +17926,14 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$k,
-    key: i
-  })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default['default'].cloneElement(child, {
+        store: store$k,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
     store: store$k
   })));
 };
@@ -18684,6 +18755,42 @@ const SubscriptionCreateFreePlanButton = _ref => {
   }, otherProps), t("buttons.subscribe"));
 };
 
+const OrderCreateFreeButton = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = React.useContext(store$k);
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const [isDisabled, setDisabled] = React.useState(true);
+  React.useEffect(() => {
+    setDisabled(disableSubmit);
+  }, [disableSubmit]);
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+    className: "plc-w-full",
+    onClick: () => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+      dispatch({
+        type: SUBMIT_PAYMENT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isDisabled,
+    isLoading: disableSubmit
+  }, otherProps), t("labels.submit"));
+};
+
 /**
  *
  */
@@ -18696,7 +18803,8 @@ function PaymentMethodView(_ref) {
     type,
     showCoupon,
     showExternalPaymentMethods,
-    showSubscriptionButton
+    showSubscriptionButton,
+    showOrderButton
   } = _ref;
   const {
     t
@@ -18709,7 +18817,7 @@ function PaymentMethodView(_ref) {
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
-  }, cardProcessor === "stripe" && !showSubscriptionButton && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
   }, /*#__PURE__*/React__default['default'].createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -18728,7 +18836,7 @@ function PaymentMethodView(_ref) {
     onFailure: onFailure
   }, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton ? /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateFreePlanButton, null) : /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default['default'].createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -24138,9 +24246,15 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default['default'].cre
 }, props));
 
 const OrderCreateView = props => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
   const {
     t
   } = useTranslation("payment");
+  const {
+    order
+  } = usePelcro();
+  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
+  const showOrderButton = skipPayment && (order === null || order === void 0 ? void 0 : order.price) === 0;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-order-create-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -24151,7 +24265,8 @@ const OrderCreateView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false
+    showExternalPaymentMethods: false,
+    showOrderButton: showOrderButton
   }, props))));
 };
 
@@ -25359,11 +25474,12 @@ const PaymentMethodSelectModal = _ref => {
   const {
     switchToCheckoutForm,
     set,
-    plan
+    plan,
+    order
   } = usePelcro();
   const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
   React.useEffect(() => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) {
       switchToCheckoutForm();
     }
   }, []);
@@ -32181,6 +32297,7 @@ exports.NewsletterUpdateView = NewsletterUpdateView;
 exports.Notification = Notification;
 exports.OrderConfirmModal = OrderConfirmModal;
 exports.OrderCreateContainer = OrderCreateContainer;
+exports.OrderCreateFreeButton = OrderCreateFreeButton;
 exports.OrderCreateModal = OrderCreateModal;
 exports.OrderCreateSubmitButton = OrderCreateSubmitButton;
 exports.OrderCreateView = OrderCreateView;

package/dist/index.esm.js

@@ -11111,6 +11111,9 @@ const initViewFromURL = () => {
       if (view === "manage-members") {
         return showSubscriptionManageMembersFromUrl();
       }
+      if (view === "payment-method-update") {
+        return showPaymentMethodUpdateFromUrl();
+      }
       switchView(view);
     });
   }
@@ -11319,6 +11322,43 @@ const showPasswordlessRequestFromUrl = () => {
   } = usePelcro.getStore();
   return switchView("passwordless-request");
 };
+const showPaymentMethodUpdateFromUrl = () => {
+  const {
+    isAuthenticated,
+    whenSiteReady,
+    whenUserReady,
+    switchView
+  } = usePelcro.getStore();
+  whenSiteReady(() => {
+    if (!isAuthenticated()) {
+      return switchView("login");
+    }
+    whenUserReady(() => {
+      const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
+      const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
+      if (!window.Stripe && !supportsVantiv && !supportsTap) {
+        document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
+          return switchView("payment-method-update");
+        });
+        return;
+      }
+
+      //vantiv
+      if (supportsVantiv) {
+        document.querySelector("#vantiv-eprotect-sdk").addEventListener("load", () => {
+          return switchView("payment-method-update");
+        });
+        return;
+      }
+
+      //Tap
+      if (supportsTap && document.querySelector("#tap-sdk")) {
+        return switchView("payment-method-update");
+      }
+      return switchView("payment-method-update");
+    });
+  });
+};
 const showInvoiceDetailsFromUrl = () => {
   const {
     isAuthenticated,
@@ -16367,7 +16407,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       } else {
-        window.Pelcro.payment.authorize({
+        window.Pelcro.payment.verify({
           auth_token: window.Pelcro.user.read().auth_token,
           first_name: window.Pelcro.user.read().first_name || state.firstName,
           last_name: window.Pelcro.user.read().last_name || state.lastName,
@@ -16376,7 +16416,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           amount: totalAmount,
           currency: (plan === null || plan === void 0 ? void 0 : plan.currency) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency) || window.Pelcro.site.read().default_currency,
           tap_token: result.id,
-          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}`
+          funding: result.card.funding,
+          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}&type=verify_card&site_id=${window.Pelcro.siteid}`
         }, (err, res) => {
           if (err) {
             // Inform the user if there was an error
@@ -16453,6 +16494,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           type: LOADING,
           payload: false
         });
+        toggleAuthenticationSuccessPendingView(false);
         if (err) {
           onFailure(err);
           return dispatch({
@@ -16471,8 +16513,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
         onSuccess(res);
-      });
+      } //
+      );
     }
+
     function handleTapSubscription() {
       const payment = new Payment(new TapGateway());
       const createSubscription = !isGift && !subscriptionIdToRenew;
@@ -16761,7 +16805,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const tapInstanceRef = React__default.useRef(null);
   const tapInstanceCard = React__default.useRef(null);
   useEffect(() => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
       var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
       const payPageId = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.pay_page_id;
@@ -16790,7 +16834,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, [selectedPaymentMethodId]);
   useEffect(() => {
     whenUserReady(() => {
-      if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+      if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
       if (cardProcessor === "tap" && !window.Tapjsli) {
         window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
         window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
@@ -16804,7 +16848,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   }, [selectedPaymentMethodId]);
   const initPaymentRequest = (state, dispatch) => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
     try {
       const paymentRequest = stripe.paymentRequest({
         country: window.Pelcro.user.location.countryCode || "US",
@@ -16873,7 +16917,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    */
   const updateTotalAmountWithTax = () => {
     var _window$Pelcro$site$r4;
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
     const taxesEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.taxes_enabled;
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -17468,6 +17512,29 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
   const submitPayment = (state, dispatch) => {
+    if (skipPayment && (order === null || order === void 0 ? void 0 : order.price) === 0) {
+      const isQuickPurchase = !Array.isArray(order);
+      const mappedOrderItems = isQuickPurchase ? [{
+        sku_id: order.id,
+        quantity: order.quantity
+      }] : order.map(item => ({
+        sku_id: item.id,
+        quantity: item.quantity
+      }));
+      window.Pelcro.ecommerce.order.create({
+        items: mappedOrderItems,
+        campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+        ...(selectedAddressId && {
+          address_id: selectedAddressId
+        })
+      }, (err, res) => {
+        if (err) {
+          return handlePaymentError(err);
+        }
+        return onSuccess(res);
+      });
+      return;
+    }
     stripe.createSource({
       type: "card"
     }).then(_ref8 => {
@@ -17829,10 +17896,14 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$k,
-    key: i
-  })) : /*#__PURE__*/React__default.cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        store: store$k,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default.cloneElement(children, {
     store: store$k
   })));
 };
@@ -18654,6 +18725,42 @@ const SubscriptionCreateFreePlanButton = _ref => {
   }, otherProps), t("buttons.subscribe"));
 };
 
+const OrderCreateFreeButton = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = useContext(store$k);
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const [isDisabled, setDisabled] = useState(true);
+  useEffect(() => {
+    setDisabled(disableSubmit);
+  }, [disableSubmit]);
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    className: "plc-w-full",
+    onClick: () => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+      dispatch({
+        type: SUBMIT_PAYMENT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isDisabled,
+    isLoading: disableSubmit
+  }, otherProps), t("labels.submit"));
+};
+
 /**
  *
  */
@@ -18666,7 +18773,8 @@ function PaymentMethodView(_ref) {
     type,
     showCoupon,
     showExternalPaymentMethods,
-    showSubscriptionButton
+    showSubscriptionButton,
+    showOrderButton
   } = _ref;
   const {
     t
@@ -18679,7 +18787,7 @@ function PaymentMethodView(_ref) {
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
-  }, cardProcessor === "stripe" && !showSubscriptionButton && /*#__PURE__*/React__default.createElement("div", {
+  }, cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
   }, /*#__PURE__*/React__default.createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -18698,7 +18806,7 @@ function PaymentMethodView(_ref) {
     onFailure: onFailure
   }, /*#__PURE__*/React__default.createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton ? /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default.createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -24108,9 +24216,15 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default.createElement(
 }, props));
 
 const OrderCreateView = props => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
   const {
     t
   } = useTranslation("payment");
+  const {
+    order
+  } = usePelcro();
+  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
+  const showOrderButton = skipPayment && (order === null || order === void 0 ? void 0 : order.price) === 0;
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-order-create-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -24121,7 +24235,8 @@ const OrderCreateView = props => {
   }, /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false
+    showExternalPaymentMethods: false,
+    showOrderButton: showOrderButton
   }, props))));
 };
 
@@ -25329,11 +25444,12 @@ const PaymentMethodSelectModal = _ref => {
   const {
     switchToCheckoutForm,
     set,
-    plan
+    plan,
+    order
   } = usePelcro();
   const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
   useEffect(() => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) {
       switchToCheckoutForm();
     }
   }, []);
@@ -32038,4 +32154,4 @@ const QrCodeModal = _ref => {
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.21.0-beta.1",
+  "version": "3.21.0-beta.3",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",