@pelcro/react-pelcro-js 3.22.0-beta.19 → 3.22.0-beta.20

package/dist/index.cjs.js

@@ -11160,13 +11160,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";
 }
 
@@ -12091,6 +12094,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";
@@ -16291,7 +16296,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) => {
@@ -16310,7 +16315,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, {
@@ -16364,7 +16369,8 @@ const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
   paypal: "braintree",
   vantiv: "vantiv",
-  tap: "tap"
+  tap: "tap",
+  cybersource: "cybersource"
 };
 
 /**
@@ -17086,6 +17092,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
@@ -17127,6 +17349,8 @@ const initialState$k = {
   lastNameError: null,
   phoneError: null,
   emailError: null,
+  month: "",
+  year: "",
   alert: {
     type: "error",
     content: ""
@@ -17195,9 +17419,251 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     updateTotalAmountWithTax();
   }, []);
 
+  /*====== Start Cybersource integration ========*/
+  const cybersourceErrorHandle = err => {
+    var _err$details, _err$details$response;
+    const errorMessages = [];
+
+    // enumerable error (ex: validation errors)
+    Object.values(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$response.details).forEach(_ref2 => {
+      let {
+        message
+      } = _ref2;
+      errorMessages.push(message);
+    });
+
+    // convert to multiline string
+    return errorMessages.join("\n");
+  };
+  const submitUsingCybersource = (state, dispatch) => {
+    var _cybersourceInstanceR;
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using cybersrce
+      return handleCybersourcePayment(null, state);
+    }
+    if (!cybersourceInstanceRef.current) {
+      return console.error("Cybersource sdk script wasn't loaded, you need to load Cybersource sdk before rendering the Cybersource payment flow");
+    }
+    let options = {
+      cardExpirationMonth: state.month,
+      cardExpirationYear: state.year
+    };
+    (_cybersourceInstanceR = cybersourceInstanceRef.current) === null || _cybersourceInstanceR === void 0 ? void 0 : _cybersourceInstanceR.createToken(options, function (err, response) {
+      if (err) {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: cybersourceErrorHandle(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) {
+      console.log("tokenizeCard => ", 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 _ref2, _ref3, _getPlanAmount;
+    var _ref3, _ref4, _getPlanAmount;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // no need to create a new source using tap
@@ -17229,7 +17695,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         return plan.amount;
       }
     }
-    const totalAmount = (_ref2 = (_ref3 = (_getPlanAmount = getPlanAmount()) !== null && _getPlanAmount !== void 0 ? _getPlanAmount : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref3 !== void 0 ? _ref3 : getOrderItemsTotal()) !== null && _ref2 !== void 0 ? _ref2 : 10;
+    const totalAmount = (_ref3 = (_ref4 = (_getPlanAmount = getPlanAmount()) !== null && _getPlanAmount !== void 0 ? _getPlanAmount : 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
@@ -17646,6 +18112,7 @@ 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 || props !== null && props !== void 0 && props.freeOrders)) return;
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
@@ -17694,6 +18161,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
         initTapScript();
       }
+      if (cardProcessor === "cybersource") {
+        if (!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();
+          });
+          return;
+        }
+        if (!selectedPaymentMethodId) {
+          initCybersourceScript();
+        }
+      }
     });
   }, [selectedPaymentMethodId]);
   const initPaymentRequest = (state, dispatch) => {
@@ -17717,13 +18196,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
 
       // When Google pay / Apple pay source created
-      paymentRequest.on("source", _ref4 => {
+      paymentRequest.on("source", _ref5 => {
         var _source$card;
         let {
           complete,
           source,
           ...data
-        } = _ref4;
+        } = _ref5;
         dispatch({
           type: DISABLE_COUPON_BUTTON,
           payload: true
@@ -17738,11 +18217,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(_ref5 => {
+          return generate3DSecureSource(source).then(_ref6 => {
             let {
               source,
               error
-            } = _ref5;
+            } = _ref6;
             if (error) {
               return handlePaymentError(error);
             }
@@ -18342,12 +18821,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const updatePaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
-    }).then(_ref6 => {
+    }).then(_ref7 => {
       var _source$card2;
       let {
         source,
         error
-      } = _ref6;
+      } = _ref7;
       if (error) {
         return handlePaymentError(error);
       }
@@ -18463,12 +18942,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref7 => {
-      var _ref8, _ref9, _state$updatedPrice;
+    }).then(_ref8 => {
+      var _ref9, _ref10, _state$updatedPrice;
       let {
         source,
         error
-      } = _ref7;
+      } = _ref8;
       if (error) {
         return handlePaymentError(error);
       }
@@ -18487,7 +18966,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref8 = (_ref9 = (_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 && _ref9 !== void 0 ? _ref9 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref8 !== void 0 ? _ref8 : getOrderItemsTotal();
+      (_ref9 = (_ref10 = (_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 && _ref10 !== void 0 ? _ref10 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref9 !== void 0 ? _ref9 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -18711,6 +19190,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               return submitUsingTap(state);
             }
           }
+          if (getSiteCardProcessor() === "cybersource") {
+            return submitUsingCybersource(state, dispatch);
+          }
           if (selectedPaymentMethodId) {
             if (!isAuthenticated() && plan.type === "donation") {
               return sendRegisterRequest(state, () => handlePayment({
@@ -18789,6 +19271,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,
@@ -18901,6 +19393,114 @@ const PaymentMethodContainer = 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",
@@ -18990,6 +19590,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
@@ -19741,7 +20359,7 @@ const DonationEmail = props => /*#__PURE__*/React__default['default'].createElem
  *
  */
 function PaymentMethodView(_ref) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _calcAndFormatItemsTo, _order$;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$;
   let {
     onSuccess,
     onGiftRenewalSuccess,
@@ -19763,6 +20381,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);
@@ -19826,7 +20445,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 => {
@@ -22850,37 +23469,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,