@pelcro/react-pelcro-js 3.26.0-beta.27 → 3.26.0-beta.29

package/dist/index.esm.js

@@ -3324,9 +3324,23 @@ var select$6 = {
 		changePaymentMethod: "Change"
 	}
 };
+var create$5 = {
+	title: "Add a new payment method",
+	subtitle: "Enter the fields below to add your credit card information"
+};
 var paymentMethod_en = {
 	update: update$3,
-	select: select$6
+	select: select$6,
+	"delete": {
+	title: "Delete payment method",
+	subtitle: "This payment method could be associated with active subscriptions or serve as the default payment method. Please choose from the available options below for replacement.",
+	options: {
+		select: "Select an existing payment method",
+		add: "Add a new payment method"
+	},
+	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced"
+},
+	create: create$5
 };
 
 var title$z = "Enter your email to subscribe to our newsletter";
@@ -3432,7 +3446,8 @@ var labels$15 = {
 	order: "Order",
 	amount: "Amount",
 	email: "Email",
-	password: "Password"
+	password: "Password",
+	isDefault: "Set as default"
 };
 var checkoutForm_en = {
 	messages: messages$18,
@@ -3895,6 +3910,8 @@ var labels$Z = {
 	renewsOn: "Renews",
 	canceledOn: "Canceled on",
 	recipient: "Recipient",
+	addPaymentSource: "Add payment method",
+	setDefault: "Set as default",
 	addAddress: "Add address",
 	editAddress: "Edit address",
 	addSubscription: "New Subscription",
@@ -3956,6 +3973,13 @@ var messages$_ = {
 		loading: "Unsuspending your donation",
 		success: "Donation is successfully unsuspended",
 		error: "Error while unsuspending your donation"
+	},
+	paymentMethodDeletion: {
+		isSureToDelete: "Are you sure you want to delete this payment method?",
+		loading: "Deleting your payment method",
+		success: "Payment method is successfully deleted",
+		error: "Error while deleting your payment method",
+		nonDeletable: "This payment method can't be deleted"
 	}
 };
 var dashboard_en = {
@@ -4252,9 +4276,23 @@ var select$4 = {
 		changePaymentMethod: "Modifier"
 	}
 };
+var create$4 = {
+	title: "Ajouter un nouveau mode de paiement",
+	subtitle: "Saisissez les champs ci-dessous pour ajouter les informations relatives à votre carte de crédit"
+};
 var paymentMethod_fr = {
 	update: update$2,
-	select: select$4
+	select: select$4,
+	"delete": {
+	title: "Supprimer un mode de paiement",
+	subtitle: "Ce mode de paiement peut être associé à des abonnements actifs ou servir de mode de paiement par défaut. Veuillez choisir parmi les options disponibles ci-dessous pour le remplacement.",
+	options: {
+		select: "Sélectionner un mode de paiement existant",
+		add: "Ajouter un nouveau mode de paiement"
+	},
+	paymentMethodReplaced: "Méthode de paiement supprimée et remplacée avec succès"
+},
+	create: create$4
 };
 
 var title$q = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
@@ -4357,6 +4395,7 @@ var labels$P = {
 	lastName: "Nom de famille",
 	phone: "Téléphoner",
 	freeItems: "Articles gratuits",
+	isDefault: "Défini comme valeur par défaut",
 	order: "Commande",
 	amount: "Montant",
 	email: "Courriel",
@@ -5179,9 +5218,23 @@ var select$2 = {
 		changePaymentMethod: "변경"
 	}
 };
+var create$3 = {
+	title: "새 결제 방법 추가",
+	subtitle: "신용카드 정보를 추가하려면 아래 입력란을 입력하세요."
+};
 var paymentMethod_ko = {
 	update: update$1,
-	select: select$2
+	select: select$2,
+	"delete": {
+	title: "결제 방법 삭제",
+	subtitle: "이 결제 방법은 활성 구독과 연결되거나 기본 결제 방법으로 사용될 수 있습니다. 아래에서 사용 가능한 옵션 중에서 선택하여 대체하세요.",
+	options: {
+		select: "기존 결제 방법 선택",
+		add: "새 결제 방법 추가"
+	},
+	paymentMethodReplaced: "결제 방법 삭제 및 교체 성공"
+},
+	create: create$3
 };
 
 var title$h = "Frieze 뉴스레터를 구독하려면 이메일을 입력하세요.";
@@ -5287,7 +5340,8 @@ var labels$x = {
 	order: "주문",
 	amount: "금액",
 	email: "이메일",
-	password: "비밀번호"
+	password: "비밀번호",
+	isDefault: "기본값으로 설정"
 };
 var checkoutForm_ko = {
 	messages: messages$y,
@@ -6211,9 +6265,23 @@ var select = {
 		changePaymentMethod: "Cambiar"
 	}
 };
+var create$2 = {
+	title: "Añadir un nuevo método de pago",
+	subtitle: "Introduzca los campos siguientes para añadir los datos de su tarjeta de crédito"
+};
 var paymentMethod_es = {
 	update: update,
-	select: select
+	select: select,
+	"delete": {
+	title: "Eliminar método de pago",
+	subtitle: "Este método de pago podría estar asociado a suscripciones activas o servir como método de pago predeterminado. Elija entre las opciones disponibles a continuación para sustituirlo.",
+	options: {
+		select: "Seleccione un método de pago existente",
+		add: "Añadir un nuevo método de pago"
+	},
+	paymentMethodReplaced: "Método de pago eliminado y sustituido correctamente"
+},
+	create: create$2
 };
 
 var title$8 = "Ingresa tu correo para suscribirte a nuestro boletín";
@@ -6319,7 +6387,8 @@ var labels$f = {
 	order: "Pida",
 	amount: "Importe",
 	email: "Correo",
-	password: "Contraseña"
+	password: "Contraseña",
+	isDefault: "Fijar por defecto"
 };
 var checkoutForm_es = {
 	messages: messages$f,
@@ -8952,7 +9021,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$n;
+      } = initialState$o;
       this.set(otherStateFields);
     });
     _defineProperty$3(this, "switchView", view => {
@@ -9257,6 +9326,38 @@ class PelcroActions {
       }
       switchToAddressView();
     });
+    _defineProperty$3(this, "setPaymentMethodToEdit", id => {
+      window.Pelcro.paymentMethods.getPaymentMethod({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: id
+      }, (err, res) => {
+        if (err) {
+          return console.error("invalid payment method id");
+        }
+        if (res) {
+          const paymentMethodToEdit = res.data;
+          this.set({
+            paymentMethodToEdit
+          });
+        }
+      });
+    });
+    _defineProperty$3(this, "setPaymentMethodToDelete", id => {
+      window.Pelcro.paymentMethods.getPaymentMethod({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: id
+      }, (err, res) => {
+        if (err) {
+          return console.error("invalid payment method id");
+        }
+        if (res) {
+          const paymentMethodToDelete = res.data;
+          this.set({
+            paymentMethodToDelete
+          });
+        }
+      });
+    });
     this.set = storeSetter;
     this.get = storeGetter;
   }
@@ -9301,7 +9402,7 @@ class PelcroCallbacks {
   }
 }
 
-const initialState$n = {
+const initialState$o = {
   // View
   view: null,
   // Plans
@@ -9327,6 +9428,9 @@ const initialState$n = {
   couponCode: null,
   // memberships
   selectedMembership: null,
+  // paymentMethods
+  paymentMethodToDelete: null,
+  paymentMethodToEdit: null,
   // User
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
@@ -9339,7 +9443,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$n,
+    ...initialState$o,
     // State actions
     ...actions,
     // Callbacks
@@ -10293,8 +10397,8 @@ const saveToMetadataButton = new SaveToMetadataButtonClass();
 
 let e={data:""},t=t=>"object"==typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|  +/g,n=/\n+/g,o=(e,t)=>{let r="",l="",a="";for(let n in e){let c=e[n];"@"==n[0]?"i"==n[1]?r=n+" "+c+";":l+="f"==n[1]?o(c,n):n+"{"+o(c,"k"==n[1]?"":t)+"}":"object"==typeof c?l+=o(c,t?t.replace(/([^,])+/g,e=>n.replace(/(^:.*)|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):n):null!=c&&(n=/^--/.test(n)?n:n.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=o.p?o.p(n,c):n+":"+c+";");}return r+(t&&a?t+"{"+a+"}":a)+l},c={},s=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s(e[r]);return t}return e},i$1=(e,t,r,i,p)=>{let u=s(e),d=c[u]||(c[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!c[d]){let t=u!==e?e:(e=>{let t,r,o=[{}];for(;t=l.exec(e.replace(a,""));)t[4]?o.shift():t[3]?(r=t[3].replace(n," ").trim(),o.unshift(o[0][r]=o[0][r]||{})):o[0][t[1]]=t[2].replace(n," ").trim();return o[0]})(e);c[d]=o(p?{["@keyframes "+d]:t}:t,r?"":"."+d);}let f=r&&c.g?c.g:null;return r&&(c.g=c[d]),((e,t,r,l)=>{l?t.data=t.data.replace(l,e):-1===t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(c[d],t,i,f),d},p=(e,t,r)=>e.reduce((e,l,a)=>{let n=t[a];if(n&&n.call){let e=n(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;n=t?"."+t:e&&"object"==typeof e?e.props?"":o(e,""):!1===e?"":e;}return e+l+(null==n?"":n)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return i$1(l.unshift?l.raw?p(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}let d,f,g;u.bind({g:1});let h=u.bind({k:1});function m(e,t,r,l){o.p=t,d=e,f=r,g=l;}function j(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let c=Object.assign({},n),s=c.className||a.className;r.p=Object.assign({theme:f&&f()},c),r.o=/ *go\d+/.test(s),c.className=u.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=e;return e[0]&&(i=c.as||e,delete c.as),g&&i[0]&&g(c),d(i,c)}return t?t(a):a}}
 
-function _extends$B() {
-  _extends$B = Object.assign || function (target) {
+function _extends$C() {
+  _extends$C = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -10308,7 +10412,7 @@ function _extends$B() {
     return target;
   };
 
-  return _extends$B.apply(this, arguments);
+  return _extends$C.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -10398,7 +10502,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -10408,9 +10512,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$B({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$C({}, t, action.toast) : t;
         })
       });
 
@@ -10437,9 +10541,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$B({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$C({}, t, {
             visible: false
           }) : t;
         })
@@ -10447,28 +10551,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$B({}, state, {
+        return _extends$C({}, state, {
           toasts: []
         });
       }
 
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$B({}, t, {
+          return _extends$C({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -10515,12 +10619,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$B({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$C({}, toastOptions, toastOptions[t.type], t, {
       duration: t.duration || ((_toastOptions$t$type = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type.duration) || ((_toastOptions = toastOptions) == null ? void 0 : _toastOptions.duration) || defaultTimeouts[t.type],
-      style: _extends$B({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$C({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$B({}, state, {
+  return _extends$C({}, state, {
     toasts: mergedToasts
   });
 };
@@ -10530,7 +10634,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$B({
+  return _extends$C({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -10580,14 +10684,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$B({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$C({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$B({
+    toast.success(resolveValue(msgs.success, p), _extends$C({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$B({
+    toast.error(resolveValue(msgs.error, e), _extends$C({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -10926,7 +11030,7 @@ var ToastBar = /*#__PURE__*/memo(function (_ref2) {
   var message = createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$B({}, animationStyle, style, toast.style)
+    style: _extends$C({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -10956,7 +11060,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$B({
+  return _extends$C({
     left: 0,
     right: 0,
     display: 'flex',
@@ -10983,7 +11087,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return createElement("div", {
-    style: _extends$B({
+    style: _extends$C({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -11018,72 +11122,72 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$y;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$z;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 function SvgCheckSolid(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
+  return /*#__PURE__*/React.createElement("svg", _extends$B({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$x;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$y;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 function SvgXIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
     fill: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$w;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+var _path$x;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 function SvgXIconSolid(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
 
-var _path$v;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$w;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 function SvgExclamation(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$u, _path2$4;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+var _path$v, _path2$4;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 function SvgSpinner(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -11774,6 +11878,17 @@ function getSiteCardProcessor() {
   }
   return "stripe";
 }
+function getFourDigitYear(lastTwoDigits) {
+  // Get the current year
+  const currentYear = new Date().getFullYear();
+
+  // Extract the current century (first two digits)
+  const currentCentury = Math.floor(currentYear / 100);
+
+  // Combine the century and the provided last two digits
+  const fourDigitYear = currentCentury * 100 + lastTwoDigits;
+  return fourDigitYear;
+}
 
 /**
  * @typedef {Object} OptionsType
@@ -12751,6 +12866,7 @@ const SET_CONFIRM_PASSWORD = "SET_CONFIRM_PASSWORD";
 const CONFIRM_PASSWORD_USED = "CONFIRM_PASSWORD_USED";
 const DISABLE_SUBMIT = "DISABLE_SUBMIT";
 const LOADING = "LOADING";
+const SKELETON_LOADER = "SKELETON_LOADER";
 const SUBMIT_PAYMENT = "SUBMIT_PAYMENT";
 const SUBSCRIBE = "CREATE_SUBSCRIPTION";
 const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
@@ -12818,6 +12934,9 @@ const LINK_TOKEN_VERIFY = "LINK_TOKEN_VERIFY";
 const SET_CANCEL_SUBSCRIPTION_REASON = "SET_CANCEL_SUBSCRIPTION_REASON";
 const SET_CANCEL_SUBSCRIPTION_OPTION = "SET_CANCEL_SUBSCRIPTION_OPTION";
 const HANDLE_CHECKBOX_CHANGE = "HANDLE_CHECKBOX_CHANGE";
+const SET_IS_DEFAULT_PAYMENT_METHOD = "SET_IS_DEFAULT_PAYMENT_METHOD";
+const SET_DELETE_PAYMENT_METHOD_OPTION = "SET_DELETE_PAYMENT_METHOD_OPTION";
+const SET_PAYMENT_METHODS = "SET_PAYMENT_METHODS";
 const SET_SUBSCRIPTION_SUSPEND_DATE = "SET_SUBSCRIPTION_SUSPEND_DATE";
 const SET_EMAILS = "SET_EMAILS";
 const SET_EMAILS_ERROR = "SET_EMAILS_ERROR";
@@ -12829,7 +12948,7 @@ const UPDATE_MEMBERS = "UPDATE_MEMBERS";
 const UPDATE_REMOVE_MEMBER_ID = "UPDATE_REMOVE_MEMBER_ID";
 const UPDATE_CYBERSOURCE_SESSION_ID = "UPDATE_CYBERSOURCE_SESSION_ID";
 
-const initialState$m = {
+const initialState$n = {
   email: "",
   username: "",
   password: "",
@@ -12842,10 +12961,10 @@ const initialState$m = {
     content: ""
   }
 };
-const store$m = /*#__PURE__*/createContext(initialState$m);
+const store$n = /*#__PURE__*/createContext(initialState$n);
 const {
-  Provider: Provider$m
-} = store$m;
+  Provider: Provider$n
+} = store$n;
 const LoginContainer = _ref => {
   var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
@@ -12982,7 +13101,7 @@ const LoginContainer = _ref => {
           alert: action.payload
         });
       case RESET_LOGIN_FORM:
-        return initialState$m;
+        return initialState$n;
       case DISABLE_LOGIN_BUTTON:
         return lib_7({
           ...state,
@@ -12998,13 +13117,13 @@ const LoginContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$m);
+  }, initialState$n);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$m, {
+  }, /*#__PURE__*/React__default.createElement(Provider$n, {
     value: {
       state,
       dispatch
@@ -13012,12 +13131,12 @@ const LoginContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$m,
+        store: store$n,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$m
+    store: store$n
   })));
 };
 
@@ -13326,7 +13445,7 @@ const LoginButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = useContext(store$m);
+  } = useContext(store$n);
   const {
     t
   } = useTranslation("login");
@@ -13346,14 +13465,14 @@ const LoginButton = _ref => {
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.login"));
 };
 
-var _path$t, _path2$3;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+var _path$u, _path2$3;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 function SvgEmailVerify(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     className: "plc-w-6 plc-h-6",
     viewBox: "0 0 700 700",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     d: "M583.01 231.93a15.008 15.008 0 00-.887-3.875c-.562-1.254-1.129-2.508-1.695-3.762a14.686 14.686 0 00-1.898-1.789c-.438-.437-.653-1.027-1.153-1.414l-56.266-44.164v-52.484a15.555 15.555 0 00-15.554-15.555H434.56l-74.945-58.895a15.547 15.547 0 00-19.227 0l-74.945 58.895h-70.996a15.555 15.555 0 00-15.555 15.555v52.484l-56.266 44.16c-.496.39-.715.996-1.152 1.43v.004a13.37 13.37 0 00-1.898 1.773c-.22.426-.414.86-.59 1.305a14.158 14.158 0 00-1.106 2.457 15.009 15.009 0 00-.886 3.875c0 .48-.329.918-.329 1.398l.004 264.45a15.555 15.555 0 0015.555 15.555h435.55a15.555 15.555 0 0015.555-15.555v-264.45c0-.48-.278-.918-.325-1.398zm-41.176.809l-20.723 14.809v-31.11zm-191.83-150.73l34.223 26.883h-68.445zm-140 57.992h280v124.45c.07 1.593.383 3.168.934 4.664l-140.93 100.66-140.46-100.33c.214-.77.37-1.555.464-2.348zm-31.109 107.55l-20.719-14.81 20.719-16.27zm-31.113 234.67V263.56l193.18 137.99a15.562 15.562 0 0018.078 0l193.18-137.99v218.66z"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
     d: "M324.33 291.81a15.56 15.56 0 0020.582-.297l85.555-77.777a15.56 15.56 0 00-20.938-23.023l-75.398 68.539-44.023-37.723a15.54 15.54 0 00-11.46-4.106 15.553 15.553 0 00-8.758 27.718z"
@@ -13383,25 +13502,25 @@ const LoginRequestLoginToken = _ref => {
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 const LoginUsername = props => /*#__PURE__*/React__default.createElement(UserNameInput, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
-var _path$s;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+var _path$t;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 function SvgCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 20 20"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
     clipRule: "evenodd"
@@ -13467,7 +13586,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$l = {
+const initialState$m = {
   email: "",
   password: "",
   firstName: "",
@@ -13488,10 +13607,10 @@ const initialState$l = {
     content: ""
   }
 };
-const store$l = /*#__PURE__*/createContext(initialState$l);
+const store$m = /*#__PURE__*/createContext(initialState$m);
 const {
-  Provider: Provider$l
-} = store$l;
+  Provider: Provider$m
+} = store$m;
 const RegisterContainer = _ref => {
   let {
     style,
@@ -13703,7 +13822,7 @@ const RegisterContainer = _ref => {
           alert: action.payload
         });
       case RESET_LOGIN_FORM:
-        return initialState$l;
+        return initialState$m;
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({
           ...state,
@@ -13719,13 +13838,13 @@ const RegisterContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$l);
+  }, initialState$m);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$l, {
+  }, /*#__PURE__*/React__default.createElement(Provider$m, {
     value: {
       state,
       dispatch
@@ -13733,12 +13852,12 @@ const RegisterContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$l,
+        store: store$m,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$l
+    store: store$m
   })));
 };
 
@@ -13752,13 +13871,13 @@ function hasSecurityTokenEnabled$1() {
   return hasSecuritySdkLoaded;
 }
 
-var _path$r;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+var _path$s;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 function SvgFacebookLogo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "88.428 12.828 107.543 207.085"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     d: "M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z",
     fill: "#3c5a9a"
   })));
@@ -13775,10 +13894,10 @@ const FacebookLoginButton = _ref => {
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = useContext(store$m);
+  } = useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = useContext(store$l);
+  } = useContext(store$m);
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
       type: HANDLE_SOCIAL_LOGIN,
@@ -13828,13 +13947,13 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
 
-var _path$q, _path2$2, _path3$1, _path4;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+var _path$r, _path2$2, _path3$1, _path4;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 function SvgGoogleLogo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     fill: "#4285F4",
     d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
@@ -13938,10 +14057,10 @@ const GoogleLoginButton = _ref => {
   const googleClientId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = useContext(store$m);
+  } = useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = useContext(store$l);
+  } = useContext(store$m);
   useEffect(() => {
     gapi.load("client:auth2", () => {
       gapi.auth2.init({
@@ -13992,13 +14111,13 @@ const GoogleLoginButton = _ref => {
   }) : null;
 };
 
-var _path$p;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+var _path$q;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 function SvgAuth0Logo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     viewBox: "0 0 256 285",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
     d: "M220.412 0h-92.415l28.562 89.006h92.416l-74.77 53.077 28.57 89.511c48.128-35.06 63.854-88.12 46.208-142.588L220.413 0zM7.018 89.006h92.416L127.997 0H35.589L7.019 89.006c-17.655 54.468-1.92 107.529 46.207 142.588l28.563-89.51-74.77-53.078zm46.208 142.588l74.77 52.97 74.77-52.97-74.77-53.847-74.77 53.847z"
   })));
 }
@@ -14036,10 +14155,10 @@ const Auth0LoginButton = _ref => {
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = useContext(store$m);
+  } = useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = useContext(store$l);
+  } = useContext(store$m);
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
     if (!auth0Loaded) {
@@ -14182,13 +14301,13 @@ function LoginView(props) {
   }))));
 }
 
-var _path$o, _path2$1, _path3;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+var _path$p, _path2$1, _path3;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 function SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -80.652 497.072 179.991"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#4a4a4a",
     d: "M487.89 42.299c0 13.158-10.671 23.829-23.829 23.829H37.074c-13.162 0-23.832-10.671-23.832-23.829v-63.552c0-13.158 10.67-23.831 23.832-23.831H464.06c13.158 0 23.829 10.672 23.829 23.831l.001 63.552z"
@@ -14360,11 +14479,11 @@ function LoginModal(_ref) {
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 const RegisterButton = _ref => {
@@ -14384,7 +14503,7 @@ const RegisterButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = useContext(store$l);
+  } = useContext(store$m);
   const {
     t
   } = useTranslation("register");
@@ -14482,7 +14601,7 @@ function FirstName(_ref) {
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 function LastName(_ref) {
@@ -14560,7 +14679,7 @@ function LastName(_ref) {
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 function Phone(_ref) {
@@ -14841,7 +14960,7 @@ function TextInput(_ref) {
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$l
+    store: store$m
   }));
 };
 
@@ -18017,7 +18136,7 @@ class CybersourceGateway {
  */
 
 /** @type {PaymentStateType} */
-const initialState$k = {
+const initialState$l = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -18044,15 +18163,16 @@ const initialState$k = {
   year: "",
   passwordError: null,
   cyberSourceSessionId: null,
+  isDefault: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$k = /*#__PURE__*/createContext(initialState$k);
+const store$l = /*#__PURE__*/createContext(initialState$l);
 const {
-  Provider: Provider$k
-} = store$k;
+  Provider: Provider$l
+} = store$l;
 const PaymentMethodContainerWithoutStripe = _ref => {
   var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice, _window$Pelcro, _window$Pelcro$uiSett;
   let {
@@ -18080,7 +18200,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     selectedDonationAmount,
     customDonationAmount,
     isAuthenticated,
-    switchView
+    switchView,
+    paymentMethodToEdit,
+    paymentMethodToDelete
   } = usePelcro();
   const {
     whenUserReady
@@ -18195,7 +18317,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
-    } else if (type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
       createNewCybersourceCard();
     }
     function createNewCybersourceCard() {
@@ -18525,7 +18647,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new TapGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new TapGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
-    } else if (type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
       createNewTapCard();
     }
     function createNewTapCard() {
@@ -18736,14 +18858,121 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
-    } else if (type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource") {
       createNewVantivCard();
+    } else if (type === "updatePaymentSource") {
+      updateVantivCard();
+    } else if (type === "deletePaymentSource") {
+      replaceVantivCard();
     }
     function createNewVantivCard() {
-      window.Pelcro.source.create({
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: paymentRequest,
+        gateway: "vantiv"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: 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 replaceVantivCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToDelete;
+      window.Pelcro.paymentMethods.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: paymentRequest,
         gateway: "vantiv"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        window.Pelcro.paymentMethods.deletePaymentMethod({
+          auth_token: window.Pelcro.user.read().auth_token,
+          payment_method_id: paymentMethodId
+        }, (err, res) => {
+          if (err) {
+            onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+            return dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: getErrorMessages(err)
+              }
+            });
+          }
+          onSuccess(res);
+        });
+      });
+    }
+    function updateVantivCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToEdit;
+      const {
+        paypageRegistrationId,
+        bin,
+        type,
+        firstSix,
+        lastFour,
+        expMonth,
+        expYear
+      } = paymentRequest;
+      const {
+        isDefault
+      } = state;
+      const fourDigitExpYear = getFourDigitYear(Number(expYear)).toString();
+      window.Pelcro.paymentMethods.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: paymentMethodId,
+        gateway: "vantiv",
+        paypageRegistrationId: paypageRegistrationId,
+        bin: bin,
+        type: type,
+        firstSix: firstSix,
+        lastFour: lastFour,
+        exp_month: expMonth,
+        exp_year: fourDigitExpYear,
+        is_default: isDefault
       }, (err, res) => {
         dispatch({
           type: DISABLE_SUBMIT,
@@ -19601,7 +19830,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
     });
   };
-  const updatePaymentSource = (state, dispatch) => {
+  const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
     }).then(_ref8 => {
@@ -19622,7 +19851,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      window.Pelcro.source.create({
+      window.Pelcro.paymentMethods.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
@@ -19655,13 +19884,127 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
     });
   };
-  const updatePaymentRequest = state => {
-    var _state$paymentRequest;
-    state === null || state === void 0 ? void 0 : (_state$paymentRequest = state.paymentRequest) === null || _state$paymentRequest === void 0 ? void 0 : _state$paymentRequest.update({
-      total: {
-        label: plan.nickname || plan.description,
-        amount: state.updatedPrice
-      }
+  const updatePaymentSource = (state, dispatch) => {
+    const {
+      isDefault,
+      month,
+      year
+    } = state;
+    const {
+      id: paymentMethodId
+    } = paymentMethodToEdit;
+    window.Pelcro.paymentMethods.update({
+      auth_token: window.Pelcro.user.read().auth_token,
+      payment_method_id: paymentMethodId,
+      gateway: "stripe",
+      exp_month: month,
+      exp_year: year,
+      is_default: isDefault
+    }, (err, res) => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: 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);
+    });
+  };
+  const replacePaymentSource = (state, dispatch) => {
+    const {
+      id: paymentMethodId
+    } = paymentMethodToDelete;
+    return stripe.createSource({
+      type: "card"
+    }).then(_ref9 => {
+      var _source$card3;
+      let {
+        source,
+        error
+      } = _ref9;
+      if (error) {
+        return handlePaymentError(error);
+      }
+
+      // We don't support source creation for 3D secure yet
+      if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required") {
+        return handlePaymentError({
+          error: {
+            message: t("messages.cardAuthNotSupported")
+          }
+        });
+      }
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: source.id
+      }, (err, res) => {
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        if (res) {
+          setTimeout(() => {
+            window.Pelcro.paymentMethods.deletePaymentMethod({
+              auth_token: window.Pelcro.user.read().auth_token,
+              payment_method_id: paymentMethodId
+            }, (err, res) => {
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+              if (err) {
+                onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: getErrorMessages(err)
+                  }
+                });
+              }
+              onSuccess(res);
+            });
+          }, 1000);
+        }
+      });
+    });
+  };
+  const updatePaymentRequest = state => {
+    var _state$paymentRequest;
+    state === null || state === void 0 ? void 0 : (_state$paymentRequest = state.paymentRequest) === null || _state$paymentRequest === void 0 ? void 0 : _state$paymentRequest.update({
+      total: {
+        label: plan.nickname || plan.description,
+        amount: state.updatedPrice
+      }
     });
   };
   const sendRegisterRequest = (state, callback) => {
@@ -19734,12 +20077,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
-      var _ref10, _ref11, _state$updatedPrice;
+    }).then(_ref10 => {
+      var _ref11, _ref12, _state$updatedPrice;
       let {
         source,
         error
-      } = _ref9;
+      } = _ref10;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19758,7 +20101,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref10 = (_ref11 = (_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 && _ref11 !== void 0 ? _ref11 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref10 !== void 0 ? _ref10 : getOrderItemsTotal();
+      (_ref11 = (_ref12 = (_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 && _ref12 !== void 0 ? _ref12 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref11 !== void 0 ? _ref11 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -20002,9 +20345,15 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               });
             }
           }
+          if (type === "createPaymentSource") {
+            return createPaymentSource(state, dispatch);
+          }
           if (type === "updatePaymentSource") {
             return updatePaymentSource(state, dispatch);
           }
+          if (type === "deletePaymentSource") {
+            return replacePaymentSource(state, dispatch);
+          }
           if (!isAuthenticated() && plan.type === "donation") {
             return sendRegisterRequest(state, () => submitPayment(state));
           } else {
@@ -20150,16 +20499,26 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           ...state,
           cyberSourceSessionId: action.payload
         });
+      case HANDLE_CHECKBOX_CHANGE:
+        return lib_7({
+          ...state,
+          ...action.payload
+        });
+      case SET_IS_DEFAULT_PAYMENT_METHOD:
+        return lib_7({
+          ...state,
+          ...action.payload
+        });
       default:
         return state;
     }
-  }, initialState$k);
+  }, initialState$l);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$k, {
+  }, /*#__PURE__*/React__default.createElement(Provider$l, {
     value: {
       state,
       dispatch
@@ -20167,12 +20526,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$k,
+        store: store$l,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$k
+    store: store$l
   })));
 };
 const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
@@ -20193,11 +20552,11 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
-      store: store$k
+      store: store$l
     }, props))));
   } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default.createElement(PaymentMethodContainerWithoutStripe, Object.assign({
-      store: store$k
+      store: store$l
     }, props));
   }
   return null;
@@ -20357,7 +20716,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
     paymentRequest === null || paymentRequest === void 0 ? void 0 : paymentRequest.update({
@@ -20382,7 +20741,10 @@ const PelcroPaymentRequestButton = props => {
   }
   return null;
 };
-const CheckoutForm = () => {
+const CheckoutForm = _ref => {
+  let {
+    type
+  } = _ref;
   const {
     selectedPaymentMethodId
   } = usePelcro();
@@ -20409,16 +20771,31 @@ const CheckoutForm = () => {
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "plc-w-6/12 plc-pr-4"
     }, /*#__PURE__*/React__default.createElement(MonthSelect, {
-      store: store$k,
+      store: store$l,
       placeholder: "Exp Month *"
     })), /*#__PURE__*/React__default.createElement("div", {
       className: "plc-w-6/12"
     }, /*#__PURE__*/React__default.createElement(YearSelect, {
-      store: store$k,
+      store: store$l,
       placeholder: "Exp Year *"
     }))));
   }
   if (cardProcessor === "stripe") {
+    if (type === "updatePaymentSource") {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-w-6/12 plc-pr-4"
+      }, /*#__PURE__*/React__default.createElement(MonthSelect, {
+        store: store$l,
+        placeholder: "Exp Month *"
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-w-6/12"
+      }, /*#__PURE__*/React__default.createElement(YearSelect, {
+        store: store$l,
+        placeholder: "Exp Year *"
+      })));
+    }
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
       autoFocus: true
     }), /*#__PURE__*/React__default.createElement("img", {
@@ -20448,7 +20825,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     order,
     plan
@@ -20509,7 +20886,7 @@ const SubmitPaymentMethod = _ref => {
       month,
       year
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   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 = (plan === null || plan === void 0 ? void 0 : plan.type) === "donation" && (selectedDonationAmount || customDonationAmount) ? getFormattedPriceByLocal(selectedDonationAmount ? selectedDonationAmount * (plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity2 = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity2 !== void 0 ? _plan$quantity2 : 1) : customDonationAmount * (plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity3 = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity3 !== void 0 ? _plan$quantity3 : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage()) : getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -20543,15 +20920,15 @@ const SubmitPaymentMethod = _ref => {
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
 };
 
-var _path$n;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var _path$o;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 function SvgArrowLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20571,7 +20948,7 @@ const ApplyCouponButton = _ref => {
       disableCouponButton
     },
     dispatch
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -20603,7 +20980,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const onCouponCodeChange = e => {
     dispatch({
       type: UPDATE_COUPON_CODE,
@@ -20629,15 +21006,15 @@ const CouponCodeField = props => {
   }, props));
 };
 
-var _path$m;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+var _path$n;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 function SvgTicket(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20655,7 +21032,7 @@ const CouponCode = _ref => {
     state: {
       enableCouponField
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -20879,7 +21256,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     product,
     plan,
@@ -20995,14 +21372,14 @@ const BankAuthenticationSuccess = () => {
   }));
 };
 
-var _path$l;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+var _path$m;
+function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 function SvgLock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z",
     clipRule: "evenodd"
@@ -21018,7 +21395,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     switchView,
     selectedPaymentMethodId
@@ -21059,7 +21436,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     plan
   } = usePelcro();
@@ -21077,15 +21454,15 @@ const TaxAmount = () => {
 };
 
 const IncludeFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const IncludeLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const IncludePhone = props => /*#__PURE__*/React__default.createElement(Phone, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const SubscriptionCreateFreePlanButton = _ref => {
@@ -21099,7 +21476,7 @@ const SubscriptionCreateFreePlanButton = _ref => {
       disableSubmit
     },
     dispatch
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     t
   } = useTranslation("common");
@@ -21135,7 +21512,7 @@ const OrderCreateFreeButton = _ref => {
       disableSubmit
     },
     dispatch
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -21161,7 +21538,7 @@ const OrderCreateFreeButton = _ref => {
 };
 
 const DonationEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 /**
@@ -21178,7 +21555,7 @@ const ApplePayButton = _ref => {
   const {
     dispatch,
     state
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     plan,
     invoice,
@@ -21491,6 +21868,43 @@ const ApplePayButton = _ref => {
   });
 };
 
+function PaymentMethodUpdateSetDefault(props) {
+  const {
+    dispatch,
+    state: {
+      isDefault
+    }
+  } = useContext(store$l);
+  const {
+    paymentMethodToEdit
+  } = usePelcro();
+  useEffect(() => {
+    if (paymentMethodToEdit !== null && paymentMethodToEdit !== void 0 && paymentMethodToEdit.is_default) {
+      dispatch({
+        type: SET_IS_DEFAULT_PAYMENT_METHOD,
+        payload: {
+          isDefault: true
+        }
+      });
+    }
+  }, [paymentMethodToEdit]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleCheckboxChange = e => {
+    dispatch({
+      type: HANDLE_CHECKBOX_CHANGE,
+      payload: {
+        isDefault: e.target.checked
+      }
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Checkbox, {
+    onChange: e => handleCheckboxChange(e),
+    id: props.id,
+    checked: isDefault,
+    disabled: paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : paymentMethodToEdit.is_default
+  }, props.label);
+}
+
 /**
  *
  */
@@ -21576,9 +21990,14 @@ function PaymentMethodView(_ref) {
     label: t("labels.email"),
     required: true,
     autoFocus: true
-  })), /*#__PURE__*/React__default.createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement(CheckoutForm, {
+    type: type
+  }), showCoupon && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-mb-2"
-  }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), type === "updatePaymentSource" && /*#__PURE__*/React__default.createElement(PaymentMethodUpdateSetDefault, {
+    id: "pelcro-input-is-default",
+    label: t("labels.isDefault")
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
   }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ApplePayButton, null)) : null)))));
 }
@@ -21698,14 +22117,14 @@ function SubscriptionRenewModal(_ref) {
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-const initialState$j = {
+const initialState$k = {
   cancelationReason: "",
   cancelationOption: ""
 };
-const store$j = /*#__PURE__*/createContext(initialState$j);
+const store$k = /*#__PURE__*/createContext(initialState$k);
 const {
-  Provider: Provider$j
-} = store$j;
+  Provider: Provider$k
+} = store$k;
 const SubscriptionCancelContainer = _ref => {
   let {
     style,
@@ -21730,35 +22149,35 @@ const SubscriptionCancelContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$j);
+  }, initialState$k);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-subscription-cancel-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$j, {
+  }, /*#__PURE__*/React__default.createElement(Provider$k, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$j,
+    store: store$k,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$j
+    store: store$k
   })));
 };
 
-var _path$k;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+var _path$l;
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 function SvgInfoCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-5 plc-h-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21827,7 +22246,7 @@ const SubscriptionCancelReason = props => {
   } = useTranslation("subscriptionCancel");
   const {
     dispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
   const handleOnTextAreaBlur = e => {
     dispatch({
       type: SET_CANCEL_SUBSCRIPTION_REASON,
@@ -21841,9 +22260,9 @@ const SubscriptionCancelReason = props => {
 };
 
 var _switch;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 function SvgSubscription(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 125",
     fill: "currentColor"
@@ -21872,7 +22291,7 @@ const SubscriptionCancelButton = _ref => {
       cancelationReason,
       cancelationOption
     }
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -21951,7 +22370,7 @@ const SubscriptionCancelOptions = _ref => {
       cancelationOption
     },
     dispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -22067,14 +22486,14 @@ const SubscriptionCancelModal = _ref => {
 };
 SubscriptionCancelModal.viewId = "subscription-cancel";
 
-const initialState$i = {
+const initialState$j = {
   suspendDate: null,
   buttonDisabled: false
 };
-const store$i = /*#__PURE__*/createContext(initialState$i);
+const store$j = /*#__PURE__*/createContext(initialState$j);
 const {
-  Provider: Provider$i
-} = store$i;
+  Provider: Provider$j
+} = store$j;
 const SubscriptionSuspendContainer = _ref => {
   let {
     style,
@@ -22100,22 +22519,22 @@ const SubscriptionSuspendContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$i);
+  }, initialState$j);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-subscription-suspend-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$i, {
+  }, /*#__PURE__*/React__default.createElement(Provider$j, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$i,
+    store: store$j,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$i
+    store: store$j
   })));
 };
 
@@ -22164,7 +22583,7 @@ const SubscriptionSuspendDate = props => {
   const {
     dispatch,
     state
-  } = useContext(store$i);
+  } = useContext(store$j);
   const handleInputChange = value => {
     if (value) {
       dispatch({
@@ -22206,7 +22625,7 @@ const SubscriptionSuspendButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     t
   } = useTranslation("subscriptionSuspend");
@@ -22307,10 +22726,10 @@ function SubscriptionSuspendModal(_ref) {
 }
 SubscriptionSuspendModal.viewId = "subscription-suspend";
 
-var _path$j;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$k;
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 function SvgGift(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -22319,7 +22738,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -22625,7 +23044,7 @@ class DefaultNewsLetter extends Component {
 }
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const initialState$h = {
+const initialState$i = {
   didSubToNewslettersBefore: false,
   newsletters: [],
   isListLoading: true,
@@ -22635,10 +23054,10 @@ const initialState$h = {
     content: ""
   }
 };
-const store$h = /*#__PURE__*/createContext(initialState$h);
+const store$i = /*#__PURE__*/createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 const NewsletterUpdateContainer = _ref => {
   let {
     style,
@@ -22745,7 +23164,7 @@ const NewsletterUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   useEffect(() => {
     const getUserNewsletters = () => {
       var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
@@ -22787,7 +23206,7 @@ const NewsletterUpdateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-newsletter-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$h, {
+  }, /*#__PURE__*/React__default.createElement(Provider$i, {
     value: {
       state,
       dispatch
@@ -22795,12 +23214,12 @@ const NewsletterUpdateContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$h,
+        store: store$i,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -22816,7 +23235,7 @@ const NewsletterUpdateButton = _ref => {
       isSubmitting,
       isListLoading
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     t
   } = useTranslation("newsletter");
@@ -22845,7 +23264,7 @@ const NewsletterUpdateList = () => {
       newsletters,
       isListLoading
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
   if (isListLoading) {
     return /*#__PURE__*/React__default.createElement(Loader, {
       width: 60,
@@ -23042,7 +23461,7 @@ function SubscriptionCreateModal(_ref) {
 }
 SubscriptionCreateModal.viewId = "subscription-create";
 
-const initialState$g = {
+const initialState$h = {
   emails: "",
   emailsError: null,
   buttonDisabled: false,
@@ -23054,10 +23473,10 @@ const initialState$g = {
     content: ""
   }
 };
-const store$g = /*#__PURE__*/createContext(initialState$g);
+const store$h = /*#__PURE__*/createContext(initialState$h);
 const {
-  Provider: Provider$g
-} = store$g;
+  Provider: Provider$h
+} = store$h;
 const SubscriptionManageMembersContainer = _ref => {
   let {
     style,
@@ -23221,7 +23640,7 @@ const SubscriptionManageMembersContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$g);
+  }, initialState$h);
   useEffect(() => {
     dispatch({
       type: HANDLE_LIST_MEMBERS
@@ -23232,7 +23651,7 @@ const SubscriptionManageMembersContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-manage-members-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$g, {
+  }, /*#__PURE__*/React__default.createElement(Provider$h, {
     value: {
       state,
       dispatch
@@ -23240,12 +23659,12 @@ const SubscriptionManageMembersContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$g,
+        store: store$h,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$g
+    store: store$h
   })));
 };
 
@@ -23262,7 +23681,7 @@ const SubscriptionManageMembersButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
   const {
     t
   } = useTranslation("subscriptionManageMembers");
@@ -23292,7 +23711,7 @@ function SubscriptionManageMembersEmails(props) {
       emails: stateEmails,
       emailsError
     }
-  } = useContext(store$g);
+  } = useContext(store$h);
   const [emails, setEmails] = useState(stateEmails);
   const [finishedTyping, setFinishedTyping] = useState(false);
   const handleInputChange = useCallback(value => {
@@ -23322,15 +23741,15 @@ function SubscriptionManageMembersEmails(props) {
   }, props));
 }
 
-var _path$i;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$j;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 function SvgCheckMark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
@@ -23348,7 +23767,7 @@ function SubscriptionManageMembersList(props) {
       removeMemberId,
       loading
     }
-  } = useContext(store$g);
+  } = useContext(store$h);
   const getMemberStatus = useCallback(sub => {
     if (sub.status === "pending") {
       return {
@@ -23511,7 +23930,7 @@ function SubscriptionManageMembersModal(_ref) {
 SubscriptionManageMembersModal.viewId = "manage-members";
 
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _window$Pelcro$user$r7;
-const initialState$f = {
+const initialState$g = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   emailError: null,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
@@ -23531,10 +23950,10 @@ const initialState$f = {
     content: ""
   }
 };
-const store$f = /*#__PURE__*/createContext(initialState$f);
+const store$g = /*#__PURE__*/createContext(initialState$g);
 const {
-  Provider: Provider$f
-} = store$f;
+  Provider: Provider$g
+} = store$g;
 const UserUpdateContainer = _ref => {
   let {
     style,
@@ -23730,13 +24149,13 @@ const UserUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$f);
+  }, initialState$g);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-user-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$f, {
+  }, /*#__PURE__*/React__default.createElement(Provider$g, {
     value: {
       state,
       dispatch
@@ -23744,24 +24163,24 @@ const UserUpdateContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$f,
+        store: store$g,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$f
+    store: store$g
   })));
 };
 
-var _path$h;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+var _path$i;
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 function SvgEdit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
   })));
 }
@@ -23773,7 +24192,7 @@ const UserUpdateEmail = props => {
       email,
       emailError
     }
-  } = useContext(store$f);
+  } = useContext(store$g);
   const [enableEmailEdit, setEnableEmailEdit] = useState(false);
   const {
     t
@@ -23797,7 +24216,7 @@ const UserUpdateEmail = props => {
     className: "plc-flex plc-items-start plc-relative"
   }, /*#__PURE__*/React__default.createElement(Email, Object.assign({
     disabled: !enableEmailEdit,
-    store: store$f,
+    store: store$g,
     label: t("labels.email"),
     enableEmailEdit: enableEmailEdit
   }, props)), /*#__PURE__*/React__default.createElement(Button, {
@@ -23831,7 +24250,7 @@ const UserUpdateButton = _ref => {
       phoneError
     },
     dispatch
-  } = useContext(store$f);
+  } = useContext(store$g);
   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 {
     t
@@ -23927,19 +24346,19 @@ function UpdateUserNameInput(_ref) {
 }
 
 const UserUpdateUsername = props => /*#__PURE__*/React__default.createElement(UpdateUserNameInput, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdatePhone = props => /*#__PURE__*/React__default.createElement(Phone, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
@@ -24026,7 +24445,7 @@ function Tin(_ref) {
 }
 
 const UserUpdateTin = props => /*#__PURE__*/React__default.createElement(Tin, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 function DisplayName(_ref) {
@@ -24055,7 +24474,7 @@ function DisplayName(_ref) {
 }
 
 const UserUpdateDisplayName = props => /*#__PURE__*/React__default.createElement(DisplayName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateView = props => {
@@ -24149,11 +24568,11 @@ UserUpdateModal.viewId = "user-edit";
 
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$f
+    store: store$g
   }));
 };
 
-const initialState$e = {
+const initialState$f = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -24179,10 +24598,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/createContext(initialState$e);
+const store$f = /*#__PURE__*/createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 const getNewlyCreatedAddress = addresses => addresses[addresses.length - 1];
 const AddressCreateContainer = _ref => {
   var _props$giftCode, _ref2, _props$subscriptionId;
@@ -24416,7 +24835,7 @@ const AddressCreateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -24448,16 +24867,16 @@ const AddressCreateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-create-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$e, {
+  }, /*#__PURE__*/React__default.createElement(Provider$f, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$e,
+    store: store$f,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -24468,7 +24887,7 @@ function AddressCreateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -24502,7 +24921,7 @@ function AddressCreateLastName(props) {
       lastName,
       lastNameError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -24534,7 +24953,7 @@ function AddressCreateLine1(props) {
       line1,
       line1Error
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -24573,7 +24992,7 @@ function AddressCreateCity(props) {
       city,
       cityError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -24605,7 +25024,7 @@ function AddressCreatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -24641,7 +25060,7 @@ const AddressCreateSubmit = _ref => {
     state: {
       isSubmitting
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     t
   } = useTranslation("address");
@@ -24721,7 +25140,7 @@ function CountrySelect(_ref) {
 }
 
 const AddressCreateCountrySelect = props => /*#__PURE__*/React__default.createElement(CountrySelect, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 function StateSelect(_ref) {
@@ -24803,14 +25222,14 @@ function StateSelect(_ref) {
 }
 
 const AddressCreateStateSelect = props => /*#__PURE__*/React__default.createElement(StateSelect, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 const AddressCreateSetDefault = props => {
   const {
     dispatch,
     state
-  } = useContext(store$e);
+  } = useContext(store$f);
   const handleCheckboxChange = e => {
     dispatch({
       type: HANDLE_CHECKBOX_CHANGE,
@@ -24935,18 +25354,18 @@ AddressCreateModal.viewId = "address-create";
 
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$e
+    store: store$f
   }));
 };
 
 const AddressCreateLine2 = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({
     fieldName: "line2",
-    store: store$e
+    store: store$f
   }, props));
 };
 
-const initialState$d = {
+const initialState$e = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -24972,10 +25391,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/createContext(initialState$d);
+const store$e = /*#__PURE__*/createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 const AddressUpdateContainer = _ref => {
   var _props$addressId, _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
@@ -25024,7 +25443,7 @@ const AddressUpdateContainer = _ref => {
       const thisAddress = addresses[address];
       if (+thisAddress.id === +addressId) {
         const newState = {
-          ...initialState$d,
+          ...initialState$e,
           firstName: thisAddress.first_name,
           lastName: thisAddress.last_name,
           line1: thisAddress.line1,
@@ -25175,7 +25594,7 @@ const AddressUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -25207,21 +25626,21 @@ const AddressUpdateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$d, {
+  }, /*#__PURE__*/React__default.createElement(Provider$e, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$d,
+    store: store$e,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
 
 const AddressUpdateCountrySelect = props => /*#__PURE__*/React__default.createElement(CountrySelect, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function AddressUpdateFirstName(props) {
@@ -25231,7 +25650,7 @@ function AddressUpdateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25270,7 +25689,7 @@ function AddressUpdateLastName(props) {
       lastName,
       lastNameError
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25309,7 +25728,7 @@ function AddressUpdateLine1(props) {
       line1,
       line1Error
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25345,7 +25764,7 @@ const AddressUpdateLine2 = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({
     fieldName: "line2"
   }, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -25356,7 +25775,7 @@ function AddressUpdateCity(props) {
       city,
       cityError
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25395,7 +25814,7 @@ function AddressUpdatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25438,7 +25857,7 @@ const AddressUpdateSubmit = _ref => {
     state: {
       isSubmitting
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const {
     t
   } = useTranslation("address");
@@ -25454,7 +25873,7 @@ const AddressUpdateSubmit = _ref => {
 };
 
 const AddressUpdateStateSelect = props => /*#__PURE__*/React__default.createElement(StateSelect, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function AddressUpdateSetDefault(props) {
@@ -25463,7 +25882,7 @@ function AddressUpdateSetDefault(props) {
     state: {
       isDefault
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const handleCheckboxChange = e => {
     dispatch({
       type: HANDLE_CHECKBOX_CHANGE,
@@ -25565,7 +25984,7 @@ AddressUpdateModal.viewId = "address-edit";
 
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -25655,7 +26074,7 @@ const PaymentMethodUpdateModal = props => {
 };
 PaymentMethodUpdateModal.viewId = "payment-method-update";
 
-const initialState$c = {
+const initialState$d = {
   email: "",
   password: "",
   passwordError: null,
@@ -25668,10 +26087,10 @@ const initialState$c = {
     content: ""
   }
 };
-const store$c = /*#__PURE__*/createContext(initialState$c);
+const store$d = /*#__PURE__*/createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 const PasswordResetContainer = _ref => {
   let {
     style,
@@ -25726,7 +26145,7 @@ const PasswordResetContainer = _ref => {
       type: SET_EMAIL,
       payload: window.Pelcro.helpers.getURLParameter("email")
     });
-    initialState$c.email = window.Pelcro.helpers.getURLParameter("email");
+    initialState$d.email = window.Pelcro.helpers.getURLParameter("email");
     dispatch({
       type: SET_TOKEN,
       payload: window.Pelcro.helpers.getURLParameter("token")
@@ -25786,27 +26205,27 @@ const PasswordResetContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-reset-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$c, {
+  }, /*#__PURE__*/React__default.createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
 const PasswordResetPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const PasswordResetButton = _ref => {
@@ -25820,7 +26239,7 @@ const PasswordResetButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     t
   } = useTranslation("passwordReset");
@@ -25837,14 +26256,14 @@ const PasswordResetButton = _ref => {
 };
 
 const PasswordResetEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$c
+  store: store$d
 }, props, {
   value: window.Pelcro.helpers.getURLParameter("email"),
   disabled: true
 }));
 
 const PasswordResetConfirmPassword = props => /*#__PURE__*/React__default.createElement(ConfirmPassword, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const PasswordResetView = props => {
@@ -25897,7 +26316,7 @@ const PasswordResetModal = _ref => {
 };
 PasswordResetModal.viewId = "password-reset";
 
-const initialState$b = {
+const initialState$c = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -25906,10 +26325,10 @@ const initialState$b = {
     content: ""
   }
 };
-const store$b = /*#__PURE__*/createContext(initialState$b);
+const store$c = /*#__PURE__*/createContext(initialState$c);
 const {
-  Provider: Provider$b
-} = store$b;
+  Provider: Provider$c
+} = store$c;
 const PasswordForgotContainer = _ref => {
   let {
     style,
@@ -25985,22 +26404,22 @@ const PasswordForgotContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$b);
+  }, initialState$c);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$b, {
+  }, /*#__PURE__*/React__default.createElement(Provider$c, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$b,
+    store: store$c,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$b
+    store: store$c
   })));
 };
 
@@ -26017,7 +26436,7 @@ const PasswordForgotButton = _ref => {
       emailError
     },
     dispatch
-  } = useContext(store$b);
+  } = useContext(store$c);
   const {
     t
   } = useTranslation("passwordForgot");
@@ -26038,7 +26457,7 @@ const PasswordForgotButton = _ref => {
 };
 
 const PasswordForgotEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 const PasswordForgotView = props => {
@@ -26089,7 +26508,7 @@ const PasswordForgotModal = _ref => {
 };
 PasswordForgotModal.viewId = "password-forgot";
 
-const initialState$a = {
+const initialState$b = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -26098,10 +26517,10 @@ const initialState$a = {
     content: ""
   }
 };
-const store$a = /*#__PURE__*/createContext(initialState$a);
+const store$b = /*#__PURE__*/createContext(initialState$b);
 const {
-  Provider: Provider$a
-} = store$a;
+  Provider: Provider$b
+} = store$b;
 const PasswordlessRequestContainer = _ref => {
   let {
     style,
@@ -26177,22 +26596,22 @@ const PasswordlessRequestContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$a);
+  }, initialState$b);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$a, {
+  }, /*#__PURE__*/React__default.createElement(Provider$b, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$a,
+    store: store$b,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$a
+    store: store$b
   })));
 };
 
@@ -26209,7 +26628,7 @@ const PasswordlessRequestViewButton = _ref => {
       emailError
     },
     dispatch
-  } = useContext(store$a);
+  } = useContext(store$b);
   const {
     t
   } = useTranslation("passwordlessRequest");
@@ -26230,7 +26649,7 @@ const PasswordlessRequestViewButton = _ref => {
 };
 
 const PasswordlessRequestEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const PasswordlessRequestView = props => {
@@ -26272,7 +26691,7 @@ const PasswordlessRequestModal = _ref => {
 };
 PasswordlessRequestModal.viewId = "passwordless-request";
 
-const initialState$9 = {
+const initialState$a = {
   currentPassword: "",
   newPassword: "",
   confirmNewPassword: "",
@@ -26286,10 +26705,10 @@ const initialState$9 = {
     content: ""
   }
 };
-const store$9 = /*#__PURE__*/createContext(initialState$9);
+const store$a = /*#__PURE__*/createContext(initialState$a);
 const {
-  Provider: Provider$9
-} = store$9;
+  Provider: Provider$a
+} = store$a;
 const PasswordChangeContainer = _ref => {
   let {
     style,
@@ -26440,22 +26859,22 @@ const PasswordChangeContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$9);
+  }, initialState$a);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-change-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$9, {
+  }, /*#__PURE__*/React__default.createElement(Provider$a, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$9,
+    store: store$a,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$9
+    store: store$a
   })));
 };
 
@@ -26466,7 +26885,7 @@ function PasswordChangeCurrentPassword(props) {
       currentPassword,
       currentPasswordError
     }
-  } = useContext(store$9);
+  } = useContext(store$a);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_PASSWORD
@@ -26500,7 +26919,7 @@ function PasswordChangeNewPassword(props) {
       newPassword,
       newPasswordError
     }
-  } = useContext(store$9);
+  } = useContext(store$a);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_NEW_PASSWORD
@@ -26534,7 +26953,7 @@ function PasswordChangeConfirmNewPassword(props) {
       confirmNewPassword,
       confirmNewPasswordError
     }
-  } = useContext(store$9);
+  } = useContext(store$a);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_CONFIRM_NEW_PASSWORD
@@ -26576,7 +26995,7 @@ const PasswordChangeButton = _ref => {
       confirmNewPasswordError
     },
     dispatch
-  } = useContext(store$9);
+  } = useContext(store$a);
   const {
     t
   } = useTranslation("passwordChange");
@@ -26643,17 +27062,17 @@ const PasswordChangeModal = _ref => {
 };
 PasswordChangeModal.viewId = "password-change";
 
-const initialState$8 = {
+const initialState$9 = {
   buttonDisabled: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$8 = /*#__PURE__*/createContext(initialState$8);
+const store$9 = /*#__PURE__*/createContext(initialState$9);
 const {
-  Provider: Provider$8
-} = store$8;
+  Provider: Provider$9
+} = store$9;
 const CartContainer = _ref => {
   let {
     style,
@@ -26739,22 +27158,22 @@ const CartContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$8);
+  }, initialState$9);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-cart-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$8, {
+  }, /*#__PURE__*/React__default.createElement(Provider$9, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$8,
+    store: store$9,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$8
+    store: store$9
   })));
 };
 
@@ -26796,7 +27215,7 @@ const CartSubmit = _ref => {
       buttonDisabled
     },
     dispatch
-  } = useContext(store$8);
+  } = useContext(store$9);
   const {
     t
   } = useTranslation("cart");
@@ -26831,7 +27250,7 @@ const CartTotalPrice = () => {
     state: {
       alert
     }
-  } = useContext(store$8);
+  } = useContext(store$9);
   const {
     cartItems
   } = usePelcro();
@@ -27145,7 +27564,7 @@ const OrderConfirmModal = props => {
 };
 OrderConfirmModal.viewId = "order-confirm";
 
-const initialState$7 = {
+const initialState$8 = {
   email: "",
   firstName: "",
   lastName: "",
@@ -27157,10 +27576,10 @@ const initialState$7 = {
     content: ""
   }
 };
-const store$7 = /*#__PURE__*/createContext(initialState$7);
+const store$8 = /*#__PURE__*/createContext(initialState$8);
 const {
-  Provider: Provider$7
-} = store$7;
+  Provider: Provider$8
+} = store$8;
 const GiftCreateContainer = _ref => {
   let {
     style,
@@ -27258,22 +27677,22 @@ const GiftCreateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$7);
+  }, initialState$8);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-gift-create-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$7, {
+  }, /*#__PURE__*/React__default.createElement(Provider$8, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$7,
+    store: store$8,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$7
+    store: store$8
   })));
 };
 
@@ -27288,7 +27707,7 @@ const GiftCreateSubmitButton = _ref => {
     state: {
       disableSubmit
     }
-  } = useContext(store$7);
+  } = useContext(store$8);
   const {
     t
   } = useTranslation("register");
@@ -27305,17 +27724,17 @@ const GiftCreateSubmitButton = _ref => {
 
 const GiftCreateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
   initWithUserEmail: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
   initWithUserFirstName: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
   initWithUserLastName: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const nowDate = new Date();
@@ -27329,7 +27748,7 @@ const GiftCreateStartDate = props => {
   const {
     dispatch,
     state
-  } = useContext(store$7);
+  } = useContext(store$8);
   const handleInputChange = value => {
     dispatch({
       type: SET_START_DATE,
@@ -27359,7 +27778,7 @@ function GiftCreateMessage(props) {
   const {
     dispatch,
     state
-  } = useContext(store$7);
+  } = useContext(store$8);
   const MAX_CHARS_COUNT = 200;
   const remainingCharsCount = (_ref = MAX_CHARS_COUNT - ((_state$giftMessage = state.giftMessage) === null || _state$giftMessage === void 0 ? void 0 : _state$giftMessage.length)) !== null && _ref !== void 0 ? _ref : 0;
   const handleInputChange = value => {
@@ -27477,7 +27896,7 @@ const GiftCreateModal = _ref => {
 };
 GiftCreateModal.viewId = "gift-create";
 
-const initialState$6 = {
+const initialState$7 = {
   isSubmitting: false,
   giftCode: "",
   buttonDisabled: true,
@@ -27486,10 +27905,10 @@ const initialState$6 = {
     content: ""
   }
 };
-const store$6 = /*#__PURE__*/createContext(initialState$6);
+const store$7 = /*#__PURE__*/createContext(initialState$7);
 const {
-  Provider: Provider$6
-} = store$6;
+  Provider: Provider$7
+} = store$7;
 const GiftRedeemContainer = _ref => {
   var _ref2, _props$subscriptionId;
   let {
@@ -27599,22 +28018,22 @@ const GiftRedeemContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$6);
+  }, initialState$7);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-gift-redeem-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$6, {
+  }, /*#__PURE__*/React__default.createElement(Provider$7, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$6,
+    store: store$7,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$6
+    store: store$7
   })));
 };
 
@@ -27648,7 +28067,7 @@ function GiftCode(_ref) {
 }
 
 const GiftRedeemCode = props => /*#__PURE__*/React__default.createElement(GiftCode, Object.assign({
-  store: store$6
+  store: store$7
 }, props));
 
 const GiftRedeemSubmitButton = _ref => {
@@ -27663,7 +28082,7 @@ const GiftRedeemSubmitButton = _ref => {
       disableSubmit,
       isSubmitting
     }
-  } = useContext(store$6);
+  } = useContext(store$7);
   const {
     t
   } = useTranslation("register");
@@ -27748,7 +28167,7 @@ const moveDefaultAddressToStart = addresses => {
   const addressesWithoutDefault = addresses.filter(address => !address.is_default);
   return [defaultAddress, ...addressesWithoutDefault];
 };
-const initialState$5 = {
+const initialState$6 = {
   addresses: [],
   selectedAddressId: null,
   isSubmitting: false,
@@ -27757,10 +28176,10 @@ const initialState$5 = {
     content: ""
   }
 };
-const store$5 = /*#__PURE__*/createContext(initialState$5);
+const store$6 = /*#__PURE__*/createContext(initialState$6);
 const {
-  Provider: Provider$5
-} = store$5;
+  Provider: Provider$6
+} = store$6;
 const AddressSelectContainer = _ref => {
   var _props$giftCode, _ref2, _props$subscriptionId;
   let {
@@ -27887,7 +28306,7 @@ const AddressSelectContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$5);
+  }, initialState$6);
   useEffect(() => {
     var _window$Pelcro$user$r;
     dispatch({
@@ -27900,16 +28319,16 @@ const AddressSelectContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-select-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$5, {
+  }, /*#__PURE__*/React__default.createElement(Provider$6, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$5,
+    store: store$6,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$5
+    store: store$6
   })));
 };
 
@@ -27920,7 +28339,7 @@ const AddressSelectList = () => {
       addresses,
       selectedAddressId
     }
-  } = useContext(store$5);
+  } = useContext(store$6);
   const handleAddressSelect = event => {
     dispatch({
       type: SELECT_ADDRESS,
@@ -27963,7 +28382,7 @@ const AddressSelectSubmit = _ref => {
       selectedAddressId,
       isSubmitting
     }
-  } = useContext(store$5);
+  } = useContext(store$6);
   const {
     t
   } = useTranslation("address");
@@ -28059,7 +28478,7 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
   }
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
-const initialState$4 = {
+const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
@@ -28068,10 +28487,10 @@ const initialState$4 = {
     content: ""
   }
 };
-const store$4 = /*#__PURE__*/createContext(initialState$4);
+const store$5 = /*#__PURE__*/createContext(initialState$5);
 const {
-  Provider: Provider$4
-} = store$4;
+  Provider: Provider$5
+} = store$5;
 const PaymentMethodSelectContainer = _ref => {
   let {
     style,
@@ -28124,7 +28543,7 @@ const PaymentMethodSelectContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$4);
+  }, initialState$5);
   useEffect(() => {
     var _window$Pelcro$user$r3;
     dispatch({
@@ -28137,16 +28556,16 @@ const PaymentMethodSelectContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-payment-select-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$4, {
+  }, /*#__PURE__*/React__default.createElement(Provider$5, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$4,
+    store: store$5,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$4
+    store: store$5
   })));
 };
 
@@ -28160,7 +28579,7 @@ const PaymentMethodSelectList = () => {
       paymentMethods,
       selectedPaymentMethodId
     }
-  } = useContext(store$4);
+  } = useContext(store$5);
   const handlePaymentMethodSelect = event => {
     dispatch({
       type: SELECT_PAYMENT_METHOD,
@@ -28208,7 +28627,7 @@ const PaymentMethodSelectSubmit = _ref => {
       selectedPaymentMethodId,
       isSubmitting
     }
-  } = useContext(store$4);
+  } = useContext(store$5);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -28246,50 +28665,469 @@ const PaymentMethodSelectView = props => {
   }))));
 };
 
-const PaymentMethodSelectModal = _ref => {
-  var _window$Pelcro, _window$Pelcro$uiSett;
-  let {
-    onDisplay,
-    onClose,
-    ...otherProps
-  } = _ref;
-  const {
-    switchToCheckoutForm,
-    set,
-    plan,
-    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;
-  useEffect(() => {
-    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) {
-      switchToCheckoutForm();
+const PaymentMethodSelectModal = _ref => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
+  let {
+    onDisplay,
+    onClose,
+    ...otherProps
+  } = _ref;
+  const {
+    switchToCheckoutForm,
+    set,
+    plan,
+    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;
+  useEffect(() => {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) {
+      switchToCheckoutForm();
+    }
+  }, []);
+  const onSuccess = selectedPaymentMethodId => {
+    var _otherProps$onSuccess;
+    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, selectedPaymentMethodId);
+    switchToCheckoutForm();
+  };
+  const onAddNewPaymentMethod = () => {
+    set({
+      selectedPaymentMethodId: null
+    });
+    switchToCheckoutForm();
+  };
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-payment-method-select-modal"
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(PaymentMethodSelectView, Object.assign({
+    onAddNewPaymentMethod: onAddNewPaymentMethod
+  }, otherProps, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+};
+PaymentMethodSelectModal.viewId = "payment-method-select";
+
+const initialState$4 = {
+  paymentMethods: [],
+  selectedPaymentMethodId: null,
+  isSubmitting: false,
+  deleteOption: "",
+  disableSubmit: false,
+  isLoading: false,
+  skeletonLoader: true,
+  alert: {
+    type: "error",
+    content: ""
+  }
+};
+const store$4 = /*#__PURE__*/createContext(initialState$4);
+const {
+  Provider: Provider$4
+} = store$4;
+const PaymentMethodDeleteContainer = _ref => {
+  let {
+    style,
+    className = "",
+    onSuccess = () => {},
+    onFailure = () => {},
+    children
+  } = _ref;
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  useEffect(() => {
+    window.Pelcro.paymentMethods.list({
+      auth_token: window.Pelcro.user.read().auth_token
+    }, (err, res) => {
+      if (err) {
+        return console.error(err);
+      }
+      if (res) {
+        dispatch({
+          type: SET_PAYMENT_METHODS,
+          payload: res.data
+        });
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: false
+        });
+        if (res.data.length !== 1) {
+          dispatch({
+            type: SET_DELETE_PAYMENT_METHOD_OPTION,
+            payload: "select"
+          });
+        } else {
+          dispatch({
+            type: SET_DELETE_PAYMENT_METHOD_OPTION,
+            payload: "add"
+          });
+        }
+      }
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const setDefaultPaymentMethod = () => {
+    const {
+      selectedPaymentMethodId: paymentMethodId
+    } = state;
+    window.Pelcro.paymentMethods.setDefaultPaymentMethod({
+      auth_token: window.Pelcro.user.read().auth_token,
+      payment_method_id: paymentMethodId
+    }, (err, res) => {
+      if (err) {
+        onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+      }
+      setTimeout(() => {
+        deletePaymentMethod();
+      }, 1000);
+    });
+  };
+  const deletePaymentMethod = () => {
+    const {
+      id: paymentMethodId
+    } = paymentMethodToDelete;
+    window.Pelcro.paymentMethods.deletePaymentMethod({
+      auth_token: window.Pelcro.user.read().auth_token,
+      payment_method_id: paymentMethodId
+    }, (err, res) => {
+      if (err) {
+        onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+      }
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      onSuccess(res);
+    });
+  };
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case SELECT_PAYMENT_METHOD:
+        return lib_7({
+          ...state,
+          selectedPaymentMethodId: action.payload
+        });
+      case HANDLE_SUBMIT:
+        return lib_5({
+          ...state,
+          disableSubmit: true,
+          isLoading: true
+        }, (state, dispatch) => setDefaultPaymentMethod());
+      case SET_DELETE_PAYMENT_METHOD_OPTION:
+        return lib_7({
+          ...state,
+          deleteOption: action.payload
+        });
+      case SET_PAYMENT_METHODS:
+        return lib_7({
+          ...state,
+          paymentMethods: action.payload
+        });
+      case SHOW_ALERT:
+        return lib_7({
+          ...state,
+          alert: action.payload
+        });
+      case DISABLE_SUBMIT:
+        return lib_7({
+          ...state,
+          disableSubmit: action.payload
+        });
+      case LOADING:
+        return lib_7({
+          ...state,
+          isLoading: action.payload
+        });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          skeletonLoader: action.payload
+        });
+      default:
+        return state;
+    }
+  }, initialState$4);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      ...style
+    },
+    className: `pelcro-container pelcro-payment-method-delete-container ${className}`
+  }, /*#__PURE__*/React__default.createElement(Provider$4, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store: store$4,
+    key: i
+  })) : /*#__PURE__*/React__default.cloneElement(children, {
+    store: store$4
+  })));
+};
+
+const PaymentMethodDeleteSubmit = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      isLoading,
+      isDisabled
+    }
+  } = useContext(store$4);
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isDisabled,
+    isLoading: isLoading,
+    className: "plc-w-full"
+  }, otherProps), name !== null && name !== void 0 ? name : t("select.buttons.selectPaymentMethod"));
+};
+
+const PaymentMethodDeleteList = props => {
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      deleteOption,
+      selectedPaymentMethodId,
+      paymentMethods,
+      skeletonLoader
+    }
+  } = useContext(store$4);
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  const handlePaymentMethodSelect = event => {
+    dispatch({
+      type: SELECT_PAYMENT_METHOD,
+      payload: event.target.value
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll no-scrollbar plc-max-h-80 pelcro-payment-method-select-wrapper plc-mb-4"
+  }, paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => {
+    var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
+    const isSelected = selectedPaymentMethodId === String(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
+      className: `plc-p-2 plc-pl-4 plc-shadow-md plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper`
+    }, /*#__PURE__*/React__default.createElement(Radio, {
+      className: "plc-flex plc-items-center pelcro-select-payment-method-radio",
+      labelClassName: "plc-flex plc-items-center plc-space-x-2 plc-cursor-pointer plc-w-full",
+      id: `pelcro-payment-method-select-${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id}`,
+      name: "paymentMethod",
+      checked: isSelected,
+      value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
+      onChange: handlePaymentMethodSelect
+    }, getPaymentCardIcon$1((_paymentMethod$proper = paymentMethod.properties) === null || _paymentMethod$proper === void 0 ? void 0 : _paymentMethod$proper.brand), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
+    }, /*#__PURE__*/React__default.createElement("p", {
+      className: "plc-font-semibold"
+    }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022", " ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default.createElement("p", {
+      className: "plc-text-sm plc-text-gray-500"
+    }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))));
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-px-3"
+  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default.createElement(PaymentMethodView, {
+    type: "deletePaymentSource",
+    showCoupon: false,
+    showExternalPaymentMethods: false,
+    showApplePayButton: false,
+    onDisplay: props.onDisplay,
+    onFailure: props.onFailure,
+    onSuccess: props.onSuccess,
+    setAsDefault: true
+  })));
+};
+
+const PaymentMethodDeleteOptions = _ref => {
+  const {
+    state: {
+      deleteOption,
+      paymentMethods,
+      skeletonLoader
+    },
+    dispatch
+  } = useContext(store$4);
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const handleOptionSelect = event => {
+    dispatch({
+      type: SET_DELETE_PAYMENT_METHOD_OPTION,
+      payload: event.target.value
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-col plc-space-y-3"
+  }, /*#__PURE__*/React__default.createElement(Radio, {
+    className: "plc-animate-puls"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
+  })), /*#__PURE__*/React__default.createElement(Radio, {
+    className: "plc-animate-pulse"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
+  }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && paymentMethods.length !== 1 && /*#__PURE__*/React__default.createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: deleteOption === "select",
+    value: "select"
+  }, t("delete.options.select")), /*#__PURE__*/React__default.createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: deleteOption === "add",
+    value: "add"
+  }, t("delete.options.add"))));
+};
+
+function PaymentMethodDeleteView(props) {
+  const [t] = useTranslation("paymentMethod");
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-payment-method-delete-view"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold plc-mb-2"
+  }, t("delete.title")), /*#__PURE__*/React__default.createElement("p", {
+    className: ""
+  }, t("delete.subtitle"))), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, {
+    className: "plc-mb-2"
+  }), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteList, {
+    onSuccess: props.onSuccess
+  })));
+}
+
+const PaymentMethodDeleteModal = props => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_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.enableReactGA4;
+  const {
+    resetView
+  } = usePelcro();
+  const onSuccess = res => {
+    var _props$onSuccess;
+    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
+    if (enableReactGA4) {
+      ReactGA4.event("Delete payment card", {
+        nonInteraction: true
+      });
+    } else {
+      var _ReactGA$event;
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Delete payment card",
+        nonInteraction: true
+      });
+    }
+    notify.success(t("delete.paymentMethodReplaced"));
+    resetView();
+  };
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    id: "pelcro-payment-method-delete-modal",
+    onDisplay: props.onDisplay,
+    onClose: props.onClose
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteView, Object.assign({}, props, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+};
+PaymentMethodDeleteModal.viewId = "payment-method-delete";
+
+const PaymentMethodCreateContainer = props => {
+  return /*#__PURE__*/React__default.createElement(PaymentMethodContainer, Object.assign({
+    type: "createPaymentSource",
+    className: "pelcro-payment-create-container"
+  }, props));
+};
+
+/**
+ *
+ */
+function PaymentMethodCreateView(props) {
+  const [t] = useTranslation("paymentMethod");
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-payment-method-create-view"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold "
+  }, t("create.title")), /*#__PURE__*/React__default.createElement("p", null, t("create.subtitle"))), /*#__PURE__*/React__default.createElement(PaymentMethodView, {
+    type: "createPaymentSource",
+    showCoupon: false,
+    showExternalPaymentMethods: false,
+    showApplePayButton: false,
+    onDisplay: props.onDisplay,
+    onFailure: props.onFailure,
+    onSuccess: props.onSuccess
+  }));
+}
+
+const PaymentMethodCreateModal = props => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
+  const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_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.enableReactGA4;
+  const onSuccess = res => {
+    var _props$onSuccess;
+    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
+    if (enableReactGA4) {
+      ReactGA4.event("Created payment card", {
+        nonInteraction: true
+      });
+    } else {
+      var _ReactGA$event;
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Created payment card",
+        nonInteraction: true
+      });
     }
-  }, []);
-  const onSuccess = selectedPaymentMethodId => {
-    var _otherProps$onSuccess;
-    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, selectedPaymentMethodId);
-    switchToCheckoutForm();
-  };
-  const onAddNewPaymentMethod = () => {
-    set({
-      selectedPaymentMethodId: null
-    });
-    switchToCheckoutForm();
   };
   return /*#__PURE__*/React__default.createElement(Modal, {
-    onDisplay: onDisplay,
-    onClose: onClose,
-    id: "pelcro-payment-method-select-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(PaymentMethodSelectView, Object.assign({
-    onAddNewPaymentMethod: onAddNewPaymentMethod
-  }, otherProps, {
+    id: "pelcro-payment-method-create-modal",
+    onDisplay: props.onDisplay,
+    onClose: props.onClose
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(PaymentMethodCreateView, Object.assign({}, props, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
 };
-PaymentMethodSelectModal.viewId = "payment-method-select";
+PaymentMethodCreateModal.viewId = "payment-method-create";
 
-function _extends$h() {
-  _extends$h = Object.assign || function (target) {
+function _extends$i() {
+  _extends$i = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -28303,7 +29141,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -28487,7 +29325,7 @@ function render(props, propsBag, defaultTag, features, visible) {
     return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
       return null;
     }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends$h({}, _rest, {
+      return _render(_extends$i({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -29015,7 +29853,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default.createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$h({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$i({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -29059,7 +29897,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default.createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$h({}, sharedProps, {
+  }, render(_extends$i({}, sharedProps, {
     as: Fragment,
     children: React__default.createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -29186,12 +30024,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -29210,7 +30048,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -29221,19 +30059,19 @@ var ActionTypes;
 
     return ((_item$dataRef$current = item.dataRef.current.textValue) == null ? void 0 : _item$dataRef$current.startsWith(searchQuery)) && !item.dataRef.current.disabled;
   });
-  if (match === -1 || match === state.activeItemIndex) return _extends$h({}, state, {
+  if (match === -1 || match === state.activeItemIndex) return _extends$i({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -29246,7 +30084,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -29285,19 +30123,19 @@ var ActionTypes$1;
 (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     activeOptionIndex: null,
     listboxState: ListboxStates.Closed
   });
 }, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Open) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -29318,7 +30156,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -29331,10 +30169,10 @@ var ActionTypes$1;
 
     return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
   });
-  if (match === -1 || match === state.activeOptionIndex) return _extends$h({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$i({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -29342,11 +30180,11 @@ var ActionTypes$1;
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -29359,7 +30197,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -29378,6 +30216,7 @@ var GroupContext = /*#__PURE__*/createContext(null);
 GroupContext.displayName = 'GroupContext';
 
 const getPaymentCardIcon = name => {
+  var _icons$name$toLowerCa;
   const icons = {
     visa: /*#__PURE__*/React__default.createElement("svg", {
       className: "plc-w-12",
@@ -29404,7 +30243,7 @@ const getPaymentCardIcon = name => {
       d: "M 5 7 C 2.25 7 0 9.25 0 12 L 0 38 C 0 40.75 2.25 43 5 43 L 45 43 C 47.75 43 50 40.75 50 38 L 50 12 C 50 9.25 47.75 7 45 7 Z M 5 9 L 45 9 C 46.667969 9 48 10.332031 48 12 L 48 38 C 48 39.667969 46.667969 41 45 41 L 5 41 C 3.332031 41 2 39.667969 2 38 L 2 12 C 2 10.332031 3.332031 9 5 9 Z M 8.5625 19.90625 L 4.84375 28.40625 L 7.0625 28.40625 L 7.875 26.5 L 12.0625 26.5 L 12.875 28.40625 L 17.09375 28.40625 L 17.09375 22.09375 L 19.90625 28.40625 L 21.8125 28.40625 L 24.65625 22.1875 L 24.65625 28.40625 L 26.75 28.40625 L 26.75 19.90625 L 23.40625 19.90625 L 20.84375 25.625 L 18.28125 19.90625 L 15 19.90625 L 15 28.09375 L 11.34375 19.90625 Z M 29.5 19.90625 L 29.5 28.4375 L 37.5 28.4375 L 40 25.59375 L 42.46875 28.4375 L 45.125 28.4375 L 41.375 24.0625 L 45.125 19.90625 L 42.46875 19.90625 L 40.0625 22.5625 L 37.75 19.90625 Z M 9.90625 21.6875 L 11.21875 24.6875 L 8.65625 24.6875 Z M 31.5625 21.71875 L 36.65625 21.75 L 38.6875 24.0625 L 36.40625 26.625 L 31.5625 26.625 L 31.5625 24.9375 L 36.1875 24.9375 L 36.1875 23.3125 L 31.5625 23.3125 Z"
     }))
   };
-  return name ? icons[name.toLowerCase()] : /*#__PURE__*/React__default.createElement("svg", {
+  return (_icons$name$toLowerCa = icons[name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-12",
     fill: "none",
@@ -29418,16 +30257,16 @@ const getPaymentCardIcon = name => {
   }));
 };
 
-var _path$g;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var _path$h;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 function SvgChevronRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29656,16 +30495,16 @@ const SavedItems = _ref3 => {
   });
 };
 
-var _path$f;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+var _path$g;
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 function SvgRefresh(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29673,31 +30512,31 @@ function SvgRefresh(props) {
   })));
 }
 
-var _path$e;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+var _path$f;
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-4 plc-w-4 plc-mr-1",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$d;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+var _path$e;
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 function SvgPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     className: "plc-w-5 plc-h-5",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30060,16 +30899,16 @@ Accordion.item = function AccordionItem(_ref2) {
   }, content)) : null;
 };
 
-var _path$c;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+var _path$d;
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 function SvgExit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30077,15 +30916,15 @@ function SvgExit(props) {
   })));
 }
 
-var _path$b;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+var _path$c;
+function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30093,16 +30932,16 @@ function SvgUser(props) {
   })));
 }
 
-var _path$a;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+var _path$b;
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 function SvgNewsletter(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30110,16 +30949,16 @@ function SvgNewsletter(props) {
   })));
 }
 
-var _path$9;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+var _path$a;
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 function SvgDocument(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-6 plc-w-6 plc-mr-2",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30127,16 +30966,16 @@ function SvgDocument(props) {
   })));
 }
 
-var _path$8;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var _path$9;
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 function SvgPaymentCard(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30144,16 +30983,16 @@ function SvgPaymentCard(props) {
   })));
 }
 
-var _path$7, _path2;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var _path$8, _path2;
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 function SvgLocationPin(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30166,16 +31005,16 @@ function SvgLocationPin(props) {
   })));
 }
 
-var _path$6;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var _path$7;
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 function SvgShopping(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30183,16 +31022,16 @@ function SvgShopping(props) {
   })));
 }
 
-var _path$5;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var _path$6;
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 function SvgBookmark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30200,63 +31039,76 @@ function SvgBookmark(props) {
   })));
 }
 
-var _path$4;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var _path$5;
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 function SvgKey(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 function SvgDonate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     width: 24,
     height: 24,
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     d: "M4 21h9.62a3.995 3.995 0 003.037-1.397l5.102-5.952a1 1 0 00-.442-1.6l-1.968-.656a3.043 3.043 0 00-2.823.503l-3.185 2.547-.617-1.235A3.98 3.98 0 009.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 00.442-.11l.003-.001.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001.01 0 .002-.001.002-.001h.001l.002-.001.003-.001.002-.001.002-.001.003-.001.002-.001c.003 0 .001-.001.002-.001l.003-.002.002-.001.002-.001.003-.001.002-.001h.001l.002-.001h.001l.002-.001.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 00.11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186-4.133 4.823a2.029 2.029 0 01-1.52.688H4v-6zM16 2h-.017c-.163.002-1.006.039-1.983.705-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 001.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0016.002 2H16zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0111.979 4c.025.001.502.032 1.067.485.081.065.163.139.247.222l.707.707.707-.707c.084-.083.166-.157.247-.222.529-.425.976-.478 1.052-.484a.987.987 0 01.701.292c.189.189.293.44.293.707z"
   })));
 }
 
-var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var _path$3;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 function SvgMemberships(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     strokeWidth: 1.5,
     stroke: "currentColor",
     width: 24,
     height: 24
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     d: "M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z"
   })));
 }
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 function SvgQrcode(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 682.667,
     height: 682.667,
     viewBox: "0 0 512 512"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     d: "M93.5 62.4c-15.7 3.9-28 16.6-31.4 32.4-.7 3.3-1.1 17.2-1.1 36.4 0 29.1.1 31.4 2 35.3 5.3 11 21.2 11.1 26.4.1 1.4-2.9 1.6-7.9 1.6-34.6 0-34.4.1-35.3 6.3-39 3-1.9 5.2-2 34.5-2 26.9 0 31.9-.2 34.8-1.6 11-5.2 10.9-21.1-.1-26.4-3.9-1.9-6.1-2-36.1-1.9-21.8 0-33.5.5-36.9 1.3zM345.4 63c-10.9 5.4-10.9 21.2 0 26.4 2.9 1.4 7.9 1.6 34.8 1.6 29.3 0 31.5.1 34.5 2 6.2 3.7 6.3 4.6 6.3 39 0 26.7.2 31.7 1.6 34.6 5.2 11 21.1 10.9 26.4-.1 1.9-3.9 2-6.2 2-35.3 0-19.2-.4-33.1-1.1-36.4-3.5-16.2-16.5-29.2-32.7-32.7-3.3-.7-17.2-1.1-36.5-1.1-29.3 0-31.5.1-35.3 2zM146 128.9c-6.9 2.1-12.1 6.5-15.6 13.1-1.8 3.2-1.9 6.3-1.9 38.5 0 34.2 0 35.1 2.2 39.1 2.8 5.3 9.1 10.7 14.2 12.2 2.5.8 14.4 1.2 35.8 1.2 36.3 0 38.3-.3 45.2-7.2 6.8-6.9 7.1-8.9 7.1-45.1 0-22.2-.4-33.2-1.2-36.1-1.8-6-10-13.9-16-15.4-5.3-1.3-65.5-1.6-69.8-.3zm57 51.6V203h-45v-45h45v22.5zM297 128.9c-8 2.5-14.9 9.2-16.9 16.4-.9 2.9-1.1 14.3-.9 37.7.3 37.2.2 36.2 7.4 43.3 6.6 6.4 8.8 6.7 45 6.7 35.6 0 38-.3 44.2-6.3 1.9-1.8 4.3-5 5.5-7.2 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-2.5-4.7-6.4-8.5-11.3-11.1-3.2-1.7-6.4-1.9-37-2.1-18.4-.1-34.6.2-36 .6zm57 51.6V203h-45v-45h45v22.5zM144.1 280.3c-4.8 1.8-10.8 7.2-13.4 12-2.2 4.1-2.2 4.9-2.2 39.2 0 34 .1 35.1 2.2 39 2.5 4.7 6.4 8.5 11.3 11.1 3.2 1.7 6.6 1.9 35.5 2.2 38.9.4 40.7.2 48-7.2 3.2-3.2 5.5-6.6 6.3-9.2.8-2.9 1.2-13.9 1.2-36.1 0-35.8-.4-38.3-6.6-44.7-7-7.2-6-7.1-44.4-7.3-25.4-.1-35.4.1-37.9 1zm58.9 51.2V354h-45v-45h45v22.5zM294.8 280.4c-6.8 2.4-12.9 8.9-14.8 15.7-1.5 5-1.3 66.2.2 71 1.5 5.1 6.9 11.4 12.2 14.2 4 2.2 4.9 2.2 39.1 2.2 32.2 0 35.3-.1 38.5-1.9 4.9-2.6 8.8-6.4 11.3-11.1 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-3-5.6-8-10.1-13.2-12-5.9-2-67.5-2.2-73.3-.1zm59.2 51.1V354h-45v-45h45v22.5zM68.7 339.2c-2.2 1.3-4.5 3.8-5.7 6.3-1.9 3.9-2 6.2-2 35.3 0 19.2.4 33.1 1.1 36.4 3.4 16.1 16.6 29.3 32.7 32.7 3.3.7 17.2 1.1 36.4 1.1 29.1 0 31.4-.1 35.3-2 11-5.3 11.1-21.2.1-26.4-2.9-1.4-7.9-1.6-34.6-1.6-34.4 0-35.3-.1-39-6.3-1.9-3-2-5.2-2-34.5 0-26.9-.2-31.9-1.6-34.8-3.6-7.5-13.5-10.5-20.7-6.2zM429.2 338.7c-1.8.9-4.3 3-5.5 4.7-2.1 3-2.2 4-2.7 36.1-.5 35.8-.6 36.1-6.3 39.5-3 1.9-5.3 2-34.5 2-34.5 0-36.1.2-40.2 6-5.4 7.5-2.8 18 5.5 22 3.9 1.9 6.2 2 35.3 2 19.2 0 33.1-.4 36.4-1.1 16.2-3.5 29.2-16.5 32.7-32.7.7-3.3 1.1-17.2 1.1-36.4 0-29.1-.1-31.4-2-35.3-3.6-7.4-12.5-10.4-19.8-6.8z"
   })));
 }
 
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function SvgTrashCan(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    className: "plc-w-6 plc-h-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 448 512",
+    fill: "currentColor"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M135.2 17.7C140.6 6.8 151.7 0 163.8 0h120.4c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64s14.3-32 32-32h96l7.2-14.3zM32 128h384v320c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"
+  })));
+}
+
 const DonationsMenu = _ref => {
   let {
     onClose,
@@ -30578,7 +31430,9 @@ function DashboardWithHook(props) {
     switchView,
     resetView,
     logout,
-    set
+    set,
+    setPaymentMethodToEdit,
+    setPaymentMethodToDelete
   } = usePelcro();
   return /*#__PURE__*/React__default.createElement(DashboardWithTrans, {
     setAddress: addressIdToEdit => set({
@@ -30601,7 +31455,9 @@ function DashboardWithHook(props) {
       product,
       plan,
       isGift
-    })
+    }),
+    setPaymentMethodToEdit: setPaymentMethodToEdit,
+    setPaymentMethodToDelete: setPaymentMethodToDelete
   });
 }
 DashboardWithHook.viewId = "dashboard";
@@ -30628,6 +31484,18 @@ class Dashboard extends Component {
           nonInteraction: true
         });
       }
+      window.Pelcro.paymentMethods.list({
+        auth_token: window.Pelcro.user.read().auth_token
+      }, (err, res) => {
+        if (err) {
+          return console.error(err);
+        }
+        if (res) {
+          this.setState({
+            sources: res.data
+          });
+        }
+      });
       const {
         addresses
       } = window.Pelcro.user.read();
@@ -30697,10 +31565,46 @@ class Dashboard extends Component {
         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
       });
     });
+    _defineProperty$3(this, "deletePaymentMethod", (paymentMethodId, onSuccess, onFailure) => {
+      // disable the Login button to prevent repeated clicks
+      window.Pelcro.paymentMethods.deletePaymentMethod({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: paymentMethodId
+      }, (err, res) => {
+        if (err) {
+          return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        }
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+      });
+    });
+    _defineProperty$3(this, "onDeletePaymentMethodClick", source => {
+      const isDeletable = source === null || source === void 0 ? void 0 : source.deletable;
+      if (isDeletable) {
+        this.props.onClose();
+        notify.confirm((onSuccess, onFailure) => {
+          this.deletePaymentMethod(source.id, onSuccess, onFailure);
+        }, {
+          confirmMessage: this.locale("messages.paymentMethodDeletion.isSureToDelete"),
+          loadingMessage: this.locale("messages.paymentMethodDeletion.loading"),
+          successMessage: this.locale("messages.paymentMethodDeletion.success"),
+          errorMessage: this.locale("messages.paymentMethodDeletion.error")
+        }, {
+          closeButtonLabel: this.locale("labels.subCancellation.goBack")
+        });
+      } else {
+        this.props.setPaymentMethodToDelete(source.id);
+        return this.props.setView("payment-method-delete");
+      }
+    });
     _defineProperty$3(this, "displayRedeem", () => {
       return this.props.setView("gift-redeem");
     });
     _defineProperty$3(this, "displaySourceCreate", () => {
+      return this.props.setView("payment-method-create");
+    });
+    _defineProperty$3(this, "displaySourceEdit", e => {
+      const source = e.currentTarget.dataset.key;
+      this.props.setPaymentMethodToEdit(source);
       return this.props.setView("payment-method-update");
     });
     _defineProperty$3(this, "displayUserEdit", () => {
@@ -30962,6 +31866,52 @@ class Dashboard extends Component {
         onClick: this.displayAddressCreate
       }, this.locale("labels.addAddress"))))));
     });
+    _defineProperty$3(this, "renderSources", () => {
+      const sources = this.state.sources && this.state.sources.sort((a, b) => a.is_default === b.is_default ? 0 : a.is_default ? -1 : 1).map((source, index) => {
+        var _source$properties, _source$properties2;
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: "dashboard-source-" + source.id,
+          className: "plc-flex plc-flex-row plc-pr-6"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "plc-flex plc-flex-grow plc-items-center plc-justify-between plc-max-w-xs plc-p-4 plc-mb-2 plc-text-white plc-bg-gray-800 plc-rounded-md plc-h-14"
+        }, /*#__PURE__*/React__default.createElement("span", null, getPaymentCardIcon(source === null || source === void 0 ? void 0 : (_source$properties = source.properties) === null || _source$properties === void 0 ? void 0 : _source$properties.brand)), /*#__PURE__*/React__default.createElement("span", {
+          className: "plc-ml-1 plc-text-lg plc-tracking-widest plc-flex-grow plc-text-center"
+        }, "\u2022\u2022\u2022\u2022 ", source === null || source === void 0 ? void 0 : (_source$properties2 = source.properties) === null || _source$properties2 === void 0 ? void 0 : _source$properties2.last4), /*#__PURE__*/React__default.createElement(Button, {
+          id: "pelcro-button-update-source-" + index,
+          variant: "icon",
+          className: "plc-text-white",
+          icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
+          "data-key": source.id,
+          onClick: this.displaySourceEdit,
+          disabled: this.state.disableSubmit
+        }), /*#__PURE__*/React__default.createElement(Button, {
+          id: "pelcro-button-delete-source-" + index,
+          variant: "icon",
+          className: "plc-text-white",
+          icon: /*#__PURE__*/React__default.createElement(SvgTrashCan, null),
+          onClick: () => {
+            this.onDeletePaymentMethodClick(source);
+          },
+          disabled: this.state.disableSubmit
+        })), /*#__PURE__*/React__default.createElement("span", {
+          className: "plc-flex-grow"
+        }), source.is_default && /*#__PURE__*/React__default.createElement("span", {
+          className: "plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-h-7 plc-my-auto plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-ml-2"
+        }, this.locale("labels.default")));
+      });
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-pr-2"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-overflow-y-scroll plc-max-h-52"
+      }, sources), /*#__PURE__*/React__default.createElement(Button, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React__default.createElement(SvgPlus, {
+          className: "plc-w-4 plc-mr-1"
+        }),
+        className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase hover:plc-bg-gray-100 plc-my-1 plc-ml-1",
+        onClick: this.displaySourceCreate
+      }, this.locale("labels.addPaymentSource")));
+    });
     _defineProperty$3(this, "closeDashboard", () => {
       this.setState({
         isOpen: false
@@ -30972,7 +31922,8 @@ class Dashboard extends Component {
       subscriptions: window.Pelcro.subscription.list(),
       giftRecipients: (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.gift_recipients) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [],
       disableSubmit: false,
-      addresses: []
+      addresses: [],
+      sources: []
     };
     this.site = window.Pelcro.site.read();
     this.locale = this.props.t;
@@ -30981,7 +31932,7 @@ class Dashboard extends Component {
     this.enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_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.enableReactGA4;
   }
   render() {
-    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet, _this$user$source, _this$user$source$pro, _this$user$source2, _this$user$source2$pr;
+    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet;
     const {
       isOpen
     } = this.state;
@@ -31084,25 +32035,7 @@ class Dashboard extends Component {
       name: SUB_MENUS.PAYMENT_CARDS,
       icon: /*#__PURE__*/React__default.createElement(SvgPaymentCard, null),
       title: this.locale("labels.paymentSource"),
-      content: /*#__PURE__*/React__default.createElement("div", {
-        className: "plc-flex plc-items-center plc-justify-between plc-max-w-xs plc-p-4 plc-mb-2 plc-text-white plc-bg-gray-800 plc-rounded-md plc-h-14"
-      }, this.user.source ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getPaymentCardIcon((_this$user$source = this.user.source) === null || _this$user$source === void 0 ? void 0 : (_this$user$source$pro = _this$user$source.properties) === null || _this$user$source$pro === void 0 ? void 0 : _this$user$source$pro.brand), /*#__PURE__*/React__default.createElement("span", {
-        className: "plc-ml-1 plc-text-lg plc-tracking-widest"
-      }, "\u2022\u2022\u2022\u2022 ", (_this$user$source2 = this.user.source) === null || _this$user$source2 === void 0 ? void 0 : (_this$user$source2$pr = _this$user$source2.properties) === null || _this$user$source2$pr === void 0 ? void 0 : _this$user$source2$pr.last4), /*#__PURE__*/React__default.createElement(Button, {
-        variant: "icon",
-        className: "plc-text-white",
-        icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
-        onClick: this.displaySourceCreate,
-        disabled: this.state.disableSubmit
-      })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, this.locale("messages.noCard")), /*#__PURE__*/React__default.createElement(Button, {
-        variant: "icon",
-        className: "plc-text-white",
-        icon: /*#__PURE__*/React__default.createElement(SvgPlus, {
-          className: "plc-w-6 plc-h-6"
-        }),
-        onClick: this.displaySourceCreate,
-        disabled: this.state.disableSubmit
-      })))
+      content: this.renderSources()
     }), /*#__PURE__*/React__default.createElement(Accordion.item, {
       name: SUB_MENUS.ADDRESSES,
       icon: /*#__PURE__*/React__default.createElement(SvgLocationPin, null),
@@ -35020,4 +35953,4 @@ const QrCodeModal = _ref => {
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, DonationModalWithHook as DonationModal, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, DonationModalWithHook as DonationModal, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteOptions, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };