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

package/dist/index.cjs.js

@@ -3354,9 +3354,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";
@@ -3462,7 +3476,8 @@ var labels$15 = {
 	order: "Order",
 	amount: "Amount",
 	email: "Email",
-	password: "Password"
+	password: "Password",
+	isDefault: "Set as default"
 };
 var checkoutForm_en = {
 	messages: messages$18,
@@ -3925,6 +3940,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",
@@ -3986,6 +4003,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 = {
@@ -4282,9 +4306,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";
@@ -4387,6 +4425,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",
@@ -5209,9 +5248,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 뉴스레터를 구독하려면 이메일을 입력하세요.";
@@ -5317,7 +5370,8 @@ var labels$x = {
 	order: "주문",
 	amount: "금액",
 	email: "이메일",
-	password: "비밀번호"
+	password: "비밀번호",
+	isDefault: "기본값으로 설정"
 };
 var checkoutForm_ko = {
 	messages: messages$y,
@@ -6241,9 +6295,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";
@@ -6349,7 +6417,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,
@@ -8982,7 +9051,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$n;
+      } = initialState$o;
       this.set(otherStateFields);
     });
     _defineProperty$3(this, "switchView", view => {
@@ -9287,6 +9356,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;
   }
@@ -9331,7 +9432,7 @@ class PelcroCallbacks {
   }
 }
 
-const initialState$n = {
+const initialState$o = {
   // View
   view: null,
   // Plans
@@ -9357,6 +9458,9 @@ const initialState$n = {
   couponCode: null,
   // memberships
   selectedMembership: null,
+  // paymentMethods
+  paymentMethodToDelete: null,
+  paymentMethodToEdit: null,
   // User
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
@@ -9369,7 +9473,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$n,
+    ...initialState$o,
     // State actions
     ...actions,
     // Callbacks
@@ -10323,8 +10427,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];
 
@@ -10338,7 +10442,7 @@ function _extends$B() {
     return target;
   };
 
-  return _extends$B.apply(this, arguments);
+  return _extends$C.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -10428,7 +10532,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)
       });
 
@@ -10438,9 +10542,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;
         })
       });
 
@@ -10467,9 +10571,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;
         })
@@ -10477,28 +10581,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
           });
         })
@@ -10545,12 +10649,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
   });
 };
@@ -10560,7 +10664,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$B({
+  return _extends$C({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -10610,14 +10714,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));
   });
@@ -10956,7 +11060,7 @@ var ToastBar = /*#__PURE__*/React.memo(function (_ref2) {
   var message = React.createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return React.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
@@ -10986,7 +11090,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',
@@ -11013,7 +11117,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return React.createElement("div", {
-    style: _extends$B({
+    style: _extends$C({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -11048,72 +11152,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__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -11804,6 +11908,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
@@ -12781,6 +12896,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";
@@ -12848,6 +12964,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";
@@ -12859,7 +12978,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: "",
@@ -12872,10 +12991,10 @@ const initialState$m = {
     content: ""
   }
 };
-const store$m = /*#__PURE__*/React.createContext(initialState$m);
+const store$n = /*#__PURE__*/React.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 {
@@ -13012,7 +13131,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,
@@ -13028,13 +13147,13 @@ const LoginContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$m);
+  }, initialState$n);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$m, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$n, {
     value: {
       state,
       dispatch
@@ -13042,12 +13161,12 @@ const LoginContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$m,
+        store: store$n,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$m
+    store: store$n
   })));
 };
 
@@ -13356,7 +13475,7 @@ const LoginButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$m);
+  } = React.useContext(store$n);
   const {
     t
   } = useTranslation("login");
@@ -13376,14 +13495,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__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.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__namespace.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"
@@ -13413,25 +13532,25 @@ const LoginRequestLoginToken = _ref => {
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 const LoginUsername = props => /*#__PURE__*/React__default['default'].createElement(UserNameInput, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default['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__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.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"
@@ -13497,7 +13616,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$l = {
+const initialState$m = {
   email: "",
   password: "",
   firstName: "",
@@ -13518,10 +13637,10 @@ const initialState$l = {
     content: ""
   }
 };
-const store$l = /*#__PURE__*/React.createContext(initialState$l);
+const store$m = /*#__PURE__*/React.createContext(initialState$m);
 const {
-  Provider: Provider$l
-} = store$l;
+  Provider: Provider$m
+} = store$m;
 const RegisterContainer = _ref => {
   let {
     style,
@@ -13733,7 +13852,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,
@@ -13749,13 +13868,13 @@ const RegisterContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$l);
+  }, initialState$m);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$l, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$m, {
     value: {
       state,
       dispatch
@@ -13763,12 +13882,12 @@ const RegisterContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$l,
+        store: store$m,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$l
+    store: store$m
   })));
 };
 
@@ -13782,13 +13901,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__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.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"
   })));
@@ -13805,10 +13924,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
-  } = React.useContext(store$m);
+  } = React.useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$l);
+  } = React.useContext(store$m);
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
       type: HANDLE_SOCIAL_LOGIN,
@@ -13858,13 +13977,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__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
@@ -13968,10 +14087,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
-  } = React.useContext(store$m);
+  } = React.useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$l);
+  } = React.useContext(store$m);
   React.useEffect(() => {
     gapi.load("client:auth2", () => {
       gapi.auth2.init({
@@ -14022,13 +14141,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__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     viewBox: "0 0 256 285",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.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"
   })));
 }
@@ -14066,10 +14185,10 @@ const Auth0LoginButton = _ref => {
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$m);
+  } = React.useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$l);
+  } = React.useContext(store$m);
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
     if (!auth0Loaded) {
@@ -14212,13 +14331,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__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.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"
@@ -14390,11 +14509,11 @@ function LoginModal(_ref) {
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 const RegisterButton = _ref => {
@@ -14414,7 +14533,7 @@ const RegisterButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$l);
+  } = React.useContext(store$m);
   const {
     t
   } = useTranslation("register");
@@ -14512,7 +14631,7 @@ function FirstName(_ref) {
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 function LastName(_ref) {
@@ -14590,7 +14709,7 @@ function LastName(_ref) {
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 function Phone(_ref) {
@@ -14871,7 +14990,7 @@ function TextInput(_ref) {
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$l
+    store: store$m
   }));
 };
 
@@ -18047,7 +18166,7 @@ class CybersourceGateway {
  */
 
 /** @type {PaymentStateType} */
-const initialState$k = {
+const initialState$l = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -18074,15 +18193,16 @@ const initialState$k = {
   year: "",
   passwordError: null,
   cyberSourceSessionId: null,
+  isDefault: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$k = /*#__PURE__*/React.createContext(initialState$k);
+const store$l = /*#__PURE__*/React.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 {
@@ -18110,7 +18230,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     selectedDonationAmount,
     customDonationAmount,
     isAuthenticated,
-    switchView
+    switchView,
+    paymentMethodToEdit,
+    paymentMethodToDelete
   } = usePelcro();
   const {
     whenUserReady
@@ -18225,7 +18347,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() {
@@ -18555,7 +18677,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() {
@@ -18766,14 +18888,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,
@@ -19631,7 +19860,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
     });
   };
-  const updatePaymentSource = (state, dispatch) => {
+  const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
     }).then(_ref8 => {
@@ -19652,7 +19881,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) => {
@@ -19685,13 +19914,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) => {
@@ -19764,12 +20107,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);
       }
@@ -19788,7 +20131,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);
@@ -20032,9 +20375,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 {
@@ -20180,16 +20529,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['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$k, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$l, {
     value: {
       state,
       dispatch
@@ -20197,12 +20556,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$k,
+        store: store$l,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$k
+    store: store$l
   })));
 };
 const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
@@ -20223,11 +20582,11 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
-      store: store$k
+      store: store$l
     }, props))));
   } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
-      store: store$k
+      store: store$l
     }, props));
   }
   return null;
@@ -20387,7 +20746,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = React.useContext(store$k);
+  } = React.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({
@@ -20412,7 +20771,10 @@ const PelcroPaymentRequestButton = props => {
   }
   return null;
 };
-const CheckoutForm = () => {
+const CheckoutForm = _ref => {
+  let {
+    type
+  } = _ref;
   const {
     selectedPaymentMethodId
   } = usePelcro();
@@ -20439,16 +20801,31 @@ const CheckoutForm = () => {
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-w-6/12 plc-pr-4"
     }, /*#__PURE__*/React__default['default'].createElement(MonthSelect, {
-      store: store$k,
+      store: store$l,
       placeholder: "Exp Month *"
     })), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-w-6/12"
     }, /*#__PURE__*/React__default['default'].createElement(YearSelect, {
-      store: store$k,
+      store: store$l,
       placeholder: "Exp Year *"
     }))));
   }
   if (cardProcessor === "stripe") {
+    if (type === "updatePaymentSource") {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-6/12 plc-pr-4"
+      }, /*#__PURE__*/React__default['default'].createElement(MonthSelect, {
+        store: store$l,
+        placeholder: "Exp Month *"
+      })), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-6/12"
+      }, /*#__PURE__*/React__default['default'].createElement(YearSelect, {
+        store: store$l,
+        placeholder: "Exp Year *"
+      })));
+    }
     return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
       autoFocus: true
     }), /*#__PURE__*/React__default['default'].createElement("img", {
@@ -20478,7 +20855,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     order,
     plan
@@ -20539,7 +20916,7 @@ const SubmitPaymentMethod = _ref => {
       month,
       year
     }
-  } = React.useContext(store$k);
+  } = React.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());
@@ -20573,15 +20950,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__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20601,7 +20978,7 @@ const ApplyCouponButton = _ref => {
       disableCouponButton
     },
     dispatch
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -20633,7 +21010,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const onCouponCodeChange = e => {
     dispatch({
       type: UPDATE_COUPON_CODE,
@@ -20659,15 +21036,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__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20685,7 +21062,7 @@ const CouponCode = _ref => {
     state: {
       enableCouponField
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -20909,7 +21286,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     product,
     plan,
@@ -21025,14 +21402,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__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.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"
@@ -21048,7 +21425,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     switchView,
     selectedPaymentMethodId
@@ -21089,7 +21466,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     plan
   } = usePelcro();
@@ -21107,15 +21484,15 @@ const TaxAmount = () => {
 };
 
 const IncludeFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const IncludeLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const IncludePhone = props => /*#__PURE__*/React__default['default'].createElement(Phone, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const SubscriptionCreateFreePlanButton = _ref => {
@@ -21129,7 +21506,7 @@ const SubscriptionCreateFreePlanButton = _ref => {
       disableSubmit
     },
     dispatch
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     t
   } = useTranslation("common");
@@ -21165,7 +21542,7 @@ const OrderCreateFreeButton = _ref => {
       disableSubmit
     },
     dispatch
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -21191,7 +21568,7 @@ const OrderCreateFreeButton = _ref => {
 };
 
 const DonationEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 /**
@@ -21208,7 +21585,7 @@ const ApplePayButton = _ref => {
   const {
     dispatch,
     state
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     plan,
     invoice,
@@ -21521,6 +21898,43 @@ const ApplePayButton = _ref => {
   });
 };
 
+function PaymentMethodUpdateSetDefault(props) {
+  const {
+    dispatch,
+    state: {
+      isDefault
+    }
+  } = React.useContext(store$l);
+  const {
+    paymentMethodToEdit
+  } = usePelcro();
+  React.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['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);
+}
+
 /**
  *
  */
@@ -21606,9 +22020,14 @@ function PaymentMethodView(_ref) {
     label: t("labels.email"),
     required: true,
     autoFocus: true
-  })), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, {
+    type: type
+  }), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mb-2"
-  }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), type === "updatePaymentSource" && /*#__PURE__*/React__default['default'].createElement(PaymentMethodUpdateSetDefault, {
+    id: "pelcro-input-is-default",
+    label: t("labels.isDefault")
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
   }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ApplePayButton, null)) : null)))));
 }
@@ -21728,14 +22147,14 @@ function SubscriptionRenewModal(_ref) {
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-const initialState$j = {
+const initialState$k = {
   cancelationReason: "",
   cancelationOption: ""
 };
-const store$j = /*#__PURE__*/React.createContext(initialState$j);
+const store$k = /*#__PURE__*/React.createContext(initialState$k);
 const {
-  Provider: Provider$j
-} = store$j;
+  Provider: Provider$k
+} = store$k;
 const SubscriptionCancelContainer = _ref => {
   let {
     style,
@@ -21760,35 +22179,35 @@ const SubscriptionCancelContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$j);
+  }, initialState$k);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-subscription-cancel-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$j, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$k, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$j,
+    store: store$k,
     key: i
   })) : /*#__PURE__*/React__default['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__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21857,7 +22276,7 @@ const SubscriptionCancelReason = props => {
   } = useTranslation("subscriptionCancel");
   const {
     dispatch
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const handleOnTextAreaBlur = e => {
     dispatch({
       type: SET_CANCEL_SUBSCRIPTION_REASON,
@@ -21871,9 +22290,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__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 125",
     fill: "currentColor"
@@ -21902,7 +22321,7 @@ const SubscriptionCancelButton = _ref => {
       cancelationReason,
       cancelationOption
     }
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -21981,7 +22400,7 @@ const SubscriptionCancelOptions = _ref => {
       cancelationOption
     },
     dispatch
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -22097,14 +22516,14 @@ const SubscriptionCancelModal = _ref => {
 };
 SubscriptionCancelModal.viewId = "subscription-cancel";
 
-const initialState$i = {
+const initialState$j = {
   suspendDate: null,
   buttonDisabled: false
 };
-const store$i = /*#__PURE__*/React.createContext(initialState$i);
+const store$j = /*#__PURE__*/React.createContext(initialState$j);
 const {
-  Provider: Provider$i
-} = store$i;
+  Provider: Provider$j
+} = store$j;
 const SubscriptionSuspendContainer = _ref => {
   let {
     style,
@@ -22130,22 +22549,22 @@ const SubscriptionSuspendContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$i);
+  }, initialState$j);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-subscription-suspend-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$i, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$j, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$i,
+    store: store$j,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$i
+    store: store$j
   })));
 };
 
@@ -22194,7 +22613,7 @@ const SubscriptionSuspendDate = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$i);
+  } = React.useContext(store$j);
   const handleInputChange = value => {
     if (value) {
       dispatch({
@@ -22236,7 +22655,7 @@ const SubscriptionSuspendButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$i);
+  } = React.useContext(store$j);
   const {
     t
   } = useTranslation("subscriptionSuspend");
@@ -22337,10 +22756,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__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -22349,7 +22768,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__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.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"
   })));
 }
@@ -22655,7 +23074,7 @@ class DefaultNewsLetter extends React.Component {
 }
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const initialState$h = {
+const initialState$i = {
   didSubToNewslettersBefore: false,
   newsletters: [],
   isListLoading: true,
@@ -22665,10 +23084,10 @@ const initialState$h = {
     content: ""
   }
 };
-const store$h = /*#__PURE__*/React.createContext(initialState$h);
+const store$i = /*#__PURE__*/React.createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 const NewsletterUpdateContainer = _ref => {
   let {
     style,
@@ -22775,7 +23194,7 @@ const NewsletterUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   React.useEffect(() => {
     const getUserNewsletters = () => {
       var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
@@ -22817,7 +23236,7 @@ const NewsletterUpdateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-newsletter-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$i, {
     value: {
       state,
       dispatch
@@ -22825,12 +23244,12 @@ const NewsletterUpdateContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$h,
+        store: store$i,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -22846,7 +23265,7 @@ const NewsletterUpdateButton = _ref => {
       isSubmitting,
       isListLoading
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     t
   } = useTranslation("newsletter");
@@ -22875,7 +23294,7 @@ const NewsletterUpdateList = () => {
       newsletters,
       isListLoading
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   if (isListLoading) {
     return /*#__PURE__*/React__default['default'].createElement(Loader, {
       width: 60,
@@ -23072,7 +23491,7 @@ function SubscriptionCreateModal(_ref) {
 }
 SubscriptionCreateModal.viewId = "subscription-create";
 
-const initialState$g = {
+const initialState$h = {
   emails: "",
   emailsError: null,
   buttonDisabled: false,
@@ -23084,10 +23503,10 @@ const initialState$g = {
     content: ""
   }
 };
-const store$g = /*#__PURE__*/React.createContext(initialState$g);
+const store$h = /*#__PURE__*/React.createContext(initialState$h);
 const {
-  Provider: Provider$g
-} = store$g;
+  Provider: Provider$h
+} = store$h;
 const SubscriptionManageMembersContainer = _ref => {
   let {
     style,
@@ -23251,7 +23670,7 @@ const SubscriptionManageMembersContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$g);
+  }, initialState$h);
   React.useEffect(() => {
     dispatch({
       type: HANDLE_LIST_MEMBERS
@@ -23262,7 +23681,7 @@ const SubscriptionManageMembersContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-manage-members-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$g, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
     value: {
       state,
       dispatch
@@ -23270,12 +23689,12 @@ const SubscriptionManageMembersContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$g,
+        store: store$h,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$g
+    store: store$h
   })));
 };
 
@@ -23292,7 +23711,7 @@ const SubscriptionManageMembersButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const {
     t
   } = useTranslation("subscriptionManageMembers");
@@ -23322,7 +23741,7 @@ function SubscriptionManageMembersEmails(props) {
       emails: stateEmails,
       emailsError
     }
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const [emails, setEmails] = React.useState(stateEmails);
   const [finishedTyping, setFinishedTyping] = React.useState(false);
   const handleInputChange = React.useCallback(value => {
@@ -23352,15 +23771,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__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.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"
@@ -23378,7 +23797,7 @@ function SubscriptionManageMembersList(props) {
       removeMemberId,
       loading
     }
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const getMemberStatus = React.useCallback(sub => {
     if (sub.status === "pending") {
       return {
@@ -23541,7 +23960,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,
@@ -23561,10 +23980,10 @@ const initialState$f = {
     content: ""
   }
 };
-const store$f = /*#__PURE__*/React.createContext(initialState$f);
+const store$g = /*#__PURE__*/React.createContext(initialState$g);
 const {
-  Provider: Provider$f
-} = store$f;
+  Provider: Provider$g
+} = store$g;
 const UserUpdateContainer = _ref => {
   let {
     style,
@@ -23760,13 +24179,13 @@ const UserUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$f);
+  }, initialState$g);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-user-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$g, {
     value: {
       state,
       dispatch
@@ -23774,24 +24193,24 @@ const UserUpdateContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$f,
+        store: store$g,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['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__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.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"
   })));
 }
@@ -23803,7 +24222,7 @@ const UserUpdateEmail = props => {
       email,
       emailError
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const [enableEmailEdit, setEnableEmailEdit] = React.useState(false);
   const {
     t
@@ -23827,7 +24246,7 @@ const UserUpdateEmail = props => {
     className: "plc-flex plc-items-start plc-relative"
   }, /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
     disabled: !enableEmailEdit,
-    store: store$f,
+    store: store$g,
     label: t("labels.email"),
     enableEmailEdit: enableEmailEdit
   }, props)), /*#__PURE__*/React__default['default'].createElement(Button, {
@@ -23861,7 +24280,7 @@ const UserUpdateButton = _ref => {
       phoneError
     },
     dispatch
-  } = React.useContext(store$f);
+  } = React.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
@@ -23957,19 +24376,19 @@ function UpdateUserNameInput(_ref) {
 }
 
 const UserUpdateUsername = props => /*#__PURE__*/React__default['default'].createElement(UpdateUserNameInput, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdatePhone = props => /*#__PURE__*/React__default['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";
@@ -24056,7 +24475,7 @@ function Tin(_ref) {
 }
 
 const UserUpdateTin = props => /*#__PURE__*/React__default['default'].createElement(Tin, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 function DisplayName(_ref) {
@@ -24085,7 +24504,7 @@ function DisplayName(_ref) {
 }
 
 const UserUpdateDisplayName = props => /*#__PURE__*/React__default['default'].createElement(DisplayName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateView = props => {
@@ -24179,11 +24598,11 @@ UserUpdateModal.viewId = "user-edit";
 
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$f
+    store: store$g
   }));
 };
 
-const initialState$e = {
+const initialState$f = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -24209,10 +24628,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/React.createContext(initialState$e);
+const store$f = /*#__PURE__*/React.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;
@@ -24446,7 +24865,7 @@ const AddressCreateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   React.useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -24478,16 +24897,16 @@ const AddressCreateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-create-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$e,
+    store: store$f,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -24498,7 +24917,7 @@ function AddressCreateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -24532,7 +24951,7 @@ function AddressCreateLastName(props) {
       lastName,
       lastNameError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -24564,7 +24983,7 @@ function AddressCreateLine1(props) {
       line1,
       line1Error
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -24603,7 +25022,7 @@ function AddressCreateCity(props) {
       city,
       cityError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -24635,7 +25054,7 @@ function AddressCreatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -24671,7 +25090,7 @@ const AddressCreateSubmit = _ref => {
     state: {
       isSubmitting
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     t
   } = useTranslation("address");
@@ -24751,7 +25170,7 @@ function CountrySelect(_ref) {
 }
 
 const AddressCreateCountrySelect = props => /*#__PURE__*/React__default['default'].createElement(CountrySelect, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 function StateSelect(_ref) {
@@ -24833,14 +25252,14 @@ function StateSelect(_ref) {
 }
 
 const AddressCreateStateSelect = props => /*#__PURE__*/React__default['default'].createElement(StateSelect, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 const AddressCreateSetDefault = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleCheckboxChange = e => {
     dispatch({
       type: HANDLE_CHECKBOX_CHANGE,
@@ -24965,18 +25384,18 @@ AddressCreateModal.viewId = "address-create";
 
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$e
+    store: store$f
   }));
 };
 
 const AddressCreateLine2 = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({
     fieldName: "line2",
-    store: store$e
+    store: store$f
   }, props));
 };
 
-const initialState$d = {
+const initialState$e = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -25002,10 +25421,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/React.createContext(initialState$d);
+const store$e = /*#__PURE__*/React.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 {
@@ -25054,7 +25473,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,
@@ -25205,7 +25624,7 @@ const AddressUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   React.useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -25237,21 +25656,21 @@ const AddressUpdateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$d,
+    store: store$e,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
 
 const AddressUpdateCountrySelect = props => /*#__PURE__*/React__default['default'].createElement(CountrySelect, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function AddressUpdateFirstName(props) {
@@ -25261,7 +25680,7 @@ function AddressUpdateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25300,7 +25719,7 @@ function AddressUpdateLastName(props) {
       lastName,
       lastNameError
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25339,7 +25758,7 @@ function AddressUpdateLine1(props) {
       line1,
       line1Error
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25375,7 +25794,7 @@ const AddressUpdateLine2 = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({
     fieldName: "line2"
   }, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -25386,7 +25805,7 @@ function AddressUpdateCity(props) {
       city,
       cityError
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25425,7 +25844,7 @@ function AddressUpdatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -25468,7 +25887,7 @@ const AddressUpdateSubmit = _ref => {
     state: {
       isSubmitting
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const {
     t
   } = useTranslation("address");
@@ -25484,7 +25903,7 @@ const AddressUpdateSubmit = _ref => {
 };
 
 const AddressUpdateStateSelect = props => /*#__PURE__*/React__default['default'].createElement(StateSelect, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function AddressUpdateSetDefault(props) {
@@ -25493,7 +25912,7 @@ function AddressUpdateSetDefault(props) {
     state: {
       isDefault
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleCheckboxChange = e => {
     dispatch({
       type: HANDLE_CHECKBOX_CHANGE,
@@ -25595,7 +26014,7 @@ AddressUpdateModal.viewId = "address-edit";
 
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -25685,7 +26104,7 @@ const PaymentMethodUpdateModal = props => {
 };
 PaymentMethodUpdateModal.viewId = "payment-method-update";
 
-const initialState$c = {
+const initialState$d = {
   email: "",
   password: "",
   passwordError: null,
@@ -25698,10 +26117,10 @@ const initialState$c = {
     content: ""
   }
 };
-const store$c = /*#__PURE__*/React.createContext(initialState$c);
+const store$d = /*#__PURE__*/React.createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 const PasswordResetContainer = _ref => {
   let {
     style,
@@ -25756,7 +26175,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")
@@ -25816,27 +26235,27 @@ const PasswordResetContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-reset-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
 const PasswordResetPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const PasswordResetButton = _ref => {
@@ -25850,7 +26269,7 @@ const PasswordResetButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("passwordReset");
@@ -25867,14 +26286,14 @@ const PasswordResetButton = _ref => {
 };
 
 const PasswordResetEmail = props => /*#__PURE__*/React__default['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['default'].createElement(ConfirmPassword, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const PasswordResetView = props => {
@@ -25927,7 +26346,7 @@ const PasswordResetModal = _ref => {
 };
 PasswordResetModal.viewId = "password-reset";
 
-const initialState$b = {
+const initialState$c = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -25936,10 +26355,10 @@ const initialState$b = {
     content: ""
   }
 };
-const store$b = /*#__PURE__*/React.createContext(initialState$b);
+const store$c = /*#__PURE__*/React.createContext(initialState$c);
 const {
-  Provider: Provider$b
-} = store$b;
+  Provider: Provider$c
+} = store$c;
 const PasswordForgotContainer = _ref => {
   let {
     style,
@@ -26015,22 +26434,22 @@ const PasswordForgotContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$b);
+  }, initialState$c);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$b, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$b,
+    store: store$c,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$b
+    store: store$c
   })));
 };
 
@@ -26047,7 +26466,7 @@ const PasswordForgotButton = _ref => {
       emailError
     },
     dispatch
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
   const {
     t
   } = useTranslation("passwordForgot");
@@ -26068,7 +26487,7 @@ const PasswordForgotButton = _ref => {
 };
 
 const PasswordForgotEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 const PasswordForgotView = props => {
@@ -26119,7 +26538,7 @@ const PasswordForgotModal = _ref => {
 };
 PasswordForgotModal.viewId = "password-forgot";
 
-const initialState$a = {
+const initialState$b = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -26128,10 +26547,10 @@ const initialState$a = {
     content: ""
   }
 };
-const store$a = /*#__PURE__*/React.createContext(initialState$a);
+const store$b = /*#__PURE__*/React.createContext(initialState$b);
 const {
-  Provider: Provider$a
-} = store$a;
+  Provider: Provider$b
+} = store$b;
 const PasswordlessRequestContainer = _ref => {
   let {
     style,
@@ -26207,22 +26626,22 @@ const PasswordlessRequestContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$a);
+  }, initialState$b);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$a, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$b, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$a,
+    store: store$b,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$a
+    store: store$b
   })));
 };
 
@@ -26239,7 +26658,7 @@ const PasswordlessRequestViewButton = _ref => {
       emailError
     },
     dispatch
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
   const {
     t
   } = useTranslation("passwordlessRequest");
@@ -26260,7 +26679,7 @@ const PasswordlessRequestViewButton = _ref => {
 };
 
 const PasswordlessRequestEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const PasswordlessRequestView = props => {
@@ -26302,7 +26721,7 @@ const PasswordlessRequestModal = _ref => {
 };
 PasswordlessRequestModal.viewId = "passwordless-request";
 
-const initialState$9 = {
+const initialState$a = {
   currentPassword: "",
   newPassword: "",
   confirmNewPassword: "",
@@ -26316,10 +26735,10 @@ const initialState$9 = {
     content: ""
   }
 };
-const store$9 = /*#__PURE__*/React.createContext(initialState$9);
+const store$a = /*#__PURE__*/React.createContext(initialState$a);
 const {
-  Provider: Provider$9
-} = store$9;
+  Provider: Provider$a
+} = store$a;
 const PasswordChangeContainer = _ref => {
   let {
     style,
@@ -26470,22 +26889,22 @@ const PasswordChangeContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$9);
+  }, initialState$a);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-change-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$9, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$a, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$9,
+    store: store$a,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$9
+    store: store$a
   })));
 };
 
@@ -26496,7 +26915,7 @@ function PasswordChangeCurrentPassword(props) {
       currentPassword,
       currentPasswordError
     }
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_PASSWORD
@@ -26530,7 +26949,7 @@ function PasswordChangeNewPassword(props) {
       newPassword,
       newPasswordError
     }
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_NEW_PASSWORD
@@ -26564,7 +26983,7 @@ function PasswordChangeConfirmNewPassword(props) {
       confirmNewPassword,
       confirmNewPasswordError
     }
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_CONFIRM_NEW_PASSWORD
@@ -26606,7 +27025,7 @@ const PasswordChangeButton = _ref => {
       confirmNewPasswordError
     },
     dispatch
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const {
     t
   } = useTranslation("passwordChange");
@@ -26673,17 +27092,17 @@ const PasswordChangeModal = _ref => {
 };
 PasswordChangeModal.viewId = "password-change";
 
-const initialState$8 = {
+const initialState$9 = {
   buttonDisabled: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$8 = /*#__PURE__*/React.createContext(initialState$8);
+const store$9 = /*#__PURE__*/React.createContext(initialState$9);
 const {
-  Provider: Provider$8
-} = store$8;
+  Provider: Provider$9
+} = store$9;
 const CartContainer = _ref => {
   let {
     style,
@@ -26769,22 +27188,22 @@ const CartContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$8);
+  }, initialState$9);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-cart-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$8, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$9, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$8,
+    store: store$9,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$8
+    store: store$9
   })));
 };
 
@@ -26826,7 +27245,7 @@ const CartSubmit = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const {
     t
   } = useTranslation("cart");
@@ -26861,7 +27280,7 @@ const CartTotalPrice = () => {
     state: {
       alert
     }
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const {
     cartItems
   } = usePelcro();
@@ -27175,7 +27594,7 @@ const OrderConfirmModal = props => {
 };
 OrderConfirmModal.viewId = "order-confirm";
 
-const initialState$7 = {
+const initialState$8 = {
   email: "",
   firstName: "",
   lastName: "",
@@ -27187,10 +27606,10 @@ const initialState$7 = {
     content: ""
   }
 };
-const store$7 = /*#__PURE__*/React.createContext(initialState$7);
+const store$8 = /*#__PURE__*/React.createContext(initialState$8);
 const {
-  Provider: Provider$7
-} = store$7;
+  Provider: Provider$8
+} = store$8;
 const GiftCreateContainer = _ref => {
   let {
     style,
@@ -27288,22 +27707,22 @@ const GiftCreateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$7);
+  }, initialState$8);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-gift-create-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$7, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$8, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$7,
+    store: store$8,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$7
+    store: store$8
   })));
 };
 
@@ -27318,7 +27737,7 @@ const GiftCreateSubmitButton = _ref => {
     state: {
       disableSubmit
     }
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const {
     t
   } = useTranslation("register");
@@ -27335,17 +27754,17 @@ const GiftCreateSubmitButton = _ref => {
 
 const GiftCreateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
   initWithUserEmail: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
   initWithUserFirstName: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
   initWithUserLastName: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const nowDate = new Date();
@@ -27359,7 +27778,7 @@ const GiftCreateStartDate = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const handleInputChange = value => {
     dispatch({
       type: SET_START_DATE,
@@ -27389,7 +27808,7 @@ function GiftCreateMessage(props) {
   const {
     dispatch,
     state
-  } = React.useContext(store$7);
+  } = React.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 => {
@@ -27507,7 +27926,7 @@ const GiftCreateModal = _ref => {
 };
 GiftCreateModal.viewId = "gift-create";
 
-const initialState$6 = {
+const initialState$7 = {
   isSubmitting: false,
   giftCode: "",
   buttonDisabled: true,
@@ -27516,10 +27935,10 @@ const initialState$6 = {
     content: ""
   }
 };
-const store$6 = /*#__PURE__*/React.createContext(initialState$6);
+const store$7 = /*#__PURE__*/React.createContext(initialState$7);
 const {
-  Provider: Provider$6
-} = store$6;
+  Provider: Provider$7
+} = store$7;
 const GiftRedeemContainer = _ref => {
   var _ref2, _props$subscriptionId;
   let {
@@ -27629,22 +28048,22 @@ const GiftRedeemContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$6);
+  }, initialState$7);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-gift-redeem-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$6, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$7, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$6,
+    store: store$7,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$6
+    store: store$7
   })));
 };
 
@@ -27678,7 +28097,7 @@ function GiftCode(_ref) {
 }
 
 const GiftRedeemCode = props => /*#__PURE__*/React__default['default'].createElement(GiftCode, Object.assign({
-  store: store$6
+  store: store$7
 }, props));
 
 const GiftRedeemSubmitButton = _ref => {
@@ -27693,7 +28112,7 @@ const GiftRedeemSubmitButton = _ref => {
       disableSubmit,
       isSubmitting
     }
-  } = React.useContext(store$6);
+  } = React.useContext(store$7);
   const {
     t
   } = useTranslation("register");
@@ -27778,7 +28197,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,
@@ -27787,10 +28206,10 @@ const initialState$5 = {
     content: ""
   }
 };
-const store$5 = /*#__PURE__*/React.createContext(initialState$5);
+const store$6 = /*#__PURE__*/React.createContext(initialState$6);
 const {
-  Provider: Provider$5
-} = store$5;
+  Provider: Provider$6
+} = store$6;
 const AddressSelectContainer = _ref => {
   var _props$giftCode, _ref2, _props$subscriptionId;
   let {
@@ -27917,7 +28336,7 @@ const AddressSelectContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$5);
+  }, initialState$6);
   React.useEffect(() => {
     var _window$Pelcro$user$r;
     dispatch({
@@ -27930,16 +28349,16 @@ const AddressSelectContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-select-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$5, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$6, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$5,
+    store: store$6,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$5
+    store: store$6
   })));
 };
 
@@ -27950,7 +28369,7 @@ const AddressSelectList = () => {
       addresses,
       selectedAddressId
     }
-  } = React.useContext(store$5);
+  } = React.useContext(store$6);
   const handleAddressSelect = event => {
     dispatch({
       type: SELECT_ADDRESS,
@@ -27993,7 +28412,7 @@ const AddressSelectSubmit = _ref => {
       selectedAddressId,
       isSubmitting
     }
-  } = React.useContext(store$5);
+  } = React.useContext(store$6);
   const {
     t
   } = useTranslation("address");
@@ -28089,7 +28508,7 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
   }
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
-const initialState$4 = {
+const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
@@ -28098,10 +28517,10 @@ const initialState$4 = {
     content: ""
   }
 };
-const store$4 = /*#__PURE__*/React.createContext(initialState$4);
+const store$5 = /*#__PURE__*/React.createContext(initialState$5);
 const {
-  Provider: Provider$4
-} = store$4;
+  Provider: Provider$5
+} = store$5;
 const PaymentMethodSelectContainer = _ref => {
   let {
     style,
@@ -28154,7 +28573,7 @@ const PaymentMethodSelectContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$4);
+  }, initialState$5);
   React.useEffect(() => {
     var _window$Pelcro$user$r3;
     dispatch({
@@ -28167,16 +28586,16 @@ const PaymentMethodSelectContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-payment-select-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$4, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$5, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$4,
+    store: store$5,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$4
+    store: store$5
   })));
 };
 
@@ -28190,7 +28609,7 @@ const PaymentMethodSelectList = () => {
       paymentMethods,
       selectedPaymentMethodId
     }
-  } = React.useContext(store$4);
+  } = React.useContext(store$5);
   const handlePaymentMethodSelect = event => {
     dispatch({
       type: SELECT_PAYMENT_METHOD,
@@ -28238,7 +28657,7 @@ const PaymentMethodSelectSubmit = _ref => {
       selectedPaymentMethodId,
       isSubmitting
     }
-  } = React.useContext(store$4);
+  } = React.useContext(store$5);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -28276,50 +28695,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;
-  React.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;
+  React.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['default'].createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-payment-method-select-modal"
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectView, Object.assign({
+    onAddNewPaymentMethod: onAddNewPaymentMethod
+  }, otherProps, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['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__*/React.createContext(initialState$4);
+const {
+  Provider: Provider$4
+} = store$4;
+const PaymentMethodDeleteContainer = _ref => {
+  let {
+    style,
+    className = "",
+    onSuccess = () => {},
+    onFailure = () => {},
+    children
+  } = _ref;
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  React.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['default'].createElement("div", {
+    style: {
+      ...style
+    },
+    className: `pelcro-container pelcro-payment-method-delete-container ${className}`
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$4, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
+    store: store$4,
+    key: i
+  })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+    store: store$4
+  })));
+};
+
+const PaymentMethodDeleteSubmit = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      isLoading,
+      isDisabled
+    }
+  } = React.useContext(store$4);
+  return /*#__PURE__*/React__default['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
+    }
+  } = React.useContext(store$4);
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  const handlePaymentMethodSelect = event => {
+    dispatch({
+      type: SELECT_PAYMENT_METHOD,
+      payload: event.target.value
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['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['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['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['default'].createElement("div", {
+      className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
+    }, /*#__PURE__*/React__default['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['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['default'].createElement("div", {
+    className: "plc-px-3"
+  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default['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
+  } = React.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['default'].createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-flex-col plc-space-y-3"
+  }, /*#__PURE__*/React__default['default'].createElement(Radio, {
+    className: "plc-animate-puls"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
+  })), /*#__PURE__*/React__default['default'].createElement(Radio, {
+    className: "plc-animate-pulse"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
+  }))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && paymentMethods.length !== 1 && /*#__PURE__*/React__default['default'].createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: deleteOption === "select",
+    value: "select"
+  }, t("delete.options.select")), /*#__PURE__*/React__default['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['default'].createElement("div", {
+    id: "pelcro-payment-method-delete-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold plc-mb-2"
+  }, t("delete.title")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: ""
+  }, t("delete.subtitle"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
+    className: "plc-mb-2"
+  }), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default['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['default'].createElement(Modal, {
+    id: "pelcro-payment-method-delete-modal",
+    onDisplay: props.onDisplay,
+    onClose: props.onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteView, Object.assign({}, props, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+PaymentMethodDeleteModal.viewId = "payment-method-delete";
+
+const PaymentMethodCreateContainer = props => {
+  return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainer, Object.assign({
+    type: "createPaymentSource",
+    className: "pelcro-payment-create-container"
+  }, props));
+};
+
+/**
+ *
+ */
+function PaymentMethodCreateView(props) {
+  const [t] = useTranslation("paymentMethod");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-payment-method-create-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold "
+  }, t("create.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("create.subtitle"))), /*#__PURE__*/React__default['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['default'].createElement(Modal, {
-    onDisplay: onDisplay,
-    onClose: onClose,
-    id: "pelcro-payment-method-select-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectView, Object.assign({
-    onAddNewPaymentMethod: onAddNewPaymentMethod
-  }, otherProps, {
+    id: "pelcro-payment-method-create-modal",
+    onDisplay: props.onDisplay,
+    onClose: props.onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodCreateView, Object.assign({}, props, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['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];
 
@@ -28333,7 +29171,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -28517,7 +29355,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'
@@ -29045,7 +29883,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default['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) {
@@ -29089,7 +29927,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default['default'].createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$h({}, sharedProps, {
+  }, render(_extends$i({}, sharedProps, {
     as: React.Fragment,
     children: React__default['default'].createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, React.Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -29216,12 +30054,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) {
@@ -29240,7 +30078,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -29251,19 +30089,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
@@ -29276,7 +30114,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;
@@ -29315,19 +30153,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) {
@@ -29348,7 +30186,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -29361,10 +30199,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
   });
@@ -29372,11 +30210,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
@@ -29389,7 +30227,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;
@@ -29408,6 +30246,7 @@ var GroupContext = /*#__PURE__*/React.createContext(null);
 GroupContext.displayName = 'GroupContext';
 
 const getPaymentCardIcon = name => {
+  var _icons$name$toLowerCa;
   const icons = {
     visa: /*#__PURE__*/React__default['default'].createElement("svg", {
       className: "plc-w-12",
@@ -29434,7 +30273,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['default'].createElement("svg", {
+  return (_icons$name$toLowerCa = icons[name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default['default'].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-12",
     fill: "none",
@@ -29448,16 +30287,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__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29686,16 +30525,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__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29703,31 +30542,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__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30090,16 +30929,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__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30107,15 +30946,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__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30123,16 +30962,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__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30140,16 +30979,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__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30157,16 +30996,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__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30174,16 +31013,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__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30196,16 +31035,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__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30213,16 +31052,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__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -30230,63 +31069,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__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     width: 24,
     height: 24,
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.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__namespace.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__namespace.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,
@@ -30608,7 +31460,9 @@ function DashboardWithHook(props) {
     switchView,
     resetView,
     logout,
-    set
+    set,
+    setPaymentMethodToEdit,
+    setPaymentMethodToDelete
   } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(DashboardWithTrans, {
     setAddress: addressIdToEdit => set({
@@ -30631,7 +31485,9 @@ function DashboardWithHook(props) {
       product,
       plan,
       isGift
-    })
+    }),
+    setPaymentMethodToEdit: setPaymentMethodToEdit,
+    setPaymentMethodToDelete: setPaymentMethodToDelete
   });
 }
 DashboardWithHook.viewId = "dashboard";
@@ -30658,6 +31514,18 @@ class Dashboard extends React.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();
@@ -30727,10 +31595,46 @@ class Dashboard extends React.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", () => {
@@ -30992,6 +31896,52 @@ class Dashboard extends React.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['default'].createElement("div", {
+          key: "dashboard-source-" + source.id,
+          className: "plc-flex plc-flex-row plc-pr-6"
+        }, /*#__PURE__*/React__default['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['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['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['default'].createElement(Button, {
+          id: "pelcro-button-update-source-" + index,
+          variant: "icon",
+          className: "plc-text-white",
+          icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
+          "data-key": source.id,
+          onClick: this.displaySourceEdit,
+          disabled: this.state.disableSubmit
+        }), /*#__PURE__*/React__default['default'].createElement(Button, {
+          id: "pelcro-button-delete-source-" + index,
+          variant: "icon",
+          className: "plc-text-white",
+          icon: /*#__PURE__*/React__default['default'].createElement(SvgTrashCan, null),
+          onClick: () => {
+            this.onDeletePaymentMethodClick(source);
+          },
+          disabled: this.state.disableSubmit
+        })), /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "plc-flex-grow"
+        }), source.is_default && /*#__PURE__*/React__default['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['default'].createElement("div", {
+        className: "plc-pr-2"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-overflow-y-scroll plc-max-h-52"
+      }, sources), /*#__PURE__*/React__default['default'].createElement(Button, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React__default['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
@@ -31002,7 +31952,8 @@ class Dashboard extends React.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;
@@ -31011,7 +31962,7 @@ class Dashboard extends React.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;
@@ -31114,25 +32065,7 @@ class Dashboard extends React.Component {
       name: SUB_MENUS.PAYMENT_CARDS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgPaymentCard, null),
       title: this.locale("labels.paymentSource"),
-      content: /*#__PURE__*/React__default['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['default'].createElement(React__default['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['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['default'].createElement(Button, {
-        variant: "icon",
-        className: "plc-text-white",
-        icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
-        onClick: this.displaySourceCreate,
-        disabled: this.state.disableSubmit
-      })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", null, this.locale("messages.noCard")), /*#__PURE__*/React__default['default'].createElement(Button, {
-        variant: "icon",
-        className: "plc-text-white",
-        icon: /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
-          className: "plc-w-6 plc-h-6"
-        }),
-        onClick: this.displaySourceCreate,
-        disabled: this.state.disableSubmit
-      })))
+      content: this.renderSources()
     }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
       name: SUB_MENUS.ADDRESSES,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgLocationPin, null),
@@ -35197,6 +36130,15 @@ exports.PasswordlessRequestViewButton = PasswordlessRequestViewButton;
 exports.PaymentCreateContainer = PaymentCreateContainer;
 exports.PaymentCreateView = PaymentCreateView;
 exports.PaymentMethodContainer = PaymentMethodContainer;
+exports.PaymentMethodCreateContainer = PaymentMethodCreateContainer;
+exports.PaymentMethodCreateModal = PaymentMethodCreateModal;
+exports.PaymentMethodCreateView = PaymentMethodCreateView;
+exports.PaymentMethodDeleteContainer = PaymentMethodDeleteContainer;
+exports.PaymentMethodDeleteList = PaymentMethodDeleteList;
+exports.PaymentMethodDeleteModal = PaymentMethodDeleteModal;
+exports.PaymentMethodDeleteOptions = PaymentMethodDeleteOptions;
+exports.PaymentMethodDeleteSubmit = PaymentMethodDeleteSubmit;
+exports.PaymentMethodDeleteView = PaymentMethodDeleteView;
 exports.PaymentMethodSelectContainer = PaymentMethodSelectContainer;
 exports.PaymentMethodSelectList = PaymentMethodSelectList;
 exports.PaymentMethodSelectModal = PaymentMethodSelectModal;
@@ -35204,6 +36146,7 @@ exports.PaymentMethodSelectSubmit = PaymentMethodSelectSubmit;
 exports.PaymentMethodSelectView = PaymentMethodSelectView;
 exports.PaymentMethodUpdateContainer = PaymentMethodUpdateContainer;
 exports.PaymentMethodUpdateModal = PaymentMethodUpdateModal;
+exports.PaymentMethodUpdateSetDefault = PaymentMethodUpdateSetDefault;
 exports.PaymentMethodUpdateView = PaymentMethodUpdateView;
 exports.PaymentMethodView = PaymentMethodView;
 exports.PaymentSuccessModal = PaymentSuccessModal;