@pelcro/react-pelcro-js 3.2.0-beta.2 → 3.2.0-beta.3

package/dist/index.cjs.js

@@ -13139,6 +13139,12 @@ var _paymentGateway3 = /*#__PURE__*/new WeakMap();
 
 var _createSubscription3 = /*#__PURE__*/new WeakMap();
 
+var _renewSubscription2 = /*#__PURE__*/new WeakMap();
+
+var _createGiftedSubscription3 = /*#__PURE__*/new WeakMap();
+
+var _renewGiftedSubscription2 = /*#__PURE__*/new WeakMap();
+
 class VantivGateway {
   constructor() {
     _paymentGateway3.set(this, {
@@ -13153,6 +13159,18 @@ class VantivGateway {
         case types.CREATE_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
 
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription2).call(this, options, callback);
+
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription3).call(this, options, callback);
+
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription2).call(this, options, callback);
+        // TODO: implement paying invoices as well
+        // case types.PAY_INVOICE:
+        //   return this.#payInvoice(options, callback);
+
         default:
           console.error("Unsupported subscriptiion method: vantiv Gateway");
       }
@@ -13167,16 +13185,121 @@ class VantivGateway {
           couponCode,
           product,
           quantity = 1,
-          addressId
+          addressId,
+          isExistingSource
         } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
         window.Pelcro.subscription.create({
           quantity,
-          gateway_token: token,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _renewSubscription2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
           payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
           coupon_code: couponCode,
-          address_id: product.address_required ? addressId : null
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _createGiftedSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          giftRecipient,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          gift_recipient_email: giftRecipient.email,
+          gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
+          gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
+          gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
+          gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _renewGiftedSubscription2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renewGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
         }, (err, res) => {
           callback(err, res);
         });
@@ -13241,7 +13364,7 @@ const PaymentMethodContainerWithoutStripe = ({
   onFailure = () => {},
   ...props
 }) => {
-  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isRenewingGift, _props$invoice;
+  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice;
 
   const {
     t
@@ -13257,6 +13380,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
   const selectedAddressId = (_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : pelcroStore.selectedAddressId;
   const giftRecipient = (_props$giftRecipient = props.giftRecipient) !== null && _props$giftRecipient !== void 0 ? _props$giftRecipient : pelcroStore.giftRecipient;
+  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;
   React.useEffect(() => {
@@ -13274,53 +13398,134 @@ const PaymentMethodContainerWithoutStripe = ({
   }, []);
 
   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");
-    }
+    if (!selectedPaymentMethodId) {
+      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
+      const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
 
-    vantivInstanceRef.current.getPaypageRegistrationId({
-      id: orderId,
-      orderId: orderId
-    });
+      vantivInstanceRef.current.getPaypageRegistrationId({
+        id: orderId,
+        orderId: orderId
+      });
+    } else {
+      handleVantivPayment(null);
+    }
   }
 
   function handleVantivPayment(paymentRequest) {
-    const SUCCESS_STATUS = "870";
+    if (paymentRequest) {
+      const SUCCESS_STATUS = "870";
 
-    if (paymentRequest.response !== SUCCESS_STATUS) {
-      return handlePaymentError({
-        error: new Error(paymentRequest.message)
-      });
+      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);
-    });
+    if (type === "createPayment") {
+      handleVantivSubscription();
+    } // TODO: handle other types of payments
+    // } else if (type === "orderCreate") {
+    //   purchase(stripeSource, state, dispatch);
+    // } else if (type === "invoicePayment") {
+    //   payInvoice(new StripeGateway(), stripeSource.id, dispatch);
+    // }
+
+
+    function handleVantivSubscription() {
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      const {
+        couponCode
+      } = state;
+      const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+
+      if (renewGift) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.RENEW_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (giftSubscriprition) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          giftRecipient,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (renewSubscription) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.RENEW_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (createSubscription) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          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") {
+    if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
       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;
@@ -13343,7 +13548,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, []);
+  }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {
     try {
@@ -14262,6 +14467,10 @@ const PaymentMethodContainerWithoutStripe = ({
           disableSubmit: true,
           isLoading: true
         }, (state, dispatch) => {
+          if (getSiteCardProcessor() === "vantiv") {
+            return submitVantivPayment();
+          }
+
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -14274,10 +14483,6 @@ const PaymentMethodContainerWithoutStripe = ({
             return updatePaymentSource(state, dispatch);
           }
 
-          if (getSiteCardProcessor() === "vantiv") {
-            return submitVantivPayment();
-          }
-
           submitPayment(state);
         });
 

package/dist/index.esm.js

@@ -13109,6 +13109,12 @@ var _paymentGateway3 = /*#__PURE__*/new WeakMap();
 
 var _createSubscription3 = /*#__PURE__*/new WeakMap();
 
+var _renewSubscription2 = /*#__PURE__*/new WeakMap();
+
+var _createGiftedSubscription3 = /*#__PURE__*/new WeakMap();
+
+var _renewGiftedSubscription2 = /*#__PURE__*/new WeakMap();
+
 class VantivGateway {
   constructor() {
     _paymentGateway3.set(this, {
@@ -13123,6 +13129,18 @@ class VantivGateway {
         case types.CREATE_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
 
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription2).call(this, options, callback);
+
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription3).call(this, options, callback);
+
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription2).call(this, options, callback);
+        // TODO: implement paying invoices as well
+        // case types.PAY_INVOICE:
+        //   return this.#payInvoice(options, callback);
+
         default:
           console.error("Unsupported subscriptiion method: vantiv Gateway");
       }
@@ -13137,16 +13155,121 @@ class VantivGateway {
           couponCode,
           product,
           quantity = 1,
-          addressId
+          addressId,
+          isExistingSource
         } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
         window.Pelcro.subscription.create({
           quantity,
-          gateway_token: token,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _renewSubscription2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
           payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
           coupon_code: couponCode,
-          address_id: product.address_required ? addressId : null
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _createGiftedSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          giftRecipient,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          gift_recipient_email: giftRecipient.email,
+          gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
+          gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
+          gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
+          gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _renewGiftedSubscription2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renewGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
         }, (err, res) => {
           callback(err, res);
         });
@@ -13211,7 +13334,7 @@ const PaymentMethodContainerWithoutStripe = ({
   onFailure = () => {},
   ...props
 }) => {
-  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isRenewingGift, _props$invoice;
+  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice;
 
   const {
     t
@@ -13227,6 +13350,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
   const selectedAddressId = (_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : pelcroStore.selectedAddressId;
   const giftRecipient = (_props$giftRecipient = props.giftRecipient) !== null && _props$giftRecipient !== void 0 ? _props$giftRecipient : pelcroStore.giftRecipient;
+  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;
   useEffect(() => {
@@ -13244,53 +13368,134 @@ const PaymentMethodContainerWithoutStripe = ({
   }, []);
 
   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");
-    }
+    if (!selectedPaymentMethodId) {
+      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
+      const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
 
-    vantivInstanceRef.current.getPaypageRegistrationId({
-      id: orderId,
-      orderId: orderId
-    });
+      vantivInstanceRef.current.getPaypageRegistrationId({
+        id: orderId,
+        orderId: orderId
+      });
+    } else {
+      handleVantivPayment(null);
+    }
   }
 
   function handleVantivPayment(paymentRequest) {
-    const SUCCESS_STATUS = "870";
+    if (paymentRequest) {
+      const SUCCESS_STATUS = "870";
 
-    if (paymentRequest.response !== SUCCESS_STATUS) {
-      return handlePaymentError({
-        error: new Error(paymentRequest.message)
-      });
+      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);
-    });
+    if (type === "createPayment") {
+      handleVantivSubscription();
+    } // TODO: handle other types of payments
+    // } else if (type === "orderCreate") {
+    //   purchase(stripeSource, state, dispatch);
+    // } else if (type === "invoicePayment") {
+    //   payInvoice(new StripeGateway(), stripeSource.id, dispatch);
+    // }
+
+
+    function handleVantivSubscription() {
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      const {
+        couponCode
+      } = state;
+      const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+
+      if (renewGift) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.RENEW_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (giftSubscriprition) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          giftRecipient,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (renewSubscription) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.RENEW_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (createSubscription) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      }
+    }
   }
 
   const vantivInstanceRef = React__default.useRef(null);
   useEffect(() => {
     const cardProcessor = getSiteCardProcessor();
 
-    if (cardProcessor === "vantiv") {
+    if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
       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;
@@ -13313,7 +13518,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, []);
+  }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {
     try {
@@ -14232,6 +14437,10 @@ const PaymentMethodContainerWithoutStripe = ({
           disableSubmit: true,
           isLoading: true
         }, (state, dispatch) => {
+          if (getSiteCardProcessor() === "vantiv") {
+            return submitVantivPayment();
+          }
+
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -14244,10 +14453,6 @@ const PaymentMethodContainerWithoutStripe = ({
             return updatePaymentSource(state, dispatch);
           }
 
-          if (getSiteCardProcessor() === "vantiv") {
-            return submitVantivPayment();
-          }
-
           submitPayment(state);
         });
 

package/package.json

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