@pelcro/react-pelcro-js 3.22.0-beta.9 → 3.22.1

package/dist/index.cjs.js

@@ -3457,7 +3457,8 @@ var labels$10 = {
 	removeCoupon: "REMOVE",
 	firstName: "First name",
 	lastName: "Last name",
-	phone: "Phone"
+	phone: "Phone",
+	freeItems: "Free Items"
 };
 var checkoutForm_en = {
 	messages: messages$14,
@@ -4398,7 +4399,8 @@ var labels$H = {
 	removeCoupon: "RETIRER",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
-	phone: "Téléphoner"
+	phone: "Téléphoner",
+	freeItems: "Articles gratuits"
 };
 var checkoutForm_fr = {
 	messages: messages$M,
@@ -5225,7 +5227,8 @@ var labels$s = {
 	removeCoupon: "제거",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	freeItems: "무료 아이템"
 };
 var checkoutForm_ko = {
 	messages: messages$v,
@@ -6156,7 +6159,8 @@ var labels$d = {
 	removeCoupon: "ELIMINAR",
 	firstName: "Nombre",
 	lastName: "Apellido",
-	phone: "Teléfono"
+	phone: "Teléfono",
+	freeItems: "Artículos gratis"
 };
 var checkoutForm_es = {
 	messages: messages$e,
@@ -10873,13 +10877,16 @@ const debounce = (func, waitTime) => {
   };
 };
 function getSiteCardProcessor() {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3;
   if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_gateway_settings) {
     return "vantiv";
   }
   if ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r2 !== void 0 && _window$Pelcro$site$r2.tap_gateway_settings) {
     return "tap";
   }
+  if ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r3 !== void 0 && _window$Pelcro$site$r3.cybersource_gateway_settings) {
+    return "cybersource";
+  }
   return "stripe";
 }
 
@@ -11740,6 +11747,8 @@ const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
 const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
 const SET_PHONE_ERROR = "SET_PHONE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
+const SET_MONTH = "SET_MONTH";
+const SET_YEAR = "SET_YEAR";
 const SET_TOKEN = "SET_TOKEN";
 const SET_GIFT_CODE = "SET_GIFT_CODE";
 const RESET_LOGIN_FORM = "RESET_LOGIN_FORM";
@@ -14079,6 +14088,7 @@ class SelectModal extends React.Component {
             });
           });
         });
+        console.log("bugsnag Triggered");
       }
     });
     _defineProperty$3(this, "componentWillUnmount", () => {
@@ -15498,7 +15508,7 @@ var _isPaymentGatewayInvalid = /*#__PURE__*/new WeakMap();
 var _generateUserError = /*#__PURE__*/new WeakMap();
 class Payment {
   /**
-   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -15517,7 +15527,7 @@ class Payment {
     _classPrivateFieldInitSpec$1(this, _isPaymentGatewayInvalid, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway || gateway instanceof CybersourceGateway);
       }
     });
     _classPrivateFieldInitSpec$1(this, _generateUserError, {
@@ -15571,7 +15581,8 @@ const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
   paypal: "braintree",
   vantiv: "vantiv",
-  tap: "tap"
+  tap: "tap",
+  cybersource: "cybersource"
 };
 
 /**
@@ -16293,6 +16304,222 @@ class TapGateway {
   }
 }
 
+/**
+ * Cybersource gateway strategy
+ */
+var _paymentGateway5 = /*#__PURE__*/new WeakMap();
+var _createSubscription5 = /*#__PURE__*/new WeakMap();
+var _renewSubscription4 = /*#__PURE__*/new WeakMap();
+var _createGiftedSubscription5 = /*#__PURE__*/new WeakMap();
+var _renewGiftedSubscription4 = /*#__PURE__*/new WeakMap();
+var _purchaseEcommerceOrder4 = /*#__PURE__*/new WeakMap();
+var _payInvoice5 = /*#__PURE__*/new WeakMap();
+class CybersourceGateway {
+  constructor() {
+    _classPrivateFieldInitSpec$1(this, _paymentGateway5, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["cybersource"]
+    });
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = PAYMENT_TYPES;
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription5).call(this, options, callback);
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription4).call(this, options, callback);
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription5).call(this, options, callback);
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription4).call(this, options, callback);
+        case types.PURCHASE_ECOMMERCE_ORDER:
+          return _classPrivateFieldGet(this, _purchaseEcommerceOrder4).call(this, options, callback);
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice5).call(this, options, callback);
+        default:
+          console.error("Unsupported payment method: cybersource Gateway");
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createSubscription5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewSubscription4, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createGiftedSubscription5, {
+      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, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          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);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewGiftedSubscription4, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          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);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _purchaseEcommerceOrder4, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          items,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.ecommerce.order.create({
+          items,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          ...params,
+          ...(addressId && {
+            address_id: addressId
+          })
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _payInvoice5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+}
+
 /**
  * @typedef {Object} PaymentStateType
  * @property {boolean} disableSubmit
@@ -16332,6 +16559,8 @@ const initialState$k = {
   firstNameError: null,
   lastNameError: null,
   phoneError: null,
+  month: "",
+  year: "",
   alert: {
     type: "error",
     content: ""
@@ -16397,37 +16626,44 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     updateTotalAmountWithTax();
   }, []);
 
-  /*====== Start Tap integration ========*/
-  const submitUsingTap = state => {
-    var _ref2, _ref3, _ref4, _state$updatedPrice;
+  /*====== Start Cybersource integration ========*/
+  const cybersourceErrorHandle = err => {
+    var _err$details, _err$details$response, _err$details$response2;
+    if ((err === null || err === void 0 ? void 0 : (_err$details = err.details) === null || _err$details === void 0 ? void 0 : (_err$details$response = _err$details.responseStatus) === null || _err$details$response === void 0 ? void 0 : (_err$details$response2 = _err$details$response.details) === null || _err$details$response2 === void 0 ? void 0 : _err$details$response2.length) > 0) {
+      var _err$details2, _err$details2$respons;
+      const errorMessages = [];
+
+      // enumerable error (ex: validation errors)
+      Object.values(err === null || err === void 0 ? void 0 : (_err$details2 = err.details) === null || _err$details2 === void 0 ? void 0 : (_err$details2$respons = _err$details2.responseStatus) === null || _err$details2$respons === void 0 ? void 0 : _err$details2$respons.details).forEach(_ref2 => {
+        let {
+          message
+        } = _ref2;
+        errorMessages.push(message);
+      });
+
+      // convert to multiline string
+      return errorMessages.join("\n");
+    } else {
+      var _err$details3;
+      return getErrorMessages(err === null || err === void 0 ? void 0 : (_err$details3 = err.details) === null || _err$details3 === void 0 ? void 0 : _err$details3.responseStatus);
+    }
+  };
+  const submitUsingCybersource = (state, dispatch) => {
+    var _cybersourceInstanceR;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
-      // no need to create a new source using tap
-      return handleTapPayment(null);
+      // no need to create a new source using cybersrce
+      return handleCybersourcePayment(null, state);
     }
-    if (!tapInstanceRef.current) {
-      return console.error("Tap sdk script wasn't loaded, you need to load tap sdk before rendering the tap payment flow");
+    if (!cybersourceInstanceRef.current) {
+      return console.error("Cybersource sdk script wasn't loaded, you need to load Cybersource sdk before rendering the Cybersource payment flow");
     }
-    const getOrderItemsTotal = () => {
-      if (!order) {
-        return null;
-      }
-      const isQuickPurchase = !Array.isArray(order);
-      if (isQuickPurchase) {
-        return order.price * order.quantity;
-      }
-      if (order.length === 0) {
-        return null;
-      }
-      return order.reduce((total, item) => {
-        return total + item.price * item.quantity;
-      }, 0);
+    let options = {
+      cardExpirationMonth: state.month,
+      cardExpirationYear: state.year
     };
-    const totalAmount = (_ref2 = (_ref3 = (_ref4 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref4 !== void 0 ? _ref4 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref3 !== void 0 ? _ref3 : getOrderItemsTotal()) !== null && _ref2 !== void 0 ? _ref2 : 10;
-    tapInstanceRef.current.createToken(tapInstanceCard.current).then(function (result) {
-      if (result.error) {
-        // Inform the user if there was an error
-        onFailure(result.error);
+    (_cybersourceInstanceR = cybersourceInstanceRef.current) === null || _cybersourceInstanceR === void 0 ? void 0 : _cybersourceInstanceR.createToken(options, function (err, response) {
+      if (err) {
         dispatch({
           type: DISABLE_SUBMIT,
           payload: false
@@ -16440,40 +16676,280 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           type: SHOW_ALERT,
           payload: {
             type: "error",
-            content: getErrorMessages(result.error)
+            content: cybersourceErrorHandle(err)
           }
         });
-      } else {
-        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,
-          phone: window.Pelcro.user.read().phone || state.phone,
-          site_id: window.Pelcro.siteid,
-          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,
-          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
-            onFailure(err);
-            dispatch({
-              type: DISABLE_SUBMIT,
-              payload: false
-            });
-            dispatch({
-              type: LOADING,
-              payload: false
-            });
-            return dispatch({
-              type: SHOW_ALERT,
-              payload: {
-                type: "error",
-                content: getErrorMessages(err)
-              }
-            });
+      }
+      handleCybersourcePayment(response.token, state);
+    });
+  };
+  function handleCybersourcePayment(paymentRequest, state) {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (type === "createPayment") {
+      handleCybersourceSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
+    } else if (type === "updatePaymentSource") {
+      createNewCybersourceCard();
+    }
+    function createNewCybersourceCard() {
+      window.Pelcro.source.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: paymentRequest,
+        gateway: "cybersource"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        toggleAuthenticationSuccessPendingView(false);
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceUpdated")
+          }
+        });
+        onSuccess(res);
+      } //
+      );
+    }
+
+    function handleCybersourceSubscription() {
+      const payment = new Payment(new CybersourceGateway());
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      const {
+        couponCode
+      } = state;
+      if (renewGift) {
+        return payment.execute({
+          type: PAYMENT_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 payment.execute({
+          type: PAYMENT_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 payment.execute({
+          type: PAYMENT_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 payment.execute({
+          type: PAYMENT_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 tokenizeCard = (error, microformInstance) => {
+    if (error) {
+      return;
+    }
+    cybersourceInstanceRef.current = microformInstance;
+  };
+  const initCybersourceScript = () => {
+    // jwk api call
+    window.Pelcro.payment.getJWK({
+      auth_token: window.Pelcro.user.read().auth_token,
+      site_id: window.Pelcro.siteid
+    }, (err, res) => {
+      if (err) {
+        onFailure(err);
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+      }
+      const {
+        key: jwk
+      } = res;
+      // SETUP MICROFORM
+      FLEX.microform({
+        keyId: jwk.kid,
+        keystore: jwk,
+        container: "#cybersourceCardNumber",
+        placeholder: "Card Number",
+        styles: {
+          input: {
+            "font-size": "14px",
+            "font-family": "helvetica, tahoma, calibri, sans-serif",
+            color: "#555"
+          },
+          ":focus": {
+            color: "blue"
+          },
+          ":disabled": {
+            cursor: "not-allowed"
+          },
+          valid: {
+            color: "#3c763d"
+          },
+          invalid: {
+            color: "#a94442"
+          }
+        }
+      }, tokenizeCard);
+    });
+  };
+
+  /*====== End Cybersource integration ========*/
+
+  /*====== Start Tap integration ========*/
+  const submitUsingTap = state => {
+    var _ref3, _ref4, _ref5, _state$updatedPrice;
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using tap
+      return handleTapPayment(null, state);
+    }
+    if (!tapInstanceRef.current) {
+      return console.error("Tap sdk script wasn't loaded, you need to load tap sdk before rendering the tap payment flow");
+    }
+    const getOrderItemsTotal = () => {
+      if (!order) {
+        return null;
+      }
+      const isQuickPurchase = !Array.isArray(order);
+      if (isQuickPurchase) {
+        return order.price * order.quantity;
+      }
+      if (order.length === 0) {
+        return null;
+      }
+      return order.reduce((total, item) => {
+        return total + item.price * item.quantity;
+      }, 0);
+    };
+    const totalAmount = (_ref3 = (_ref4 = (_ref5 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref5 !== void 0 ? _ref5 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref4 !== void 0 ? _ref4 : getOrderItemsTotal()) !== null && _ref3 !== void 0 ? _ref3 : 10;
+    tapInstanceRef.current.createToken(tapInstanceCard.current).then(function (result) {
+      if (result.error) {
+        // Inform the user if there was an error
+        onFailure(result.error);
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(result.error)
+          }
+        });
+      } else {
+        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,
+          phone: window.Pelcro.user.read().phone || state.phone,
+          site_id: window.Pelcro.siteid,
+          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,
+          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
+            onFailure(err);
+            dispatch({
+              type: DISABLE_SUBMIT,
+              payload: false
+            });
+            dispatch({
+              type: LOADING,
+              payload: false
+            });
+            return dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: getErrorMessages(err)
+              }
+            });
           } else {
             toggleAuthenticationPendingView(true, res);
             const listenFor3DSecureCompletionMessage = () => {
@@ -16688,7 +17164,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // no need to create a new source using vantiv
-      return handleVantivPayment(null);
+      return handleVantivPayment(null, state.couponCode);
     }
     if (!vantivInstanceRef.current) {
       return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
@@ -16840,8 +17316,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const vantivInstanceRef = React__default['default'].useRef(null);
   const tapInstanceRef = React__default['default'].useRef(null);
   const tapInstanceCard = React__default['default'].useRef(null);
+  const cybersourceInstanceRef = React__default['default'].useRef(null);
   React.useEffect(() => {
-    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) 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;
@@ -16877,7 +17354,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, [vantivPaymentRequest]);
   React.useEffect(() => {
     whenUserReady(() => {
-      if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
+      if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) 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");
@@ -16888,10 +17365,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
         initTapScript();
       }
+      if (cardProcessor === "cybersource" && !selectedPaymentMethodId && !window.FLEX) {
+        window.Pelcro.helpers.loadSDK("https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js", "cybersource-cdn");
+        document.querySelector('script[src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"]').addEventListener("load", () => {
+          initCybersourceScript();
+        });
+      }
+      if (cardProcessor === "cybersource" && !selectedPaymentMethodId && window.FLEX) {
+        initCybersourceScript();
+      }
     });
   }, [selectedPaymentMethodId]);
   const initPaymentRequest = (state, dispatch) => {
-    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     try {
       const paymentRequest = stripe.paymentRequest({
         country: window.Pelcro.user.location.countryCode || "US",
@@ -16903,13 +17389,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
 
       // When Google pay / Apple pay source created
-      paymentRequest.on("source", _ref5 => {
+      paymentRequest.on("source", _ref6 => {
         var _source$card;
         let {
           complete,
           source,
           ...data
-        } = _ref5;
+        } = _ref6;
         dispatch({
           type: DISABLE_COUPON_BUTTON,
           payload: true
@@ -16924,11 +17410,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
         complete("success");
         if ((source === null || source === void 0 ? void 0 : (_source$card = source.card) === null || _source$card === void 0 ? void 0 : _source$card.three_d_secure) === "required") {
-          return generate3DSecureSource(source).then(_ref6 => {
+          return generate3DSecureSource(source).then(_ref7 => {
             let {
               source,
               error
-            } = _ref6;
+            } = _ref7;
             if (error) {
               return handlePaymentError(error);
             }
@@ -16960,7 +17446,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    */
   const updateTotalAmountWithTax = () => {
     var _window$Pelcro$site$r4;
-    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) 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({
@@ -17235,6 +17721,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           type: LOADING,
           payload: false
         });
+        onFailure(error);
         return dispatch({
           type: SHOW_ALERT,
           payload: {
@@ -17457,16 +17944,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       items: mappedOrderItems,
       addressId: selectedAddressId,
       couponCode
-    }, (err, res) => {
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
+    }, (err, orderResponse) => {
+      var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
       if (err) {
+        toggleAuthenticationSuccessPendingView(false);
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
         onFailure(err);
         return dispatch({
           type: SHOW_ALERT,
@@ -17486,7 +17975,30 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           cartItems: []
         });
       }
-      onSuccess(res);
+      window.Pelcro.user.refresh({
+        auth_token: (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : _window$Pelcro2$user$.auth_token
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        toggleAuthenticationSuccessPendingView(false);
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        onSuccess(orderResponse);
+      });
     });
   };
   const payInvoice = (gatewayService, gatewayToken, dispatch) => {
@@ -17503,12 +18015,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const updatePaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
-    }).then(_ref7 => {
+    }).then(_ref8 => {
       var _source$card2;
       let {
         source,
         error
-      } = _ref7;
+      } = _ref8;
       if (error) {
         return handlePaymentError(error);
       }
@@ -17564,7 +18076,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
   const submitPayment = (state, dispatch) => {
-    if (skipPayment && (order === null || order === void 0 ? void 0 : order.price) === 0) {
+    if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
       const isQuickPurchase = !Array.isArray(order);
       const mappedOrderItems = isQuickPurchase ? [{
         sku_id: order.id,
@@ -17589,12 +18101,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref8 => {
-      var _ref9, _ref10, _state$updatedPrice2;
+    }).then(_ref9 => {
+      var _ref10, _ref11, _state$updatedPrice2;
       let {
         source,
         error
-      } = _ref8;
+      } = _ref9;
       if (error) {
         return handlePaymentError(error);
       }
@@ -17613,7 +18125,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref9 = (_ref10 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref10 !== void 0 ? _ref10 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref9 !== void 0 ? _ref9 : getOrderItemsTotal();
+      (_ref10 = (_ref11 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref11 !== void 0 ? _ref11 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref10 !== void 0 ? _ref10 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -17820,15 +18332,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           disableSubmit: true,
           isLoading: true
         }, (state, dispatch) => {
-          if (skipPayment && (order === null || order === void 0 ? void 0 : order.price) === 0) {
+          if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
             return submitPayment(state);
           }
           if (getSiteCardProcessor() === "vantiv") {
-            return submitUsingVantiv();
+            return submitUsingVantiv(state);
           }
           if (getSiteCardProcessor() === "tap") {
             return submitUsingTap(state);
           }
+          if (getSiteCardProcessor() === "cybersource") {
+            return submitUsingCybersource(state, dispatch);
+          }
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -17896,6 +18411,16 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           ...state,
           percentOff: action.payload
         });
+      case SET_MONTH:
+        return lib_7({
+          ...state,
+          month: action.payload
+        });
+      case SET_YEAR:
+        return lib_7({
+          ...state,
+          year: action.payload
+        });
       case SET_FIRST_NAME:
         return lib_7({
           ...state,
@@ -17986,13 +18511,122 @@ const PaymentMethodContainer = props => {
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
       store: store$k
     }, props))));
-  } else {
+  } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
       store: store$k
     }, props));
   }
+  return null;
 };
 
+function Select(_ref) {
+  let {
+    label = "",
+    required,
+    id,
+    errorId,
+    error = "",
+    className = "",
+    labelClassName = "",
+    errorClassName = "",
+    wrapperClassName = "",
+    children,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: `pelcro-input-wrapper ${wrapperClassName}`
+  }, /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label ${labelClassName}`
+  }, `${label}${required ? "*" : ""}`), /*#__PURE__*/React__default['default'].createElement("select", Object.assign({
+    id: id,
+    className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
+    "aria-describedby": errorId,
+    "aria-invalid": Boolean(error)
+  }, otherProps), children), error && /*#__PURE__*/React__default['default'].createElement("p", {
+    id: errorId,
+    "aria-live": "assertive",
+    className: `pelcro-input-error ${errorClassName}`
+  }, error));
+}
+
+function MonthSelect(_ref) {
+  let {
+    placeholder,
+    store,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state: {
+      month
+    }
+  } = React.useContext(store);
+  const get2digits = num => num < 10 ? "0" + num.toString() : num.toString();
+  const createMonthsItems = React.useMemo(() => {
+    return [...Array.from({
+      length: 12
+    }, (_, i) => i + 1)].map(i => {
+      return /*#__PURE__*/React__default['default'].createElement("option", {
+        key: i,
+        value: get2digits(i)
+      }, get2digits(i));
+    });
+  }, []);
+  const handleInputChange = value => {
+    dispatch({
+      type: SET_MONTH,
+      payload: value
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Select, Object.assign({
+    value: month,
+    onChange: e => handleInputChange(e.target.value)
+  }, otherProps), /*#__PURE__*/React__default['default'].createElement("option", {
+    value: "",
+    disabled: true,
+    selected: true
+  }, placeholder), createMonthsItems);
+}
+
+function YearSelect(_ref) {
+  let {
+    placeholder,
+    store,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state: {
+      year
+    }
+  } = React.useContext(store);
+  const createYearsItems = React.useMemo(() => {
+    return Array.from({
+      length: 10
+    }, (_, i) => i + new Date().getFullYear()).map(i => {
+      return /*#__PURE__*/React__default['default'].createElement("option", {
+        key: i,
+        value: i
+      }, i);
+    });
+  }, []);
+  const handleInputChange = value => {
+    dispatch({
+      type: SET_YEAR,
+      payload: value
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Select, Object.assign({
+    value: year,
+    onChange: e => handleInputChange(e.target.value)
+  }, otherProps), /*#__PURE__*/React__default['default'].createElement("option", {
+    value: "",
+    disabled: true,
+    selected: true
+  }, placeholder), createYearsItems);
+}
+
 const StripeInputStyle = {
   base: "plc-w-full plc-p-3 plc-border plc-border-gray-300 plc-appearance-none plc-outline-none plc-rounded-sm plc-bg-gray-50 pelcro-input-input",
   focus: "plc-ring-2 plc-ring-primary-400",
@@ -18082,6 +18716,24 @@ const CheckoutForm = () => {
       id: "tapPaymentIframe"
     });
   }
+  if (cardProcessor === "cybersource") {
+    return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "cybersourceCardNumber",
+      className: "pelcro-input-field plc-h-12"
+    }), /*#__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(MonthSelect, {
+      store: store$k,
+      placeholder: "Exp Month *"
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-6/12"
+    }, /*#__PURE__*/React__default['default'].createElement(YearSelect, {
+      store: store$k,
+      placeholder: "Exp Year *"
+    }))));
+  }
   if (cardProcessor === "stripe") {
     return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
       autoFocus: true
@@ -18142,13 +18794,14 @@ const DiscountedPrice = props => {
 };
 
 const SubmitPaymentMethod = _ref => {
-  var _plan$quantity, _window$Pelcro$site$r;
+  var _plan$quantity, _window$Pelcro$site$r, _window$Pelcro$site$r2;
   let {
     onClick,
     ...otherProps
   } = _ref;
   const {
-    plan
+    plan,
+    selectedPaymentMethodId
   } = usePelcro();
   const {
     t
@@ -18164,13 +18817,16 @@ const SubmitPaymentMethod = _ref => {
       phone,
       disableSubmit,
       isLoading,
-      updatedPrice
+      updatedPrice,
+      month,
+      year
     }
   } = React.useContext(store$k);
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
   const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
   const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
+  const supportsCybersource = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.cybersource_gateway_settings);
   const isUserFirstName = Boolean(window.Pelcro.user.read().first_name);
   const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
@@ -18179,9 +18835,9 @@ const SubmitPaymentMethod = _ref => {
     if (supportsTap && isUserFirstName && isUserLastName && isUserPhone) {
       setDisabled(disableSubmit);
     } else {
-      setDisabled(disableSubmit || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length));
+      setDisabled(disableSubmit || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length) || supportsCybersource && !selectedPaymentMethodId && !(month !== null && month !== void 0 && month.length) || supportsCybersource && !selectedPaymentMethodId && !(year !== null && year !== void 0 && year.length));
     }
-  }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone]);
+  }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone, month, year]);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -18820,7 +19476,7 @@ const OrderCreateFreeButton = _ref => {
  *
  */
 function PaymentMethodView(_ref) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$;
   let {
     onSuccess,
     onGiftRenewalSuccess,
@@ -18838,6 +19494,7 @@ function PaymentMethodView(_ref) {
   const cardProcessor = getSiteCardProcessor();
   const supportsVantiv = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings);
   const supportsTap = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings);
+  const supportsCybersource = Boolean((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.cybersource_gateway_settings);
   const isUserFirstName = Boolean(window.Pelcro.user.read().first_name);
   const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
@@ -18847,11 +19504,13 @@ function PaymentMethodView(_ref) {
     className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
   }, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-gray-600"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+  }, !Array.isArray(order) ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, order === null || order === void 0 ? void 0 : order.name) : /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-tracking-wider plc-uppercase"
-  }, order === null || order === void 0 ? void 0 : order.name), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, t("labels.freeItems")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-text-xl plc-font-semibold plc-text-primary-600"
-  }, getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, (_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), 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"
@@ -18867,7 +19526,8 @@ function PaymentMethodView(_ref) {
     type: type,
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
-    onFailure: onFailure
+    onFailure: onFailure,
+    freeOrders: showOrderButton
   }, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
   }), 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", {
@@ -18892,7 +19552,7 @@ function PaymentMethodView(_ref) {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
-  }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null)))));
+  }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = _ref => {
@@ -21519,6 +22179,7 @@ const AddressCreateContainer = _ref => {
       first_name: firstName,
       last_name: lastName,
       line1: line1,
+      line2: line2,
       city: city,
       state: state,
       country: country,
@@ -21913,37 +22574,6 @@ const AddressCreateSubmit = _ref => {
   }, otherProps), name !== null && name !== void 0 ? name : t("buttons.submit"));
 };
 
-function Select(_ref) {
-  let {
-    label = "",
-    required,
-    id,
-    errorId,
-    error = "",
-    className = "",
-    labelClassName = "",
-    errorClassName = "",
-    wrapperClassName = "",
-    children,
-    ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label ${labelClassName}`
-  }, `${label}${required ? "*" : ""}`), /*#__PURE__*/React__default['default'].createElement("select", Object.assign({
-    id: id,
-    className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
-    "aria-describedby": errorId,
-    "aria-invalid": Boolean(error)
-  }, otherProps), children), error && /*#__PURE__*/React__default['default'].createElement("p", {
-    id: errorId,
-    "aria-live": "assertive",
-    className: `pelcro-input-error ${errorClassName}`
-  }, error));
-}
-
 function CountrySelect(_ref) {
   let {
     placeholder,
@@ -22346,6 +22976,7 @@ const AddressUpdateContainer = _ref => {
       first_name: firstName,
       last_name: lastName,
       line1: line1,
+      line2: line2,
       city: city,
       state: state,
       country: country,
@@ -24293,7 +24924,7 @@ const OrderCreateView = props => {
     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;
+  const showOrderButton = skipPayment && ((order === null || order === void 0 ? void 0 : order.price) === 0 || (order === null || order === void 0 ? void 0 : order.length) > 0 && order.every(item => (item === null || item === void 0 ? void 0 : item.price) === 0));
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-order-create-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -27627,7 +28258,7 @@ const InvoicesItems = () => {
     setInvoice,
     switchView
   } = usePelcro();
-  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.order_id || invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
   const showInvoiceDetails = event => {
     if (setInvoice(event.target.dataset.id)) {
       switchView("invoice-details");
@@ -28395,7 +29026,7 @@ class Dashboard extends React.Component {
 }
 function hasInvoices() {
   var _window$Pelcro$invoic, _window$Pelcro$invoic2;
-  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.order_id || invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
   return invoices.length > 0;
 }
 function hasDonationSubs() {