@pelcro/react-pelcro-js 4.0.0-alpha.55 → 4.0.0-alpha.57

package/dist/index.esm.js

@@ -3,23 +3,23 @@ import React__default, { useContext, useState, useRef, useEffect, useReducer, us
 import ReactDOM, { render as render$1 } from 'react-dom';
 import PropTypes from 'prop-types';
 
-function _typeof$3(obj) {
+function _typeof$4(obj) {
   "@babel/helpers - typeof";
 
   if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof$3 = function _typeof(obj) {
+    _typeof$4 = function _typeof(obj) {
       return typeof obj;
     };
   } else {
-    _typeof$3 = function _typeof(obj) {
+    _typeof$4 = function _typeof(obj) {
       return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
     };
   }
 
-  return _typeof$3(obj);
+  return _typeof$4(obj);
 }
 
-function _defineProperty$5(obj, key, value) {
+function _defineProperty$6(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -46,7 +46,7 @@ function _objectSpread$7(target) {
     }
 
     ownKeys.forEach(function (key) {
-      _defineProperty$5(target, key, source[key]);
+      _defineProperty$6(target, key, source[key]);
     });
   }
 
@@ -110,7 +110,7 @@ module.exports = _typeof;
 module.exports["default"] = module.exports, module.exports.__esModule = true;
 });
 
-var _typeof$2 = unwrapExports(_typeof_1);
+var _typeof$3 = unwrapExports(_typeof_1);
 
 function _assertThisInitialized$1(self) {
   if (self === void 0) {
@@ -121,7 +121,7 @@ function _assertThisInitialized$1(self) {
 }
 
 function _possibleConstructorReturn$1(self, call) {
-  if (call && (_typeof$2(call) === "object" || typeof call === "function")) {
+  if (call && (_typeof$3(call) === "object" || typeof call === "function")) {
     return call;
   }
 
@@ -690,7 +690,7 @@ var Translator = function (_EventEmitter) {
     value: function translate(keys, options, lastKey) {
       var _this2 = this;
 
-      if (_typeof$3(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
+      if (_typeof$4(options) !== 'object' && this.options.overloadTranslationOptionHandler) {
         options = this.options.overloadTranslationOptionHandler(arguments);
       }
 
@@ -1876,11 +1876,11 @@ function get() {
     appendNamespaceToCIMode: false,
     overloadTranslationOptionHandler: function handle(args) {
       var ret = {};
-      if (_typeof$3(args[1]) === 'object') ret = args[1];
+      if (_typeof$4(args[1]) === 'object') ret = args[1];
       if (typeof args[1] === 'string') ret.defaultValue = args[1];
       if (typeof args[2] === 'string') ret.tDescription = args[2];
 
-      if (_typeof$3(args[2]) === 'object' || _typeof$3(args[3]) === 'object') {
+      if (_typeof$4(args[2]) === 'object' || _typeof$4(args[3]) === 'object') {
         var options = args[3] || args[2];
         Object.keys(options).forEach(function (key) {
           ret[key] = options[key];
@@ -2268,7 +2268,7 @@ var I18n = function (_EventEmitter) {
       var fixedT = function fixedT(key, opts) {
         var options;
 
-        if (_typeof$3(opts) !== 'object') {
+        if (_typeof$4(opts) !== 'object') {
           for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
             rest[_key3 - 2] = arguments[_key3];
           }
@@ -2520,7 +2520,7 @@ module.exports = _defineProperty;
 module.exports["default"] = module.exports, module.exports.__esModule = true;
 });
 
-var _defineProperty$4 = unwrapExports(defineProperty);
+var _defineProperty$5 = unwrapExports(defineProperty);
 
 /**
  * This file automatically generated from `pre-publish.js`.
@@ -2582,9 +2582,9 @@ module.exports["default"] = module.exports, module.exports.__esModule = true;
 
 var _createClass$1 = unwrapExports(createClass);
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions$1 = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -2709,9 +2709,9 @@ function getDisplayName(Component) {
   return Component.displayName || Component.name || (typeof Component === 'string' && Component.length > 0 ? Component : 'Unknown');
 }
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren$1(node, checkLength) {
   if (!node) return false;
@@ -2770,7 +2770,7 @@ function nodesToString(children, i18nOptions) {
       }
     } else if (child === null) {
       warn$1("Trans: the passed in value is invalid - seems you passed in a null child.");
-    } else if (_typeof$2(child) === 'object') {
+    } else if (_typeof$3(child) === 'object') {
       var format = child.format,
           clone = _objectWithoutProperties$2(child, ["format"]);
 
@@ -2800,7 +2800,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
     var childrenArray = getAsArray(childs);
     childrenArray.forEach(function (child) {
       if (typeof child === 'string') return;
-      if (hasChildren$1(child)) getData(getChildren(child));else if (_typeof$2(child) === 'object' && !React__default.isValidElement(child)) Object.assign(data, child);
+      if (hasChildren$1(child)) getData(getChildren(child));else if (_typeof$3(child) === 'object' && !React__default.isValidElement(child)) Object.assign(data, child);
     });
   }
 
@@ -2836,8 +2836,8 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
         }, tmp) : tmp;
         var isElement = React__default.isValidElement(child);
         var isValidTranslationWithChildren = isElement && hasChildren$1(node, true) && !node.voidElement;
-        var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof$2(child) === 'object' && child.dummy && !isElement;
-        var isKnownComponent = _typeof$2(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
+        var isEmptyTransWithHTML = emptyChildrenButNeedsHandling && _typeof$3(child) === 'object' && child.dummy && !isElement;
+        var isKnownComponent = _typeof$3(children) === 'object' && children !== null && Object.hasOwnProperty.call(children, node.name);
 
         if (typeof child === 'string') {
           mem.push(child);
@@ -2874,7 +2874,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
 
             mem.push("<".concat(node.name, ">").concat(_inner4, "</").concat(node.name, ">"));
           }
-        } else if (_typeof$2(child) === 'object' && !isElement) {
+        } else if (_typeof$3(child) === 'object' && !isElement) {
           var content = node.children[0] ? translationContent : null;
           if (content) mem.push(content);
         } else if (node.children.length === 1 && translationContent) {
@@ -3067,11 +3067,11 @@ module.exports = _slicedToArray;
 module.exports["default"] = module.exports, module.exports.__esModule = true;
 });
 
-var _slicedToArray = unwrapExports(slicedToArray);
+var _slicedToArray$1 = unwrapExports(slicedToArray);
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function useTranslation(ns) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var i18nFromProps = props.i18n;
@@ -3114,7 +3114,7 @@ function useTranslation(ns) {
   }
 
   var _useState = useState(getT),
-      _useState2 = _slicedToArray(_useState, 2),
+      _useState2 = _slicedToArray$1(_useState, 2),
       t = _useState2[0],
       setT = _useState2[1];
 
@@ -3167,9 +3167,9 @@ function useTranslation(ns) {
   });
 }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function withTranslation(ns) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return function Extend(WrappedComponent) {
@@ -3178,7 +3178,7 @@ function withTranslation(ns) {
           rest = _objectWithoutProperties$2(_ref, ["forwardedRef"]);
 
       var _useTranslation = useTranslation(ns, rest),
-          _useTranslation2 = _slicedToArray(_useTranslation, 3),
+          _useTranslation2 = _slicedToArray$1(_useTranslation, 3),
           t = _useTranslation2[0],
           i18n = _useTranslation2[1],
           ready = _useTranslation2[2];
@@ -3900,7 +3900,7 @@ var labels$V = {
 	addresses: "Addresses",
 	myProfile: "My Profile",
 	basicData: "Basic Data",
-	paymentSource: "Payment Cards",
+	paymentSource: "Payment methods",
 	addCard: "Add Card",
 	actions: "Actions",
 	expiresOn: "Ends",
@@ -7433,7 +7433,7 @@ middleware.devtools;
 var middleware_3 = middleware.persist;
 middleware.redux;
 
-function _defineProperty$3(obj, key, value) {
+function _defineProperty$4(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -7499,11 +7499,11 @@ function warn(s) {
   console.warn('[react-ga]', s);
 }
 
-function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
+function _typeof$2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(source, true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(source, true).forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -7515,7 +7515,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof$2(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -7525,7 +7525,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var NEWTAB = '_blank';
 var MIDDLECLICK = 1;
 
@@ -7547,7 +7547,7 @@ function (_Component) {
 
     _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(OutboundLink)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-    _defineProperty$2(_assertThisInitialized(_this), "handleClick", function (event) {
+    _defineProperty$3(_assertThisInitialized(_this), "handleClick", function (event) {
       var _this$props = _this.props,
           target = _this$props.target,
           eventLabel = _this$props.eventLabel,
@@ -7602,11 +7602,11 @@ function (_Component) {
   return OutboundLink;
 }(Component);
 
-_defineProperty$2(OutboundLink$1, "trackLink", function () {
+_defineProperty$3(OutboundLink$1, "trackLink", function () {
   warn('ga tracking not enabled');
 });
 
-_defineProperty$2(OutboundLink$1, "propTypes", {
+_defineProperty$3(OutboundLink$1, "propTypes", {
   eventLabel: PropTypes.string.isRequired,
   target: PropTypes.string,
   to: PropTypes.string,
@@ -7614,7 +7614,7 @@ _defineProperty$2(OutboundLink$1, "propTypes", {
   trackerNames: PropTypes.arrayOf(PropTypes.string)
 });
 
-_defineProperty$2(OutboundLink$1, "defaultProps", {
+_defineProperty$3(OutboundLink$1, "defaultProps", {
   target: null,
   to: null,
   onClick: null,
@@ -7725,13 +7725,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(source, true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof$1(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$1 = function _typeof(obj) { return typeof obj; }; } else { _typeof$1 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$1(obj); }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
@@ -7826,7 +7826,7 @@ function initialize(configsOrTrackingId, options) {
 
   if (Array.isArray(configsOrTrackingId)) {
     configsOrTrackingId.forEach(function (config) {
-      if (_typeof(config) !== 'object') {
+      if (_typeof$1(config) !== 'object') {
         warn('All configs must be an object');
         return;
       }
@@ -7873,7 +7873,7 @@ function set(fieldsObject, trackerNames) {
     return;
   }
 
-  if (_typeof(fieldsObject) !== 'object') {
+  if (_typeof$1(fieldsObject) !== 'object') {
     warn('Expected `fieldsObject` arg to be an Object');
     return;
   }
@@ -8168,7 +8168,7 @@ var plugin = {
       var requireString = trackerName ? "".concat(trackerName, ".require") : 'require'; // Optional Fields
 
       if (options) {
-        if (_typeof(options) !== 'object') {
+        if (_typeof$1(options) !== 'object') {
           warn('Expected `options` arg to be an Object');
           return;
         }
@@ -8338,11 +8338,11 @@ var Defaults = /*#__PURE__*/Object.freeze({
   'default': core
 });
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 OutboundLink$1.origTrackLink = OutboundLink$1.trackLink;
 OutboundLink$1.trackLink = outboundLink;
 var OutboundLink = OutboundLink$1;
@@ -8887,7 +8887,7 @@ dist.ReactGAImplementation;
 
 class PelcroActions {
   constructor(storeSetter, storeGetter) {
-    _defineProperty$3(this, "resetState", () => {
+    _defineProperty$4(this, "resetState", () => {
       const {
         view,
         cartItems,
@@ -8896,7 +8896,7 @@ class PelcroActions {
       this.set(otherStateFields);
     });
 
-    _defineProperty$3(this, "switchView", view => {
+    _defineProperty$4(this, "switchView", view => {
       var _window$Pelcro$site$r;
 
       // view switching guards
@@ -8929,7 +8929,7 @@ class PelcroActions {
       });
     });
 
-    _defineProperty$3(this, "resetView", () => {
+    _defineProperty$4(this, "resetView", () => {
       const {
         switchView,
         resetState
@@ -8938,7 +8938,7 @@ class PelcroActions {
       resetState();
     });
 
-    _defineProperty$3(this, "switchToPaymentView", () => {
+    _defineProperty$4(this, "switchToPaymentView", () => {
       const {
         switchView,
         resetView,
@@ -8960,7 +8960,7 @@ class PelcroActions {
       return resetView();
     });
 
-    _defineProperty$3(this, "switchToCheckoutForm", () => {
+    _defineProperty$4(this, "switchToCheckoutForm", () => {
       const {
         switchView,
         product,
@@ -8986,7 +8986,7 @@ class PelcroActions {
       }
     });
 
-    _defineProperty$3(this, "switchToAddressView", () => {
+    _defineProperty$4(this, "switchToAddressView", () => {
       const {
         switchView
       } = this.get();
@@ -8998,7 +8998,7 @@ class PelcroActions {
       }
     });
 
-    _defineProperty$3(this, "setProduct", id => {
+    _defineProperty$4(this, "setProduct", id => {
       const product = window.Pelcro.product.getById(id);
       if (!product) return console.error("invalid product id");
       this.set({
@@ -9006,7 +9006,7 @@ class PelcroActions {
       });
     });
 
-    _defineProperty$3(this, "setPlan", id => {
+    _defineProperty$4(this, "setPlan", id => {
       const plan = window.Pelcro.plan.getById(id);
       if (!plan) return console.error("invalid plan id");
       this.set({
@@ -9014,7 +9014,7 @@ class PelcroActions {
       });
     });
 
-    _defineProperty$3(this, "setSubscriptionToCancel", id => {
+    _defineProperty$4(this, "setSubscriptionToCancel", id => {
       var _window$Pelcro$subscr;
 
       const subscriptions = (_window$Pelcro$subscr = window.Pelcro.subscription.list()) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
@@ -9029,7 +9029,7 @@ class PelcroActions {
       });
     });
 
-    _defineProperty$3(this, "setSubscriptionToSuspend", id => {
+    _defineProperty$4(this, "setSubscriptionToSuspend", id => {
       var _window$Pelcro$subscr2;
 
       const subscriptions = (_window$Pelcro$subscr2 = window.Pelcro.subscription.list()) !== null && _window$Pelcro$subscr2 !== void 0 ? _window$Pelcro$subscr2 : [];
@@ -9044,7 +9044,7 @@ class PelcroActions {
       });
     });
 
-    _defineProperty$3(this, "setSubscriptionToManageMembers", id => {
+    _defineProperty$4(this, "setSubscriptionToManageMembers", id => {
       var _window$Pelcro$subscr3, _subscriptionToManage;
 
       const subscriptions = (_window$Pelcro$subscr3 = window.Pelcro.subscription.list()) !== null && _window$Pelcro$subscr3 !== void 0 ? _window$Pelcro$subscr3 : [];
@@ -9064,7 +9064,7 @@ class PelcroActions {
       return true;
     });
 
-    _defineProperty$3(this, "setInvoice", id => {
+    _defineProperty$4(this, "setInvoice", id => {
       var _window$Pelcro$invoic;
 
       const invoices = (_window$Pelcro$invoic = window.Pelcro.invoice.list()) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
@@ -9081,7 +9081,7 @@ class PelcroActions {
       return true;
     });
 
-    _defineProperty$3(this, "setSelectedMembership", id => {
+    _defineProperty$4(this, "setSelectedMembership", id => {
       var _window$Pelcro$user$r, _window$Pelcro$user$r2;
 
       const memberships = (_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.memberships) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
@@ -9098,14 +9098,14 @@ class PelcroActions {
       return true;
     });
 
-    _defineProperty$3(this, "setCouponCode", couponCode => {
+    _defineProperty$4(this, "setCouponCode", couponCode => {
       if (!couponCode) return console.error("invalid coupon code");
       this.set({
         couponCode
       });
     });
 
-    _defineProperty$3(this, "logout", (displayLogin = true) => {
+    _defineProperty$4(this, "logout", (displayLogin = true) => {
       var _window, _window$Pelcro, _window$Pelcro$uiSett;
 
       const {
@@ -9142,7 +9142,7 @@ class PelcroActions {
       }
     });
 
-    _defineProperty$3(this, "addToCart", itemSkuId => {
+    _defineProperty$4(this, "addToCart", itemSkuId => {
       const itemToAdd = window.Pelcro.ecommerce.products.getBySkuId(Number(itemSkuId));
 
       if (!itemToAdd) {
@@ -9184,7 +9184,7 @@ class PelcroActions {
       return true;
     });
 
-    _defineProperty$3(this, "removeFromCart", itemSkuId => {
+    _defineProperty$4(this, "removeFromCart", itemSkuId => {
       const {
         cartItems
       } = this.get();
@@ -9222,7 +9222,7 @@ class PelcroActions {
       return true;
     });
 
-    _defineProperty$3(this, "purchaseItem", itemSkuId => {
+    _defineProperty$4(this, "purchaseItem", itemSkuId => {
       const quickPurchaseItem = window.Pelcro.ecommerce.products.getBySkuId(Number(itemSkuId));
 
       if (!quickPurchaseItem) {
@@ -9258,7 +9258,7 @@ class PelcroActions {
       switchToAddressView();
     });
 
-    _defineProperty$3(this, "setPaymentMethodToEdit", id => {
+    _defineProperty$4(this, "setPaymentMethodToEdit", id => {
       window.Pelcro.paymentMethods.getPaymentMethod({
         auth_token: window.Pelcro.user.read().auth_token,
         payment_method_id: id
@@ -9276,7 +9276,7 @@ class PelcroActions {
       });
     });
 
-    _defineProperty$3(this, "setPaymentMethodToDelete", id => {
+    _defineProperty$4(this, "setPaymentMethodToDelete", id => {
       window.Pelcro.paymentMethods.getPaymentMethod({
         auth_token: window.Pelcro.user.read().auth_token,
         payment_method_id: id
@@ -9306,7 +9306,7 @@ class PelcroActions {
 
 class PelcroCallbacks {
   constructor() {
-    _defineProperty$3(this, "whenSiteReady", callback => {
+    _defineProperty$4(this, "whenSiteReady", callback => {
       var _window$Pelcro$site$r;
 
       if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.settings) {
@@ -9318,7 +9318,7 @@ class PelcroCallbacks {
       }
     });
 
-    _defineProperty$3(this, "whenUserReady", (callback, listenerOptions) => {
+    _defineProperty$4(this, "whenUserReady", (callback, listenerOptions) => {
       var _window$Pelcro$user$r;
 
       if ((_window$Pelcro$user$r = window.Pelcro.user.read()) !== null && _window$Pelcro$user$r !== void 0 && _window$Pelcro$user$r.id) {
@@ -9330,7 +9330,7 @@ class PelcroCallbacks {
       }
     });
 
-    _defineProperty$3(this, "whenEcommerceLoaded", callback => {
+    _defineProperty$4(this, "whenEcommerceLoaded", callback => {
       var _window$Pelcro$ecomme;
 
       if ((_window$Pelcro$ecomme = window.Pelcro.ecommerce.products.read()) !== null && _window$Pelcro$ecomme !== void 0 && _window$Pelcro$ecomme.length) {
@@ -9533,6 +9533,17 @@ const userHasAddress = () => {
   const addresses = (_window$Pelcro$user$r2 = (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.addresses) !== null && _window$Pelcro$user$r2 !== void 0 ? _window$Pelcro$user$r2 : [];
   return addresses.length > 0;
 };
+/** check wether or not the user have any billing addresses
+ * @return {boolean} true if the user have at least one billing address, false otherwise
+ */
+
+const userHasBillingAddress = () => {
+  var _window$Pelcro$user$r4, _window$Pelcro$user$r5;
+
+  const addresses = (_window$Pelcro$user$r4 = (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.addresses) !== null && _window$Pelcro$user$r4 !== void 0 ? _window$Pelcro$user$r4 : [];
+  const billingAddresses = addresses.filter(address => address.type == "billing");
+  return billingAddresses.length > 0;
+};
 const calcAndFormatItemsTotal = (items, currency) => {
   if (!Array.isArray(items)) return;
   let totalWithoutDividingBy100 = 0;
@@ -9573,9 +9584,9 @@ const isValidViewFromURL = viewID => {
     const queryParamEmail = window.Pelcro.helpers.getURLParameter("email");
 
     if (queryParamEmail && window.Pelcro.user.isAuthenticated()) {
-      var _window$Pelcro$user$r4;
+      var _window$Pelcro$user$r6;
 
-      if (queryParamEmail !== ((_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email)) {
+      if (queryParamEmail !== ((_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.email)) {
         console.error("email query parameter and user account email are different, url email query parameter must match user email if user is logged in");
         return false;
       }
@@ -9618,7 +9629,7 @@ const disableScroll = () => {
   }
 };
 const trackSubscriptionOnGA = () => {
-  var _window, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
+  var _window, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro$user$r7, _window$Pelcro$user$r8;
 
   const {
     product,
@@ -9640,7 +9651,7 @@ const trackSubscriptionOnGA = () => {
     return;
   }
 
-  const currencyCode = (_window$Pelcro$user$r5 = (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.currency) !== null && _window$Pelcro$user$r5 !== void 0 ? _window$Pelcro$user$r5 : plan.currency;
+  const currencyCode = (_window$Pelcro$user$r7 = (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.currency) !== null && _window$Pelcro$user$r7 !== void 0 ? _window$Pelcro$user$r7 : plan.currency;
 
   if (enableReactGA4) {
     ReactGA4.event("purchase", {
@@ -9694,9 +9705,9 @@ const trackSubscriptionOnGA = () => {
  */
 
 const userHasPaymentMethod = () => {
-  var _window$Pelcro$user$r7, _window$Pelcro$user$r8;
+  var _window$Pelcro$user$r9, _window$Pelcro$user$r10;
 
-  const sources = (_window$Pelcro$user$r7 = (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.sources) !== null && _window$Pelcro$user$r7 !== void 0 ? _window$Pelcro$user$r7 : [];
+  const sources = (_window$Pelcro$user$r9 = (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.sources) !== null && _window$Pelcro$user$r9 !== void 0 ? _window$Pelcro$user$r9 : [];
   return sources.length > 0;
 };
 /**
@@ -9747,6 +9758,14 @@ const getPaymentCardIcon = name => {
     }), /*#__PURE__*/React__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"
+    })),
+    bacs_debit: /*#__PURE__*/React__default.createElement("svg", {
+      className: "plc-w-12 plc-text-gray-500",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      fill: "currentColor",
+      d: "M243.4 2.6l-224 96c-14 6-21.8 21-18.7 35.8S16.8 160 32 160v8c0 13.3 10.7 24 24 24H456c13.3 0 24-10.7 24-24v-8c15.2 0 28.3-10.7 31.3-25.6s-4.8-29.9-18.7-35.8l-224-96c-8-3.4-17.2-3.4-25.2 0zM128 224H64V420.3c-.6 .3-1.2 .7-1.8 1.1l-48 32c-11.7 7.8-17 22.4-12.9 35.9S17.9 512 32 512H480c14.1 0 26.5-9.2 30.6-22.7s-1.1-28.1-12.9-35.9l-48-32c-.6-.4-1.2-.7-1.8-1.1V224H384V416H344V224H280V416H232V224H168V416H128V224zM256 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
     }))
   };
   return (_icons$name$toLowerCa = icons[name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default.createElement("svg", {
@@ -9774,10 +9793,10 @@ function getDateWithoutTime(dateObject) {
   return date;
 }
 function userMustVerifyEmail() {
-  var _window$Pelcro$site$r3, _window$Pelcro$site$r4, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
+  var _window$Pelcro$site$r3, _window$Pelcro$site$r4, _window$Pelcro$user$r11, _window$Pelcro$user$r12;
 
   const isEmailVerificationEnabled = (_window$Pelcro$site$r3 = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.email_verify_enabled) !== null && _window$Pelcro$site$r3 !== void 0 ? _window$Pelcro$site$r3 : false;
-  const isUserEmailVerified = (_window$Pelcro$user$r9 = (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.email_confirm) !== null && _window$Pelcro$user$r9 !== void 0 ? _window$Pelcro$user$r9 : false;
+  const isUserEmailVerified = (_window$Pelcro$user$r11 = (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.email_confirm) !== null && _window$Pelcro$user$r11 !== void 0 ? _window$Pelcro$user$r11 : false;
   return window.Pelcro.user.isAuthenticated() && isEmailVerificationEnabled && !isUserEmailVerified;
 }
 function notifyBugsnag(callback, startOptions) {
@@ -9986,13 +10005,13 @@ var _onClick = /*#__PURE__*/new WeakMap();
 
 class SaveToMetadataButtonClass {
   constructor() {
-    _defineProperty$3(this, "authenticated", () => {
+    _defineProperty$4(this, "authenticated", () => {
       _classPrivateFieldGet(this, _onClick).call(this, _classPrivateFieldGet(this, _saveToMetadata));
 
       _classPrivateFieldGet(this, _markAllSavedButtons).call(this);
     });
 
-    _defineProperty$3(this, "unauthenticated", () => {
+    _defineProperty$4(this, "unauthenticated", () => {
       const {
         switchView
       } = usePelcro.getStore();
@@ -11086,6 +11105,9 @@ const Notification = ({
 }) => {
   return /*#__PURE__*/React__default.createElement(Toaster, Object.assign({
     containerClassName: "pelcro-notification-container",
+    containerStyle: {
+      zIndex: 9999999
+    },
     toastOptions: {
       success: {
         className: "pelcro-notification-success",
@@ -11169,10 +11191,10 @@ toast.confirm = (onConfirm, {
     className: "plc-space-y-2 sm:plc-space-y-0 sm:plc-space-x-2"
   }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "solid",
-    className: "plc-text-xs plc-bg-red-500 hover:plc-bg-red-600",
+    className: "plc-text-xs plc-bg-red-500 hover:plc-bg-red-600 plc-min-h-0",
     onClick: onConfirmClick
   }, confirmButtonLabel !== null && confirmButtonLabel !== void 0 ? confirmButtonLabel : translations.labels.confirm), /*#__PURE__*/React__default.createElement(Button, {
-    className: "plc-text-xs",
+    className: "plc-text-xs plc-min-h-0",
     variant: "outline",
     onClick: () => toast.dismiss(t.id)
   }, closeButtonLabel !== null && closeButtonLabel !== void 0 ? closeButtonLabel : translations.labels.close))), {
@@ -11659,175 +11681,6 @@ function shouldBlurContent(entitlements) {
   return entitlements.every(entitlement => !window.Pelcro.user.isEntitledTo(entitlement));
 }
 
-var pure$1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
-var V3_URL = 'https://js.stripe.com/v3';
-var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
-var EXISTING_SCRIPT_MESSAGE = 'loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used';
-var findScript = function findScript() {
-  var scripts = document.querySelectorAll("script[src^=\"".concat(V3_URL, "\"]"));
-
-  for (var i = 0; i < scripts.length; i++) {
-    var script = scripts[i];
-
-    if (!V3_URL_REGEX.test(script.src)) {
-      continue;
-    }
-
-    return script;
-  }
-
-  return null;
-};
-
-var injectScript = function injectScript(params) {
-  var queryString = params && !params.advancedFraudSignals ? '?advancedFraudSignals=false' : '';
-  var script = document.createElement('script');
-  script.src = "".concat(V3_URL).concat(queryString);
-  var headOrBody = document.head || document.body;
-
-  if (!headOrBody) {
-    throw new Error('Expected document.body not to be null. Stripe.js requires a <body> element.');
-  }
-
-  headOrBody.appendChild(script);
-  return script;
-};
-
-var registerWrapper = function registerWrapper(stripe, startTime) {
-  if (!stripe || !stripe._registerWrapper) {
-    return;
-  }
-
-  stripe._registerWrapper({
-    name: 'stripe-js',
-    version: "1.21.1",
-    startTime: startTime
-  });
-};
-
-var stripePromise = null;
-var loadScript = function loadScript(params) {
-  // Ensure that we only attempt to load Stripe.js at most once
-  if (stripePromise !== null) {
-    return stripePromise;
-  }
-
-  stripePromise = new Promise(function (resolve, reject) {
-    if (typeof window === 'undefined') {
-      // Resolve to null when imported server side. This makes the module
-      // safe to import in an isomorphic code base.
-      resolve(null);
-      return;
-    }
-
-    if (window.Stripe && params) {
-      console.warn(EXISTING_SCRIPT_MESSAGE);
-    }
-
-    if (window.Stripe) {
-      resolve(window.Stripe);
-      return;
-    }
-
-    try {
-      var script = findScript();
-
-      if (script && params) {
-        console.warn(EXISTING_SCRIPT_MESSAGE);
-      } else if (!script) {
-        script = injectScript(params);
-      }
-
-      script.addEventListener('load', function () {
-        if (window.Stripe) {
-          resolve(window.Stripe);
-        } else {
-          reject(new Error('Stripe.js not available'));
-        }
-      });
-      script.addEventListener('error', function () {
-        reject(new Error('Failed to load Stripe.js'));
-      });
-    } catch (error) {
-      reject(error);
-      return;
-    }
-  });
-  return stripePromise;
-};
-var initStripe = function initStripe(maybeStripe, args, startTime) {
-  if (maybeStripe === null) {
-    return null;
-  }
-
-  var stripe = maybeStripe.apply(undefined, args);
-  registerWrapper(stripe, startTime);
-  return stripe;
-};
-var validateLoadParams = function validateLoadParams(params) {
-  var errorMessage = "invalid load parameters; expected object of shape\n\n    {advancedFraudSignals: boolean}\n\nbut received\n\n    ".concat(JSON.stringify(params), "\n");
-
-  if (params === null || _typeof(params) !== 'object') {
-    throw new Error(errorMessage);
-  }
-
-  if (Object.keys(params).length === 1 && typeof params.advancedFraudSignals === 'boolean') {
-    return params;
-  }
-
-  throw new Error(errorMessage);
-};
-
-var loadParams;
-var loadStripeCalled = false;
-var loadStripe = function loadStripe() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  loadStripeCalled = true;
-  var startTime = Date.now();
-  return loadScript(loadParams).then(function (maybeStripe) {
-    return initStripe(maybeStripe, args, startTime);
-  });
-};
-
-loadStripe.setLoadParameters = function (params) {
-  if (loadStripeCalled) {
-    throw new Error('You cannot change load parameters after calling loadStripe');
-  }
-
-  loadParams = validateLoadParams(params);
-};
-
-exports.loadStripe = loadStripe;
-});
-
-unwrapExports(pure$1);
-pure$1.loadStripe;
-
-var pure = pure$1;
-var pure_1 = pure.loadStripe;
-
 /**
  * Extracts error message from the response error object
  * @param {Object} error Error object
@@ -12006,16 +11859,14 @@ const initPaywalls = () => {
 };
 const loadPaymentSDKs = () => {
   // Lazy load stripe's SDK
-  const {
-    whenUserReady
-  } = usePelcro.getStore();
+  // const { whenUserReady } = usePelcro.getStore();
   const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
-  const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
-  whenUserReady(() => {
-    if (!window.Stripe && !supportsVantiv && !supportsTap) {
-      pure_1(window.Pelcro.environment.stripe);
-    }
-  });
+  const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings); // whenUserReady(() => {
+  //   if (!window.Stripe && !supportsVantiv && !supportsTap) {
+  //     loadStripe(window.Pelcro.environment.stripe);
+  //   }
+  // });
+
   window.Pelcro.helpers.loadSDK("https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js", "apple-pay-sdk"); // Load PayPal SDKs
 
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
@@ -19894,7 +19745,7 @@ class SelectModal extends Component {
 
     super(props);
 
-    _defineProperty$3(this, "componentDidMount", () => {
+    _defineProperty$4(this, "componentDidMount", () => {
       if (this.props.product) {
         const {
           product
@@ -19979,15 +19830,15 @@ class SelectModal extends Component {
       }
     });
 
-    _defineProperty$3(this, "componentWillUnmount", () => {
+    _defineProperty$4(this, "componentWillUnmount", () => {
       document.removeEventListener("keydown", this.handleSubmit);
     });
 
-    _defineProperty$3(this, "handleSubmit", e => {
+    _defineProperty$4(this, "handleSubmit", e => {
       if (e.key === "Enter" && !this.state.disabled) this.submitOption();
     });
 
-    _defineProperty$3(this, "onProductChange", e => {
+    _defineProperty$4(this, "onProductChange", e => {
       const product = window.Pelcro.product.list()[e.target.selectedIndex];
       this.setState({
         product: product,
@@ -19995,19 +19846,19 @@ class SelectModal extends Component {
       });
     });
 
-    _defineProperty$3(this, "onPlanChange", e => {
+    _defineProperty$4(this, "onPlanChange", e => {
       this.setState({
         plan: this.state.product.plans[e.target.selectedIndex]
       });
     });
 
-    _defineProperty$3(this, "onIsGiftChange", e => {
+    _defineProperty$4(this, "onIsGiftChange", e => {
       this.setState({
         isGift: e.target.checked
       });
     });
 
-    _defineProperty$3(this, "countStartPrice", arr => {
+    _defineProperty$4(this, "countStartPrice", arr => {
       let startingPlan = arr[0];
 
       for (const plan of arr) {
@@ -20025,7 +19876,7 @@ class SelectModal extends Component {
       }, "/", " ", startingPlan.interval_count > 1 ? `${startingPlan.interval_count} ${startingPlan.interval_translated}` : `${startingPlan.interval_translated}`));
     });
 
-    _defineProperty$3(this, "renderOneProduct", (product, index, options) => {
+    _defineProperty$4(this, "renderOneProduct", (product, index, options) => {
       var _product$description, _product$description2;
 
       const isPlanMode = Boolean(this.state.mode === "plan");
@@ -20091,7 +19942,7 @@ class SelectModal extends Component {
       }, productButtonLabel)));
     });
 
-    _defineProperty$3(this, "renderProducts", () => {
+    _defineProperty$4(this, "renderProducts", () => {
       const isPlanMode = Boolean(this.state.mode === "plan");
 
       if (isPlanMode) {
@@ -20107,21 +19958,21 @@ class SelectModal extends Component {
       }, items);
     });
 
-    _defineProperty$3(this, "handleScrollLeft", () => {
+    _defineProperty$4(this, "handleScrollLeft", () => {
       this.productsTabRef.current.scrollLeft -= 100; // Adjust the scroll value as needed
     });
 
-    _defineProperty$3(this, "handleScrollRight", () => {
+    _defineProperty$4(this, "handleScrollRight", () => {
       this.productsTabRef.current.scrollLeft += 100; // Adjust the scroll value as needed
     });
 
-    _defineProperty$3(this, "toggleProdDescExpanded", () => {
+    _defineProperty$4(this, "toggleProdDescExpanded", () => {
       this.setState({
         prodDescExpanded: !this.state.prodDescExpanded
       });
     });
 
-    _defineProperty$3(this, "renderProductTabs", () => {
+    _defineProperty$4(this, "renderProductTabs", () => {
       const {
         prodDescExpanded
       } = this.state;
@@ -20178,7 +20029,7 @@ class SelectModal extends Component {
       }, "Read more"))))));
     });
 
-    _defineProperty$3(this, "renderMatchingProductsFirst", () => {
+    _defineProperty$4(this, "renderMatchingProductsFirst", () => {
       const isPlanMode = Boolean(this.state.mode === "plan");
 
       if (isPlanMode) {
@@ -20202,7 +20053,7 @@ class SelectModal extends Component {
       }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
     });
 
-    _defineProperty$3(this, "renderPlans", () => {
+    _defineProperty$4(this, "renderPlans", () => {
       const {
         disableGifting
       } = this.props;
@@ -20252,7 +20103,7 @@ class SelectModal extends Component {
       }, items);
     });
 
-    _defineProperty$3(this, "selectProduct", e => {
+    _defineProperty$4(this, "selectProduct", e => {
       const id = e.target.dataset.key;
 
       for (const product of this.state.productList) {
@@ -20279,7 +20130,7 @@ class SelectModal extends Component {
       }
     });
 
-    _defineProperty$3(this, "selectPlan", (e, isGift) => {
+    _defineProperty$4(this, "selectPlan", (e, isGift) => {
       const id = e.target.dataset.key;
 
       for (const plan of this.state.planList) {
@@ -20294,7 +20145,7 @@ class SelectModal extends Component {
       }
     });
 
-    _defineProperty$3(this, "goBack", () => {
+    _defineProperty$4(this, "goBack", () => {
       this.setState({
         disabled: true,
         mode: "product",
@@ -20302,7 +20153,7 @@ class SelectModal extends Component {
       });
     });
 
-    _defineProperty$3(this, "submitOption", (product, isGift) => {
+    _defineProperty$4(this, "submitOption", (product, isGift) => {
       const {
         setView
       } = this.props;
@@ -20327,7 +20178,7 @@ class SelectModal extends Component {
       return switchToPaymentView();
     });
 
-    _defineProperty$3(this, "displayLoginView", () => {
+    _defineProperty$4(this, "displayLoginView", () => {
       this.props.setView("login");
     });
 
@@ -20413,1143 +20264,975 @@ class SelectModal extends Component {
 
 const SelectModalWithTrans = withTranslation("select")(SelectModal);
 
-var Provider_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.providerContextTypes = undefined;
-
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
 
-var _react2 = _interopRequireDefault(React__default);
-
-
-
-var _propTypes2 = _interopRequireDefault(PropTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+    keys.push.apply(keys, symbols);
+  }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  return keys;
+}
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
 
-// TODO(jez) 'sync' and 'async' are bad tag names.
-// TODO(jez) What if redux also uses this.context.tag?
-var providerContextTypes = exports.providerContextTypes = {
-  tag: _propTypes2.default.string.isRequired,
-  stripe: _propTypes2.default.object,
-  addStripeLoadListener: _propTypes2.default.func
-};
+  return target;
+}
 
-var getOrCreateStripe = function getOrCreateStripe(apiKey, options) {
-  /**
-   * Note that this is not meant to be a generic memoization solution.
-   * This is specifically a solution for `StripeProvider`s being initialized
-   * and destroyed regularly (with the same set of props) when users only
-   * use `StripeProvider` for the subtree that contains their checkout form.
-   */
-  window.Stripe.__cachedInstances = window.Stripe.__cachedInstances || {};
-  var cacheKey = 'key=' + apiKey + ' options=' + JSON.stringify(options);
+function _typeof(obj) {
+  "@babel/helpers - typeof";
 
-  var stripe = window.Stripe.__cachedInstances[cacheKey] || window.Stripe(apiKey, options);
-  window.Stripe.__cachedInstances[cacheKey] = stripe;
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
 
-  return stripe;
-};
+  return _typeof(obj);
+}
 
-var ensureStripeShape = function ensureStripeShape(stripe) {
-  if (stripe && stripe.elements && stripe.createSource && stripe.createToken && stripe.createPaymentMethod && stripe.handleCardPayment) {
-    return stripe;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
   } else {
-    throw new Error("Please pass a valid Stripe object to StripeProvider. You can obtain a Stripe object by calling 'Stripe(...)' with your publishable key.");
+    obj[key] = value;
   }
-};
 
-var Provider = function (_React$Component) {
-  _inherits(Provider, _React$Component);
+  return obj;
+}
 
-  // on the other hand: childContextTypes is *required* to use context.
-  function Provider(props) {
-    _classCallCheck(this, Provider);
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
+}
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-    if (_this.props.apiKey && _this.props.stripe) {
-      throw new Error("Please pass either 'apiKey' or 'stripe' to StripeProvider, not both.");
-    } else if (_this.props.apiKey) {
-      if (!window.Stripe) {
-        throw new Error("Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements. If Stripe.js isn't available yet (it's loading asynchronously, or you're using server-side rendering), see https://github.com/stripe/react-stripe-elements#advanced-integrations");
-      } else {
-        var _this$props = _this.props,
-            _apiKey = _this$props.apiKey;
-            _this$props.children;
-            var options = _objectWithoutProperties(_this$props, ['apiKey', 'children']);
-
-        var _stripe = getOrCreateStripe(_apiKey, options);
-        _this._meta = { tag: 'sync', stripe: _stripe };
-        _this._register();
-      }
-    } else if (_this.props.stripe) {
-      // If we already have a stripe instance (in the constructor), we can behave synchronously.
-      var _stripe2 = ensureStripeShape(_this.props.stripe);
-      _this._meta = { tag: 'sync', stripe: _stripe2 };
-      _this._register();
-    } else if (_this.props.stripe === null) {
-      _this._meta = {
-        tag: 'async',
-        stripe: null
-      };
-    } else {
-      throw new Error("Please pass either 'apiKey' or 'stripe' to StripeProvider. If you're using 'stripe' but don't have a Stripe instance yet, pass 'null' explicitly.");
-    }
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
 
-    _this._didWarn = false;
-    _this._didWakeUpListeners = false;
-    _this._listeners = [];
-    return _this;
-  }
-  // Even though we're using flow, also use PropTypes so we can take advantage of developer warnings.
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
 
+  var _s, _e;
 
-  Provider.prototype.getChildContext = function getChildContext() {
-    var _this2 = this;
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
-    // getChildContext is run after the constructor, so we WILL have access to
-    // the initial state.
-    //
-    // However, context doesn't update in respnse to state changes like you
-    // might expect: context is pulled by the child, not pushed by the parent.
-    if (this._meta.tag === 'sync') {
-      return {
-        tag: 'sync',
-        stripe: this._meta.stripe
-      };
-    } else {
-      return {
-        tag: 'async',
-        addStripeLoadListener: function addStripeLoadListener(fn) {
-          if (_this2._meta.stripe) {
-            fn(_this2._meta.stripe);
-          } else {
-            _this2._listeners.push(fn);
-          }
-        }
-      };
+      if (i && _arr.length === i) break;
     }
-  };
-
-  Provider.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var apiKeyChanged = this.props.apiKey && prevProps.apiKey && this.props.apiKey !== prevProps.apiKey;
-
-    var stripeInstanceChanged = this.props.stripe && prevProps.stripe && this.props.stripe !== prevProps.stripe;
-    if (!this._didWarn && (apiKeyChanged || stripeInstanceChanged) && window.console && window.console.error) {
-      this._didWarn = true;
-      // eslint-disable-next-line no-console
-      console.error('StripeProvider does not support changing the apiKey parameter.');
-      return;
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
     }
+  }
 
-    if (!this._didWakeUpListeners && this.props.stripe) {
-      // Wake up the listeners if we've finally been given a StripeShape
-      this._didWakeUpListeners = true;
-      var _stripe3 = ensureStripeShape(this.props.stripe);
-      this._meta.stripe = _stripe3;
-      this._register();
-      this._listeners.forEach(function (fn) {
-        fn(_stripe3);
-      });
-    }
-  };
+  return _arr;
+}
 
-  Provider.prototype._register = function _register() {
-    var stripe = this._meta.stripe;
+function _unsupportedIterableToArray$1(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+}
 
+function _arrayLikeToArray$1(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
 
-    if (!stripe || !stripe._registerWrapper) {
-      return;
-    }
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
 
-    stripe._registerWrapper({
-      name: 'react-stripe-elements',
-      version: '6.1.2' 
-    });
-  };
+  return arr2;
+}
 
-  Provider.prototype.render = function render() {
-    return _react2.default.Children.only(this.props.children);
-  };
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
-  return Provider;
-}(_react2.default.Component);
+var usePrevious = function usePrevious(value) {
+  var ref = React__default.useRef(value);
+  React__default.useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
 
-Provider.propTypes = {
-  apiKey: _propTypes2.default.string,
-  // PropTypes.object is the only way we can accept a Stripe instance
-  // eslint-disable-next-line react/forbid-prop-types
-  stripe: _propTypes2.default.object,
-  children: _propTypes2.default.node
+var isUnknownObject = function isUnknownObject(raw) {
+  return raw !== null && _typeof(raw) === 'object';
 };
-Provider.childContextTypes = providerContextTypes;
-Provider.defaultProps = {
-  apiKey: undefined,
-  stripe: undefined,
-  children: null
+var isPromise = function isPromise(raw) {
+  return isUnknownObject(raw) && typeof raw.then === 'function';
+}; // We are using types to enforce the `stripe` prop in this lib,
+// but in an untyped integration `stripe` could be anything, so we need
+// to do some sanity validation to prevent type errors.
+
+var isStripe = function isStripe(raw) {
+  return isUnknownObject(raw) && typeof raw.elements === 'function' && typeof raw.createToken === 'function' && typeof raw.createPaymentMethod === 'function' && typeof raw.confirmCardPayment === 'function';
 };
-exports.default = Provider;
-});
 
-unwrapExports(Provider_1);
-Provider_1.providerContextTypes;
+var PLAIN_OBJECT_STR = '[object Object]';
+var isEqual = function isEqual(left, right) {
+  if (!isUnknownObject(left) || !isUnknownObject(right)) {
+    return left === right;
+  }
 
-var Elements_1 = createCommonjsModule(function (module, exports) {
+  var leftArray = Array.isArray(left);
+  var rightArray = Array.isArray(right);
+  if (leftArray !== rightArray) return false;
+  var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
+  var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
+  if (leftPlainObject !== rightPlainObject) return false; // not sure what sort of special object this is (regexp is one option), so
+  // fallback to reference check.
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.elementContextTypes = exports.injectContextTypes = undefined;
+  if (!leftPlainObject && !leftArray) return left === right;
+  var leftKeys = Object.keys(left);
+  var rightKeys = Object.keys(right);
+  if (leftKeys.length !== rightKeys.length) return false;
+  var keySet = {};
 
-var _extends = Object.assign || 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; };
+  for (var i = 0; i < leftKeys.length; i += 1) {
+    keySet[leftKeys[i]] = true;
+  }
 
+  for (var _i = 0; _i < rightKeys.length; _i += 1) {
+    keySet[rightKeys[_i]] = true;
+  }
 
+  var allKeys = Object.keys(keySet);
 
-var _react2 = _interopRequireDefault(React__default);
+  if (allKeys.length !== leftKeys.length) {
+    return false;
+  }
 
+  var l = left;
+  var r = right;
 
+  var pred = function pred(key) {
+    return isEqual(l[key], r[key]);
+  };
 
-var _propTypes2 = _interopRequireDefault(PropTypes);
+  return allKeys.every(pred);
+};
 
+var extractAllowedOptionsUpdates = function extractAllowedOptionsUpdates(options, prevOptions, immutableKeys) {
+  if (!isUnknownObject(options)) {
+    return null;
+  }
 
+  return Object.keys(options).reduce(function (newOptions, key) {
+    var isUpdated = !isUnknownObject(prevOptions) || !isEqual(options[key], prevOptions[key]);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    if (immutableKeys.includes(key)) {
+      if (isUpdated) {
+        console.warn("Unsupported prop change: options.".concat(key, " is not a mutable property."));
+      }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+      return newOptions;
+    }
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+    if (!isUpdated) {
+      return newOptions;
+    }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+    return _objectSpread2(_objectSpread2({}, newOptions || {}), {}, _defineProperty({}, key, options[key]));
+  }, null);
+};
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var INVALID_STRIPE_ERROR = 'Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.'; // We are using types to enforce the `stripe` prop in this lib, but in a real
+// integration `stripe` could be anything, so we need to do some sanity
+// validation to prevent type errors.
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var validateStripe = function validateStripe(maybeStripe) {
+  var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
 
-var injectContextTypes = exports.injectContextTypes = {
-  getRegisteredElements: _propTypes2.default.func.isRequired,
-  elements: _propTypes2.default.object
-};
+  if (maybeStripe === null || isStripe(maybeStripe)) {
+    return maybeStripe;
+  }
 
-var elementContextTypes = exports.elementContextTypes = {
-  addElementsLoadListener: _propTypes2.default.func.isRequired,
-  registerElement: _propTypes2.default.func.isRequired,
-  unregisterElement: _propTypes2.default.func.isRequired
+  throw new Error(errorMsg);
 };
 
-var Elements = function (_React$Component) {
-  _inherits(Elements, _React$Component);
-
-  function Elements(props, context) {
-    _classCallCheck(this, Elements);
+var parseStripeProp = function parseStripeProp(raw) {
+  var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
+  if (isPromise(raw)) {
+    return {
+      tag: 'async',
+      stripePromise: Promise.resolve(raw).then(function (result) {
+        return validateStripe(result, errorMsg);
+      })
+    };
+  }
 
-    _this._elements = null;
+  var stripe = validateStripe(raw, errorMsg);
 
-    _this.handleRegisterElement = function (element, impliedTokenType, impliedSourceType, impliedPaymentMethodType) {
-      _this.setState(function (prevState) {
-        return {
-          registeredElements: [].concat(_toConsumableArray(prevState.registeredElements), [_extends({
-            element: element
-          }, impliedTokenType ? { impliedTokenType: impliedTokenType } : {}, impliedSourceType ? { impliedSourceType: impliedSourceType } : {}, impliedPaymentMethodType ? { impliedPaymentMethodType: impliedPaymentMethodType } : {})])
-        };
-      });
+  if (stripe === null) {
+    return {
+      tag: 'empty'
     };
+  }
 
-    _this.handleUnregisterElement = function (el) {
-      _this.setState(function (prevState) {
-        return {
-          registeredElements: prevState.registeredElements.filter(function (_ref) {
-            var element = _ref.element;
-            return element !== el;
-          })
-        };
-      });
-    };
+  return {
+    tag: 'sync',
+    stripe: stripe
+  };
+};
 
-    var _this$props = _this.props;
-        _this$props.children;
-        var options = _objectWithoutProperties(_this$props, ['children']);
+var registerWithStripeJs = function registerWithStripeJs(stripe) {
+  if (!stripe || !stripe._registerWrapper || !stripe.registerAppInfo) {
+    return;
+  }
 
-    if (_this.context.tag === 'sync') {
-      _this._elements = _this.context.stripe.elements(options);
-    }
+  stripe._registerWrapper({
+    name: 'react-stripe-js',
+    version: "2.5.0"
+  });
 
-    _this.state = {
-      registeredElements: []
-    };
-    return _this;
+  stripe.registerAppInfo({
+    name: 'react-stripe-js',
+    version: "2.5.0",
+    url: 'https://stripe.com/docs/stripe-js/react'
+  });
+};
+var CustomCheckoutSdkContext = /*#__PURE__*/React__default.createContext(null);
+CustomCheckoutSdkContext.displayName = 'CustomCheckoutSdkContext';
+var parseCustomCheckoutSdkContext = function parseCustomCheckoutSdkContext(ctx, useCase) {
+  if (!ctx) {
+    throw new Error("Could not find CustomCheckoutProvider context; You need to wrap the part of your app that ".concat(useCase, " in an <CustomCheckoutProvider> provider."));
   }
 
-  Elements.prototype.getChildContext = function getChildContext() {
-    var _this2 = this;
+  return ctx;
+};
+var CustomCheckoutContext = /*#__PURE__*/React__default.createContext(null);
+CustomCheckoutContext.displayName = 'CustomCheckoutContext';
+({
+  stripe: PropTypes.any,
+  options: PropTypes.shape({
+    clientSecret: PropTypes.string.isRequired,
+    elementsOptions: PropTypes.object
+  }).isRequired
+});
+var useElementsOrCustomCheckoutSdkContextWithUseCase = function useElementsOrCustomCheckoutSdkContextWithUseCase(useCaseString) {
+  var customCheckoutSdkContext = React__default.useContext(CustomCheckoutSdkContext);
+  var elementsContext = React__default.useContext(ElementsContext);
 
-    return {
-      addElementsLoadListener: function addElementsLoadListener(fn) {
-        // Return the existing elements instance if we already have one.
-        if (_this2.context.tag === 'sync') {
-          // This is impossible, but we need to make flow happy.
-          if (!_this2._elements) {
-            throw new Error('Expected elements to be instantiated but it was not.');
-          }
+  if (customCheckoutSdkContext && elementsContext) {
+    throw new Error("You cannot wrap the part of your app that ".concat(useCaseString, " in both <CustomCheckoutProvider> and <Elements> providers."));
+  }
 
-          fn(_this2._elements);
-        } else {
-          _this2.context.addStripeLoadListener(function (stripe) {
-            if (_this2._elements) {
-              fn(_this2._elements);
-            } else {
-              var _props = _this2.props;
-                  _props.children;
-                  var options = _objectWithoutProperties(_props, ['children']);
+  if (customCheckoutSdkContext) {
+    return parseCustomCheckoutSdkContext(customCheckoutSdkContext, useCaseString);
+  }
 
-              _this2._elements = stripe.elements(options);
-              fn(_this2._elements);
-            }
-          });
-        }
-      },
-      registerElement: this.handleRegisterElement,
-      unregisterElement: this.handleUnregisterElement,
-      getRegisteredElements: function getRegisteredElements() {
-        return _this2.state.registeredElements;
-      },
-      elements: this._elements
-    };
-  };
+  return parseElementsContext(elementsContext, useCaseString);
+};
 
-  Elements.prototype.render = function render() {
-    return _react2.default.Children.only(this.props.children);
-  };
+var ElementsContext = /*#__PURE__*/React__default.createContext(null);
+ElementsContext.displayName = 'ElementsContext';
+var parseElementsContext = function parseElementsContext(ctx, useCase) {
+  if (!ctx) {
+    throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
+  }
 
-  return Elements;
-}(_react2.default.Component);
+  return ctx;
+};
+var CartElementContext = /*#__PURE__*/React__default.createContext(null);
+CartElementContext.displayName = 'CartElementContext';
+var parseCartElementContext = function parseCartElementContext(ctx, useCase) {
+  if (!ctx) {
+    throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
+  }
 
-Elements.childContextTypes = _extends({}, injectContextTypes, elementContextTypes);
-Elements.contextTypes = Provider_1.providerContextTypes;
-Elements.defaultProps = {
-  children: null
+  return ctx;
 };
-exports.default = Elements;
-});
+/**
+ * The `Elements` provider allows you to use [Element components](https://stripe.com/docs/stripe-js/react#element-components) and access the [Stripe object](https://stripe.com/docs/js/initializing) in any nested component.
+ * Render an `Elements` provider at the root of your React app so that it is available everywhere you need it.
+ *
+ * To use the `Elements` provider, call `loadStripe` from `@stripe/stripe-js` with your publishable key.
+ * The `loadStripe` function will asynchronously load the Stripe.js script and initialize a `Stripe` object.
+ * Pass the returned `Promise` to `Elements`.
+ *
+ * @docs https://stripe.com/docs/stripe-js/react#elements-provider
+ */
 
-unwrapExports(Elements_1);
-Elements_1.elementContextTypes;
-Elements_1.injectContextTypes;
+var Elements = function Elements(_ref) {
+  var rawStripeProp = _ref.stripe,
+      options = _ref.options,
+      children = _ref.children;
+  var parsed = React__default.useMemo(function () {
+    return parseStripeProp(rawStripeProp);
+  }, [rawStripeProp]);
 
-var inject_1 = createCommonjsModule(function (module, exports) {
+  var _React$useState = React__default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      cart = _React$useState2[0],
+      setCart = _React$useState2[1];
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+  var _React$useState3 = React__default.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      cartState = _React$useState4[0],
+      setCartState = _React$useState4[1]; // For a sync stripe instance, initialize into context
 
-var _extends = Object.assign || 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; };
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+  var _React$useState5 = React__default.useState(function () {
+    return {
+      stripe: parsed.tag === 'sync' ? parsed.stripe : null,
+      elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null
+    };
+  }),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      ctx = _React$useState6[0],
+      setContext = _React$useState6[1];
 
+  React__default.useEffect(function () {
+    var isMounted = true;
 
+    var safeSetContext = function safeSetContext(stripe) {
+      setContext(function (ctx) {
+        // no-op if we already have a stripe instance (https://github.com/stripe/react-stripe-js/issues/296)
+        if (ctx.stripe) return ctx;
+        return {
+          stripe: stripe,
+          elements: stripe.elements(options)
+        };
+      });
+    }; // For an async stripePromise, store it in context once resolved
 
-var _react2 = _interopRequireDefault(React__default);
 
+    if (parsed.tag === 'async' && !ctx.stripe) {
+      parsed.stripePromise.then(function (stripe) {
+        if (stripe && isMounted) {
+          // Only update Elements context if the component is still mounted
+          // and stripe is not null. We allow stripe to be null to make
+          // handling SSR easier.
+          safeSetContext(stripe);
+        }
+      });
+    } else if (parsed.tag === 'sync' && !ctx.stripe) {
+      // Or, handle a sync stripe instance going from null -> populated
+      safeSetContext(parsed.stripe);
+    }
+
+    return function () {
+      isMounted = false;
+    };
+  }, [parsed, ctx, options]); // Warn on changes to stripe prop
 
+  var prevStripe = usePrevious(rawStripeProp);
+  React__default.useEffect(function () {
+    if (prevStripe !== null && prevStripe !== rawStripeProp) {
+      console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
+    }
+  }, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes
 
+  var prevOptions = usePrevious(options);
+  React__default.useEffect(function () {
+    if (!ctx.elements) {
+      return;
+    }
 
+    var updates = extractAllowedOptionsUpdates(options, prevOptions, ['clientSecret', 'fonts']);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    if (updates) {
+      ctx.elements.update(updates);
+    }
+  }, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+  React__default.useEffect(function () {
+    registerWithStripeJs(ctx.stripe);
+  }, [ctx.stripe]);
+  return /*#__PURE__*/React__default.createElement(ElementsContext.Provider, {
+    value: ctx
+  }, /*#__PURE__*/React__default.createElement(CartElementContext.Provider, {
+    value: {
+      cart: cart,
+      setCart: setCart,
+      cartState: cartState,
+      setCartState: setCartState
+    }
+  }, children));
+};
+Elements.propTypes = {
+  stripe: PropTypes.any,
+  options: PropTypes.object
+};
+var useElementsContextWithUseCase = function useElementsContextWithUseCase(useCaseMessage) {
+  var ctx = React__default.useContext(ElementsContext);
+  return parseElementsContext(ctx, useCaseMessage);
+};
+var DUMMY_CART_ELEMENT_CONTEXT = {
+  cart: null,
+  cartState: null,
+  setCart: function setCart() {},
+  setCartState: function setCartState() {}
+};
+var useCartElementContextWithUseCase = function useCartElementContextWithUseCase(useCaseMessage) {
+  var isInCustomCheckout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var ctx = React__default.useContext(CartElementContext);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  if (isInCustomCheckout) {
+    return DUMMY_CART_ELEMENT_CONTEXT;
+  }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  return parseCartElementContext(ctx, useCaseMessage);
+};
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#useelements-hook
+ */
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var useElements = function useElements() {
+  var _useElementsContextWi = useElementsContextWithUseCase('calls useElements()'),
+      elements = _useElementsContextWi.elements;
 
-// react-redux does a bunch of stuff with pure components / checking if it needs to re-render.
-// not sure if we need to do the same.
-var inject = function inject(WrappedComponent) {
-  var _class, _temp;
+  return elements;
+};
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#usestripe-hook
+ */
 
-  var componentOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _componentOptions$wit = componentOptions.withRef,
-      withRef = _componentOptions$wit === undefined ? false : _componentOptions$wit;
+var useStripe = function useStripe() {
+  var _useElementsOrCustomC = useElementsOrCustomCheckoutSdkContextWithUseCase('calls useStripe()'),
+      stripe = _useElementsOrCustomC.stripe;
 
+  return stripe;
+};
+({
+  children: PropTypes.func.isRequired
+});
 
-  return _temp = _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
+var useAttachEvent = function useAttachEvent(element, event, cb) {
+  var cbDefined = !!cb;
+  var cbRef = React__default.useRef(cb); // In many integrations the callback prop changes on each render.
+  // Using a ref saves us from calling element.on/.off every render.
 
-    function _class(props, context) {
-      _classCallCheck(this, _class);
+  React__default.useEffect(function () {
+    cbRef.current = cb;
+  }, [cb]);
+  React__default.useEffect(function () {
+    if (!cbDefined || !element) {
+      return function () {};
+    }
 
-      if (!context || !context.getRegisteredElements) {
-        throw new Error('It looks like you are trying to inject Stripe context outside of an Elements context.\nPlease be sure the component that calls createSource or createToken is within an <Elements> component.');
+    var decoratedCb = function decoratedCb() {
+      if (cbRef.current) {
+        cbRef.current.apply(cbRef, arguments);
       }
+    };
 
-      var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
-
-      _this.parseElementOrData = function (elementOrOptions) {
-        return elementOrOptions && (typeof elementOrOptions === 'undefined' ? 'undefined' : _typeof(elementOrOptions)) === 'object' && elementOrOptions._frame && _typeof(elementOrOptions._frame) === 'object' && elementOrOptions._frame.id && typeof elementOrOptions._frame.id === 'string' && typeof elementOrOptions._componentName === 'string' ? { type: 'element', element: elementOrOptions } : { type: 'data', data: elementOrOptions };
-      };
+    element.on(event, decoratedCb);
+    return function () {
+      element.off(event, decoratedCb);
+    };
+  }, [cbDefined, event, element, cbRef]);
+};
 
-      _this.findElement = function (filterBy, specifiedType) {
-        var allElements = _this.context.getRegisteredElements();
-        var filteredElements = allElements.filter(function (e) {
-          return e[filterBy];
-        });
-        var matchingElements = specifiedType === 'auto' ? filteredElements : filteredElements.filter(function (e) {
-          return e[filterBy] === specifiedType;
-        });
+var capitalized = function capitalized(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
 
-        if (matchingElements.length === 1) {
-          return matchingElements[0].element;
-        } else if (matchingElements.length > 1) {
-          throw new Error('You did not specify the type of Source, Token, or PaymentMethod to create.\n        We could not infer which Element you want to use for this operation.');
-        } else {
-          return null;
-        }
+var createElementComponent = function createElementComponent(type, isServer) {
+  var displayName = "".concat(capitalized(type), "Element");
+
+  var ClientElement = function ClientElement(_ref) {
+    var id = _ref.id,
+        className = _ref.className,
+        _ref$options = _ref.options,
+        options = _ref$options === void 0 ? {} : _ref$options,
+        onBlur = _ref.onBlur,
+        onFocus = _ref.onFocus,
+        onReady = _ref.onReady,
+        onChange = _ref.onChange,
+        onEscape = _ref.onEscape,
+        onClick = _ref.onClick,
+        onLoadError = _ref.onLoadError,
+        onLoaderStart = _ref.onLoaderStart,
+        onNetworksChange = _ref.onNetworksChange,
+        onCheckout = _ref.onCheckout,
+        onLineItemClick = _ref.onLineItemClick,
+        onConfirm = _ref.onConfirm,
+        onCancel = _ref.onCancel,
+        onShippingAddressChange = _ref.onShippingAddressChange,
+        onShippingRateChange = _ref.onShippingRateChange;
+    var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
+    var elements = 'elements' in ctx ? ctx.elements : null;
+    var customCheckoutSdk = 'customCheckoutSdk' in ctx ? ctx.customCheckoutSdk : null;
+
+    var _React$useState = React__default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        element = _React$useState2[0],
+        setElement = _React$useState2[1];
+
+    var elementRef = React__default.useRef(null);
+    var domNode = React__default.useRef(null);
+
+    var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx),
+        setCart = _useCartElementContex.setCart,
+        setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on
+    // with that callback. If the merchant ever changes the callback, removes
+    // the old callback with element.off and then call element.on with the new one.
+
+
+    useAttachEvent(element, 'blur', onBlur);
+    useAttachEvent(element, 'focus', onFocus);
+    useAttachEvent(element, 'escape', onEscape);
+    useAttachEvent(element, 'click', onClick);
+    useAttachEvent(element, 'loaderror', onLoadError);
+    useAttachEvent(element, 'loaderstart', onLoaderStart);
+    useAttachEvent(element, 'networkschange', onNetworksChange);
+    useAttachEvent(element, 'lineitemclick', onLineItemClick);
+    useAttachEvent(element, 'confirm', onConfirm);
+    useAttachEvent(element, 'cancel', onCancel);
+    useAttachEvent(element, 'shippingaddresschange', onShippingAddressChange);
+    useAttachEvent(element, 'shippingratechange', onShippingRateChange);
+    var readyCallback;
+
+    if (type === 'cart') {
+      readyCallback = function readyCallback(event) {
+        setCartState(event);
+        onReady && onReady(event);
       };
+    } else if (onReady) {
+      if (type === 'expressCheckout') {
+        // Passes through the event, which includes visible PM types
+        readyCallback = onReady;
+      } else {
+        // For other Elements, pass through the Element itself.
+        readyCallback = function readyCallback() {
+          onReady(element);
+        };
+      }
+    }
 
-      _this.requireElement = function (filterBy, specifiedType) {
-        var element = _this.findElement(filterBy, specifiedType);
-        if (element) {
-          return element;
-        } else {
-          throw new Error('You did not specify the type of Source, Token, or PaymentMethod to create.\n        We could not infer which Element you want to use for this operation.');
+    useAttachEvent(element, 'ready', readyCallback);
+    var changeCallback = type === 'cart' ? function (event) {
+      setCartState(event);
+      onChange && onChange(event);
+    } : onChange;
+    useAttachEvent(element, 'change', changeCallback);
+    var checkoutCallback = type === 'cart' ? function (event) {
+      setCartState(event);
+      onCheckout && onCheckout(event);
+    } : onCheckout;
+    useAttachEvent(element, 'checkout', checkoutCallback);
+    React__default.useLayoutEffect(function () {
+      if (elementRef.current === null && domNode.current !== null && (elements || customCheckoutSdk)) {
+        var newElement = null;
+
+        if (customCheckoutSdk) {
+          newElement = customCheckoutSdk.createElement(type, options);
+        } else if (elements) {
+          newElement = elements.create(type, options);
         }
-      };
 
-      _this.wrappedCreateToken = function (stripe) {
-        return function () {
-          var tokenTypeOrOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-          var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-          if (tokenTypeOrOptions && (typeof tokenTypeOrOptions === 'undefined' ? 'undefined' : _typeof(tokenTypeOrOptions)) === 'object') {
-            // First argument is options; infer the Element and tokenize
-            var opts = tokenTypeOrOptions;
-
-            var tokenType = opts.type,
-                rest = _objectWithoutProperties(opts, ['type']);
-
-            var specifiedType = typeof tokenType === 'string' ? tokenType : 'auto';
-            // Since only options were passed in, a corresponding Element must exist
-            // for the tokenization to succeed -- thus we call requireElement.
-            var element = _this.requireElement('impliedTokenType', specifiedType);
-            return stripe.createToken(element, rest);
-          } else if (typeof tokenTypeOrOptions === 'string') {
-            // First argument is token type; tokenize with token type and options
-            var _tokenType = tokenTypeOrOptions;
-            return stripe.createToken(_tokenType, options);
-          } else {
-            // If a bad value was passed in for options, throw an error.
-            throw new Error('Invalid options passed to createToken. Expected an object, got ' + (typeof tokenTypeOrOptions === 'undefined' ? 'undefined' : _typeof(tokenTypeOrOptions)) + '.');
-          }
-        };
-      };
+        if (type === 'cart' && setCart) {
+          // we know that elements.create return value must be of type StripeCartElement if type is 'cart',
+          // we need to cast because typescript is not able to infer which overloaded method is used based off param type
+          setCart(newElement);
+        } // Store element in a ref to ensure it's _immediately_ available in cleanup hooks in StrictMode
 
-      _this.wrappedCreateSource = function (stripe) {
-        return function () {
-          var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-          if (options && (typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object') {
-            if (typeof options.type !== 'string') {
-              throw new Error('Invalid Source type passed to createSource. Expected string, got ' + _typeof(options.type) + '.');
-            }
+        elementRef.current = newElement; // Store element in state to facilitate event listener attachment
 
-            var element = _this.findElement('impliedSourceType', options.type);
-            if (element) {
-              // If an Element exists for the source type, use that to create the
-              // corresponding source.
-              //
-              // NOTE: this prevents users from independently creating sources of
-              // type `foo` if an Element that can create `foo` sources exists in
-              // the current <Elements /> context.
-              return stripe.createSource(element, options);
-            } else {
-              // If no Element exists for the source type, directly create a source.
-              return stripe.createSource(options);
-            }
-          } else {
-            // If a bad value was passed in for options, throw an error.
-            throw new Error('Invalid options passed to createSource. Expected an object, got ' + (typeof options === 'undefined' ? 'undefined' : _typeof(options)) + '.');
-          }
-        };
-      };
+        setElement(newElement);
 
-      _this.wrappedCreatePaymentMethod = function (stripe) {
-        return function (paymentMethodType, elementOrData, maybeData) {
-          if (paymentMethodType && (typeof paymentMethodType === 'undefined' ? 'undefined' : _typeof(paymentMethodType)) === 'object') {
-            return stripe.createPaymentMethod(paymentMethodType);
-          }
+        if (newElement) {
+          newElement.mount(domNode.current);
+        }
+      }
+    }, [elements, customCheckoutSdk, options, setCart]);
+    var prevOptions = usePrevious(options);
+    React__default.useEffect(function () {
+      if (!elementRef.current) {
+        return;
+      }
 
-          if (!paymentMethodType || typeof paymentMethodType !== 'string') {
-            throw new Error('Invalid PaymentMethod type passed to createPaymentMethod. Expected a string, got ' + (typeof paymentMethodType === 'undefined' ? 'undefined' : _typeof(paymentMethodType)) + '.');
+      var updates = extractAllowedOptionsUpdates(options, prevOptions, ['paymentRequest']);
+
+      if (updates) {
+        elementRef.current.update(updates);
+      }
+    }, [options, prevOptions]);
+    React__default.useLayoutEffect(function () {
+      return function () {
+        if (elementRef.current && typeof elementRef.current.destroy === 'function') {
+          try {
+            elementRef.current.destroy();
+            elementRef.current = null;
+          } catch (error) {// Do nothing
           }
+        }
+      };
+    }, []);
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: id,
+      className: className,
+      ref: domNode
+    });
+  }; // Only render the Element wrapper in a server environment.
 
-          var elementOrDataResult = _this.parseElementOrData(elementOrData);
 
-          // Second argument is Element; use passed in Element
-          if (elementOrDataResult.type === 'element') {
-            var _element = elementOrDataResult.element;
+  var ServerElement = function ServerElement(props) {
+    // Validate that we are in the right context by calling useElementsContextWithUseCase.
+    var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
+    useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx);
+    var id = props.id,
+        className = props.className;
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: id,
+      className: className
+    });
+  };
+
+  var Element = isServer ? ServerElement : ClientElement;
+  Element.propTypes = {
+    id: PropTypes.string,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
+    onReady: PropTypes.func,
+    onEscape: PropTypes.func,
+    onClick: PropTypes.func,
+    onLoadError: PropTypes.func,
+    onLoaderStart: PropTypes.func,
+    onNetworksChange: PropTypes.func,
+    onCheckout: PropTypes.func,
+    onLineItemClick: PropTypes.func,
+    onConfirm: PropTypes.func,
+    onCancel: PropTypes.func,
+    onShippingAddressChange: PropTypes.func,
+    onShippingRateChange: PropTypes.func,
+    options: PropTypes.object
+  };
+  Element.displayName = displayName;
+  Element.__elementType = type;
+  return Element;
+};
+
+var isServer = typeof window === 'undefined';
+
+var EmbeddedCheckoutContext = /*#__PURE__*/React__default.createContext(null);
+EmbeddedCheckoutContext.displayName = 'EmbeddedCheckoutProviderContext';
 
-            if (maybeData) {
-              return stripe.createPaymentMethod(paymentMethodType, _element, maybeData);
-            } else {
-              return stripe.createPaymentMethod(paymentMethodType, _element);
-            }
-          }
+/**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-          // Second argument is data or undefined; infer the Element
-          var data = elementOrDataResult.data;
+createElementComponent('auBankAccount', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-          var element = _this.findElement('impliedPaymentMethodType', paymentMethodType);
+createElementComponent('card', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-          if (element) {
-            return data ? stripe.createPaymentMethod(paymentMethodType, element, data) : stripe.createPaymentMethod(paymentMethodType, element);
-          }
+createElementComponent('cardNumber', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-          if (data && (typeof data === 'undefined' ? 'undefined' : _typeof(data)) === 'object') {
-            return stripe.createPaymentMethod(paymentMethodType, data);
-          } else if (!data) {
-            throw new Error('Could not find an Element that can be used to create a PaymentMethod of type: ' + paymentMethodType + '.');
-          } else {
-            // If a bad value was passed in for data, throw an error.
-            throw new Error('Invalid data passed to createPaymentMethod. Expected an object, got ' + (typeof data === 'undefined' ? 'undefined' : _typeof(data)) + '.');
-          }
-        };
-      };
+createElementComponent('cardExpiry', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-      _this.wrappedHandleCardX = function (stripe, method) {
-        return function (clientSecret, elementOrData, maybeData) {
-          if (!clientSecret || typeof clientSecret !== 'string') {
-            // If a bad value was passed in for clientSecret, throw an error.
-            throw new Error('Invalid PaymentIntent client secret passed to handleCardPayment. Expected string, got ' + (typeof clientSecret === 'undefined' ? 'undefined' : _typeof(clientSecret)) + '.');
-          }
+createElementComponent('cardCvc', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-          var elementOrDataResult = _this.parseElementOrData(elementOrData);
+createElementComponent('fpxBank', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-          // Second argument is Element; handle with element
-          if (elementOrDataResult.type === 'element') {
-            var _element2 = elementOrDataResult.element;
+createElementComponent('iban', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-            if (maybeData) {
-              return stripe[method](clientSecret, _element2, maybeData);
-            } else {
-              return stripe[method](clientSecret, _element2);
-            }
-          }
-
-          // Second argument is data or undefined; see if we can find a mounted Element
-          // that can create card PaymentMethods
-          var data = elementOrDataResult.data;
-
-          var element = _this.findElement('impliedPaymentMethodType', 'card');
-
-          if (element) {
-            // If an Element exists that can create card PaymentMethods use it. Otherwise
-            // assume that we must be calling with data only.
-            //
-            // NOTE: this prevents users from using handleCard* with an existing
-            // Source or PaymentMethod if an Element that can create card PaymentMethods
-            // exists in the current <Elements /> context.
-            if (data) {
-              return stripe[method](clientSecret, element, data);
-            } else {
-              return stripe[method](clientSecret, element);
-            }
-          } else if (data) {
-            // if no element exists call handleCard* directly (with data)
-            return stripe[method](clientSecret, data);
-          } else {
-            // if no element exists call handleCard* directly (with only the clientSecret)
-            return stripe[method](clientSecret);
-          }
-        };
-      };
-
-      if (_this.context.tag === 'sync') {
-        _this.state = {
-          stripe: _this.stripeProps(_this.context.stripe)
-        };
-      } else {
-        _this.state = {
-          stripe: null
-        };
-      }
-      return _this;
-    }
-
-    _class.prototype.componentDidMount = function componentDidMount() {
-      var _this2 = this;
+createElementComponent('idealBank', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-      if (this.context.tag === 'async') {
-        this.context.addStripeLoadListener(function (stripe) {
-          _this2.setState({
-            stripe: _this2.stripeProps(stripe)
-          });
-        });
-      }
-    };
+createElementComponent('p24Bank', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-    _class.prototype.getWrappedInstance = function getWrappedInstance() {
-      if (!withRef) {
-        throw new Error('To access the wrapped instance, the `{withRef: true}` option must be set when calling `injectStripe()`');
-      }
-      return this.wrappedInstance;
-    };
+createElementComponent('epsBank', isServer);
+var PaymentElement = createElementComponent('payment', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-    _class.prototype.stripeProps = function stripeProps(stripe) {
-      return _extends({}, stripe, {
-        // These are the only functions that take elements.
-        createToken: this.wrappedCreateToken(stripe),
-        createSource: this.wrappedCreateSource(stripe),
-        createPaymentMethod: this.wrappedCreatePaymentMethod(stripe),
-        handleCardPayment: this.wrappedHandleCardX(stripe, 'handleCardPayment'),
-        handleCardSetup: this.wrappedHandleCardX(stripe, 'handleCardSetup')
-      });
-    };
+createElementComponent('expressCheckout', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-    // Finds an Element by the specified type, if one exists.
-    // Throws if multiple Elements match.
+var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
+createElementComponent('linkAuthentication', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-    // Require that exactly one Element is found for the specified type.
-    // Throws if no Element is found.
+createElementComponent('address', isServer);
+/**
+ * @deprecated
+ * Use `AddressElement` instead.
+ *
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
+createElementComponent('shippingAddress', isServer);
+/**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
+ * @docs https://stripe.com/docs/elements/cart-element
+ */
 
-    // Wraps createToken in order to infer the Element that is being tokenized.
+createElementComponent('cart', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
+createElementComponent('paymentMethodMessaging', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-    // Wraps createSource in order to infer the Element that is being used for
-    // source creation.
+createElementComponent('affirmMessage', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
+createElementComponent('afterpayClearpayMessage', isServer);
 
-    // Wraps createPaymentMethod in order to infer the Element that is being
-    // used for PaymentMethod creation.
+var V3_URL = 'https://js.stripe.com/v3';
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = 'loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used';
+var findScript = function findScript() {
+  var scripts = document.querySelectorAll("script[src^=\"".concat(V3_URL, "\"]"));
 
+  for (var i = 0; i < scripts.length; i++) {
+    var script = scripts[i];
 
-    _class.prototype.render = function render() {
-      var _this3 = this;
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
 
-      return _react2.default.createElement(WrappedComponent, _extends({}, this.props, {
-        stripe: this.state.stripe,
-        elements: this.context.elements,
-        ref: withRef ? function (c) {
-          _this3.wrappedInstance = c;
-        } : null
-      }));
-    };
+    return script;
+  }
 
-    return _class;
-  }(_react2.default.Component), _class.contextTypes = _extends({}, Provider_1.providerContextTypes, Elements_1.injectContextTypes), _class.displayName = 'InjectStripe(' + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ')', _temp;
+  return null;
 };
 
-exports.default = inject;
-});
-
-unwrapExports(inject_1);
-
-var isEqual_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var PLAIN_OBJECT_STR = '[object Object]';
+var injectScript = function injectScript(params) {
+  var queryString = params && !params.advancedFraudSignals ? '?advancedFraudSignals=false' : '';
+  var script = document.createElement('script');
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
 
-var isEqual = function isEqual(left, right) {
-  if ((typeof left === 'undefined' ? 'undefined' : _typeof(left)) !== 'object' || (typeof right === 'undefined' ? 'undefined' : _typeof(right)) !== 'object') {
-    return left === right;
+  if (!headOrBody) {
+    throw new Error('Expected document.body not to be null. Stripe.js requires a <body> element.');
   }
 
-  if (left === null || right === null) return left === right;
-
-  var leftArray = Array.isArray(left);
-  var rightArray = Array.isArray(right);
-
-  if (leftArray !== rightArray) return false;
-
-  var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
-  var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
-
-  if (leftPlainObject !== rightPlainObject) return false;
-
-  if (!leftPlainObject && !leftArray) return false;
-
-  var leftKeys = Object.keys(left);
-  var rightKeys = Object.keys(right);
-
-  if (leftKeys.length !== rightKeys.length) return false;
+  headOrBody.appendChild(script);
+  return script;
+};
 
-  var keySet = {};
-  for (var i = 0; i < leftKeys.length; i += 1) {
-    keySet[leftKeys[i]] = true;
-  }
-  for (var _i = 0; _i < rightKeys.length; _i += 1) {
-    keySet[rightKeys[_i]] = true;
-  }
-  var allKeys = Object.keys(keySet);
-  if (allKeys.length !== leftKeys.length) {
-    return false;
+var registerWrapper = function registerWrapper(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
   }
 
-  var l = left;
-  var r = right;
-  var pred = function pred(key) {
-    return isEqual(l[key], r[key]);
-  };
-
-  return allKeys.every(pred);
+  stripe._registerWrapper({
+    name: 'stripe-js',
+    version: "3.0.4",
+    startTime: startTime
+  });
 };
 
-exports.default = isEqual;
-});
-
-unwrapExports(isEqual_1);
-
-var Element_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-var _react2 = _interopRequireDefault(React__default);
-
-
-
-var _propTypes2 = _interopRequireDefault(PropTypes);
-
-
-
-var _isEqual2 = _interopRequireDefault(isEqual_1);
-
-
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var noop = function noop() {};
-
-var _extractOptions = function _extractOptions(props) {
-  props.id;
-      props.className;
-      props.onChange;
-      props.onFocus;
-      props.onBlur;
-      props.onReady;
-      var options = _objectWithoutProperties(props, ['id', 'className', 'onChange', 'onFocus', 'onBlur', 'onReady']);
+var stripePromise = null;
+var onErrorListener = null;
+var onLoadListener = null;
 
-  return options;
+var onError = function onError(reject) {
+  return function () {
+    reject(new Error('Failed to load Stripe.js'));
+  };
 };
 
-var capitalized = function capitalized(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
+var onLoad = function onLoad(resolve, reject) {
+  return function () {
+    if (window.Stripe) {
+      resolve(window.Stripe);
+    } else {
+      reject(new Error('Stripe.js not available'));
+    }
+  };
 };
 
-var Element = function Element(type) {
-  var _class, _temp;
-
-  var hocOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _temp = _class = function (_React$Component) {
-    _inherits(_class, _React$Component);
-
-    function _class(props, context) {
-      _classCallCheck(this, _class);
-
-      var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
-
-      _this.handleRef = function (ref) {
-        _this._ref = ref;
-      };
-
-      _this._element = null;
+var loadScript = function loadScript(params) {
+  // Ensure that we only attempt to load Stripe.js at most once
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
 
-      var options = _extractOptions(_this.props);
-      // We keep track of the extracted options on this._options to avoid re-rendering.
-      // (We would unnecessarily re-render if we were tracking them with state.)
-      _this._options = options;
-      return _this;
+  stripePromise = new Promise(function (resolve, reject) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      // Resolve to null when imported server side. This makes the module
+      // safe to import in an isomorphic code base.
+      resolve(null);
+      return;
     }
 
-    _class.prototype.componentDidMount = function componentDidMount() {
-      var _this2 = this;
-
-      this.context.addElementsLoadListener(function (elements) {
-        if (!_this2._ref) {
-          return;
-        }
-
-        var element = elements.create(type, _this2._options);
-        _this2._element = element;
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
 
-        _this2._setupEventListeners(element);
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
 
-        element.mount(_this2._ref);
+    try {
+      var script = findScript();
 
-        // Register Element for automatic token / source / paymentMethod creation
-        _this2.context.registerElement(element, hocOptions.impliedTokenType, hocOptions.impliedSourceType, hocOptions.impliedPaymentMethodType);
-      });
-    };
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      } else if (script && onLoadListener !== null && onErrorListener !== null) {
+        var _script$parentNode;
 
-    _class.prototype.componentDidUpdate = function componentDidUpdate() {
-      var options = _extractOptions(this.props);
-      if (Object.keys(options).length !== 0 && !(0, _isEqual2.default)(options, this._options)) {
-        this._options = options;
-        if (this._element) {
-          this._element.update(options);
-        }
-      }
-    };
+        // remove event listeners
+        script.removeEventListener('load', onLoadListener);
+        script.removeEventListener('error', onErrorListener); // if script exists, but we are reloading due to an error,
+        // reload script to trigger 'load' event
 
-    _class.prototype.componentWillUnmount = function componentWillUnmount() {
-      if (this._element) {
-        var element = this._element;
-        element.destroy();
-        this.context.unregisterElement(element);
+        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
+        script = injectScript(params);
       }
-    };
-
-    _class.prototype._setupEventListeners = function _setupEventListeners(element) {
-      var _this3 = this;
-
-      element.on('ready', function () {
-        _this3.props.onReady(_this3._element);
-      });
-
-      element.on('change', function (change) {
-        _this3.props.onChange(change);
-      });
-
-      element.on('blur', function () {
-        var _props;
 
-        return (_props = _this3.props).onBlur.apply(_props, arguments);
-      });
-      element.on('focus', function () {
-        var _props2;
-
-        return (_props2 = _this3.props).onFocus.apply(_props2, arguments);
-      });
-    };
-
-    _class.prototype.render = function render() {
-      return _react2.default.createElement('div', {
-        id: this.props.id,
-        className: this.props.className,
-        ref: this.handleRef
-      });
-    };
-
-    return _class;
-  }(_react2.default.Component), _class.propTypes = {
-    id: _propTypes2.default.string,
-    className: _propTypes2.default.string,
-    onChange: _propTypes2.default.func,
-    onBlur: _propTypes2.default.func,
-    onFocus: _propTypes2.default.func,
-    onReady: _propTypes2.default.func
-  }, _class.defaultProps = {
-    id: undefined,
-    className: undefined,
-    onChange: noop,
-    onBlur: noop,
-    onFocus: noop,
-    onReady: noop
-  }, _class.contextTypes = Elements_1.elementContextTypes, _class.displayName = capitalized(type) + 'Element', _temp;
-};
-
-exports.default = Element;
-});
-
-unwrapExports(Element_1);
-
-var shallowEqual_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var shallowEqual = function shallowEqual(a, b) {
-  var keysA = Object.keys(a);
-  var keysB = Object.keys(b);
+      onLoadListener = onLoad(resolve, reject);
+      onErrorListener = onError(reject);
+      script.addEventListener('load', onLoadListener);
+      script.addEventListener('error', onErrorListener);
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  }); // Resets stripePromise on error
 
-  return keysA.length === keysB.length && keysA.every(function (key) {
-    return b.hasOwnProperty(key) && b[key] === a[key];
+  return stripePromise["catch"](function (error) {
+    stripePromise = null;
+    return Promise.reject(error);
   });
 };
-
-exports.default = shallowEqual;
-});
-
-unwrapExports(shallowEqual_1);
-
-var PaymentRequestButtonElement_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || 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; };
-
-
-
-var _react2 = _interopRequireDefault(React__default);
-
-
-
-var _propTypes2 = _interopRequireDefault(PropTypes);
-
-
-
-var _shallowEqual2 = _interopRequireDefault(shallowEqual_1);
-
-
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-var noop = function noop() {};
-
-var _extractOptions = function _extractOptions(props) {
-  props.id;
-      props.className;
-      props.onBlur;
-      props.onClick;
-      props.onFocus;
-      props.onReady;
-      props.paymentRequest;
-      var options = _objectWithoutProperties(props, ['id', 'className', 'onBlur', 'onClick', 'onFocus', 'onReady', 'paymentRequest']);
-
-  return options;
-};
-
-var PaymentRequestButtonElement = function (_React$Component) {
-  _inherits(PaymentRequestButtonElement, _React$Component);
-
-  function PaymentRequestButtonElement(props, context) {
-    _classCallCheck(this, PaymentRequestButtonElement);
-
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
-
-    _this.handleRef = function (ref) {
-      _this._ref = ref;
-    };
-
-    var options = _extractOptions(props);
-    // We keep track of the extracted options on this._options to avoid re-rendering.
-    // (We would unnecessarily re-render if we were tracking them with state.)
-    _this._options = options;
-    return _this;
+var initStripe = function initStripe(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
   }
 
-  PaymentRequestButtonElement.prototype.componentDidMount = function componentDidMount() {
-    var _this2 = this;
-
-    this.context.addElementsLoadListener(function (elements) {
-      _this2._element = elements.create('paymentRequestButton', _extends({
-        paymentRequest: _this2.props.paymentRequest
-      }, _this2._options));
-      _this2._element.on('ready', function () {
-        _this2.props.onReady(_this2._element);
-      });
-      _this2._element.on('focus', function () {
-        var _props;
-
-        return (_props = _this2.props).onFocus.apply(_props, arguments);
-      });
-      _this2._element.on('click', function () {
-        var _props2;
-
-        return (_props2 = _this2.props).onClick.apply(_props2, arguments);
-      });
-      _this2._element.on('blur', function () {
-        var _props3;
-
-        return (_props3 = _this2.props).onBlur.apply(_props3, arguments);
-      });
-      _this2._element.mount(_this2._ref);
-    });
-  };
-
-  PaymentRequestButtonElement.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (this.props.paymentRequest !== prevProps.paymentRequest) {
-      console.warn('Unsupported prop change: paymentRequest is not a customizable property.');
-    }
-    var options = _extractOptions(this.props);
-    if (Object.keys(options).length !== 0 && !(0, _shallowEqual2.default)(options, this._options)) {
-      this._options = options;
-      this._element.update(options);
-    }
-  };
-
-  PaymentRequestButtonElement.prototype.componentWillUnmount = function componentWillUnmount() {
-    this._element.destroy();
-  };
-
-  PaymentRequestButtonElement.prototype.render = function render() {
-    return _react2.default.createElement('div', {
-      id: this.props.id,
-      className: this.props.className,
-      ref: this.handleRef
-    });
-  };
-
-  return PaymentRequestButtonElement;
-}(_react2.default.Component);
-
-PaymentRequestButtonElement.propTypes = {
-  id: _propTypes2.default.string,
-  className: _propTypes2.default.string,
-  onBlur: _propTypes2.default.func,
-  onClick: _propTypes2.default.func,
-  onFocus: _propTypes2.default.func,
-  onReady: _propTypes2.default.func,
-  paymentRequest: _propTypes2.default.shape({
-    canMakePayment: _propTypes2.default.func.isRequired,
-    on: _propTypes2.default.func.isRequired,
-    show: _propTypes2.default.func.isRequired
-  }).isRequired
-};
-PaymentRequestButtonElement.defaultProps = {
-  id: undefined,
-  className: undefined,
-  onBlur: noop,
-  onClick: noop,
-  onFocus: noop,
-  onReady: noop
-};
-PaymentRequestButtonElement.contextTypes = Elements_1.elementContextTypes;
-exports.default = PaymentRequestButtonElement;
-});
-
-unwrapExports(PaymentRequestButtonElement_1);
-
-var es = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AuBankAccountElement = exports.FpxBankElement = exports.IdealBankElement = exports.IbanElement = exports.PaymentRequestButtonElement = exports.CardCVCElement = exports.CardCvcElement = exports.CardExpiryElement = exports.CardNumberElement = exports.CardElement = exports.Elements = exports.injectStripe = exports.StripeProvider = undefined;
-
-
-
-var _Provider2 = _interopRequireDefault(Provider_1);
-
-
-
-var _inject2 = _interopRequireDefault(inject_1);
-
-
-
-var _Elements2 = _interopRequireDefault(Elements_1);
-
-
-
-var _Element2 = _interopRequireDefault(Element_1);
-
-
-
-var _PaymentRequestButtonElement2 = _interopRequireDefault(PaymentRequestButtonElement_1);
+  var stripe = maybeStripe.apply(undefined, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+}; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var stripePromise$1;
+var loadCalled = false;
 
-// Define Elements, and register their implied token / source types for
-// automatic token / source creation.
+var getStripePromise = function getStripePromise() {
+  if (stripePromise$1) {
+    return stripePromise$1;
+  }
 
-// Card
-var CardElement = (0, _Element2.default)('card', {
-  impliedTokenType: 'card',
-  impliedSourceType: 'card',
-  impliedPaymentMethodType: 'card'
-});
+  stripePromise$1 = loadScript(null)["catch"](function (error) {
+    // clear cache on error
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+  return stripePromise$1;
+}; // Execute our own script injection after a tick to give users time to do their
+// own script injection.
 
-// Split Fields
-// Note: we only register the CardNumberElement for split fields so that we have
-// a unique Element to infer when calling `wrappedCreateToken` or `wrappedCreateSource`.
 
-var CardNumberElement = (0, _Element2.default)('cardNumber', {
-  impliedTokenType: 'card',
-  impliedSourceType: 'card',
-  impliedPaymentMethodType: 'card'
-});
-var CardExpiryElement = (0, _Element2.default)('cardExpiry');
-var CardCvcElement = (0, _Element2.default)('cardCvc');
-var CardCVCElement = CardCvcElement; // deprecated in favor of CardCvcElement which better matches Elements API
-
-// IBAN
-var IbanElement = (0, _Element2.default)('iban', {
-  impliedTokenType: 'bank_account',
-  impliedSourceType: 'sepa_debit'
+Promise.resolve().then(function () {
+  return getStripePromise();
+})["catch"](function (error) {
+  if (!loadCalled) {
+    console.warn(error);
+  }
 });
+var loadStripe = function loadStripe() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
 
-// iDEAL Bank
-var IdealBankElement = (0, _Element2.default)('idealBank', { impliedSourceType: 'ideal' });
-
-// fpx Bank
-var FpxBankElement = (0, _Element2.default)('fpxBank');
-
-// auBankAccount
-// Requires beta access. Contact Stripe support for more information:
-// https://support.stripe.com
-var AuBankAccountElement = (0, _Element2.default)('auBankAccount');
-
-exports.StripeProvider = _Provider2.default;
-exports.injectStripe = _inject2.default;
-exports.Elements = _Elements2.default;
-exports.CardElement = CardElement;
-exports.CardNumberElement = CardNumberElement;
-exports.CardExpiryElement = CardExpiryElement;
-exports.CardCvcElement = CardCvcElement;
-exports.CardCVCElement = CardCVCElement;
-exports.PaymentRequestButtonElement = _PaymentRequestButtonElement2.default;
-exports.IbanElement = IbanElement;
-exports.IdealBankElement = IdealBankElement;
-exports.FpxBankElement = FpxBankElement;
-exports.AuBankAccountElement = AuBankAccountElement;
-});
+  loadCalled = true;
+  var startTime = Date.now(); // if previous attempts are unsuccessful, will re-load script
 
-unwrapExports(es);
-es.AuBankAccountElement;
-es.FpxBankElement;
-es.IdealBankElement;
-es.IbanElement;
-var es_5 = es.PaymentRequestButtonElement;
-var es_6 = es.CardCVCElement;
-es.CardCvcElement;
-var es_8 = es.CardExpiryElement;
-var es_9 = es.CardNumberElement;
-es.CardElement;
-var es_11 = es.Elements;
-var es_12 = es.injectStripe;
-var es_13 = es.StripeProvider;
+  return getStripePromise().then(function (maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
 
 /**
  * @TODO: All payment related business logic should end up moving
@@ -21579,7 +21262,7 @@ class Payment {
    * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway)} paymentGateway
    */
   constructor(paymentGateway) {
-    _defineProperty$3(this, "execute", (options, callback) => {
+    _defineProperty$4(this, "execute", (options, callback) => {
       if (!this.paymentGateway) {
         callback(_classPrivateFieldGet(this, _generateUserError).call(this), null);
         return console.error("No payment gateway provided");
@@ -21685,7 +21368,7 @@ class StripeGateway {
       value: PAYMENT_GATEWAYS_ENUM["stripe"]
     });
 
-    _defineProperty$3(this, "execute", (options, callback) => {
+    _defineProperty$4(this, "execute", (options, callback) => {
       const types = PAYMENT_TYPES;
 
       switch (options.type) {
@@ -21891,7 +21574,7 @@ class PaypalGateway {
       value: PAYMENT_GATEWAYS_ENUM["paypal"]
     });
 
-    _defineProperty$3(this, "execute", (options, callback) => {
+    _defineProperty$4(this, "execute", (options, callback) => {
       const types = PAYMENT_TYPES;
 
       switch (options.type) {
@@ -22008,7 +21691,7 @@ class VantivGateway {
       value: PAYMENT_GATEWAYS_ENUM["vantiv"]
     });
 
-    _defineProperty$3(this, "execute", (options, callback) => {
+    _defineProperty$4(this, "execute", (options, callback) => {
       const types = PAYMENT_TYPES;
 
       switch (options.type) {
@@ -22243,7 +21926,7 @@ class TapGateway {
       value: PAYMENT_GATEWAYS_ENUM["tap"]
     });
 
-    _defineProperty$3(this, "execute", (options, callback) => {
+    _defineProperty$4(this, "execute", (options, callback) => {
       const types = PAYMENT_TYPES;
 
       switch (options.type) {
@@ -22481,7 +22164,7 @@ class CybersourceGateway {
       value: PAYMENT_GATEWAYS_ENUM["cybersource"]
     });
 
-    _defineProperty$3(this, "execute", (options, callback) => {
+    _defineProperty$4(this, "execute", (options, callback) => {
       const types = PAYMENT_TYPES;
 
       switch (options.type) {
@@ -22755,7 +22438,6 @@ const PaymentMethodContainerWithoutStripe = ({
   style,
   className = "",
   children,
-  stripe,
   type,
   onSuccess = () => {},
   onGiftRenewalSuccess = () => {},
@@ -22764,6 +22446,9 @@ const PaymentMethodContainerWithoutStripe = ({
 }) => {
   var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice, _window$Pelcro, _window$Pelcro$uiSett;
 
+  // Get a reference to Stripe or Elements using hooks.
+  const stripe = useStripe();
+  const elements = useElements();
   const [vantivPaymentRequest, setVantivPaymentRequest] = useState(null);
   const [updatedCouponCode, setUpdatedCouponCode] = useState("");
   const {
@@ -22808,7 +22493,8 @@ const PaymentMethodContainerWithoutStripe = ({
       type: INIT_CONTAINER
     });
     updateTotalAmountWithTax();
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   /* ====== Start Cybersource integration ======== */
 
   const cybersourceErrorHandle = err => {
@@ -23073,6 +22759,7 @@ const PaymentMethodContainerWithoutStripe = ({
       const {
         key: jwk
       } = res; // SETUP MICROFORM
+      // eslint-disable-next-line no-undef
 
       FLEX.microform({
         keyId: jwk.kid,
@@ -23742,13 +23429,15 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, [selectedPaymentMethodId]); // Trigger the handleVantivPayment method when a vantivPaymentRequest is present
+  }, [selectedPaymentMethodId]); // eslint-disable-line react-hooks/exhaustive-deps
+  // Trigger the handleVantivPayment method when a vantivPaymentRequest is present
 
   useEffect(() => {
     if (vantivPaymentRequest) {
       handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
     }
-  }, [vantivPaymentRequest]);
+  }, [vantivPaymentRequest]); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     whenUserReady(() => {
       if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
@@ -23780,7 +23469,9 @@ const PaymentMethodContainerWithoutStripe = ({
         appendCybersourceFingerprintScripts();
       }
     });
-  }, [selectedPaymentMethodId]);
+  }, [selectedPaymentMethodId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ====== Start Stripe integration ======== */
 
   const initPaymentRequest = (state, dispatch) => {
     if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
@@ -23848,257 +23539,16 @@ const PaymentMethodContainerWithoutStripe = ({
       console.log("Google Pay/Apple pay isn't available/supported in this country");
     }
   };
-  /**
-   * Updates the total amount after adding taxes only if site taxes are enabled
-   */
-
-
-  const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r8;
-
-    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
-    const taxesEnabled = (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.taxes_enabled;
-
-    if (taxesEnabled && type === "createPayment") {
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: true
-      });
-      resolveTaxCalculation().then(res => {
-        if (res) {
-          dispatch({
-            type: SET_TAX_AMOUNT,
-            payload: res.taxAmount
-          });
-          dispatch({
-            type: SET_UPDATED_PRICE,
-            payload: res.totalAmountWithTax
-          });
-          dispatch({
-            type: UPDATE_PAYMENT_REQUEST
-          });
-        }
-      }).catch(error => {
-        handlePaymentError(error);
-      }).finally(() => {
-        dispatch({
-          type: DISABLE_SUBMIT,
-          payload: false
-        });
-      });
-    }
-  };
-
-  const onApplyCouponCode = (state, dispatch) => {
-    const {
-      couponCode
-    } = state;
-
-    const handleCouponResponse = (err, res) => {
-      var _res$data$coupon;
-
-      dispatch({
-        type: DISABLE_COUPON_BUTTON,
-        payload: false
-      });
-
-      if (err) {
-        onFailure(err); // reset the coupon code in local state
-
-        setUpdatedCouponCode("");
-        dispatch({
-          type: SET_COUPON_ERROR,
-          payload: getErrorMessages(err)
-        }); // remove current coupon
-
-        dispatch({
-          type: SET_COUPON,
-          payload: null
-        });
-        dispatch({
-          type: SET_PERCENT_OFF,
-          payload: ""
-        });
-        dispatch({
-          type: SET_UPDATED_PRICE,
-          payload: null
-        });
-        dispatch({
-          type: SET_TAX_AMOUNT,
-          payload: null
-        });
-        const {
-          currentPlan
-        } = state;
-
-        if (currentPlan) {
-          var _currentPlan$quantity;
-
-          const quantity = (_currentPlan$quantity = currentPlan.quantity) !== null && _currentPlan$quantity !== void 0 ? _currentPlan$quantity : 1;
-          const price = currentPlan.amount;
-          dispatch({
-            type: SET_UPDATED_PRICE,
-            // set original plan price
-            payload: price * quantity
-          });
-          dispatch({
-            type: UPDATE_PAYMENT_REQUEST
-          }); // update the new amount with taxes if site has taxes enabled
-
-          updateTotalAmountWithTax();
-        }
-
-        return;
-      }
-
-      dispatch({
-        type: SET_COUPON_ERROR,
-        payload: ""
-      });
-      dispatch({
-        type: SHOW_ALERT,
-        payload: {
-          type: "error",
-          content: ""
-        }
-      });
-      dispatch({
-        type: SET_COUPON,
-        payload: res.data.coupon
-      }); // set the coupon code in local state to be able to use with Vantiv
-
-      setUpdatedCouponCode(res.data.coupon.code);
-      dispatch({
-        type: SET_PERCENT_OFF,
-        payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
-      });
-      dispatch({
-        type: SET_TAX_AMOUNT,
-        payload: res.data.taxes
-      });
-      dispatch({
-        type: SET_UPDATED_PRICE,
-        payload: res.data.total
-      });
-      dispatch({
-        type: UPDATE_PAYMENT_REQUEST
-      });
-    };
-
-    if ((couponCode === null || couponCode === void 0 ? void 0 : couponCode.trim()) === "") {
-      dispatch({
-        type: SET_COUPON,
-        payload: null
-      });
-      dispatch({
-        type: SET_PERCENT_OFF,
-        payload: ""
-      });
-      dispatch({
-        type: SET_UPDATED_PRICE,
-        payload: null
-      });
-      dispatch({
-        type: SET_TAX_AMOUNT,
-        payload: null
-      });
-      dispatch({
-        type: UPDATE_PAYMENT_REQUEST
-      });
-      updateTotalAmountWithTax();
-    }
-
-    if (couponCode !== null && couponCode !== void 0 && couponCode.trim()) {
-      dispatch({
-        type: DISABLE_COUPON_BUTTON,
-        payload: true
-      });
-
-      if (type === "createPayment") {
-        window.Pelcro.order.create({
-          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: selectedAddressId
-        }, handleCouponResponse);
-      } else if (type === "orderCreate") {
-        const isQuickPurchase = !Array.isArray(order);
-        const mappedOrderItems = isQuickPurchase ? [{
-          sku_id: order.id,
-          quantity: order.quantity
-        }] : order.map(item => ({
-          sku_id: item.id,
-          quantity: item.quantity
-        }));
-        window.Pelcro.ecommerce.order.createSummary({
-          items: mappedOrderItems,
-          coupon_code: couponCode
-        }, handleCouponResponse);
-      }
-    }
-  };
-
-  const debouncedApplyCouponCode = useRef(debounce$1(onApplyCouponCode, 1000)).current;
-
-  const removeAppliedCoupon = state => {
-    state.couponCode = ""; // reset the coupon code in local state
-
-    setUpdatedCouponCode("");
-    dispatch({
-      type: SET_COUPON_ERROR,
-      payload: ""
-    });
-    dispatch({
-      type: SHOW_COUPON_FIELD,
-      payload: false
-    });
-    dispatch({
-      type: SET_COUPON,
-      payload: null
-    });
-    dispatch({
-      type: SET_PERCENT_OFF,
-      payload: ""
-    });
-    dispatch({
-      type: SET_UPDATED_PRICE,
-      payload: null
-    });
-    dispatch({
-      type: SET_TAX_AMOUNT,
-      payload: null
-    });
-    const {
-      currentPlan
-    } = state;
-
-    if (currentPlan) {
-      var _currentPlan$quantity2;
-
-      const quantity = (_currentPlan$quantity2 = currentPlan.quantity) !== null && _currentPlan$quantity2 !== void 0 ? _currentPlan$quantity2 : 1;
-      const price = currentPlan.amount;
-      dispatch({
-        type: SET_UPDATED_PRICE,
-        // set original plan price
-        payload: price * quantity
-      });
-      dispatch({
-        type: UPDATE_PAYMENT_REQUEST
-      }); // update the new amount with taxes if site has taxes enabled
-
-      updateTotalAmountWithTax();
-    }
-  };
   /**
    * Attempt to confirm a Stripe card payment via it's PaymentIntent.
    * Only trigger method if PaymentIntent status is `requires_action`.
    *
    * @see https://stripe.com/docs/payments/intents#intent-statuses
    *
-   * @param response
-   * @param error
-   * @returns {*}
+   * @param {Object} response
+   * @param {Object} error
+   * @param {boolean} isSubCreate
+   * @return {*}
    */
 
 
@@ -24403,90 +23853,6 @@ const PaymentMethodContainerWithoutStripe = ({
 
     return false;
   };
-  /**
-   * Handles subscriptions from PayPal gateway
-   * @param {PaymentStateType} state
-   * @param {string} paypalNonce
-   * @return {void}
-   */
-
-
-  const handlePaypalSubscription = (state, paypalNonce) => {
-    const payment = new Payment(new PaypalGateway());
-    const {
-      couponCode
-    } = state;
-    /**
-     * @TODO: Add flags for types instead of testing by properties
-     */
-
-    if (giftRecipient) {
-      return payment.execute({
-        type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
-        token: paypalNonce,
-        quantity: plan.quantity,
-        plan,
-        couponCode,
-        product,
-        giftRecipient,
-        addressId: selectedAddressId
-      }, (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)
-            }
-          });
-        }
-
-        onSuccess(res);
-      });
-    }
-
-    return payment.execute({
-      type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
-      token: paypalNonce,
-      quantity: plan.quantity,
-      plan,
-      couponCode,
-      product,
-      addressId: selectedAddressId
-    }, (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)
-          }
-        });
-      }
-
-      onSuccess(res);
-    });
-  };
 
   const purchase = (gatewayService, gatewayToken, state, dispatch) => {
     const isQuickPurchase = !Array.isArray(order);
@@ -24583,67 +23949,73 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  const createPaymentSource = (state, dispatch) => {
-    return stripe.createSource({
-      type: "card"
-    }).then(({
-      source,
-      error
-    }) => {
-      if (error) {
-        return handlePaymentError(error);
-      } // We don't support source creation for 3D secure yet
-      // if (source?.card?.three_d_secure === "required") {
-      //   return handlePaymentError({
-      //     error: {
-      //       message: t("messages.cardAuthNotSupported")
-      //     }
-      //   });
-      // }
+  const createPaymentSource = async (state, dispatch) => {
+    // Trigger form validation and wallet collection
+    const {
+      error: submitError
+    } = await elements.submit();
 
+    if (submitError) {
+      handlePaymentError(submitError);
+      return;
+    }
 
-      window.Pelcro.paymentMethods.create({
-        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;
+    return stripe.createPaymentMethod({
+      elements
+    }).then(result => {
+      if (result.error) {
+        return handlePaymentError(result.error);
+      }
 
-        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 (result.paymentMethod) {
+        console.log(result.paymentMethod);
+        window.Pelcro.paymentMethods.create({
+          auth_token: window.Pelcro.user.read().auth_token,
+          token: result.paymentMethod.id
+        }, (err, res) => {
+          var _res$data, _res$data$setup_inten, _res$data2, _res$data2$setup_inte;
 
-        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") {
-          confirmStripeIntentSetup(res, "create");
-        } else {
-          dispatch({
-            type: LOADING,
-            payload: false
-          });
-          dispatch({
-            type: SHOW_ALERT,
-            payload: {
-              type: "success",
-              content: t("messages.sourceCreated")
-            }
-          });
-          onSuccess(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 (result.paymentMethod.type == "bacs_debit") {
+            createBillingAddress(result.paymentMethod.billing_details);
+          }
+
+          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") {
+            confirmStripeIntentSetup(res, "create");
+          } else {
+            dispatch({
+              type: LOADING,
+              payload: false
+            });
+            dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "success",
+                content: t("messages.sourceCreated")
+              }
+            });
+            onSuccess(res);
+          }
+        });
+      }
     });
   };
 
@@ -24701,78 +24073,83 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  const replacePaymentSource = (state, dispatch) => {
+  const replacePaymentSource = async (state, dispatch) => {
     const {
       id: paymentMethodId
-    } = paymentMethodToDelete;
-    return stripe.createSource({
-      type: "card"
-    }).then(({
-      source,
-      error
-    }) => {
-      if (error) {
-        return handlePaymentError(error);
-      } // We don't support source creation for 3D secure yet
-      // if (source?.card?.three_d_secure === "required") {
-      //   return handlePaymentError({
-      //     error: {
-      //       message: t("messages.cardAuthNotSupported")
-      //     }
-      //   });
-      // }
+    } = paymentMethodToDelete; // Trigger form validation and wallet collection
 
+    const {
+      error: submitError
+    } = await elements.submit();
 
-      window.Pelcro.paymentMethods.create({
-        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;
+    if (submitError) {
+      handlePaymentError(submitError);
+      return;
+    }
 
-        if (err) {
-          onFailure(err);
-          return dispatch({
-            type: SHOW_ALERT,
-            payload: {
-              type: "error",
-              content: getErrorMessages(err)
-            }
-          });
-        }
+    return stripe.createPaymentMethod({
+      elements
+    }).then(result => {
+      if (result.error) {
+        return handlePaymentError(result.error);
+      }
 
-        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") {
-          confirmStripeIntentSetup(res, "replace", paymentMethodId);
-        } else {
-          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 (result.paymentMethod) {
+        window.Pelcro.paymentMethods.create({
+          auth_token: window.Pelcro.user.read().auth_token,
+          token: result.paymentMethod.id
+        }, (err, res) => {
+          var _res$data5, _res$data5$setup_inte, _res$data6, _res$data6$setup_inte;
 
-              if (err) {
-                onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
-                return dispatch({
-                  type: SHOW_ALERT,
-                  payload: {
-                    type: "error",
-                    content: getErrorMessages(err)
-                  }
-                });
+          if (err) {
+            onFailure(err);
+            return dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: getErrorMessages(err)
               }
-
-              onSuccess(res);
             });
-          }, 2000);
-        }
-      });
+          }
+
+          if (result.paymentMethod.type == "bacs_debit") {
+            createBillingAddress(result.paymentMethod.billing_details);
+          }
+
+          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") {
+            confirmStripeIntentSetup(res, "replace", paymentMethodId);
+          } else {
+            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);
+          }
+        });
+      }
     });
   };
 
@@ -24787,7 +24164,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  const submitPayment = (state, dispatch) => {
+  const submitPayment = async (state, dispatch) => {
     if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
       const isQuickPurchase = !Array.isArray(order);
       const mappedOrderItems = isQuickPurchase ? [{
@@ -24811,88 +24188,116 @@ const PaymentMethodContainerWithoutStripe = ({
         return onSuccess(res);
       });
       return;
-    }
+    } // Trigger form validation and wallet collection
 
-    stripe.createSource({
-      type: "card"
-    }).then(({
-      source,
-      error
-    }) => {
-      var _ref4, _ref5, _state$updatedPrice2;
-
-      if (error) {
-        return handlePaymentError(error);
-      }
 
-      const getOrderItemsTotal = () => {
-        if (!order) {
-          return null;
-        }
+    const {
+      error: submitError
+    } = await elements.submit();
 
-        const isQuickPurchase = !Array.isArray(order);
+    if (submitError) {
+      handlePaymentError(submitError);
+      return;
+    }
 
-        if (isQuickPurchase) {
-          return order.price * order.quantity;
-        }
+    stripe.createPaymentMethod({
+      elements
+    }).then(result => {
+      if (result.error) {
+        return handlePaymentError(result.error);
+      }
 
-        if (order.length === 0) {
-          return null;
+      if (result.paymentMethod) {
+        if (result.paymentMethod.type == "bacs_debit") {
+          createBillingAddress(result.paymentMethod.billing_details);
         }
 
-        return order.reduce((total, item) => {
-          return total + item.price * item.quantity;
-        }, 0);
-      };
-
-      (_ref4 = (_ref5 = (_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 && _ref5 !== void 0 ? _ref5 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref4 !== void 0 ? _ref4 : getOrderItemsTotal();
-      return handlePayment(source);
+        return handlePayment(result.paymentMethod);
+      }
     }).catch(error => {
       return handlePaymentError(error);
     });
   };
-  /**
-   * Resolves with the total & tax amount incase taxes enabled by site
-   * @return {Promise}
-   */
 
+  const handlePayment = stripeSource => {
+    if (stripeSource && type === "createPayment") {
+      subscribe(stripeSource, state, dispatch);
+    } else if (stripeSource && type === "orderCreate") {
+      purchase(new StripeGateway(), stripeSource.id, state, dispatch);
+    } else if (stripeSource && type === "invoicePayment") {
+      payInvoice(new StripeGateway(), stripeSource.id);
+    }
+  };
 
-  const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r9;
+  const handlePaymentError = error => {
+    var _getErrorMessages;
 
-    if (type === "invoicePayment") {
-      return new Promise(resolve => resolve());
-    }
+    toggleAuthenticationSuccessPendingView(false);
 
-    const taxesEnabled = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.taxes_enabled;
-    return new Promise((resolve, reject) => {
-      // resolve early if taxes isn't enabled
-      if (!taxesEnabled) {
-        return resolve(null);
-      }
+    if (error.type === "validation_error" && // Subscription creation & renewal
+    type === "createPayment") {
+      var _state$couponObject;
 
-      window.Pelcro.order.create({
-        auth_token: window.Pelcro.user.read().auth_token,
-        plan_id: plan.id,
-        campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
-        coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
-        address_id: selectedAddressId
-      }, (error, res) => {
-        var _res$data7, _res$data8;
+      const {
+        updatedPrice
+      } = state; // When price is 0, we allow submitting without card info
 
-        if (error) {
-          return reject(error);
-        }
+      if (updatedPrice === 0 && ((_state$couponObject = state.couponObject) === null || _state$couponObject === void 0 ? void 0 : _state$couponObject.duration) === "forever") {
+        return subscribe({}, state, dispatch);
+      }
+    }
 
-        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;
-        resolve({
-          totalAmountWithTax,
-          taxAmount
-        });
-      });
+    onFailure(error);
+    dispatch({
+      type: SHOW_ALERT,
+      payload: {
+        type: "error",
+        content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
+      }
+    });
+    dispatch({
+      type: DISABLE_SUBMIT,
+      payload: false
+    });
+    dispatch({
+      type: LOADING,
+      payload: false
     });
   };
+
+  const createBillingAddress = billingDetails => {
+    const hasBillingAddress = userHasBillingAddress();
+    if (hasBillingAddress) return;
+    const {
+      name,
+      address
+    } = billingDetails;
+    const [firstName, lastName] = name ? name === null || name === void 0 ? void 0 : name.split(" ") : [];
+    window.Pelcro.address.create({
+      auth_token: window.Pelcro.user.read().auth_token,
+      type: "billing",
+      first_name: firstName,
+      last_name: lastName,
+      line1: address === null || address === void 0 ? void 0 : address.line1,
+      line2: address === null || address === void 0 ? void 0 : address.line2,
+      city: address === null || address === void 0 ? void 0 : address.city,
+      state: address === null || address === void 0 ? void 0 : address.state,
+      country: address === null || address === void 0 ? void 0 : address.country,
+      postal_code: address === null || address === void 0 ? void 0 : address.postal_code,
+      is_default: true
+    }, (err, res) => {
+      if (err) {
+        console.error(err);
+      }
+
+      if (res) {
+        console.log(res);
+      }
+    });
+  }; // TODO: Refactor deprecated stripe implementation
+
+  /* Start Stripe deprecated functions */
+
   /**
    * Resolves with a generated stripe 3DSecure source
    * @param {Object} source stripe's source object
@@ -24933,52 +24338,6 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  const handlePayment = stripeSource => {
-    if (stripeSource && type === "createPayment") {
-      subscribe(stripeSource, state, dispatch);
-    } else if (stripeSource && type === "orderCreate") {
-      purchase(new StripeGateway(), stripeSource.id, state, dispatch);
-    } else if (stripeSource && type === "invoicePayment") {
-      payInvoice(new StripeGateway(), stripeSource.id);
-    }
-  };
-
-  const handlePaymentError = error => {
-    var _getErrorMessages;
-
-    toggleAuthenticationSuccessPendingView(false);
-
-    if (error.type === "validation_error" && // Subscription creation & renewal
-    type === "createPayment") {
-      var _state$couponObject;
-
-      const {
-        updatedPrice
-      } = state; // When price is 0, we allow submitting without card info
-
-      if (updatedPrice === 0 && ((_state$couponObject = state.couponObject) === null || _state$couponObject === void 0 ? void 0 : _state$couponObject.duration) === "forever") {
-        return subscribe({}, state, dispatch);
-      }
-    }
-
-    onFailure(error);
-    dispatch({
-      type: SHOW_ALERT,
-      payload: {
-        type: "error",
-        content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
-      }
-    });
-    dispatch({
-      type: DISABLE_SUBMIT,
-      payload: false
-    });
-    dispatch({
-      type: LOADING,
-      payload: false
-    });
-  };
-
   const retrieveSource = async (sourceId, clientSecret, paymentHandler) => {
     try {
       const {
@@ -25038,6 +24397,386 @@ const PaymentMethodContainerWithoutStripe = ({
     iframe.style = "position: absolute; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; z-index: 10;";
     cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.appendChild(iframe);
   };
+  /* End Stripe deprecated functions */
+
+  /* ====== End Stripe integration ======== */
+
+  /* ====== Start PayPal integration ======== */
+
+  /**
+   * Handles subscriptions from PayPal gateway
+   * @param {PaymentStateType} state
+   * @param {string} paypalNonce
+   * @return {void}
+   */
+
+
+  const handlePaypalSubscription = (state, paypalNonce) => {
+    const payment = new Payment(new PaypalGateway());
+    const {
+      couponCode
+    } = state;
+    /**
+     * @TODO: Add flags for types instead of testing by properties
+     */
+
+    if (giftRecipient) {
+      return payment.execute({
+        type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+        token: paypalNonce,
+        quantity: plan.quantity,
+        plan,
+        couponCode,
+        product,
+        giftRecipient,
+        addressId: selectedAddressId
+      }, (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)
+            }
+          });
+        }
+
+        onSuccess(res);
+      });
+    }
+
+    return payment.execute({
+      type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
+      token: paypalNonce,
+      quantity: plan.quantity,
+      plan,
+      couponCode,
+      product,
+      addressId: selectedAddressId
+    }, (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)
+          }
+        });
+      }
+
+      onSuccess(res);
+    });
+  };
+  /* ====== End PayPal integration ======== */
+
+  /* ====== General Functions Start ======== */
+
+  /**
+   * Updates the total amount after adding taxes only if site taxes are enabled
+   */
+
+
+  const updateTotalAmountWithTax = () => {
+    var _window$Pelcro$site$r8;
+
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
+    const taxesEnabled = (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.taxes_enabled;
+
+    if (taxesEnabled && type === "createPayment") {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+      resolveTaxCalculation().then(res => {
+        if (res) {
+          dispatch({
+            type: SET_TAX_AMOUNT,
+            payload: res.taxAmount
+          });
+          dispatch({
+            type: SET_UPDATED_PRICE,
+            payload: res.totalAmountWithTax
+          });
+          dispatch({
+            type: UPDATE_PAYMENT_REQUEST
+          });
+        }
+      }).catch(error => {
+        handlePaymentError(error);
+      }).finally(() => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+      });
+    }
+  };
+
+  const onApplyCouponCode = (state, dispatch) => {
+    const {
+      couponCode
+    } = state;
+
+    const handleCouponResponse = (err, res) => {
+      var _res$data$coupon;
+
+      dispatch({
+        type: DISABLE_COUPON_BUTTON,
+        payload: false
+      });
+
+      if (err) {
+        onFailure(err); // reset the coupon code in local state
+
+        setUpdatedCouponCode("");
+        dispatch({
+          type: SET_COUPON_ERROR,
+          payload: getErrorMessages(err)
+        }); // remove current coupon
+
+        dispatch({
+          type: SET_COUPON,
+          payload: null
+        });
+        dispatch({
+          type: SET_PERCENT_OFF,
+          payload: ""
+        });
+        dispatch({
+          type: SET_UPDATED_PRICE,
+          payload: null
+        });
+        dispatch({
+          type: SET_TAX_AMOUNT,
+          payload: null
+        });
+        const {
+          currentPlan
+        } = state;
+
+        if (currentPlan) {
+          var _currentPlan$quantity;
+
+          const quantity = (_currentPlan$quantity = currentPlan.quantity) !== null && _currentPlan$quantity !== void 0 ? _currentPlan$quantity : 1;
+          const price = currentPlan.amount;
+          dispatch({
+            type: SET_UPDATED_PRICE,
+            // set original plan price
+            payload: price * quantity
+          });
+          dispatch({
+            type: UPDATE_PAYMENT_REQUEST
+          }); // update the new amount with taxes if site has taxes enabled
+
+          updateTotalAmountWithTax();
+        }
+
+        return;
+      }
+
+      dispatch({
+        type: SET_COUPON_ERROR,
+        payload: ""
+      });
+      dispatch({
+        type: SHOW_ALERT,
+        payload: {
+          type: "error",
+          content: ""
+        }
+      });
+      dispatch({
+        type: SET_COUPON,
+        payload: res.data.coupon
+      }); // set the coupon code in local state to be able to use with Vantiv
+
+      setUpdatedCouponCode(res.data.coupon.code);
+      dispatch({
+        type: SET_PERCENT_OFF,
+        payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
+      });
+      dispatch({
+        type: SET_TAX_AMOUNT,
+        payload: res.data.taxes
+      });
+      dispatch({
+        type: SET_UPDATED_PRICE,
+        payload: res.data.total
+      });
+      dispatch({
+        type: UPDATE_PAYMENT_REQUEST
+      });
+    };
+
+    if ((couponCode === null || couponCode === void 0 ? void 0 : couponCode.trim()) === "") {
+      dispatch({
+        type: SET_COUPON,
+        payload: null
+      });
+      dispatch({
+        type: SET_PERCENT_OFF,
+        payload: ""
+      });
+      dispatch({
+        type: SET_UPDATED_PRICE,
+        payload: null
+      });
+      dispatch({
+        type: SET_TAX_AMOUNT,
+        payload: null
+      });
+      dispatch({
+        type: UPDATE_PAYMENT_REQUEST
+      });
+      updateTotalAmountWithTax();
+    }
+
+    if (couponCode !== null && couponCode !== void 0 && couponCode.trim()) {
+      dispatch({
+        type: DISABLE_COUPON_BUTTON,
+        payload: true
+      });
+
+      if (type === "createPayment") {
+        window.Pelcro.order.create({
+          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: selectedAddressId
+        }, handleCouponResponse);
+      } else if (type === "orderCreate") {
+        const isQuickPurchase = !Array.isArray(order);
+        const mappedOrderItems = isQuickPurchase ? [{
+          sku_id: order.id,
+          quantity: order.quantity
+        }] : order.map(item => ({
+          sku_id: item.id,
+          quantity: item.quantity
+        }));
+        window.Pelcro.ecommerce.order.createSummary({
+          items: mappedOrderItems,
+          coupon_code: couponCode
+        }, handleCouponResponse);
+      }
+    }
+  };
+
+  const debouncedApplyCouponCode = useRef(debounce$1(onApplyCouponCode, 1000)).current;
+
+  const removeAppliedCoupon = state => {
+    state.couponCode = ""; // reset the coupon code in local state
+
+    setUpdatedCouponCode("");
+    dispatch({
+      type: SET_COUPON_ERROR,
+      payload: ""
+    });
+    dispatch({
+      type: SHOW_COUPON_FIELD,
+      payload: false
+    });
+    dispatch({
+      type: SET_COUPON,
+      payload: null
+    });
+    dispatch({
+      type: SET_PERCENT_OFF,
+      payload: ""
+    });
+    dispatch({
+      type: SET_UPDATED_PRICE,
+      payload: null
+    });
+    dispatch({
+      type: SET_TAX_AMOUNT,
+      payload: null
+    });
+    const {
+      currentPlan
+    } = state;
+
+    if (currentPlan) {
+      var _currentPlan$quantity2;
+
+      const quantity = (_currentPlan$quantity2 = currentPlan.quantity) !== null && _currentPlan$quantity2 !== void 0 ? _currentPlan$quantity2 : 1;
+      const price = currentPlan.amount;
+      dispatch({
+        type: SET_UPDATED_PRICE,
+        // set original plan price
+        payload: price * quantity
+      });
+      dispatch({
+        type: UPDATE_PAYMENT_REQUEST
+      }); // update the new amount with taxes if site has taxes enabled
+
+      updateTotalAmountWithTax();
+    }
+  };
+  /**
+   * Resolves with the total & tax amount incase taxes enabled by site
+   * @return {Promise}
+   */
+
+
+  const resolveTaxCalculation = () => {
+    var _window$Pelcro$site$r9;
+
+    if (type === "invoicePayment") {
+      return new Promise(resolve => resolve());
+    }
+
+    const taxesEnabled = (_window$Pelcro$site$r9 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r9 === void 0 ? void 0 : _window$Pelcro$site$r9.taxes_enabled;
+    return new Promise((resolve, reject) => {
+      // resolve early if taxes isn't enabled
+      if (!taxesEnabled) {
+        return resolve(null);
+      }
+
+      window.Pelcro.order.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        plan_id: plan.id,
+        campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+        coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
+        address_id: selectedAddressId
+      }, (error, res) => {
+        var _res$data7, _res$data8;
+
+        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;
+        resolve({
+          totalAmountWithTax,
+          taxAmount
+        });
+      });
+    });
+  };
+  /* ====== General Functions End ======== */
+
 
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
@@ -25078,7 +24817,7 @@ const PaymentMethodContainerWithoutStripe = ({
           isLoading: true
         }, (state, dispatch) => {
           if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
-            return submitPayment(state);
+            return submitPayment();
           }
 
           if (getSiteCardProcessor() === "vantiv") {
@@ -25113,7 +24852,7 @@ const PaymentMethodContainerWithoutStripe = ({
             return replacePaymentSource(state, dispatch);
           }
 
-          submitPayment(state);
+          submitPayment();
         });
 
       case HANDLE_PAYPAL_SUBSCRIPTION:
@@ -25269,14 +25008,42 @@ const PaymentMethodContainerWithoutStripe = ({
   })));
 };
 
-const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
-
 const PaymentMethodContainer = props => {
   const [isStripeLoaded, setIsStripeLoaded] = useState(Boolean(window.Stripe));
   const {
     whenUserReady
   } = usePelcro.getStore();
-  const cardProcessor = getSiteCardProcessor();
+  const cardProcessor = getSiteCardProcessor(); // Create the Stripe object
+
+  const stripePromise = cardProcessor === "stripe" ? loadStripe(window.Pelcro.environment.stripe, {
+    stripeAccount: window.Pelcro.site.read().account_id
+  }) : null;
+  const [clientSecret, setClientSecret] = useState();
+  const appearance = {
+    theme: "stripe"
+  };
+  const options = {
+    clientSecret,
+    paymentMethodCreation: "manual",
+    appearance,
+    loader: "always"
+  };
+  useEffect(() => {
+    if (isStripeLoaded) {
+      window.Pelcro.user.createSetupIntent({
+        auth_token: window.Pelcro.user.read().auth_token
+      }, (err, res) => {
+        if (err) {
+          console.error(err);
+        }
+
+        if (res) {
+          setClientSecret(res.data.client_secret);
+        }
+      });
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     whenUserReady(() => {
       if (!window.Stripe && cardProcessor === "stripe") {
@@ -25285,16 +25052,15 @@ const PaymentMethodContainer = props => {
         });
       }
     });
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (isStripeLoaded) {
-    return /*#__PURE__*/React__default.createElement(es_13, {
-      apiKey: window.Pelcro.environment.stripe,
-      stripeAccount: window.Pelcro.site.read().account_id,
-      locale: getPageOrDefaultLanguage()
-    }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
+    return /*#__PURE__*/React__default.createElement("div", null, clientSecret ? /*#__PURE__*/React__default.createElement(Elements, {
+      options: options,
+      stripe: stripePromise
+    }, /*#__PURE__*/React__default.createElement(PaymentMethodContainerWithoutStripe, Object.assign({
       store: store$m
-    }, props))));
+    }, props))) : /*#__PURE__*/React__default.createElement(Loader, null));
   } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default.createElement(PaymentMethodContainerWithoutStripe, Object.assign({
       store: store$m
@@ -25418,53 +25184,6 @@ function YearSelect({
   }, placeholder), createYearsItems);
 }
 
-const StripeInputStyle = {
-  base: "plc-w-full plc-p-3 plc-border plc-border-gray-300 plc-appearance-none plc-outline-none plc-rounded plc-bg-white pelcro-input-input",
-  focus: "plc-ring-2 plc-ring-primary-400",
-  invalid: "plc-ring-2 plc-ring-red-300 pelcro-input-invalid"
-};
-const PelcroCardNumber = props => {
-  const {
-    t
-  } = useTranslation("checkoutForm");
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-relative"
-  }, /*#__PURE__*/React__default.createElement(es_9, Object.assign({
-    id: "pelcro-input-card-number",
-    classes: StripeInputStyle
-  }, props)), /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: "pelcro-input-card-number",
-    className: "pelcro-input-card-number-label"
-  }, t("labels.card"), " *"));
-};
-const PelcroCardCVC = props => {
-  const {
-    t
-  } = useTranslation("checkoutForm");
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-relative"
-  }, /*#__PURE__*/React__default.createElement(es_6, Object.assign({
-    id: "pelcro-input-cvc-number",
-    classes: StripeInputStyle
-  }, props)), /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: "pelcro-input-cvc-number",
-    className: "pelcro-input-cvc-number-label"
-  }, t("labels.CVC"), " *"));
-};
-const PelcroCardExpiry = props => {
-  const {
-    t
-  } = useTranslation("checkoutForm");
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-relative"
-  }, /*#__PURE__*/React__default.createElement(es_8, Object.assign({
-    id: "pelcro-input-expiry-date",
-    classes: StripeInputStyle
-  }, props)), /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: "pelcro-input-expiry-date",
-    className: "pelcro-input-expiry-date-label"
-  }, t("labels.date"), " *"));
-};
 const PelcroPaymentRequestButton = props => {
   const {
     state: {
@@ -25486,7 +25205,7 @@ const PelcroPaymentRequestButton = props => {
   };
 
   if (canMakePayment) {
-    return /*#__PURE__*/React__default.createElement(es_5, Object.assign({
+    return /*#__PURE__*/React__default.createElement(PaymentRequestButtonElement, Object.assign({
       className: "StripeElement stripe-payment-request-btn",
       onClick: updatePaymentRequest,
       paymentRequest: paymentRequest,
@@ -25504,11 +25223,43 @@ const PelcroPaymentRequestButton = props => {
 const CheckoutForm = ({
   type
 }) => {
+  var _window$Pelcro$user$r, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window3, _window3$Pelcro, _window3$Pelcro$user, _window3$Pelcro$user$, _window4, _window4$Pelcro, _window4$Pelcro$user, _window4$Pelcro$user$, _defaultAddress$line, _defaultAddress$line2, _defaultAddress$city, _defaultAddress$state, _defaultAddress$count, _defaultAddress$posta;
+
   const {
     selectedPaymentMethodId,
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
+  const defaultAddress = (_window$Pelcro$user$r = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r2 = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : (_window$Pelcro$user$r3 = _window$Pelcro$user$r2.addresses) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.find(address => address.type == "billing" && address.is_default)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  const billingDetails = {
+    name: (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : (_window2$Pelcro$user$ = _window2$Pelcro$user.read()) === null || _window2$Pelcro$user$ === void 0 ? void 0 : _window2$Pelcro$user$.name,
+    email: (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$user = _window3$Pelcro.user) === null || _window3$Pelcro$user === void 0 ? void 0 : (_window3$Pelcro$user$ = _window3$Pelcro$user.read()) === null || _window3$Pelcro$user$ === void 0 ? void 0 : _window3$Pelcro$user$.email,
+    phone: (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$Pelcro = _window4.Pelcro) === null || _window4$Pelcro === void 0 ? void 0 : (_window4$Pelcro$user = _window4$Pelcro.user) === null || _window4$Pelcro$user === void 0 ? void 0 : (_window4$Pelcro$user$ = _window4$Pelcro$user.read()) === null || _window4$Pelcro$user$ === void 0 ? void 0 : _window4$Pelcro$user$.phone,
+    address: {
+      line1: (_defaultAddress$line = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.line1) !== null && _defaultAddress$line !== void 0 ? _defaultAddress$line : null,
+      line2: (_defaultAddress$line2 = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.line2) !== null && _defaultAddress$line2 !== void 0 ? _defaultAddress$line2 : null,
+      city: (_defaultAddress$city = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.city) !== null && _defaultAddress$city !== void 0 ? _defaultAddress$city : null,
+      state: (_defaultAddress$state = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.state) !== null && _defaultAddress$state !== void 0 ? _defaultAddress$state : null,
+      country: (_defaultAddress$count = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.country) !== null && _defaultAddress$count !== void 0 ? _defaultAddress$count : null,
+      postal_code: (_defaultAddress$posta = defaultAddress === null || defaultAddress === void 0 ? void 0 : defaultAddress.postal_code) !== null && _defaultAddress$posta !== void 0 ? _defaultAddress$posta : null
+    }
+  };
+  const paymentElementOptions = {
+    layout: {
+      type: "tabs",
+      // or accordion
+      defaultCollapsed: false
+    },
+    defaultValues: {
+      billingDetails: billingDetails
+    },
+    terms: {
+      applePay: "never",
+      card: "never",
+      googlePay: "never",
+      paypal: "never"
+    }
+  };
 
   if (selectedPaymentMethodId) {
     return null;
@@ -25570,56 +25321,10 @@ const CheckoutForm = ({
       }))));
     }
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-mt-4"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-relative"
-    }, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
-      autoFocus: true
-    }), /*#__PURE__*/React__default.createElement("div", {
-      // alt="credit_cards"
-      className: "plc-w-auto plc-h-8 plc-absolute plc-right-2 plc-top-1 plc-flex" // src="https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
-
-    }, /*#__PURE__*/React__default.createElement("svg", {
-      className: "plc-w-8",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 48 48"
-    }, /*#__PURE__*/React__default.createElement("path", {
-      fill: "#1565C0",
-      d: "M15.186 19l-2.626 7.832c0 0-.667-3.313-.733-3.729-1.495-3.411-3.701-3.221-3.701-3.221L10.726 30v-.002h3.161L18.258 19H15.186zM17.689 30L20.56 30 22.296 19 19.389 19zM38.008 19h-3.021l-4.71 11h2.852l.588-1.571h3.596L37.619 30h2.613L38.008 19zM34.513 26.328l1.563-4.157.818 4.157H34.513zM26.369 22.206c0-.606.498-1.057 1.926-1.057.928 0 1.991.674 1.991.674l.466-2.309c0 0-1.358-.515-2.691-.515-3.019 0-4.576 1.444-4.576 3.272 0 3.306 3.979 2.853 3.979 4.551 0 .291-.231.964-1.888.964-1.662 0-2.759-.609-2.759-.609l-.495 2.216c0 0 1.063.606 3.117.606 2.059 0 4.915-1.54 4.915-3.752C30.354 23.586 26.369 23.394 26.369 22.206z"
-    }), /*#__PURE__*/React__default.createElement("path", {
-      fill: "#FFC107",
-      d: "M12.212,24.945l-0.966-4.748c0,0-0.437-1.029-1.573-1.029c-1.136,0-4.44,0-4.44,0S10.894,20.84,12.212,24.945z"
-    })), /*#__PURE__*/React__default.createElement("svg", {
-      className: "plc-w-8",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 48 48"
-    }, /*#__PURE__*/React__default.createElement("path", {
-      fill: "#ff9800",
-      d: "M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"
-    }), /*#__PURE__*/React__default.createElement("path", {
-      fill: "#d50000",
-      d: "M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"
-    }), /*#__PURE__*/React__default.createElement("path", {
-      fill: "#ff3d00",
-      d: "M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"
-    })), /*#__PURE__*/React__default.createElement("svg", {
-      className: "plc-w-8",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 48 48"
-    }, /*#__PURE__*/React__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.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"
-    })))), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-items-end plc-justify-between plc-my-4"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-w-6/12 plc-pr-1"
-    }, /*#__PURE__*/React__default.createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-w-6/12 plc-pl-1"
-    }, /*#__PURE__*/React__default.createElement(PelcroCardCVC, null))));
+    return /*#__PURE__*/React__default.createElement(PaymentElement, {
+      id: "payment-element",
+      options: paymentElementOptions
+    });
   }
 
   return null;
@@ -25893,7 +25598,7 @@ class PaypalClient {
    * @param {paypalConstructorOptions} paypalClientConfig
    */
   constructor(paypalClientConfig) {
-    _defineProperty$3(this, "build", async () => {
+    _defineProperty$4(this, "build", async () => {
       if (!this.isPaypalEnabled) {
         console.error("Braintree/Paypal integration is currently not enabled on this site's config");
         return;
@@ -25913,7 +25618,7 @@ class PaypalClient {
       this.client = paypalClient;
     });
 
-    _defineProperty$3(this, "createPayment", options => {
+    _defineProperty$4(this, "createPayment", options => {
       var _this$config$locale, _this$config$style;
 
       if (!this.client) {
@@ -25974,7 +25679,7 @@ class PaypalClient {
       });
     });
 
-    _defineProperty$3(this, "render", () => {
+    _defineProperty$4(this, "render", () => {
       var _this$config$buttonEl;
 
       if (!this.paypalButton) {
@@ -26077,7 +25782,7 @@ class PaypalClient {
 
 }
 
-_defineProperty$3(PaypalClient, "isPaypalEnabled", () => Boolean(window.Pelcro.site.read().braintree_tokenization));
+_defineProperty$4(PaypalClient, "isPaypalEnabled", () => Boolean(window.Pelcro.site.read().braintree_tokenization));
 
 /**
  * PaypalSubscribeButton component
@@ -26213,7 +25918,7 @@ function SvgLock(props) {
 }
 
 const SelectedPaymentMethod = () => {
-  var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
+  var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4, _paymentMethod$proper5;
 
   const {
     t
@@ -26244,9 +25949,9 @@ const SelectedPaymentMethod = () => {
     className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "plc-font-semibold"
-  }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default.createElement("p", {
+  }, (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.last4), paymentMethod.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-sm plc-text-gray-500"
-  }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))), /*#__PURE__*/React__default.createElement(Button, {
+  }, t("select.expires"), " ", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_month, "/", (_paymentMethod$proper5 = paymentMethod.properties) === null || _paymentMethod$proper5 === void 0 ? void 0 : _paymentMethod$proper5.exp_year))), /*#__PURE__*/React__default.createElement(Button, {
     onClick: () => switchView("payment-method-select"),
     disabled: isLoading,
     variant: "ghost",
@@ -27859,27 +27564,27 @@ class DefaultNewsLetter extends Component {
 
     super(props);
 
-    _defineProperty$3(this, "componentDidMount", () => {
+    _defineProperty$4(this, "componentDidMount", () => {
       document.addEventListener("keydown", this.handleSubmit);
     });
 
-    _defineProperty$3(this, "componentWillUnmount", () => {
+    _defineProperty$4(this, "componentWillUnmount", () => {
       document.removeEventListener("keydown", this.handleSubmit);
     });
 
-    _defineProperty$3(this, "handleSubmit", e => {
+    _defineProperty$4(this, "handleSubmit", e => {
       if (e.key === "Enter" && !this.state.disableSubmit) this.submitNewsletter();
     });
 
-    _defineProperty$3(this, "displayLoginView", () => {
+    _defineProperty$4(this, "displayLoginView", () => {
       this.props.setView("login");
     });
 
-    _defineProperty$3(this, "displaySelectView", () => {
+    _defineProperty$4(this, "displaySelectView", () => {
       this.props.setView("plan-select");
     });
 
-    _defineProperty$3(this, "submitNewsletter", () => {
+    _defineProperty$4(this, "submitNewsletter", () => {
       this.setState({
         disableSubmit: true
       });
@@ -27922,30 +27627,30 @@ class DefaultNewsLetter extends Component {
       });
     });
 
-    _defineProperty$3(this, "postSubmit", () => {
+    _defineProperty$4(this, "postSubmit", () => {
       window.Pelcro.paywall.setNewsletterExtraVisits(true);
       this.props.setView("meter");
     });
 
-    _defineProperty$3(this, "onEmailChange", event => {
+    _defineProperty$4(this, "onEmailChange", event => {
       this.setState({
         email: event.target.value
       });
     });
 
-    _defineProperty$3(this, "onFirstNameChange", event => {
+    _defineProperty$4(this, "onFirstNameChange", event => {
       this.setState({
         firstName: event.target.value
       });
     });
 
-    _defineProperty$3(this, "onLastNameChange", event => {
+    _defineProperty$4(this, "onLastNameChange", event => {
       this.setState({
         lastName: event.target.value
       });
     });
 
-    _defineProperty$3(this, "onPostalCodeChange", event => {
+    _defineProperty$4(this, "onPostalCodeChange", event => {
       this.setState({
         postalCode: event.target.value
       });
@@ -28531,7 +28236,7 @@ const SubscriptionManageMembersContainer = ({
   } = usePelcro();
   const subscription_id = subscriptionToManageMembers === null || subscriptionToManageMembers === void 0 ? void 0 : subscriptionToManageMembers.id;
 
-  const handleListMembers = ({}, dispatch) => {
+  const handleListMembers = (state, dispatch) => {
     var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r;
 
     window.Pelcro.subscription.listMembers({
@@ -33813,7 +33518,7 @@ const PaymentMethodSelectList = () => {
   return /*#__PURE__*/React__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;
+    var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4, _paymentMethod$proper5;
 
     const isSelected = selectedPaymentMethodId === String(paymentMethod.id);
     return /*#__PURE__*/React__default.createElement("div", {
@@ -33831,9 +33536,9 @@ const PaymentMethodSelectList = () => {
       className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
     }, /*#__PURE__*/React__default.createElement("p", {
       className: "plc-font-semibold"
-    }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default.createElement("p", {
+    }, (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.last4), paymentMethod.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default.createElement("p", {
       className: "plc-text-sm plc-text-gray-500"
-    }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))));
+    }, t("select.expires"), " ", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_month, "/", (_paymentMethod$proper5 = paymentMethod.properties) === null || _paymentMethod$proper5 === void 0 ? void 0 : _paymentMethod$proper5.exp_year))));
   }));
 };
 
@@ -34179,7 +33884,7 @@ const PaymentMethodDeleteList = props => {
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll no-scrollbar plc-max-h-80 pelcro-payment-method-select-wrapper plc-mb-4"
   }, paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => {
-    var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
+    var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4, _paymentMethod$proper5;
 
     const isSelected = selectedPaymentMethodId === String(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
     return /*#__PURE__*/React__default.createElement("div", {
@@ -34197,9 +33902,9 @@ const PaymentMethodDeleteList = props => {
       className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
     }, /*#__PURE__*/React__default.createElement("p", {
       className: "plc-font-semibold"
-    }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022", " ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default.createElement("p", {
+    }, (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.last4), paymentMethod.properties.brand !== "bacs_debit" && /*#__PURE__*/React__default.createElement("p", {
       className: "plc-text-sm plc-text-gray-500"
-    }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))));
+    }, t("select.expires"), " ", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_month, "/", (_paymentMethod$proper5 = paymentMethod.properties) === null || _paymentMethod$proper5 === void 0 ? void 0 : _paymentMethod$proper5.exp_year))));
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-px-3"
   }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default.createElement(PaymentMethodView, {
@@ -34552,7 +34257,6 @@ const DashboardContainer = ({
         type: SET_DISABLESUBMIT,
         payload: false
       });
-      onClose();
 
       if (err) {
         onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
@@ -36053,7 +35757,6 @@ const SubscriptionsItems = ({
         return switchView("email-verify");
       }
 
-      switchView(null);
       onClose === null || onClose === void 0 ? void 0 : onClose();
       notify.confirm((onSuccess, onFailure) => {
         dispatch({
@@ -37099,12 +36802,14 @@ const PaymentCardsMenu = props => {
     setPaymentMethodToEdit,
     setPaymentMethodToDelete
   } = usePelcro();
-  const [sources, setSources] = useState([]); // const source = window.Pelcro.user.read().source;
-
+  const [sources, setSources] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
     window.Pelcro.paymentMethods.list({
       auth_token: window.Pelcro.user.read().auth_token
     }, (err, res) => {
+      setIsLoading(false);
+
       if (err) {
         return console.error(err);
       }
@@ -37161,9 +36866,9 @@ const PaymentCardsMenu = props => {
 
   return /*#__PURE__*/React__default.createElement(Card, {
     id: "pelcro-dashboard-payment-menu",
-    className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto",
+    className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto plc-relative",
     title: t("labels.paymentSource")
-  }, /*#__PURE__*/React__default.createElement(PaymentCardsItems, {
+  }, isLoading ? /*#__PURE__*/React__default.createElement(Loader, null) : /*#__PURE__*/React__default.createElement(PaymentCardsItems, {
     displaySourceEdit: displaySourceEdit,
     onDeletePaymentMethodClick: onDeletePaymentMethodClick,
     sources: sources
@@ -37174,39 +36879,48 @@ const PaymentCardsMenu = props => {
 };
 
 const PaymentCardsItems = props => {
-  useTranslation("dashboard");
-  return props.sources.map((source, index) => {
-    var _source$properties, _source$properties2;
+  const {
+    t
+  } = useTranslation("dashboard");
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "dashboard-source-" + source.id,
-      className: `plc-py-4 plc-px-6 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark`
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-items-center"
-    }, /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-mr-6"
-    }, getPaymentCardIcon(source === null || source === void 0 ? void 0 : (_source$properties = source.properties) === null || _source$properties === void 0 ? void 0 : _source$properties.brand)), /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-ml-1 plc-text-lg plc-tracking-widest"
-    }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", source === null || source === void 0 ? void 0 : (_source$properties2 = source.properties) === null || _source$properties2 === void 0 ? void 0 : _source$properties2.last4)), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex-grow"
-    }), /*#__PURE__*/React__default.createElement(Button, {
-      id: "pelcro-button-update-source-" + index,
-      variant: "icon",
-      className: "plc-text-gray-500",
-      "data-key": source.id,
-      icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
-      onClick: props === null || props === void 0 ? void 0 : props.displaySourceEdit
-    }), /*#__PURE__*/React__default.createElement(Button, {
-      id: "pelcro-button-update-source-" + index,
-      variant: "icon",
-      className: "plc-text-gray-500",
-      "data-key": source.id,
-      icon: /*#__PURE__*/React__default.createElement(SvgTrashCan, null),
-      onClick: () => {
-        props === null || props === void 0 ? void 0 : props.onDeletePaymentMethodClick(source);
-      }
-    }));
-  });
+  if (props.sources.length > 0) {
+    return props.sources.sort((a, b) => a.is_default === b.is_default ? 0 : a.is_default ? -1 : 1).map((source, index) => {
+      var _source$properties, _source$properties2, _source$properties3, _source$properties4;
+
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: "dashboard-source-" + source.id,
+        className: "plc-relative plc-py-4 plc-px-6 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 plc-bg-white plc-shadow-md_dark"
+      }, source.is_default && /*#__PURE__*/React__default.createElement("span", {
+        className: "plc-absolute plc--top-3 plc-right-3 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"
+      }, t("labels.default")), /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-flex plc-items-center"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "plc-mr-6"
+      }, getPaymentCardIcon(source === null || source === void 0 ? void 0 : (_source$properties = source.properties) === null || _source$properties === void 0 ? void 0 : _source$properties.brand)), /*#__PURE__*/React__default.createElement("p", {
+        className: "plc-ml-1 plc-text-lg plc-tracking-widest"
+      }, (source === null || source === void 0 ? void 0 : (_source$properties2 = source.properties) === null || _source$properties2 === void 0 ? void 0 : _source$properties2.brand) === "bacs_debit" ? "••••" : "•••• •••• ••••", " ", source === null || source === void 0 ? void 0 : (_source$properties3 = source.properties) === null || _source$properties3 === void 0 ? void 0 : _source$properties3.last4)), /*#__PURE__*/React__default.createElement("span", {
+        className: "plc-flex-grow"
+      }), (source === null || source === void 0 ? void 0 : (_source$properties4 = source.properties) === null || _source$properties4 === void 0 ? void 0 : _source$properties4.brand) !== "bacs_debit" && /*#__PURE__*/React__default.createElement(Button, {
+        id: "pelcro-button-update-source-" + index,
+        variant: "icon",
+        className: "plc-text-gray-500",
+        "data-key": source.id,
+        icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
+        onClick: props === null || props === void 0 ? void 0 : props.displaySourceEdit
+      }), /*#__PURE__*/React__default.createElement(Button, {
+        id: "pelcro-button-update-source-" + index,
+        variant: "icon",
+        className: "plc-text-gray-500",
+        "data-key": source.id,
+        icon: /*#__PURE__*/React__default.createElement(SvgTrashCan, null),
+        onClick: () => {
+          props === null || props === void 0 ? void 0 : props.onDeletePaymentMethodClick(source);
+        }
+      }));
+    });
+  } else {
+    return /*#__PURE__*/React__default.createElement("div", null, "you didn't add payment methods yet");
+  }
 };
 
 var mode = {
@@ -42214,4 +41928,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteOptions, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteOptions, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };