@pelcro/react-pelcro-js 3.36.0 → 3.38.0

package/dist/index.cjs.js

@@ -3363,12 +3363,19 @@ var paymentMethod_en = {
 	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.",
+	subtitle: "Are you sure you want to delete the selected payment method?",
+	details: "Payment method details",
+	message: "This action is irreversible and will permanently remove the payment method from the system. Please ensure that there are no pending transactions or subscriptions associated with this payment method.",
+	buttons: {
+		"delete": "Delete payment method",
+		back: "Go back"
+	},
 	options: {
-		select: "Select an existing payment method",
+		select: "Select a payment method to be the default",
 		add: "Add a new payment method"
 	},
-	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced"
+	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced",
+	deletedSuccessfully: "Payment Method Successfully Deleted"
 },
 	create: create$5
 };
@@ -9589,6 +9596,17 @@ const getPaymentCardIcon$1 = name => {
     }), /*#__PURE__*/React__default['default'].createElement("path", {
       fill: "#FFF",
       d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
+    })),
+    amex: /*#__PURE__*/React__default['default'].createElement("svg", {
+      className: "plc-w-16",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#1976D2",
+      d: "M45,35c0,2.209-1.791,4-4,4H7c-2.209,0-4-1.791-4-4V13c0-2.209,1.791-4,4-4h34c2.209,0,4,1.791,4,4V35z"
+    }), /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#FFF",
+      d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
     }))
   };
   return name ? icons[name.toLowerCase()] : /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -9640,6 +9658,19 @@ function notifyBugsnag(callback, startOptions) {
   }
   callback();
 }
+const refreshUser = () => {
+  var _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro6$user$;
+  window.Pelcro.user.refresh({
+    auth_token: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : (_window$Pelcro6$user$ = _window$Pelcro6$user.read()) === null || _window$Pelcro6$user$ === void 0 ? void 0 : _window$Pelcro6$user$.auth_token
+  }, (err, res) => {
+    if (err) {
+      console.error(err);
+    }
+    if (res) {
+      return res.data;
+    }
+  });
+};
 
 const resources = {
   en: {
@@ -11605,7 +11636,7 @@ const debounce = (func, waitTime) => {
   };
 };
 function getSiteCardProcessor() {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
   if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_gateway_settings) {
     return "vantiv";
   }
@@ -11615,6 +11646,9 @@ function getSiteCardProcessor() {
   if ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r3 !== void 0 && _window$Pelcro$site$r3.cybersource_gateway_settings) {
     return "cybersource";
   }
+  if ((_window$Pelcro$site$r4 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r4 !== void 0 && _window$Pelcro$site$r4.braintree_gateway_settings) {
+    return "braintree";
+  }
   return "stripe";
 }
 function getFourDigitYear(lastTwoDigits) {
@@ -11717,6 +11751,7 @@ const loadPaymentSDKs = () => {
   } = usePelcro.getStore();
   const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
   const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
+  const supportsBraintree = Boolean(window.Pelcro.site.read().braintree_gateway_settings);
   whenUserReady(() => {
     if (!window.Stripe && !supportsVantiv && !supportsTap) {
       pure_1(window.Pelcro.environment.stripe);
@@ -11726,9 +11761,15 @@ const loadPaymentSDKs = () => {
 
   // Load PayPal SDKs
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
+  if (supportsPaypal || supportsBraintree) {
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/client.min.js", "braintree-sdk");
+  }
   if (supportsPaypal) {
-    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/client.min.js", "braintree-sdk");
-    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+  }
+  if (supportsBraintree) {
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/three-d-secure.min.js", "braintree-3D-secure-sdk");
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/hosted-fields.min.js", "braintree-hosted-fields-sdk");
   }
 
   // Load Vantiv SDKs
@@ -12610,8 +12651,8 @@ 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 SHOW_PAYMENT_METHOD_SELECT = "SHOW_PAYMENT_METHOD_SELECT";
 const SET_SUBSCRIPTION_SUSPEND_DATE = "SET_SUBSCRIPTION_SUSPEND_DATE";
 const SET_EMAILS = "SET_EMAILS";
 const SET_EMAILS_ERROR = "SET_EMAILS_ERROR";
@@ -16364,7 +16405,7 @@ var _isPaymentGatewayInvalid = /*#__PURE__*/new WeakMap();
 var _generateUserError = /*#__PURE__*/new WeakMap();
 class Payment {
   /**
-   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway|BraintreeGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -16383,7 +16424,7 @@ class Payment {
     _classPrivateFieldInitSpec$1(this, _isPaymentGatewayInvalid, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway || gateway instanceof CybersourceGateway);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway || gateway instanceof CybersourceGateway || gateway instanceof BraintreeGateway);
       }
     });
     _classPrivateFieldInitSpec$1(this, _generateUserError, {
@@ -16438,7 +16479,8 @@ const PAYMENT_GATEWAYS_ENUM = {
   paypal: "braintree",
   vantiv: "vantiv",
   tap: "tap",
-  cybersource: "cybersource"
+  cybersource: "cybersource",
+  braintree: "braintree"
 };
 
 /**
@@ -17377,6 +17419,218 @@ class CybersourceGateway {
     });
   }
 }
+var _paymentGateway6 = /*#__PURE__*/new WeakMap();
+var _createSubscription6 = /*#__PURE__*/new WeakMap();
+var _renewSubscription5 = /*#__PURE__*/new WeakMap();
+var _createGiftedSubscription6 = /*#__PURE__*/new WeakMap();
+var _renewGiftedSubscription5 = /*#__PURE__*/new WeakMap();
+var _purchaseEcommerceOrder5 = /*#__PURE__*/new WeakMap();
+var _payInvoice6 = /*#__PURE__*/new WeakMap();
+class BraintreeGateway {
+  constructor() {
+    _classPrivateFieldInitSpec$1(this, _paymentGateway6, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["braintree"]
+    });
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = PAYMENT_TYPES;
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription6).call(this, options, callback);
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription5).call(this, options, callback);
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription6).call(this, options, callback);
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription5).call(this, options, callback);
+        case types.PURCHASE_ECOMMERCE_ORDER:
+          return _classPrivateFieldGet(this, _purchaseEcommerceOrder5).call(this, options, callback);
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice6).call(this, options, callback);
+        default:
+          console.error("Unsupported payment method: braintree Gateway");
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createSubscription6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewSubscription5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createGiftedSubscription6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          giftRecipient,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          gift_recipient_email: giftRecipient.email,
+          gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
+          gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
+          gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
+          gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewGiftedSubscription5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renewGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _purchaseEcommerceOrder5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          items,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.ecommerce.order.create({
+          items,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          ...params,
+          ...(addressId && {
+            address_id: addressId
+          })
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _payInvoice6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+}
 
 /**
  * @typedef {Object} PaymentStateType
@@ -17400,6 +17654,7 @@ class CybersourceGateway {
 const initialState$l = {
   disableSubmit: false,
   isLoading: false,
+  isSkeletonLoaded: false,
   disableCouponButton: false,
   couponObject: null,
   couponCode: "",
@@ -18046,52 +18301,620 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   };
   /* ====== End Tap integration ======== */
 
-  const submitUsingVantiv = state => {
-    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
-    if (isUsingExistingPaymentMethod) {
-      // no need to create a new source using vantiv
-      return handleVantivPayment(null, state.couponCode);
-    }
-    if (!vantivInstanceRef.current) {
-      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
-    }
-    const orderId = `pelcro-${new Date().getTime()}`;
-    /*     
-    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
-    */
-    vantivInstanceRef.current.getPaypageRegistrationId({
-      id: orderId,
-      orderId: orderId
-    });
-  };
-  function handleVantivPayment(paymentRequest, couponCode) {
-    if (paymentRequest) {
-      const SUCCESS_STATUS = "870";
-      if (paymentRequest.response !== SUCCESS_STATUS) {
-        switch (paymentRequest.response) {
-          case "871":
-            return handlePaymentError({
-              error: new Error("Invalid account number")
-            });
-          default:
-            return handlePaymentError({
-              error: new Error(paymentRequest.message)
-            });
+  /* ====== Start Braintree integration  ======== */
+  const braintreeInstanceRef = React__default['default'].useRef(null);
+  const braintree3DSecureInstanceRef = React__default['default'].useRef(null);
+  function getClientToken() {
+    return new Promise((resolve, reject) => {
+      window.Pelcro.payment.generateClientToken({
+        auth_token: window.Pelcro.user.read().auth_token,
+        site_id: window.Pelcro.siteid
+      }, (error, response) => {
+        if (error) {
+          reject(error);
+        }
+        if (response) {
+          resolve(response.client_token);
         }
+      });
+    });
+  }
+  async function initializeBraintree() {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
+    if (cardProcessor === "braintree" && !selectedPaymentMethodId) {
+      const braintreeToken = await getClientToken();
+      const isBraintreeEnabled = Boolean(braintreeToken);
+      if (!isBraintreeEnabled) {
+        console.error("Braintree integration is currently not enabled on this site's config");
+        return;
       }
-    }
-    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
-    if (type === "createPayment") {
-      handleVantivSubscription();
-    } else if (type === "orderCreate") {
-      purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
-    } else if (type === "invoicePayment") {
-      payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
-    } else if (type === "createPaymentSource") {
-      createNewVantivCard();
-    } else if (type === "updatePaymentSource") {
-      updateVantivCard();
-    } else if (type === "deletePaymentSource") {
+      if (type !== "updatePaymentSource") {
+        braintreeInstanceRef.current = new window.braintree.client.create({
+          authorization: braintreeToken
+        }).then(clientInstance => {
+          const options = {
+            authorization: braintreeToken,
+            styles: {
+              input: {
+                "font-size": "14px"
+              },
+              "input.invalid": {
+                color: "red"
+              },
+              "input.valid": {
+                color: "green"
+              }
+            },
+            fields: {
+              number: {
+                container: "#card-number",
+                placeholder: "4111 1111 1111 1111"
+              },
+              cvv: {
+                container: "#cvv",
+                placeholder: "123"
+              },
+              expirationDate: {
+                container: "#expiration-date",
+                placeholder: "10/2022"
+              }
+            }
+          };
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: true
+          });
+          braintree3DSecureInstanceRef.current = new window.braintree.threeDSecure.create({
+            version: 2,
+            authorization: braintreeToken
+          }).then(threeDSecureInstance => {
+            return threeDSecureInstance;
+          });
+          return window.braintree.hostedFields.create(options);
+        });
+        braintreeInstanceRef.current.then(hostedFieldInstance => {
+          hostedFieldInstance.on("notEmpty", function (event) {
+            const field = event.fields[event.emittedBy];
+            if (field.isPotentiallyValid) {
+              field.container.classList.remove("pelcro-input-invalid");
+            }
+          });
+          hostedFieldInstance.on("validityChange", function (event) {
+            const field = event.fields[event.emittedBy];
+
+            // Remove any previously applied error or warning classes
+            field.container.classList.remove("is-valid");
+            field.container.classList.remove("pelcro-input-invalid");
+            if (field.isValid) {
+              field.container.classList.add("is-valid");
+            } else if (field.isPotentiallyValid) ; else {
+              field.container.classList.add("pelcro-input-invalid");
+            }
+          });
+        });
+      } else if (type == "updatePaymentSource" && paymentMethodToEdit) {
+        const {
+          properties
+        } = paymentMethodToEdit !== null && paymentMethodToEdit !== void 0 ? paymentMethodToEdit : {};
+        const {
+          exp_month: expMonth,
+          exp_year: expYear
+        } = properties !== null && properties !== void 0 ? properties : {};
+        braintreeInstanceRef.current = new window.braintree.client.create({
+          authorization: braintreeToken
+        }).then(clientInstance => {
+          const options = {
+            client: clientInstance,
+            styles: {
+              input: {
+                "font-size": "14px"
+              },
+              "input.invalid": {
+                color: "red"
+              },
+              "input.valid": {
+                color: "green"
+              }
+            },
+            fields: {
+              expirationMonth: {
+                container: "#expiration-month",
+                prefill: expMonth
+              },
+              expirationYear: {
+                container: "#expiration-year",
+                prefill: expYear
+              }
+            }
+          };
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: true
+          });
+          return window.braintree.hostedFields.create(options);
+        });
+        braintreeInstanceRef.current.then(hostedFieldInstance => {
+          hostedFieldInstance.on("notEmpty", function (event) {
+            const field = event.fields[event.emittedBy];
+            if (field.isPotentiallyValid) {
+              field.container.classList.remove("pelcro-input-invalid");
+            }
+          });
+          hostedFieldInstance.on("validityChange", function (event) {
+            const field = event.fields[event.emittedBy];
+
+            // Remove any previously applied error or warning classes
+            field.container.classList.remove("is-valid");
+            field.container.classList.remove("pelcro-input-invalid");
+            if (field.isValid) {
+              field.container.classList.add("is-valid");
+            } else if (field.isPotentiallyValid) ; else {
+              field.container.classList.add("pelcro-input-invalid");
+            }
+          });
+        });
+      }
+    }
+  }
+  React.useEffect(() => {
+    initializeBraintree();
+  }, [selectedPaymentMethodId, paymentMethodToEdit]);
+  const braintreeErrorHandler = tokenizeErr => {
+    var _tokenizeErr$details, _tokenizeErr$details2;
+    const cardNumber = document.querySelector("#card-number");
+    const expirationDate = document.querySelector("#expiration-date");
+    const cvv = document.querySelector("#cvv");
+    const fields = tokenizeErr !== null && tokenizeErr !== void 0 && (_tokenizeErr$details = tokenizeErr.details) !== null && _tokenizeErr$details !== void 0 && _tokenizeErr$details.invalidFields ? Object.values(tokenizeErr === null || tokenizeErr === void 0 ? void 0 : (_tokenizeErr$details2 = tokenizeErr.details) === null || _tokenizeErr$details2 === void 0 ? void 0 : _tokenizeErr$details2.invalidFields) : null;
+    switch (tokenizeErr.code) {
+      case "HOSTED_FIELDS_FIELDS_EMPTY":
+        // occurs when none of the fields are filled in
+        cardNumber.classList.add("pelcro-input-invalid");
+        expirationDate.classList.add("pelcro-input-invalid");
+        cvv.classList.add("pelcro-input-invalid");
+        return "All fields are empty! Please fill out the form.";
+      // break;
+      case "HOSTED_FIELDS_FIELDS_INVALID":
+        // occurs when certain fields do not pass client side validation
+        console.error("Some fields are invalid:", tokenizeErr.details.invalidFieldKeys.toString());
+
+        // you can also programmatically access the field containers for the invalid fields
+        // tokenizeErr.details.invalidFields.forEach(function (
+        //   fieldContainer
+        // ) {
+        //   fieldContainer.className = "invalid";
+        // });
+        fields.forEach(field => {
+          field.classList.add("pelcro-input-invalid");
+        });
+        return `Some fields are invalid: ${tokenizeErr.details.invalidFieldKeys.toString()}`;
+      case "HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE":
+        // occurs when:
+        //   * the client token used for client authorization was generated
+        //     with a customer ID and the fail on duplicate payment method
+        //     option is set to true
+        //   * the card being tokenized has previously been vaulted (with any customer)
+        // See: https://developer.paypal.com/braintree/docs/reference/request/client-token/generate#options.fail_on_duplicate_payment_method
+        return "This payment method already exists in your vault.";
+      case "HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED":
+        // occurs when:
+        //   * the client token used for client authorization was generated
+        //     with a customer ID and the verify card option is set to true
+        //     and you have credit card verification turned on in the Braintree
+        //     control panel
+        //   * the cvv does not pass verification (https://developer.paypal.com/braintree/docs/reference/general/testing#avs-and-cvv/cid-responses)
+        // See: https://developer.paypal.com/braintree/docs/reference/request/client-token/generate#options.verify_card
+        return "CVV did not pass verification";
+      case "HOSTED_FIELDS_FAILED_TOKENIZATION":
+        // occurs for any other tokenization error on the server
+        return "Tokenization failed server side. Is the card valid?";
+      case "HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR":
+        // occurs when the Braintree gateway cannot be contacted
+        return "Network error occurred when tokenizing.";
+      default:
+        console.error("Something bad happened!", tokenizeErr);
+        return "Something bad happened!";
+    }
+  };
+  const submitUsingBraintree = (state, dispatch) => {
+    var _ref6, _ref7, _state$updatedPrice2;
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using braintree
+      return handleBraintreePayment(null, state.couponCode);
+    }
+    if (!braintreeInstanceRef.current) {
+      return console.error("Braintree sdk script wasn't loaded, you need to load braintree sdk before rendering the braintree payment flow");
+    }
+    const getOrderItemsTotal = () => {
+      if (!order) {
+        return null;
+      }
+      const isQuickPurchase = !Array.isArray(order);
+      if (isQuickPurchase) {
+        return order.price * order.quantity;
+      }
+      if (order.length === 0) {
+        return null;
+      }
+      return order.reduce((total, item) => {
+        return total + item.price * item.quantity;
+      }, 0);
+    };
+    const totalAmount = (_ref6 = (_ref7 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref7 !== void 0 ? _ref7 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref6 !== void 0 ? _ref6 : getOrderItemsTotal();
+    braintreeInstanceRef.current.then(hostedFieldInstance => {
+      hostedFieldInstance.tokenize((tokenizeErr, payload) => {
+        if (tokenizeErr) {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: braintreeErrorHandler(tokenizeErr)
+            }
+          });
+        }
+        if (type == "updatePaymentSource" || type == "deletePaymentSource") {
+          handleBraintreePayment(payload, state.couponCode);
+        } else {
+          braintree3DSecureInstanceRef.current.then(threeDSecureInstance => {
+            threeDSecureInstance.verifyCard({
+              onLookupComplete: function (data, next) {
+                next();
+              },
+              amount: totalAmount !== null && totalAmount !== void 0 ? totalAmount : "0.00",
+              nonce: payload.nonce,
+              bin: payload.details.bin
+            }).then(payload => {
+              if (payload.liabilityShifted) {
+                handleBraintreePayment(payload, state.couponCode);
+              } else if (payload.liabilityShiftPossible) {
+                dispatch({
+                  type: DISABLE_SUBMIT,
+                  payload: false
+                });
+                dispatch({
+                  type: LOADING,
+                  payload: false
+                });
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: "We encountered an issue verifying your transaction with 3D Secure, please try again."
+                  }
+                });
+              } else {
+                // Liability has not shifted and will not shift
+                dispatch({
+                  type: DISABLE_SUBMIT,
+                  payload: false
+                });
+                dispatch({
+                  type: LOADING,
+                  payload: false
+                });
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: "We encountered an issue verifying your transaction with 3D Secure, please try another payment method."
+                  }
+                });
+              }
+            }).catch(error => {
+              console.error(error);
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+              return dispatch({
+                type: SHOW_ALERT,
+                payload: {
+                  type: "error",
+                  content: "There was a problem with your request."
+                }
+              });
+            });
+          });
+        }
+      });
+    }).catch(error => {
+      if (error) {
+        console.error(error);
+        return;
+      }
+    });
+  };
+  const handleBraintreePayment = (braintreePaymentRequest, couponCode) => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    const braintreeNonce = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.nonce;
+    if (type === "createPayment") {
+      handleBraintreeSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce);
+    } else if (type === "createPaymentSource") {
+      createNewBraintreeCard();
+    } else if (type === "updatePaymentSource") {
+      updateBraintreeCard();
+    } else if (type === "deletePaymentSource") {
+      replaceBraintreeCard();
+    }
+    function createNewBraintreeCard() {
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: braintreeNonce,
+        gateway: "braintree"
+      }, (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.sourceCreated")
+          }
+        });
+        onSuccess(res);
+      });
+    }
+    function replaceBraintreeCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToDelete;
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: braintreeNonce,
+        gateway: "braintree"
+      }, (err, res) => {
+        if (err) {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          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);
+            });
+          }, 2000);
+        }
+      });
+    }
+    function updateBraintreeCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToEdit;
+      const {
+        expirationMonth,
+        expirationYear
+      } = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.details;
+      const {
+        isDefault
+      } = state;
+      window.Pelcro.paymentMethods.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: paymentMethodId,
+        token: braintreeNonce,
+        gateway: "braintree",
+        exp_month: expirationMonth,
+        exp_year: expirationYear,
+        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);
+      });
+    }
+    function handleBraintreeSubscription() {
+      const payment = new Payment(new BraintreeGateway());
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      if (renewGift) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (giftSubscriprition) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          giftRecipient,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (renewSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (createSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      }
+    }
+  };
+
+  /* ====== End Braintree integration ======== */
+
+  const submitUsingVantiv = state => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using vantiv
+      return handleVantivPayment(null, state.couponCode);
+    }
+    if (!vantivInstanceRef.current) {
+      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
+    }
+    const orderId = `pelcro-${new Date().getTime()}`;
+    /*     
+    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
+    */
+    vantivInstanceRef.current.getPaypageRegistrationId({
+      id: orderId,
+      orderId: orderId
+    });
+  };
+  function handleVantivPayment(paymentRequest, couponCode) {
+    if (paymentRequest) {
+      const SUCCESS_STATUS = "870";
+      if (paymentRequest.response !== SUCCESS_STATUS) {
+        switch (paymentRequest.response) {
+          case "871":
+            return handlePaymentError({
+              error: new Error("Invalid account number")
+            });
+          default:
+            return handlePaymentError({
+              error: new Error(paymentRequest.message)
+            });
+        }
+      }
+    }
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (type === "createPayment") {
+      handleVantivSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
+    } else if (type === "createPaymentSource") {
+      createNewVantivCard();
+    } else if (type === "updatePaymentSource") {
+      updateVantivCard();
+    } else if (type === "deletePaymentSource") {
       replaceVantivCard();
     }
     function createNewVantivCard() {
@@ -18125,6 +18948,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceCreated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -18179,6 +19003,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -18240,6 +19065,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -18397,13 +19223,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
 
       // When Google pay / Apple pay source created
-      paymentRequest.on("source", _ref6 => {
+      paymentRequest.on("source", _ref8 => {
         var _source$card;
         let {
           complete,
           source,
           ...data
-        } = _ref6;
+        } = _ref8;
         dispatch({
           type: DISABLE_COUPON_BUTTON,
           payload: true
@@ -18418,11 +19244,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
         complete("success");
         if ((source === null || source === void 0 ? void 0 : (_source$card = source.card) === null || _source$card === void 0 ? void 0 : _source$card.three_d_secure) === "required") {
-          return generate3DSecureSource(source).then(_ref7 => {
+          return generate3DSecureSource(source).then(_ref9 => {
             let {
               source,
               error
-            } = _ref7;
+            } = _ref9;
             if (error) {
               return handlePaymentError(error);
             }
@@ -18798,6 +19624,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             type: LOADING,
             payload: false
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18813,6 +19640,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceCreated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18832,6 +19660,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceUpdated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18859,6 +19688,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -18890,7 +19720,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
         address_id: product.address_required ? selectedAddressId : null
       }, (err, res) => {
-        if (res.data.setup_intent) {
+        var _res$data;
+        if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
           return confirmStripeIntentSetup(res, "subCreate");
         }
         confirmStripeCardPayment(res, err, true);
@@ -19134,11 +19965,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
-    }).then(_ref8 => {
+    }).then(_ref10 => {
       let {
         source,
         error
-      } = _ref8;
+      } = _ref10;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19156,7 +19987,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
-        var _res$data, _res$data$setup_inten, _res$data2, _res$data2$setup_inte;
+        var _res$data2, _res$data2$setup_inte, _res$data3, _res$data3$setup_inte;
         if (err) {
           dispatch({
             type: DISABLE_SUBMIT,
@@ -19175,7 +20006,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        if (((_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$setup_inten = _res$data.setup_intent) === null || _res$data$setup_inten === void 0 ? void 0 : _res$data$setup_inten.status) === "requires_action" || ((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_confirmation") {
+        if (((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_action" || ((_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : (_res$data3$setup_inte = _res$data3.setup_intent) === null || _res$data3$setup_inte === void 0 ? void 0 : _res$data3$setup_inte.status) === "requires_confirmation") {
           confirmStripeIntentSetup(res, "create");
         } else {
           dispatch({
@@ -19189,6 +20020,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceCreated")
             }
           });
+          refreshUser();
           onSuccess(res);
         }
       });
@@ -19211,7 +20043,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       exp_year: year,
       is_default: isDefault
     }, (err, res) => {
-      var _res$data3, _res$data3$setup_inte, _res$data4, _res$data4$setup_inte;
+      var _res$data4, _res$data4$setup_inte, _res$data5, _res$data5$setup_inte;
       dispatch({
         type: DISABLE_SUBMIT,
         payload: false
@@ -19230,7 +20062,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      if (((_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : (_res$data3$setup_inte = _res$data3.setup_intent) === null || _res$data3$setup_inte === void 0 ? void 0 : _res$data3$setup_inte.status) === "requires_action" || ((_res$data4 = res.data) === null || _res$data4 === void 0 ? void 0 : (_res$data4$setup_inte = _res$data4.setup_intent) === null || _res$data4$setup_inte === void 0 ? void 0 : _res$data4$setup_inte.status) === "requires_confirmation") {
+      if (((_res$data4 = res.data) === null || _res$data4 === void 0 ? void 0 : (_res$data4$setup_inte = _res$data4.setup_intent) === null || _res$data4$setup_inte === void 0 ? void 0 : _res$data4$setup_inte.status) === "requires_action" || ((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_confirmation") {
         confirmStripeIntentSetup(res, "update");
       } else {
         dispatch({
@@ -19240,6 +20072,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       }
     });
@@ -19250,11 +20083,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     } = paymentMethodToDelete;
     return stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
+    }).then(_ref11 => {
       let {
         source,
         error
-      } = _ref9;
+      } = _ref11;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19272,7 +20105,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
-        var _res$data5, _res$data5$setup_inte, _res$data6, _res$data6$setup_inte;
+        var _res$data6, _res$data6$setup_inte, _res$data7, _res$data7$setup_inte;
         if (err) {
           onFailure(err);
           return dispatch({
@@ -19283,7 +20116,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        if (((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_action" || ((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_confirmation") {
+        if (((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_action" || ((_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : (_res$data7$setup_inte = _res$data7.setup_intent) === null || _res$data7$setup_inte === void 0 ? void 0 : _res$data7$setup_inte.status) === "requires_confirmation") {
           confirmStripeIntentSetup(res, "replace", paymentMethodId);
         } else {
           setTimeout(() => {
@@ -19309,6 +20142,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -19351,12 +20185,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref10 => {
-      var _ref11, _ref12, _state$updatedPrice2;
+    }).then(_ref12 => {
+      var _ref13, _ref14, _state$updatedPrice3;
       let {
         source,
         error
-      } = _ref10;
+      } = _ref12;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19375,7 +20209,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref11 = (_ref12 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref12 !== void 0 ? _ref12 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref11 !== void 0 ? _ref11 : getOrderItemsTotal();
+      (_ref13 = (_ref14 = (_state$updatedPrice3 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice3 !== void 0 ? _state$updatedPrice3 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref14 !== void 0 ? _ref14 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref13 !== void 0 ? _ref13 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -19404,12 +20238,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
         address_id: selectedAddressId
       }, (error, res) => {
-        var _res$data7, _res$data8;
+        var _res$data8, _res$data9;
         if (error) {
           return reject(error);
         }
-        const taxAmount = (_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : _res$data7.taxes;
-        const totalAmountWithTax = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.total;
+        const taxAmount = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.taxes;
+        const totalAmountWithTax = (_res$data9 = res.data) === null || _res$data9 === void 0 ? void 0 : _res$data9.total;
         resolve({
           totalAmountWithTax,
           taxAmount
@@ -19557,6 +20391,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           ...state,
           isLoading: action.payload
         });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          isSkeletonLoaded: action.payload
+        });
       case SHOW_COUPON_FIELD:
         return lib_7({
           ...state,
@@ -19594,6 +20433,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           if (getSiteCardProcessor() === "cybersource") {
             return submitUsingCybersource(state, dispatch);
           }
+          if (getSiteCardProcessor() === "braintree") {
+            return submitUsingBraintree(state, dispatch);
+          }
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -19982,6 +20824,11 @@ const CheckoutForm = _ref => {
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
+  const {
+    state: {
+      isSkeletonLoaded
+    }
+  } = React.useContext(store$l);
   if (selectedPaymentMethodId) {
     return null;
   }
@@ -20013,12 +20860,61 @@ const CheckoutForm = _ref => {
       placeholder: "Exp Year *"
     }))));
   }
-  if (cardProcessor === "stripe") {
+  if (cardProcessor === "braintree") {
     if (type === "updatePaymentSource") {
       var _paymentMethodToEdit$;
+      return /*#__PURE__*/React__default['default'].createElement("div", null, isSkeletonLoaded && paymentMethodToEdit ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+        htmlFor: "card-number"
+      }, "Card Number *"), /*#__PURE__*/React__default['default'].createElement(Input, {
+        id: "card-number",
+        className: "plc-tracking-widest plc-flex-grow plc-h-12 plc-text-center",
+        value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$ = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$ === void 0 ? void 0 : _paymentMethodToEdit$.last4}`,
+        disabled: true
+      }), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-flex plc-items-start plc-space-x-8 plc-my-6"
+      }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+        htmlFor: "expiration-month"
+      }, "Expiration Month *"), /*#__PURE__*/React__default['default'].createElement("div", {
+        id: "expiration-month",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+        htmlFor: "expiration-year"
+      }, "Expiration Year *"), /*#__PURE__*/React__default['default'].createElement("div", {
+        id: "expiration-year",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })))) : /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+      }));
+    }
+    return /*#__PURE__*/React__default['default'].createElement("div", null, isSkeletonLoaded ? /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-max-w-[50em]"
+    }, /*#__PURE__*/React__default['default'].createElement("label", {
+      htmlFor: "card-number"
+    }, "Card Number *"), /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "card-number",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex plc-items-start plc-space-x-8 plc-my-6"
+    }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+      htmlFor: "expiration-date"
+    }, "Expiration Date *"), /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "expiration-date",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    })), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("label", {
+      htmlFor: "cvv"
+    }, "CVC *"), /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "cvv",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    })))) : /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+    }));
+  }
+  if (cardProcessor === "stripe") {
+    if (type === "updatePaymentSource") {
+      var _paymentMethodToEdit$2;
       return /*#__PURE__*/React__default['default'].createElement("div", null, paymentMethodToEdit ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Input, {
         className: "plc-tracking-widest plc-flex-grow plc-text-center",
-        value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$ = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$ === void 0 ? void 0 : _paymentMethodToEdit$.last4}`,
+        value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$2 = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$2 === void 0 ? void 0 : _paymentMethodToEdit$2.last4}`,
         disabled: true
       })) : /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Input, {
         className: "plc-bg-gray-300 plc-animate-pulse"
@@ -25335,7 +26231,8 @@ const PasswordResetContainer = _ref => {
       email,
       password,
       password_confirmation: confirmPassword,
-      token
+      token,
+      referer: window.location.origin
     }, (err, res) => {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -25567,7 +26464,8 @@ const PasswordForgotContainer = _ref => {
       email
     } = _ref2;
     window.Pelcro.password.forgot({
-      email
+      email,
+      referer: window.location.origin
     }, (err, res) => {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -27692,17 +28590,21 @@ const AddressSelectModal = _ref => {
 AddressSelectModal.viewId = "address-select";
 
 const moveDefaultPaymentMethodToStart = paymentMethods => {
-  var _window$Pelcro$user$r;
-  const defaultPaymentMethod = (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.source;
+  const defaultPaymentMethod = getDefaultPaymentMethod(paymentMethods);
   const paymentMethodsWithoutDefault = paymentMethods.filter(paymentMethod => paymentMethod.id !== defaultPaymentMethod.id);
   if (defaultPaymentMethod.status !== "chargeable") {
     return paymentMethodsWithoutDefault;
   }
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
+const getDefaultPaymentMethod = paymentMethods => {
+  const defaultPaymentMethod = paymentMethods.find(paymentMethod => paymentMethod.is_default);
+  return defaultPaymentMethod;
+};
 const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
+  skeletonLoader: true,
   isSubmitting: false,
   alert: {
     type: "error",
@@ -27733,12 +28635,11 @@ const PaymentMethodSelectContainer = _ref => {
     });
     return onSuccess(selectedPaymentMethodId);
   };
-  const getInitialSelectedMethodId = () => {
-    var _window$Pelcro$user$r2;
+  const getInitialSelectedMethodId = paymentMethods => {
     if (selectedPaymentMethodIdFromStore) {
       return selectedPaymentMethodIdFromStore;
     }
-    const defaultMethod = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.source;
+    const defaultMethod = getDefaultPaymentMethod(paymentMethods);
     if (defaultMethod && defaultMethod.status === "chargeable") {
       return String(defaultMethod.id);
     }
@@ -27755,7 +28656,12 @@ const PaymentMethodSelectContainer = _ref => {
         return lib_7({
           ...state,
           paymentMethods: moveDefaultPaymentMethodToStart(action.payload),
-          selectedPaymentMethodId: getInitialSelectedMethodId()
+          selectedPaymentMethodId: getInitialSelectedMethodId(action.payload)
+        });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          skeletonLoader: action.payload
         });
       case HANDLE_SUBMIT:
         return lib_5({
@@ -27767,10 +28673,23 @@ const PaymentMethodSelectContainer = _ref => {
     }
   }, initialState$5);
   React.useEffect(() => {
-    var _window$Pelcro$user$r3;
-    dispatch({
-      type: LOAD_PAYMENT_METHODS,
-      payload: (_window$Pelcro$user$r3 = window.Pelcro.user.read().sources) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : []
+    window.Pelcro.paymentMethods.list({
+      auth_token: window.Pelcro.user.read().auth_token
+    }, (err, res) => {
+      if (err) {
+        return console.error(err);
+      }
+      if (res) {
+        var _res$data;
+        dispatch({
+          type: LOAD_PAYMENT_METHODS,
+          payload: (_res$data = res.data) !== null && _res$data !== void 0 ? _res$data : []
+        });
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: false
+        });
+      }
     });
   }, []);
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -27799,7 +28718,8 @@ const PaymentMethodSelectList = () => {
     dispatch,
     state: {
       paymentMethods,
-      selectedPaymentMethodId
+      selectedPaymentMethodId,
+      skeletonLoader
     }
   } = React.useContext(store$5);
   const handlePaymentMethodSelect = event => {
@@ -27808,7 +28728,9 @@ const PaymentMethodSelectList = () => {
       payload: event.target.value
     });
   };
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default['default'].createElement("div", null, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-full plc-h-20 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll plc-max-h-80 pelcro-payment-method-select-wrapper"
   }, paymentMethods.map(paymentMethod => {
     var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
@@ -27831,7 +28753,7 @@ const PaymentMethodSelectList = () => {
     }, "\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))));
-  }));
+  })));
 };
 
 const PaymentMethodSelectSubmit = _ref => {
@@ -27933,10 +28855,10 @@ const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "",
-  disableSubmit: false,
+  disableSubmit: true,
   isLoading: false,
   skeletonLoader: true,
+  showPaymentMethodSelect: false,
   alert: {
     type: "error",
     content: ""
@@ -27973,20 +28895,19 @@ const PaymentMethodDeleteContainer = _ref => {
           type: SKELETON_LOADER,
           payload: false
         });
-        if (res.data.length !== 1) {
-          dispatch({
-            type: SET_DELETE_PAYMENT_METHOD_OPTION,
-            payload: "select"
-          });
-        } else {
+        if (res.data.length !== 1 && paymentMethodToDelete.is_default && paymentMethodToDelete.deletable) {
           dispatch({
-            type: SET_DELETE_PAYMENT_METHOD_OPTION,
-            payload: "add"
+            type: SHOW_PAYMENT_METHOD_SELECT,
+            payload: true
           });
         }
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
       }
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [paymentMethodToDelete]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const setDefaultPaymentMethod = () => {
     const {
@@ -27998,6 +28919,15 @@ const PaymentMethodDeleteContainer = _ref => {
       is_default: true
     }, (err, res) => {
       if (err) {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        console.log(err);
         onFailure(err);
         return dispatch({
           type: SHOW_ALERT,
@@ -28020,6 +28950,14 @@ const PaymentMethodDeleteContainer = _ref => {
       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({
@@ -28030,14 +28968,6 @@ const PaymentMethodDeleteContainer = _ref => {
           }
         });
       }
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
       onSuccess(res);
     });
   };
@@ -28053,11 +28983,12 @@ const PaymentMethodDeleteContainer = _ref => {
           ...state,
           disableSubmit: true,
           isLoading: true
-        }, (state, dispatch) => setDefaultPaymentMethod());
-      case SET_DELETE_PAYMENT_METHOD_OPTION:
-        return lib_7({
-          ...state,
-          deleteOption: action.payload
+        }, (state, dispatch) => {
+          if (state.showPaymentMethodSelect) {
+            setDefaultPaymentMethod();
+          } else {
+            deletePaymentMethod();
+          }
         });
       case SET_PAYMENT_METHODS:
         return lib_7({
@@ -28084,6 +29015,11 @@ const PaymentMethodDeleteContainer = _ref => {
           ...state,
           skeletonLoader: action.payload
         });
+      case SHOW_PAYMENT_METHOD_SELECT:
+        return lib_7({
+          ...state,
+          showPaymentMethodSelect: action.payload
+        });
       default:
         return state;
     }
@@ -28106,6 +29042,91 @@ const PaymentMethodDeleteContainer = _ref => {
   })));
 };
 
+const PaymentMethodDeleteList = props => {
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      selectedPaymentMethodId,
+      paymentMethods,
+      skeletonLoader,
+      showPaymentMethodSelect
+    }
+  } = React.useContext(store$4);
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  const createPaymentMethodItems = () => {
+    if (paymentMethods.length) {
+      return paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => /*#__PURE__*/React__default['default'].createElement("option", {
+        key: paymentMethod.id,
+        value: paymentMethod.id
+      }, paymentMethod.properties.brand, " -", " ", paymentMethod.properties.last4, " -", " ", paymentMethod.properties.exp_month, " /", paymentMethod.properties.exp_year));
+    }
+  };
+  const handlePaymentMethodSelect = event => {
+    dispatch({
+      type: SELECT_PAYMENT_METHOD,
+      payload: event.target.value
+    });
+  };
+  if (showPaymentMethodSelect) {
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-full plc-h-8 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+    }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-mt-4"
+    }, /*#__PURE__*/React__default['default'].createElement(Select, {
+      label: t("delete.options.select"),
+      name: "default-payment-method",
+      onChange: handlePaymentMethodSelect,
+      value: selectedPaymentMethodId
+    }, /*#__PURE__*/React__default['default'].createElement("option", {
+      value: "",
+      disabled: true,
+      selected: true
+    }), createPaymentMethodItems()))));
+  } else {
+    return null;
+  }
+};
+
+const PaymentMethodDetails = () => {
+  var _paymentMethodToDelet, _paymentMethodToDelet2, _paymentMethodToDelet3, _paymentMethodToDelet4;
+  const {
+    state: {
+      skeletonLoader
+    }
+  } = React.useContext(store$4);
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-mb-2"
+  }, t("delete.details")), skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-full plc-h-16 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethodToDelete && /*#__PURE__*/React__default['default'].createElement("div", {
+    key: paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id,
+    className: `plc-p-2 plc-pl-4 plc-shadow-md_dark plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper`
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-center plc-space-x-2 plc-w-full pelcro-select-payment-method-radio",
+    id: `pelcro-payment-method-select-${paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id}`,
+    name: "paymentMethod"
+  }, getPaymentCardIcon$1((_paymentMethodToDelet = paymentMethodToDelete.properties) === null || _paymentMethodToDelet === void 0 ? void 0 : _paymentMethodToDelet.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", " ", (_paymentMethodToDelet2 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet2 === void 0 ? void 0 : _paymentMethodToDelet2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm plc-text-gray-500"
+  }, t("select.expires"), " ", (_paymentMethodToDelet3 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet3 === void 0 ? void 0 : _paymentMethodToDelet3.exp_month, "/", (_paymentMethodToDelet4 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet4 === void 0 ? void 0 : _paymentMethodToDelet4.exp_year))))));
+};
+
 const PaymentMethodDeleteSubmit = _ref => {
   let {
     name,
@@ -28119,7 +29140,9 @@ const PaymentMethodDeleteSubmit = _ref => {
     dispatch,
     state: {
       isLoading,
-      isDisabled
+      disableSubmit,
+      showPaymentMethodSelect,
+      selectedPaymentMethodId
     }
   } = React.useContext(store$4);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
@@ -28129,116 +29152,38 @@ const PaymentMethodDeleteSubmit = _ref => {
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: isDisabled,
+    disabled: showPaymentMethodSelect ? !selectedPaymentMethodId : disableSubmit,
     isLoading: isLoading,
     className: "plc-w-full"
-  }, otherProps), name !== null && name !== void 0 ? name : t("select.buttons.selectPaymentMethod"));
+  }, otherProps), name !== null && name !== void 0 ? name : t("delete.buttons.delete"));
 };
 
-const PaymentMethodDeleteList = props => {
+const PaymentMethodDeleteBack = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
   const {
     t
   } = useTranslation("paymentMethod");
   const {
-    dispatch,
-    state: {
-      deleteOption,
-      selectedPaymentMethodId,
-      paymentMethods,
-      skeletonLoader
-    }
-  } = React.useContext(store$4);
-  const {
-    paymentMethodToDelete
+    switchView
   } = 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
-  })));
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+    variant: "outline",
+    onClick: () => {
+      switchView("dashboard");
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    className: "plc-w-full"
+  }, otherProps), name !== null && name !== void 0 ? name : t("delete.buttons.back"));
 };
 
-const PaymentMethodDeleteOptions = _ref => {
-  const {
-    state: {
-      deleteOption,
-      paymentMethods,
-      skeletonLoader
-    },
-    dispatch
-  } = React.useContext(store$4);
+function PaymentMethodDeleteView(props) {
   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", {
@@ -28246,12 +29191,12 @@ function PaymentMethodDeleteView(props) {
   }, /*#__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
-  })));
+    className: "plc-text-sm"
+  }, t("delete.subtitle"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDetails, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteList, null), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm plc-text-justify"
+  }, t("delete.message")), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-space-x-0 plc-space-y-3 plc-w-full plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteSubmit, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteBack, null))));
 }
 
 const PaymentMethodDeleteModal = props => {
@@ -28278,7 +29223,7 @@ const PaymentMethodDeleteModal = props => {
         nonInteraction: true
       });
     }
-    notify$1.success(t("delete.paymentMethodReplaced"));
+    notify$1.success(t("delete.deletedSuccessfully"));
     resetView();
   };
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
@@ -29464,6 +30409,14 @@ const getPaymentCardIcon = name => {
       viewBox: "0 0 50 50"
     }, /*#__PURE__*/React__default['default'].createElement("path", {
       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"
+    })),
+    amex: /*#__PURE__*/React__default['default'].createElement("svg", {
+      className: "plc-w-12",
+      fill: "#ffffff",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 50 50"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      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 (_icons$name$toLowerCa = icons[name === null || name === void 0 ? void 0 : name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -30790,23 +31743,8 @@ class Dashboard extends React.Component {
       });
     });
     _defineProperty$3(this, "onDeletePaymentMethodClick", source => {
-      const isDeletable = source === null || source === void 0 ? void 0 : source.deletable;
-      if (isDeletable) {
-        this.props.onClose();
-        notify$1.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");
-      }
+      this.props.setPaymentMethodToDelete(source.id);
+      return this.props.setView("payment-method-delete");
     });
     _defineProperty$3(this, "displayRedeem", () => {
       return this.props.setView("gift-redeem");
@@ -35303,7 +36241,6 @@ exports.PaymentMethodCreateView = PaymentMethodCreateView;
 exports.PaymentMethodDeleteContainer = PaymentMethodDeleteContainer;
 exports.PaymentMethodDeleteList = PaymentMethodDeleteList;
 exports.PaymentMethodDeleteModal = PaymentMethodDeleteModal;
-exports.PaymentMethodDeleteOptions = PaymentMethodDeleteOptions;
 exports.PaymentMethodDeleteSubmit = PaymentMethodDeleteSubmit;
 exports.PaymentMethodDeleteView = PaymentMethodDeleteView;
 exports.PaymentMethodSelectContainer = PaymentMethodSelectContainer;