@pelcro/react-pelcro-js 3.10.1-beta.8 → 3.11.0-beta.1

package/dist/index.cjs.js

@@ -15405,6 +15405,9 @@ const PaymentMethodContainerWithoutStripe = ({
     selectedPaymentMethodId,
     couponCode
   } = usePelcro();
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
   const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
   const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
@@ -15413,6 +15416,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
   const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
+  const cardProcessor = getSiteCardProcessor();
   React.useEffect(() => {
     if (window.Pelcro.coupon.getFromUrl()) {
       dispatch({
@@ -15686,6 +15690,52 @@ const PaymentMethodContainerWithoutStripe = ({
       }
     }
   }
+
+  const initTapScript = () => {
+    var _window$Pelcro$site$r;
+
+    const tapKey = window.Tapjsli((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings.publishable_key);
+    let elements = tapKey.elements({});
+    let style = {
+      base: {
+        color: "#535353",
+        lineHeight: "18px",
+        fontFamily: "sans-serif",
+        fontSmoothing: "antialiased",
+        fontSize: "16px",
+        "::placeholder": {
+          color: "rgba(0, 0, 0, 0.26)",
+          fontSize: "15px"
+        }
+      },
+      invalid: {
+        color: "red"
+      }
+    }; // input labels/placeholders
+
+    let labels = {
+      cardNumber: "Card Number",
+      expirationDate: "MM/YY",
+      cvv: "CVV",
+      cardHolder: "Card Holder Name"
+    }; //payment options
+
+    let paymentOptions = {
+      labels: labels,
+      TextDirection: "ltr"
+    }; //create element, pass style and payment options
+
+    let card = elements.create("card", {
+      style: style
+    }, paymentOptions); //mount element
+
+    card.mount("#tapPaymentIframe"); //card change event listener
+
+    card.addEventListener("change", function (event) {//If needed
+    });
+    tapInstanceRef.current = tapKey;
+    tapInstanceCard.current = card;
+  };
   /*====== End Tap integration ========*/
 
 
@@ -15868,13 +15918,11 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default['default'].useRef(null);
   const tapInstanceCard = React__default['default'].useRef(null);
   React.useEffect(() => {
-    const cardProcessor = getSiteCardProcessor();
-
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+      var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
 
-      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.report_group;
+      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;
+      const reportGroup = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -15896,75 +15944,21 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
+  }, [selectedPaymentMethodId]);
+  React.useEffect(() => {
+    whenUserReady(() => {
+      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");
+        document.querySelector('script[src="https://secure.gosell.io/js/sdk/tap.min.js"]').addEventListener("load", () => {
+          initTapScript();
+        });
+      }
 
-    if (cardProcessor === "tap" && !selectedPaymentMethodId) {
-      if (window.Tapjsli) {
-        var _window$Pelcro$site$r3;
-
-        console.log("Yes Tap JSLI is enabled");
-        const tapKey = Tapjsli((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.tap_gateway_settings.publishable_key);
-        let elements = tapKey.elements({});
-        let style = {
-          base: {
-            color: "#535353",
-            lineHeight: "18px",
-            fontFamily: "sans-serif",
-            fontSmoothing: "antialiased",
-            fontSize: "16px",
-            "::placeholder": {
-              color: "rgba(0, 0, 0, 0.26)",
-              fontSize: "15px"
-            }
-          },
-          invalid: {
-            color: "red"
-          }
-        }; // input labels/placeholders
-
-        let labels = {
-          cardNumber: "Card Number",
-          expirationDate: "MM/YY",
-          cvv: "CVV",
-          cardHolder: "Card Holder Name"
-        }; //payment options
-
-        let paymentOptions = {
-          labels: labels,
-          TextDirection: "ltr"
-        }; //create element, pass style and payment options
-
-        let card = elements.create("card", {
-          style: style
-        }, paymentOptions); //mount element
-
-        card.mount("#tapPaymentIframe"); //card change event listener
-
-        card.addEventListener("change", function (event) {// if (event.error_interactive) {
-          //   onFailure(event.error_interactive);
-          //   return dispatch({
-          //     type: SHOW_ALERT,
-          //     payload: {
-          //       type: "error",
-          //       content: getErrorMessages(event.error_interactive)
-          //     }
-          //   });
-          // } else {
-          //   dispatch({
-          //     type: SHOW_ALERT,
-          //     payload: { type: "error", content: "" }
-          //   });
-          // }
-          // let displayError = document.getElementById("error-handler");
-          // if (event.error) {
-          //   displayError.textContent = event.error.message;
-          // } else {
-          //   displayError.textContent = "";
-          // }
-        });
-        tapInstanceRef.current = tapKey;
-        tapInstanceCard.current = card;
+      if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
+        initTapScript();
       }
-    }
+    });
   }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {

package/dist/index.esm.js

@@ -15375,6 +15375,9 @@ const PaymentMethodContainerWithoutStripe = ({
     selectedPaymentMethodId,
     couponCode
   } = usePelcro();
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
   const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
   const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
@@ -15383,6 +15386,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
   const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
+  const cardProcessor = getSiteCardProcessor();
   useEffect(() => {
     if (window.Pelcro.coupon.getFromUrl()) {
       dispatch({
@@ -15656,6 +15660,52 @@ const PaymentMethodContainerWithoutStripe = ({
       }
     }
   }
+
+  const initTapScript = () => {
+    var _window$Pelcro$site$r;
+
+    const tapKey = window.Tapjsli((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings.publishable_key);
+    let elements = tapKey.elements({});
+    let style = {
+      base: {
+        color: "#535353",
+        lineHeight: "18px",
+        fontFamily: "sans-serif",
+        fontSmoothing: "antialiased",
+        fontSize: "16px",
+        "::placeholder": {
+          color: "rgba(0, 0, 0, 0.26)",
+          fontSize: "15px"
+        }
+      },
+      invalid: {
+        color: "red"
+      }
+    }; // input labels/placeholders
+
+    let labels = {
+      cardNumber: "Card Number",
+      expirationDate: "MM/YY",
+      cvv: "CVV",
+      cardHolder: "Card Holder Name"
+    }; //payment options
+
+    let paymentOptions = {
+      labels: labels,
+      TextDirection: "ltr"
+    }; //create element, pass style and payment options
+
+    let card = elements.create("card", {
+      style: style
+    }, paymentOptions); //mount element
+
+    card.mount("#tapPaymentIframe"); //card change event listener
+
+    card.addEventListener("change", function (event) {//If needed
+    });
+    tapInstanceRef.current = tapKey;
+    tapInstanceCard.current = card;
+  };
   /*====== End Tap integration ========*/
 
 
@@ -15838,13 +15888,11 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default.useRef(null);
   const tapInstanceCard = React__default.useRef(null);
   useEffect(() => {
-    const cardProcessor = getSiteCardProcessor();
-
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+      var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
 
-      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.report_group;
+      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;
+      const reportGroup = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -15866,75 +15914,21 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
+  }, [selectedPaymentMethodId]);
+  useEffect(() => {
+    whenUserReady(() => {
+      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");
+        document.querySelector('script[src="https://secure.gosell.io/js/sdk/tap.min.js"]').addEventListener("load", () => {
+          initTapScript();
+        });
+      }
 
-    if (cardProcessor === "tap" && !selectedPaymentMethodId) {
-      if (window.Tapjsli) {
-        var _window$Pelcro$site$r3;
-
-        console.log("Yes Tap JSLI is enabled");
-        const tapKey = Tapjsli((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.tap_gateway_settings.publishable_key);
-        let elements = tapKey.elements({});
-        let style = {
-          base: {
-            color: "#535353",
-            lineHeight: "18px",
-            fontFamily: "sans-serif",
-            fontSmoothing: "antialiased",
-            fontSize: "16px",
-            "::placeholder": {
-              color: "rgba(0, 0, 0, 0.26)",
-              fontSize: "15px"
-            }
-          },
-          invalid: {
-            color: "red"
-          }
-        }; // input labels/placeholders
-
-        let labels = {
-          cardNumber: "Card Number",
-          expirationDate: "MM/YY",
-          cvv: "CVV",
-          cardHolder: "Card Holder Name"
-        }; //payment options
-
-        let paymentOptions = {
-          labels: labels,
-          TextDirection: "ltr"
-        }; //create element, pass style and payment options
-
-        let card = elements.create("card", {
-          style: style
-        }, paymentOptions); //mount element
-
-        card.mount("#tapPaymentIframe"); //card change event listener
-
-        card.addEventListener("change", function (event) {// if (event.error_interactive) {
-          //   onFailure(event.error_interactive);
-          //   return dispatch({
-          //     type: SHOW_ALERT,
-          //     payload: {
-          //       type: "error",
-          //       content: getErrorMessages(event.error_interactive)
-          //     }
-          //   });
-          // } else {
-          //   dispatch({
-          //     type: SHOW_ALERT,
-          //     payload: { type: "error", content: "" }
-          //   });
-          // }
-          // let displayError = document.getElementById("error-handler");
-          // if (event.error) {
-          //   displayError.textContent = event.error.message;
-          // } else {
-          //   displayError.textContent = "";
-          // }
-        });
-        tapInstanceRef.current = tapKey;
-        tapInstanceCard.current = card;
+      if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
+        initTapScript();
       }
-    }
+    });
   }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {

package/package.json

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