@pelcro/react-pelcro-js 3.1.0-beta.4 → 3.1.0-beta.5

package/dist/index.cjs.js

@@ -8629,6 +8629,7 @@ var pure_1 = pure.loadStripe;
  * @param {Object} error Error object
  * @return {string}
  */
+
 const getErrorMessages = error => {
   var _error$error, _error$response, _error$response$data, _error$response3, _error$response3$data, _error$response3$data2, _error$response5, _error$response5$data;
 
@@ -8683,6 +8684,20 @@ const debounce = (func, waitTime) => {
     timeout = setTimeout(later, waitTime);
   };
 };
+function getSiteCardProcessor() {
+  var _window$Pelcro$site$r;
+
+  const {
+    view
+  } = usePelcro.getStore();
+  const temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE = view === "subscription-create";
+
+  if (temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE && (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_pay_page_id) {
+    return "vantiv";
+  }
+
+  return "stripe";
+}
 
 /**
  * @typedef {Object} OptionsType
@@ -8763,13 +8778,26 @@ const loadPaymentSDKs = () => {
     if (!window.Stripe) {
       pure_1(window.Pelcro.environment.stripe);
     }
-  }); // Load PayPal SDK's
+  }); // Load PayPal SDKs
 
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
 
   if (supportsPaypal) {
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/client.min.js", "braintree-sdk");
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+  } // Load Vantiv SDKs
+
+
+  const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_pay_page_id);
+
+  if (supportsVantiv) {
+    if (!window.jQuery) {
+      window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
+    }
+
+    if (!window.EprotectIframeClient) {
+      window.Pelcro.helpers.loadSDK("https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js", "vantiv-eprotect-sdk");
+    }
   }
 };
 const loadAuth0SDK = () => {
@@ -12744,7 +12772,7 @@ var _generateUserError = /*#__PURE__*/new WeakMap();
 class Subscription {
   /**
    * Subscription service  constructor
-   * @param {(StripeGateway|PaypalGateWay)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -12765,7 +12793,7 @@ class Subscription {
     _isPaymentGatewayInvalid.set(this, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway) && gateway && !(gateway instanceof PaypalGateWay);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway);
       }
     });
 
@@ -12818,7 +12846,8 @@ class Subscription {
 }
 const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
-  paypal: "braintree"
+  paypal: "braintree",
+  vantiv: "vantiv"
 };
 /**
  * Subscription Strategies
@@ -13010,7 +13039,7 @@ var _createGiftedSubscription2 = /*#__PURE__*/new WeakMap();
 
 var _payInvoice2 = /*#__PURE__*/new WeakMap();
 
-class PaypalGateWay {
+class PaypalGateway {
   constructor() {
     _paymentGateway2.set(this, {
       writable: true,
@@ -13111,6 +13140,57 @@ class PaypalGateWay {
 
 }
 
+var _paymentGateway3 = /*#__PURE__*/new WeakMap();
+
+var _createSubscription3 = /*#__PURE__*/new WeakMap();
+
+class VantivGateway {
+  constructor() {
+    _paymentGateway3.set(this, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["vantiv"]
+    });
+
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = SUBSCRIPTION_TYPES;
+
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
+
+        default:
+          console.error("Unsupported subscriptiion method: vantiv Gateway");
+      }
+    });
+
+    _createSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          quantity = 1,
+          addressId
+        } = options;
+        window.Pelcro.subscription.create({
+          quantity,
+          gateway_token: token,
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+
+}
+
 /**
  * @typedef {Object} PaymentStateType
  * @property {boolean} disableSubmit
@@ -13198,6 +13278,78 @@ const PaymentMethodContainerWithoutStripe = ({
     updateTotalAmountWithTax();
   }, []);
 
+  function submitVantivPayment() {
+    if (!vantivInstanceRef.current) {
+      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
+    }
+
+    const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
+
+    vantivInstanceRef.current.getPaypageRegistrationId({
+      id: orderId,
+      orderId: orderId
+    });
+  }
+
+  function handleVantivPayment(paymentRequest) {
+    const SUCCESS_STATUS = "870";
+
+    if (paymentRequest.response !== SUCCESS_STATUS) {
+      return handlePaymentError({
+        error: new Error(paymentRequest.message)
+      });
+    }
+
+    const subscription = new Subscription(new VantivGateway());
+    const {
+      couponCode
+    } = state;
+    return subscription.execute({
+      type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
+      token: paymentRequest,
+      quantity: plan.quantity,
+      plan,
+      couponCode,
+      product,
+      addressId: selectedAddressId
+    }, (err, res) => {
+      if (err) {
+        return handlePaymentError(err);
+      }
+
+      onSuccess(res);
+    });
+  }
+
+  const vantivInstanceRef = React__default['default'].useRef(null);
+  React.useEffect(() => {
+    const cardProcessor = getSiteCardProcessor();
+
+    if (cardProcessor === "vantiv") {
+      var _window$Pelcro$site$r;
+
+      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_pay_page_id;
+      vantivInstanceRef.current = new window.EprotectIframeClient({
+        paypageId: payPageId,
+        reportGroup: payPageId,
+        style: "pelcro",
+        height: "245",
+        timeout: 50000,
+        div: "eProtectiframe",
+        callback: handleVantivPayment,
+        showCvv: true,
+        numYears: 8,
+        placeholderText: {
+          cvv: "CVV",
+          accountNumber: "1234 1234 1234 1234"
+        },
+        enhancedUxFeatures: {
+          inlineFieldValidations: true
+        }
+      });
+    }
+  }, []);
+
   const initPaymentRequest = (state, dispatch) => {
     try {
       const paymentRequest = stripe.paymentRequest({
@@ -13268,9 +13420,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r;
+    var _window$Pelcro$site$r2;
 
-    const taxesEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
 
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -13620,7 +13772,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const handlePaypalSubscription = (state, paypalNonce) => {
-    const subscription = new Subscription(new PaypalGateWay());
+    const subscription = new Subscription(new PaypalGateway());
     const {
       couponCode
     } = state;
@@ -13915,13 +14067,13 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r2;
+    var _window$Pelcro$site$r3;
 
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
 
-    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -14000,6 +14152,8 @@ const PaymentMethodContainerWithoutStripe = ({
   };
 
   const handlePaymentError = error => {
+    var _getErrorMessages;
+
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
       var _state$couponObject;
@@ -14018,7 +14172,7 @@ const PaymentMethodContainerWithoutStripe = ({
       type: SHOW_ALERT,
       payload: {
         type: "error",
-        content: error === null || error === void 0 ? void 0 : error.message
+        content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
       }
     });
     dispatch({
@@ -14122,10 +14276,14 @@ const PaymentMethodContainerWithoutStripe = ({
           }
 
           if (type === "updatePaymentSource") {
-            updatePaymentSource(state, dispatch);
-          } else {
-            submitPayment(state);
+            return updatePaymentSource(state, dispatch);
+          }
+
+          if (getSiteCardProcessor() === "vantiv") {
+            return submitVantivPayment();
           }
+
+          submitPayment(state);
         });
 
       case HANDLE_PAYPAL_SUBSCRIPTION:
@@ -14314,19 +14472,35 @@ const CheckoutForm = () => {
   const {
     selectedPaymentMethodId
   } = usePelcro();
-  return !selectedPaymentMethodId && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
-    autoFocus: true
-  }), /*#__PURE__*/React__default['default'].createElement("img", {
-    alt: "credit_cards",
-    className: "plc-h-4 plc-w-auto plc-mt-2",
-    src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-justify-between plc-my-2 plc-items-end"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-6/12 plc-pr-4"
-  }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-6/12 plc-pl-4"
-  }, /*#__PURE__*/React__default['default'].createElement(PelcroCardCVC, null))));
+  const cardProcessor = getSiteCardProcessor();
+
+  if (selectedPaymentMethodId) {
+    return null;
+  }
+
+  if (cardProcessor === "vantiv") {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "eProtectiframe"
+    });
+  }
+
+  if (cardProcessor === "stripe") {
+    return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
+      autoFocus: true
+    }), /*#__PURE__*/React__default['default'].createElement("img", {
+      alt: "credit_cards",
+      className: "plc-w-auto plc-h-4 plc-mt-2",
+      src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-6/12 plc-pr-4"
+    }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-6/12 plc-pl-4"
+    }, /*#__PURE__*/React__default['default'].createElement(PelcroCardCVC, null))));
+  }
+
+  return null;
 };
 
 const DiscountedPrice = props => {
@@ -14976,9 +15150,10 @@ function PaymentMethodView({
   const {
     t
   } = useTranslation("checkoutForm");
+  const cardProcessor = getSiteCardProcessor();
   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"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, cardProcessor === "stripe" && /*#__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"

package/dist/index.esm.js

@@ -8599,6 +8599,7 @@ var pure_1 = pure.loadStripe;
  * @param {Object} error Error object
  * @return {string}
  */
+
 const getErrorMessages = error => {
   var _error$error, _error$response, _error$response$data, _error$response3, _error$response3$data, _error$response3$data2, _error$response5, _error$response5$data;
 
@@ -8653,6 +8654,20 @@ const debounce = (func, waitTime) => {
     timeout = setTimeout(later, waitTime);
   };
 };
+function getSiteCardProcessor() {
+  var _window$Pelcro$site$r;
+
+  const {
+    view
+  } = usePelcro.getStore();
+  const temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE = view === "subscription-create";
+
+  if (temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE && (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_pay_page_id) {
+    return "vantiv";
+  }
+
+  return "stripe";
+}
 
 /**
  * @typedef {Object} OptionsType
@@ -8733,13 +8748,26 @@ const loadPaymentSDKs = () => {
     if (!window.Stripe) {
       pure_1(window.Pelcro.environment.stripe);
     }
-  }); // Load PayPal SDK's
+  }); // Load PayPal SDKs
 
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
 
   if (supportsPaypal) {
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/client.min.js", "braintree-sdk");
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+  } // Load Vantiv SDKs
+
+
+  const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_pay_page_id);
+
+  if (supportsVantiv) {
+    if (!window.jQuery) {
+      window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
+    }
+
+    if (!window.EprotectIframeClient) {
+      window.Pelcro.helpers.loadSDK("https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js", "vantiv-eprotect-sdk");
+    }
   }
 };
 const loadAuth0SDK = () => {
@@ -12714,7 +12742,7 @@ var _generateUserError = /*#__PURE__*/new WeakMap();
 class Subscription {
   /**
    * Subscription service  constructor
-   * @param {(StripeGateway|PaypalGateWay)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -12735,7 +12763,7 @@ class Subscription {
     _isPaymentGatewayInvalid.set(this, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway) && gateway && !(gateway instanceof PaypalGateWay);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway);
       }
     });
 
@@ -12788,7 +12816,8 @@ class Subscription {
 }
 const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
-  paypal: "braintree"
+  paypal: "braintree",
+  vantiv: "vantiv"
 };
 /**
  * Subscription Strategies
@@ -12980,7 +13009,7 @@ var _createGiftedSubscription2 = /*#__PURE__*/new WeakMap();
 
 var _payInvoice2 = /*#__PURE__*/new WeakMap();
 
-class PaypalGateWay {
+class PaypalGateway {
   constructor() {
     _paymentGateway2.set(this, {
       writable: true,
@@ -13081,6 +13110,57 @@ class PaypalGateWay {
 
 }
 
+var _paymentGateway3 = /*#__PURE__*/new WeakMap();
+
+var _createSubscription3 = /*#__PURE__*/new WeakMap();
+
+class VantivGateway {
+  constructor() {
+    _paymentGateway3.set(this, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["vantiv"]
+    });
+
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = SUBSCRIPTION_TYPES;
+
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
+
+        default:
+          console.error("Unsupported subscriptiion method: vantiv Gateway");
+      }
+    });
+
+    _createSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          quantity = 1,
+          addressId
+        } = options;
+        window.Pelcro.subscription.create({
+          quantity,
+          gateway_token: token,
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+
+}
+
 /**
  * @typedef {Object} PaymentStateType
  * @property {boolean} disableSubmit
@@ -13168,6 +13248,78 @@ const PaymentMethodContainerWithoutStripe = ({
     updateTotalAmountWithTax();
   }, []);
 
+  function submitVantivPayment() {
+    if (!vantivInstanceRef.current) {
+      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
+    }
+
+    const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
+
+    vantivInstanceRef.current.getPaypageRegistrationId({
+      id: orderId,
+      orderId: orderId
+    });
+  }
+
+  function handleVantivPayment(paymentRequest) {
+    const SUCCESS_STATUS = "870";
+
+    if (paymentRequest.response !== SUCCESS_STATUS) {
+      return handlePaymentError({
+        error: new Error(paymentRequest.message)
+      });
+    }
+
+    const subscription = new Subscription(new VantivGateway());
+    const {
+      couponCode
+    } = state;
+    return subscription.execute({
+      type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
+      token: paymentRequest,
+      quantity: plan.quantity,
+      plan,
+      couponCode,
+      product,
+      addressId: selectedAddressId
+    }, (err, res) => {
+      if (err) {
+        return handlePaymentError(err);
+      }
+
+      onSuccess(res);
+    });
+  }
+
+  const vantivInstanceRef = React__default.useRef(null);
+  useEffect(() => {
+    const cardProcessor = getSiteCardProcessor();
+
+    if (cardProcessor === "vantiv") {
+      var _window$Pelcro$site$r;
+
+      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_pay_page_id;
+      vantivInstanceRef.current = new window.EprotectIframeClient({
+        paypageId: payPageId,
+        reportGroup: payPageId,
+        style: "pelcro",
+        height: "245",
+        timeout: 50000,
+        div: "eProtectiframe",
+        callback: handleVantivPayment,
+        showCvv: true,
+        numYears: 8,
+        placeholderText: {
+          cvv: "CVV",
+          accountNumber: "1234 1234 1234 1234"
+        },
+        enhancedUxFeatures: {
+          inlineFieldValidations: true
+        }
+      });
+    }
+  }, []);
+
   const initPaymentRequest = (state, dispatch) => {
     try {
       const paymentRequest = stripe.paymentRequest({
@@ -13238,9 +13390,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r;
+    var _window$Pelcro$site$r2;
 
-    const taxesEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
 
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -13590,7 +13742,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const handlePaypalSubscription = (state, paypalNonce) => {
-    const subscription = new Subscription(new PaypalGateWay());
+    const subscription = new Subscription(new PaypalGateway());
     const {
       couponCode
     } = state;
@@ -13885,13 +14037,13 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r2;
+    var _window$Pelcro$site$r3;
 
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
 
-    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -13970,6 +14122,8 @@ const PaymentMethodContainerWithoutStripe = ({
   };
 
   const handlePaymentError = error => {
+    var _getErrorMessages;
+
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
       var _state$couponObject;
@@ -13988,7 +14142,7 @@ const PaymentMethodContainerWithoutStripe = ({
       type: SHOW_ALERT,
       payload: {
         type: "error",
-        content: error === null || error === void 0 ? void 0 : error.message
+        content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
       }
     });
     dispatch({
@@ -14092,10 +14246,14 @@ const PaymentMethodContainerWithoutStripe = ({
           }
 
           if (type === "updatePaymentSource") {
-            updatePaymentSource(state, dispatch);
-          } else {
-            submitPayment(state);
+            return updatePaymentSource(state, dispatch);
+          }
+
+          if (getSiteCardProcessor() === "vantiv") {
+            return submitVantivPayment();
           }
+
+          submitPayment(state);
         });
 
       case HANDLE_PAYPAL_SUBSCRIPTION:
@@ -14284,19 +14442,35 @@ const CheckoutForm = () => {
   const {
     selectedPaymentMethodId
   } = usePelcro();
-  return !selectedPaymentMethodId && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
-    autoFocus: true
-  }), /*#__PURE__*/React__default.createElement("img", {
-    alt: "credit_cards",
-    className: "plc-h-4 plc-w-auto plc-mt-2",
-    src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-justify-between plc-my-2 plc-items-end"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-6/12 plc-pr-4"
-  }, /*#__PURE__*/React__default.createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-6/12 plc-pl-4"
-  }, /*#__PURE__*/React__default.createElement(PelcroCardCVC, null))));
+  const cardProcessor = getSiteCardProcessor();
+
+  if (selectedPaymentMethodId) {
+    return null;
+  }
+
+  if (cardProcessor === "vantiv") {
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: "eProtectiframe"
+    });
+  }
+
+  if (cardProcessor === "stripe") {
+    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
+      autoFocus: true
+    }), /*#__PURE__*/React__default.createElement("img", {
+      alt: "credit_cards",
+      className: "plc-w-auto plc-h-4 plc-mt-2",
+      src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-6/12 plc-pr-4"
+    }, /*#__PURE__*/React__default.createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-6/12 plc-pl-4"
+    }, /*#__PURE__*/React__default.createElement(PelcroCardCVC, null))));
+  }
+
+  return null;
 };
 
 const DiscountedPrice = props => {
@@ -14946,9 +15120,10 @@ function PaymentMethodView({
   const {
     t
   } = useTranslation("checkoutForm");
+  const cardProcessor = getSiteCardProcessor();
   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"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, cardProcessor === "stripe" && /*#__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"

package/package.json

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