swell-js 3.22.0 → 3.22.2

package/dist/swell.umd.min.js

@@ -4220,7 +4220,6 @@
 	};
 
 	var isArray$2 = Array.isArray;
-	var split = String.prototype.split;
 	var push = Array.prototype.push;
 	var pushToArray = function (arr, valueOrArray) {
 	    push.apply(arr, isArray$2(valueOrArray) ? valueOrArray : [valueOrArray]);
@@ -4263,6 +4262,7 @@
 	    object,
 	    prefix,
 	    generateArrayPrefix,
+	    commaRoundTrip,
 	    strictNullHandling,
 	    skipNulls,
 	    encoder,
@@ -4321,14 +4321,6 @@
 	    if (isNonNullishPrimitive(obj) || utils$2.isBuffer(obj)) {
 	        if (encoder) {
 	            var keyValue = encodeValuesOnly ? prefix : encoder(prefix, defaults$1.encoder, charset, 'key', format);
-	            if (generateArrayPrefix === 'comma' && encodeValuesOnly) {
-	                var valuesArray = split.call(String(obj), ',');
-	                var valuesJoined = '';
-	                for (var i = 0; i < valuesArray.length; ++i) {
-	                    valuesJoined += (i === 0 ? '' : ',') + formatter(encoder(valuesArray[i], defaults$1.encoder, charset, 'value', format));
-	                }
-	                return [formatter(keyValue) + '=' + valuesJoined];
-	            }
 	            return [formatter(keyValue) + '=' + formatter(encoder(obj, defaults$1.encoder, charset, 'value', format))];
 	        }
 	        return [formatter(prefix) + '=' + formatter(String(obj))];
@@ -4343,6 +4335,9 @@
 	    var objKeys;
 	    if (generateArrayPrefix === 'comma' && isArray$2(obj)) {
 	        // we need to join elements in
+	        if (encodeValuesOnly && encoder) {
+	            obj = utils$2.maybeMap(obj, encoder);
+	        }
 	        objKeys = [{ value: obj.length > 0 ? obj.join(',') || null : void undefined }];
 	    } else if (isArray$2(filter)) {
 	        objKeys = filter;
@@ -4351,6 +4346,8 @@
 	        objKeys = sort ? keys.sort(sort) : keys;
 	    }
 
+	    var adjustedPrefix = commaRoundTrip && isArray$2(obj) && obj.length === 1 ? prefix + '[]' : prefix;
+
 	    for (var j = 0; j < objKeys.length; ++j) {
 	        var key = objKeys[j];
 	        var value = typeof key === 'object' && typeof key.value !== 'undefined' ? key.value : obj[key];
@@ -4360,8 +4357,8 @@
 	        }
 
 	        var keyPrefix = isArray$2(obj)
-	            ? typeof generateArrayPrefix === 'function' ? generateArrayPrefix(prefix, key) : prefix
-	            : prefix + (allowDots ? '.' + key : '[' + key + ']');
+	            ? typeof generateArrayPrefix === 'function' ? generateArrayPrefix(adjustedPrefix, key) : adjustedPrefix
+	            : adjustedPrefix + (allowDots ? '.' + key : '[' + key + ']');
 
 	        sideChannel.set(object, step);
 	        var valueSideChannel = getSideChannel();
@@ -4370,9 +4367,10 @@
 	            value,
 	            keyPrefix,
 	            generateArrayPrefix,
+	            commaRoundTrip,
 	            strictNullHandling,
 	            skipNulls,
-	            encoder,
+	            generateArrayPrefix === 'comma' && encodeValuesOnly && isArray$2(obj) ? null : encoder,
 	            filter,
 	            sort,
 	            allowDots,
@@ -4466,6 +4464,10 @@
 	    }
 
 	    var generateArrayPrefix = arrayPrefixGenerators[arrayFormat];
+	    if (opts && 'commaRoundTrip' in opts && typeof opts.commaRoundTrip !== 'boolean') {
+	        throw new TypeError('`commaRoundTrip` must be a boolean, or absent');
+	    }
+	    var commaRoundTrip = generateArrayPrefix === 'comma' && opts && opts.commaRoundTrip;
 
 	    if (!objKeys) {
 	        objKeys = Object.keys(obj);
@@ -4486,6 +4488,7 @@
 	            obj[key],
 	            key,
 	            generateArrayPrefix,
+	            commaRoundTrip,
 	            options.strictNullHandling,
 	            options.skipNulls,
 	            options.encode ? options.encoder : null,
@@ -9264,7 +9267,7 @@
 	function getEnumerableOwnPropertySymbols(target) {
 		return Object.getOwnPropertySymbols
 			? Object.getOwnPropertySymbols(target).filter(function(symbol) {
-				return target.propertyIsEnumerable(symbol)
+				return Object.propertyIsEnumerable.call(target, symbol)
 			})
 			: []
 	}
@@ -9723,19 +9726,19 @@
 	  }
 	};
 
-	var __defProp$k = Object.defineProperty;
-	var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-	var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-	var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$k = (a, b) => {
+	var __defProp$l = Object.defineProperty;
+	var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+	var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+	var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$l = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$k.call(b, prop))
-	      __defNormalProp$k(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$k)
-	    for (var prop of __getOwnPropSymbols$k(b)) {
-	      if (__propIsEnum$k.call(b, prop))
-	        __defNormalProp$k(a, prop, b[prop]);
+	    if (__hasOwnProp$l.call(b, prop))
+	      __defNormalProp$l(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$l)
+	    for (var prop of __getOwnPropSymbols$l(b)) {
+	      if (__propIsEnum$l.call(b, prop))
+	        __defNormalProp$l(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -9755,7 +9758,7 @@
 	  if (isServer()) {
 	    return;
 	  }
-	  options = __spreadValues$k({
+	  options = __spreadValues$l({
 	    path: "/",
 	    "max-age": COOKIE_MAX_AGE,
 	    samesite: "lax"
@@ -9774,19 +9777,19 @@
 	  document.cookie = updatedCookie;
 	}
 
-	var __defProp$j = Object.defineProperty;
-	var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-	var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-	var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$j = (a, b) => {
+	var __defProp$k = Object.defineProperty;
+	var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+	var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+	var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$k = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$j.call(b, prop))
-	      __defNormalProp$j(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$j)
-	    for (var prop of __getOwnPropSymbols$j(b)) {
-	      if (__propIsEnum$j.call(b, prop))
-	        __defNormalProp$j(a, prop, b[prop]);
+	    if (__hasOwnProp$k.call(b, prop))
+	      __defNormalProp$k(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$k)
+	    for (var prop of __getOwnPropSymbols$k(b)) {
+	      if (__propIsEnum$k.call(b, prop))
+	        __defNormalProp$k(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -9834,7 +9837,7 @@
 	      value = toCamel(value);
 	    }
 	    if (path || value instanceof Array) {
-	      let upData = __spreadValues$j({}, data || {});
+	      let upData = __spreadValues$k({}, data || {});
 	      let upPath = useCamelCase ? toCamelPath(path) : path;
 	      set(upData, upPath || "", value);
 	      data = upData;
@@ -9923,21 +9926,21 @@
 	  };
 	}
 
-	var __defProp$i = Object.defineProperty;
+	var __defProp$j = Object.defineProperty;
 	var __defProps$a = Object.defineProperties;
 	var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-	var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-	var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$i = (a, b) => {
+	var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+	var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+	var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$j = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$i.call(b, prop))
-	      __defNormalProp$i(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$i)
-	    for (var prop of __getOwnPropSymbols$i(b)) {
-	      if (__propIsEnum$i.call(b, prop))
-	        __defNormalProp$i(a, prop, b[prop]);
+	    if (__hasOwnProp$j.call(b, prop))
+	      __defNormalProp$j(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$j)
+	    for (var prop of __getOwnPropSymbols$j(b)) {
+	      if (__propIsEnum$j.call(b, prop))
+	        __defNormalProp$j(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -9969,15 +9972,15 @@
 	    (acc, op) => {
 	      const values = reduce(
 	        op.values,
-	        (acc2, val) => __spreadProps$a(__spreadValues$i({}, acc2), {
-	          [val.id]: __spreadProps$a(__spreadValues$i({}, val), { id: val.id }),
-	          [val.name]: __spreadProps$a(__spreadValues$i({}, val), { id: val.id })
+	        (acc2, val) => __spreadProps$a(__spreadValues$j({}, acc2), {
+	          [val.id]: __spreadProps$a(__spreadValues$j({}, val), { id: val.id }),
+	          [val.name]: __spreadProps$a(__spreadValues$j({}, val), { id: val.id })
 	        }),
 	        {}
 	      );
-	      return __spreadProps$a(__spreadValues$i({}, acc), {
-	        [op.id]: __spreadProps$a(__spreadValues$i({}, op), { values }),
-	        [op.name]: __spreadProps$a(__spreadValues$i({}, op), { values })
+	      return __spreadProps$a(__spreadValues$j({}, acc), {
+	        [op.id]: __spreadProps$a(__spreadValues$j({}, op), { values }),
+	        [op.name]: __spreadProps$a(__spreadValues$j({}, op), { values })
 	      });
 	    },
 	    {}
@@ -10020,7 +10023,7 @@
 	function calculateVariation(input, options, purchaseOption) {
 	  const product = OPTIONS.useCamelCase ? toSnake(input) : input;
 	  const purchaseOp = findPurchaseOption(product, purchaseOption);
-	  const variation = __spreadProps$a(__spreadValues$i({}, product), {
+	  const variation = __spreadProps$a(__spreadValues$j({}, product), {
 	    price: typeof purchaseOp.price !== "number" ? null : purchaseOp.price,
 	    sale_price: purchaseOp.sale_price,
 	    orig_price: purchaseOp.orig_price,
@@ -10102,7 +10105,7 @@
 	        option = option.plans[0];
 	      }
 	    }
-	    return __spreadProps$a(__spreadValues$i({}, option), {
+	    return __spreadProps$a(__spreadValues$j({}, option), {
 	      price: typeof option.price === "number" ? option.price : product.price,
 	      sale_price: typeof option.sale_price === "number" ? option.sale_price : product.sale_price,
 	      orig_price: typeof option.orig_price === "number" ? option.orig_price : product.orig_price
@@ -10120,7 +10123,7 @@
 	    request).list({
 	    filterable: true
 	  });
-	  return getFilters(products, __spreadProps$a(__spreadValues$i({}, options), { filterableAttributes }));
+	  return getFilters(products, __spreadProps$a(__spreadValues$j({}, options), { filterableAttributes }));
 	}
 	function getFilters(products, options = {}) {
 	  let attributes = (options.attributes || options.attributes === void 0) && getAttributes(products);
@@ -10224,7 +10227,7 @@
 	              ...value instanceof Array ? value : [value]
 	            ]);
 	          } else {
-	            attributes.push(__spreadProps$a(__spreadValues$i({}, product.attributes[id]), {
+	            attributes.push(__spreadProps$a(__spreadValues$j({}, product.attributes[id]), {
 	              value: void 0,
 	              values: [...value instanceof Array ? value : [value]]
 	            }));
@@ -10277,21 +10280,21 @@
 	  };
 	}
 
-	var __defProp$h = Object.defineProperty;
+	var __defProp$i = Object.defineProperty;
 	var __defProps$9 = Object.defineProperties;
 	var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-	var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-	var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$h = (a, b) => {
+	var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+	var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+	var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$i = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$h.call(b, prop))
-	      __defNormalProp$h(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$h)
-	    for (var prop of __getOwnPropSymbols$h(b)) {
-	      if (__propIsEnum$h.call(b, prop))
-	        __defNormalProp$h(a, prop, b[prop]);
+	    if (__hasOwnProp$i.call(b, prop))
+	      __defNormalProp$i(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$i)
+	    for (var prop of __getOwnPropSymbols$i(b)) {
+	      if (__propIsEnum$i.call(b, prop))
+	        __defNormalProp$i(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -10303,7 +10306,7 @@
 	    settings: null,
 	    requested: false,
 	    pendingRequests: [],
-	    cacheClear: null,
+	    cacheClear: false,
 	    async requestStateChange(method, url, id, data) {
 	      return this.requestStateSync(async () => {
 	        const result = await request(method, url, id, data);
@@ -10314,22 +10317,29 @@
 	        return result;
 	      });
 	    },
+	    nextRequest() {
+	      if (this.pendingRequests.length <= 0) {
+	        this.requested = false;
+	        return;
+	      }
+	      const { handler, resolve, reject } = this.pendingRequests.shift();
+	      return Promise.resolve().then(handler).then(resolve, reject).finally(() => {
+	        this.nextRequest();
+	      });
+	    },
 	    async requestStateSync(handler) {
-	      if (this.state) {
-	        return await handler();
-	      } else if (this.requested) {
-	        return new Promise((resolve) => {
-	          this.pendingRequests.push({ handler, resolve });
+	      if (this.requested) {
+	        return new Promise((resolve, reject) => {
+	          this.pendingRequests.push({ handler, resolve, reject });
 	        });
 	      }
 	      this.requested = true;
-	      const result = await handler();
-	      this.requested = false;
-	      while (this.pendingRequests.length > 0) {
-	        const { handler: handler2, resolve } = this.pendingRequests.shift();
-	        resolve(handler2());
+	      try {
+	        const result = await handler();
+	        return result;
+	      } finally {
+	        this.nextRequest();
 	      }
-	      return result;
 	    },
 	    get() {
 	      if (options.getCart) {
@@ -10337,7 +10347,7 @@
 	      }
 	      let data;
 	      if (this.cacheClear) {
-	        this.cacheClear = null;
+	        this.cacheClear = false;
 	        data = { $cache: false };
 	      }
 	      return this.requestStateChange("get", "/cart", void 0, data);
@@ -10348,7 +10358,7 @@
 	    getItemData(item, data = {}) {
 	      let result = cloneDeep(item);
 	      if (typeof item === "string") {
-	        result = __spreadProps$9(__spreadValues$h({}, data || {}), {
+	        result = __spreadProps$9(__spreadValues$i({}, data || {}), {
 	          product_id: item
 	        });
 	      }
@@ -10387,7 +10397,7 @@
 	    update(input) {
 	      let data = input;
 	      if (data.items && data.items.map) {
-	        data = __spreadProps$9(__spreadValues$h({}, data), {
+	        data = __spreadProps$9(__spreadValues$i({}, data), {
 	          items: data.items.map(this.getItemData)
 	        });
 	      }
@@ -10413,7 +10423,7 @@
 	      return this.state[options.useCamelCase ? "shipmentRating" : "shipment_rating"];
 	    },
 	    async submitOrder() {
-	      const result = await request("post", "/cart/order");
+	      const result = await this.requestStateChange("post", "/cart/order");
 	      if (result.errors) {
 	        return result;
 	      }
@@ -10596,19 +10606,19 @@
 	  };
 	}
 
-	var __defProp$g = Object.defineProperty;
-	var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-	var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-	var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$g = (a, b) => {
+	var __defProp$h = Object.defineProperty;
+	var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+	var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+	var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$h = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$g.call(b, prop))
-	      __defNormalProp$g(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$g)
-	    for (var prop of __getOwnPropSymbols$g(b)) {
-	      if (__propIsEnum$g.call(b, prop))
-	        __defNormalProp$g(a, prop, b[prop]);
+	    if (__hasOwnProp$h.call(b, prop))
+	      __defNormalProp$h(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$h)
+	    for (var prop of __getOwnPropSymbols$h(b)) {
+	      if (__propIsEnum$h.call(b, prop))
+	        __defNormalProp$h(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -10618,7 +10628,7 @@
 	      return cacheApi.getFetch(
 	        `content_${type}`,
 	        id,
-	        () => request("get", `/content/${type}`, id, __spreadValues$g({
+	        () => request("get", `/content/${type}`, id, __spreadValues$h({
 	          $preview: opt.previewContent
 	        }, query || {}))
 	      );
@@ -10627,21 +10637,21 @@
 	  };
 	}
 
-	var __defProp$f = Object.defineProperty;
+	var __defProp$g = Object.defineProperty;
 	var __defProps$8 = Object.defineProperties;
 	var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-	var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-	var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$f = (a, b) => {
+	var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+	var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+	var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$g = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$f.call(b, prop))
-	      __defNormalProp$f(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$f)
-	    for (var prop of __getOwnPropSymbols$f(b)) {
-	      if (__propIsEnum$f.call(b, prop))
-	        __defNormalProp$f(a, prop, b[prop]);
+	    if (__hasOwnProp$g.call(b, prop))
+	      __defNormalProp$g(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$g)
+	    for (var prop of __getOwnPropSymbols$g(b)) {
+	      if (__propIsEnum$g.call(b, prop))
+	        __defNormalProp$g(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -10754,7 +10764,7 @@
 	      let configs = this.getStoreLocales();
 	      if (configs) {
 	        configs = configs.reduce(
-	          (acc, config) => __spreadProps$8(__spreadValues$f({}, acc), {
+	          (acc, config) => __spreadProps$8(__spreadValues$g({}, acc), {
 	            [config.code]: config
 	          }),
 	          {}
@@ -10845,14 +10855,14 @@
 	    while (fallbackKey) {
 	      fallbackKeys = fallbackKeys || [];
 	      fallbackKeys.push(fallbackKey);
-	      fallbackValues = __spreadValues$f(__spreadValues$f({}, values[key][fallbackKey] || {}), fallbackValues);
+	      fallbackValues = __spreadValues$g(__spreadValues$g({}, values[key][fallbackKey] || {}), fallbackValues);
 	      fallbackKey = configs[fallbackKey] && configs[fallbackKey].fallback;
 	      if (origFallbackKey === fallbackKey) {
 	        break;
 	      }
 	    }
 	  }
-	  let localeValues = __spreadValues$f(__spreadValues$f({}, fallbackValues), values[key][returnLocaleKey] || {});
+	  let localeValues = __spreadValues$g(__spreadValues$g({}, fallbackValues), values[key][returnLocaleKey] || {});
 	  const valueKeys = Object.keys(localeValues);
 	  for (let valueKey of valueKeys) {
 	    const hasValue = localeValues[valueKey] !== null && localeValues[valueKey] !== "";
@@ -11036,32 +11046,102 @@
 	  await new Promise((resolve) => setTimeout(resolve, 1e3));
 	}
 
-	var __defProp$e = Object.defineProperty;
+	class PaymentMethodDisabledError extends Error {
+	  constructor(method) {
+	    const message = `${method} payments are disabled. See Payment settings in the Swell dashboard for details`;
+	    super(message);
+	  }
+	}
+	class UnsupportedPaymentMethodError extends Error {
+	  constructor(method, gateway) {
+	    let message = `Unsupported payment method: ${method}`;
+	    if (gateway) {
+	      message += ` (${gateway})`;
+	    }
+	    super(message);
+	  }
+	}
+	class UnableAuthenticatePaymentMethodError extends Error {
+	  constructor() {
+	    const message = "We are unable to authenticate your payment method. Please choose a different payment method and try again";
+	    super(message);
+	  }
+	}
+	class LibraryNotLoadedError extends Error {
+	  constructor(library) {
+	    const message = `${library} was not loaded`;
+	    super(message);
+	  }
+	}
+	class MethodPropertyMissingError extends Error {
+	  constructor(method, property) {
+	    const message = `${method} ${property} is missing`;
+	    super(message);
+	  }
+	}
+	class DomElementNotFoundError extends Error {
+	  constructor(elementId) {
+	    const message = `DOM element with '${elementId}' ID not found`;
+	    super(message);
+	  }
+	}
+	class PaymentElementNotCreatedError extends Error {
+	  constructor(methodName) {
+	    const message = `The ${methodName} payment element was not created`;
+	    super(message);
+	  }
+	}
+
+	var __defProp$f = Object.defineProperty;
 	var __defProps$7 = Object.defineProperties;
 	var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-	var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-	var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$e = (a, b) => {
+	var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+	var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+	var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$f = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$e.call(b, prop))
-	      __defNormalProp$e(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$e)
-	    for (var prop of __getOwnPropSymbols$e(b)) {
-	      if (__propIsEnum$e.call(b, prop))
-	        __defNormalProp$e(a, prop, b[prop]);
+	    if (__hasOwnProp$f.call(b, prop))
+	      __defNormalProp$f(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$f)
+	    for (var prop of __getOwnPropSymbols$f(b)) {
+	      if (__propIsEnum$f.call(b, prop))
+	        __defNormalProp$f(a, prop, b[prop]);
 	    }
 	  return a;
 	};
 	var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+	var __publicField = (obj, key, value) => {
+	  __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
+	  return value;
+	};
 	class Payment {
 	  constructor(request, options, params, method) {
+	    __publicField(this, "_element", null);
+	    __publicField(this, "_elementContainer", null);
 	    this.request = request;
 	    this.options = options;
 	    this.params = params;
 	    this.method = method;
 	  }
+	  get element() {
+	    if (!this._element) {
+	      throw new PaymentElementNotCreatedError(this.method.name);
+	    }
+	    return this._element;
+	  }
+	  set element(element) {
+	    this._element = element;
+	  }
+	  get elementContainer() {
+	    return this._elementContainer;
+	  }
+	  setElementContainer(elementId) {
+	    this._elementContainer = document.getElementById(elementId);
+	    if (!this.elementContainer) {
+	      throw new DomElementNotFoundError(elementId);
+	    }
+	  }
 	  async loadScripts(scripts) {
 	    await this._populateScriptsParams(scripts);
 	    await loadScripts(scripts);
@@ -11126,7 +11206,7 @@
 	      return cart;
 	    }
 	    const settings = await this.getSettings();
-	    return __spreadProps$7(__spreadValues$e({}, cart), { settings: __spreadValues$e({}, settings.store) });
+	    return __spreadProps$7(__spreadValues$f({}, cart), { settings: __spreadValues$f({}, settings.store) });
 	  }
 	  async _vaultRequest(method, url, data) {
 	    const response = await vaultRequest(method, url, data);
@@ -11151,24 +11231,24 @@
 	      return;
 	    }
 	    const cart = await this.getCart();
-	    script.params = __spreadValues$e(__spreadValues$e({}, script.params), pick(cart, cartParams));
+	    script.params = __spreadValues$f(__spreadValues$f({}, script.params), pick(cart, cartParams));
 	    delete script.params.cart;
 	  }
 	}
 
-	var __defProp$d = Object.defineProperty;
-	var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-	var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-	var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$d = (a, b) => {
+	var __defProp$e = Object.defineProperty;
+	var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+	var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+	var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$e = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$d.call(b, prop))
-	      __defNormalProp$d(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$d)
-	    for (var prop of __getOwnPropSymbols$d(b)) {
-	      if (__propIsEnum$d.call(b, prop))
-	        __defNormalProp$d(a, prop, b[prop]);
+	    if (__hasOwnProp$e.call(b, prop))
+	      __defNormalProp$e(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$e)
+	    for (var prop of __getOwnPropSymbols$e(b)) {
+	      if (__propIsEnum$e.call(b, prop))
+	        __defNormalProp$e(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -11222,7 +11302,7 @@
 	  return result;
 	}
 	function getBillingDetails(cart) {
-	  const details = __spreadValues$d({}, mapValues(billingFieldsMap, cart.billing));
+	  const details = __spreadValues$e({}, mapValues(billingFieldsMap, cart.billing));
 	  if (cart.account && cart.account.email) {
 	    details.email = cart.account.email;
 	  }
@@ -11245,9 +11325,9 @@
 	    {}
 	  );
 	  const { account = {}, billing, shipping } = data;
-	  const billingData = __spreadValues$d(__spreadValues$d(__spreadValues$d(__spreadValues$d({}, account.shipping), account.billing), shipping), billing);
+	  const billingData = __spreadValues$e(__spreadValues$e(__spreadValues$e(__spreadValues$e({}, account.shipping), account.billing), shipping), billing);
 	  const billingAddress = fillValues(addressFieldsMap$1, billingData);
-	  source.owner = __spreadValues$d(__spreadValues$d({
+	  source.owner = __spreadValues$e(__spreadValues$e({
 	    email: account.email,
 	    name: billingData.name || account.name
 	  }, billingData.phone ? { phone: billingData.phone } : account.phone ? { phone: account.phone } : {}), !isEmpty(billingAddress) ? { address: billingAddress } : {});
@@ -11255,6 +11335,7 @@
 	function createElement(type, elements, params) {
 	  const elementParams = params[type] || params;
 	  const elementOptions = elementParams.options || {};
+	  const elementId = elementParams.elementId || `${type}-element`;
 	  const element = elements.create(type, elementOptions);
 	  elementParams.onChange && element.on("change", elementParams.onChange);
 	  elementParams.onReady && element.on("ready", elementParams.onReady);
@@ -11262,7 +11343,7 @@
 	  elementParams.onBlur && element.on("blur", elementParams.onBlur);
 	  elementParams.onEscape && element.on("escape", elementParams.onEscape);
 	  elementParams.onClick && element.on("click", elementParams.onClick);
-	  element.mount(elementParams.elementId || `#${type}-element`);
+	  element.mount(`#${elementId}`);
 	  return element;
 	}
 	async function createPaymentMethod(stripe, cardElement, cart) {
@@ -11285,7 +11366,7 @@
 	}
 	async function createIDealPaymentMethod(stripe, element, cart) {
 	  const billingDetails = getBillingDetails(cart);
-	  return await stripe.createPaymentMethod(__spreadValues$d({
+	  return await stripe.createPaymentMethod(__spreadValues$e({
 	    type: "ideal",
 	    ideal: element
 	  }, billingDetails ? { billing_details: billingDetails } : {}));
@@ -11357,59 +11438,19 @@
 	  return !minAmount || amount >= minAmount;
 	}
 
-	class PaymentMethodDisabledError extends Error {
-	  constructor(method) {
-	    const message = `${method} payments are disabled. See Payment settings in the Swell dashboard for details`;
-	    super(message);
-	  }
-	}
-	class UnsupportedPaymentMethodError extends Error {
-	  constructor(method, gateway) {
-	    let message = `Unsupported payment method: ${method}`;
-	    if (gateway) {
-	      message += ` (${gateway})`;
-	    }
-	    super(message);
-	  }
-	}
-	class UnableAuthenticatePaymentMethodError extends Error {
-	  constructor() {
-	    const message = "We are unable to authenticate your payment method. Please choose a different payment method and try again";
-	    super(message);
-	  }
-	}
-	class LibraryNotLoadedError extends Error {
-	  constructor(library) {
-	    const message = `${library} was not loaded`;
-	    super(message);
-	  }
-	}
-	class MethodPropertyMissingError extends Error {
-	  constructor(method, property) {
-	    const message = `${method} ${property} is missing`;
-	    super(message);
-	  }
-	}
-	class DomElementNotFoundError extends Error {
-	  constructor(elementId) {
-	    const message = `DOM element with '${elementId}' ID not found`;
-	    super(message);
-	  }
-	}
-
-	var __defProp$c = Object.defineProperty;
-	var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-	var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-	var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$c = (a, b) => {
+	var __defProp$d = Object.defineProperty;
+	var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+	var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+	var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$d = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$c.call(b, prop))
-	      __defNormalProp$c(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$c)
-	    for (var prop of __getOwnPropSymbols$c(b)) {
-	      if (__propIsEnum$c.call(b, prop))
-	        __defNormalProp$c(a, prop, b[prop]);
+	    if (__hasOwnProp$d.call(b, prop))
+	      __defNormalProp$d(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$d)
+	    for (var prop of __getOwnPropSymbols$d(b)) {
+	      if (__propIsEnum$d.call(b, prop))
+	        __defNormalProp$d(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -11441,6 +11482,7 @@
 	    StripeCardPayment.stripeElement = stripeElement;
 	  }
 	  async createElements() {
+	    await this.loadScripts(this.scripts);
 	    const elements = this.stripe.elements(this.params.config);
 	    if (this.params.separateElements) {
 	      this.stripeElement = createElement("cardNumber", elements, this.params);
@@ -11454,6 +11496,7 @@
 	    if (!this.stripeElement) {
 	      throw new Error("Stripe payment element is not defined");
 	    }
+	    await this.loadScripts(this.scripts);
 	    const cart = await this.getCart();
 	    const paymentMethod = await createPaymentMethod(
 	      this.stripe,
@@ -11478,7 +11521,7 @@
 	        method: "card",
 	        card: paymentMethod,
 	        intent: {
-	          stripe: __spreadValues$c({
+	          stripe: __spreadValues$d({
 	            id: intent.id
 	          }, Boolean(cart.auth_total) && {
 	            auth_amount: cart.auth_total
@@ -11497,6 +11540,7 @@
 	    if (intent.error) {
 	      throw new Error(intent.error.message);
 	    }
+	    await this.loadScripts(this.scripts);
 	    return this._confirmCardPayment(intent);
 	  }
 	  async _createIntent(cart, paymentMethod) {
@@ -11506,7 +11550,7 @@
 	    const amount = stripeAmountByCurrency(currency, capture_total + auth_total);
 	    const intent = await this.createIntent({
 	      gateway: "stripe",
-	      intent: __spreadValues$c({
+	      intent: __spreadValues$d({
 	        amount,
 	        currency: stripeCurrency,
 	        payment_method: paymentMethod.token,
@@ -11536,21 +11580,21 @@
 	  }
 	}
 
-	var __defProp$b = Object.defineProperty;
+	var __defProp$c = Object.defineProperty;
 	var __defProps$6 = Object.defineProperties;
 	var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-	var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-	var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$b = (a, b) => {
+	var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+	var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+	var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$c = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$b.call(b, prop))
-	      __defNormalProp$b(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$b)
-	    for (var prop of __getOwnPropSymbols$b(b)) {
-	      if (__propIsEnum$b.call(b, prop))
-	        __defNormalProp$b(a, prop, b[prop]);
+	    if (__hasOwnProp$c.call(b, prop))
+	      __defNormalProp$c(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$c)
+	    for (var prop of __getOwnPropSymbols$c(b)) {
+	      if (__propIsEnum$c.call(b, prop))
+	        __defNormalProp$c(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -11560,7 +11604,7 @@
 	    if (!methods.card) {
 	      throw new PaymentMethodDisabledError("Credit cards");
 	    }
-	    const method = __spreadProps$6(__spreadValues$b({}, methods.ideal), {
+	    const method = __spreadProps$6(__spreadValues$c({}, methods.ideal), {
 	      publishable_key: methods.card.publishable_key
 	    });
 	    super(request, options, params, method);
@@ -11589,6 +11633,7 @@
 	    StripeIDealPayment.stripeElement = stripeElement;
 	  }
 	  async createElements() {
+	    await this.loadScripts(this.scripts);
 	    const elements = this.stripe.elements(this.params.config);
 	    this.stripeElement = createElement("idealBank", elements, this.params);
 	  }
@@ -11596,6 +11641,7 @@
 	    if (!this.stripeElement) {
 	      throw new Error("Stripe payment element is not defined");
 	    }
+	    await this.loadScripts(this.scripts);
 	    const cart = await this.getCart();
 	    const { paymentMethod, error: paymentMethodError } = await createIDealPaymentMethod(this.stripe, this.stripeElement, cart);
 	    if (paymentMethodError) {
@@ -11643,21 +11689,21 @@
 	  }
 	}
 
-	var __defProp$a = Object.defineProperty;
+	var __defProp$b = Object.defineProperty;
 	var __defProps$5 = Object.defineProperties;
 	var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-	var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-	var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$a = (a, b) => {
+	var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+	var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+	var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$b = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$a.call(b, prop))
-	      __defNormalProp$a(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$a)
-	    for (var prop of __getOwnPropSymbols$a(b)) {
-	      if (__propIsEnum$a.call(b, prop))
-	        __defNormalProp$a(a, prop, b[prop]);
+	    if (__hasOwnProp$b.call(b, prop))
+	      __defNormalProp$b(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$b)
+	    for (var prop of __getOwnPropSymbols$b(b)) {
+	      if (__propIsEnum$b.call(b, prop))
+	        __defNormalProp$b(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -11667,7 +11713,7 @@
 	    if (!methods.card) {
 	      throw new PaymentMethodDisabledError("Credit cards");
 	    }
-	    const method = __spreadProps$5(__spreadValues$a({}, methods.bancontact), {
+	    const method = __spreadProps$5(__spreadValues$b({}, methods.bancontact), {
 	      publishable_key: methods.card.publishable_key
 	    });
 	    super(request, options, params, method);
@@ -11690,6 +11736,7 @@
 	    StripeBancontactPayment.stripe = stripe;
 	  }
 	  async tokenize() {
+	    await this.loadScripts(this.scripts);
 	    const cart = await this.getCart();
 	    const { source, error: sourceError } = await createBancontactSource(
 	      this.stripe,
@@ -11707,21 +11754,21 @@
 	  }
 	}
 
-	var __defProp$9 = Object.defineProperty;
+	var __defProp$a = Object.defineProperty;
 	var __defProps$4 = Object.defineProperties;
 	var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$9 = (a, b) => {
+	var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+	var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+	var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$a = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$9.call(b, prop))
-	      __defNormalProp$9(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$9)
-	    for (var prop of __getOwnPropSymbols$9(b)) {
-	      if (__propIsEnum$9.call(b, prop))
-	        __defNormalProp$9(a, prop, b[prop]);
+	    if (__hasOwnProp$a.call(b, prop))
+	      __defNormalProp$a(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$a)
+	    for (var prop of __getOwnPropSymbols$a(b)) {
+	      if (__propIsEnum$a.call(b, prop))
+	        __defNormalProp$a(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -11731,7 +11778,7 @@
 	    if (!methods.card) {
 	      throw new PaymentMethodDisabledError("Credit cards");
 	    }
-	    const method = __spreadProps$4(__spreadValues$9({}, methods.klarna), {
+	    const method = __spreadProps$4(__spreadValues$a({}, methods.klarna), {
 	      publishable_key: methods.card.publishable_key
 	    });
 	    super(request, options, params, method);
@@ -11759,6 +11806,7 @@
 	      gateway: "stripe",
 	      intent: getKlarnaIntentDetails(cart)
 	    });
+	    await this.loadScripts(this.scripts);
 	    const { error } = await this.stripe.confirmKlarnaPayment(
 	      intent.client_secret,
 	      getKlarnaConfirmationDetails(cart)
@@ -11795,21 +11843,21 @@
 	  }
 	}
 
-	var __defProp$8 = Object.defineProperty;
+	var __defProp$9 = Object.defineProperty;
 	var __defProps$3 = Object.defineProperties;
 	var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$8 = (a, b) => {
+	var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$9 = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$8.call(b, prop))
-	      __defNormalProp$8(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$8)
-	    for (var prop of __getOwnPropSymbols$8(b)) {
-	      if (__propIsEnum$8.call(b, prop))
-	        __defNormalProp$8(a, prop, b[prop]);
+	    if (__hasOwnProp$9.call(b, prop))
+	      __defNormalProp$9(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$9)
+	    for (var prop of __getOwnPropSymbols$9(b)) {
+	      if (__propIsEnum$9.call(b, prop))
+	        __defNormalProp$9(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -11831,7 +11879,7 @@
 	    if (!methods.card) {
 	      throw new PaymentMethodDisabledError("Credit cards");
 	    }
-	    const method = __spreadProps$3(__spreadValues$8({}, methods.google), {
+	    const method = __spreadProps$3(__spreadValues$9({}, methods.google), {
 	      publishable_key: methods.card.publishable_key
 	    });
 	    super(request, options, params, method);
@@ -11894,9 +11942,16 @@
 	    return [this.cardPaymentMethod];
 	  }
 	  async createElements() {
+	    const {
+	      elementId = "googlepay-button",
+	      locale = "en",
+	      style: { color = "black", type = "buy", sizeMode = "fill" } = {}
+	    } = this.params;
 	    if (!this.method.merchant_id) {
 	      throw new Error("Google merchant ID is not defined");
 	    }
+	    this.setElementContainer(elementId);
+	    await this.loadScripts(this.scripts);
 	    const isReadyToPay = await this.googleClient.isReadyToPay({
 	      apiVersion: API_VERSION$1,
 	      apiVersionMinor: API_MINOR_VERSION$1,
@@ -11910,7 +11965,21 @@
 	    }
 	    const cart = await this.getCart();
 	    const paymentRequestData = this._createPaymentRequestData(cart);
-	    this._renderButton(paymentRequestData);
+	    this.element = this.googleClient.createButton({
+	      buttonColor: color,
+	      buttonType: type,
+	      buttonSizeMode: sizeMode,
+	      buttonLocale: locale,
+	      onClick: this._onClick.bind(this, paymentRequestData)
+	    });
+	  }
+	  mountElements() {
+	    const { classes = {} } = this.params;
+	    const container = this.elementContainer;
+	    container.appendChild(this.element);
+	    if (classes.base) {
+	      container.classList.add(classes.base);
+	    }
 	  }
 	  _createPaymentRequestData(cart) {
 	    const {
@@ -11939,29 +12008,6 @@
 	      }
 	    };
 	  }
-	  _renderButton(paymentRequestData) {
-	    const {
-	      elementId = "googlepay-button",
-	      locale = "en",
-	      style: { color = "black", type = "buy", sizeMode = "fill" } = {},
-	      classes = {}
-	    } = this.params;
-	    const container = document.getElementById(elementId);
-	    if (!container) {
-	      throw new DomElementNotFoundError(elementId);
-	    }
-	    if (classes.base) {
-	      container.classList.add(classes.base);
-	    }
-	    const button = this.googleClient.createButton({
-	      buttonColor: color,
-	      buttonType: type,
-	      buttonSizeMode: sizeMode,
-	      buttonLocale: locale,
-	      onClick: this._onClick.bind(this, paymentRequestData)
-	    });
-	    container.appendChild(button);
-	  }
 	  async _onClick(paymentRequestData) {
 	    try {
 	      const paymentData = await this.googleClient.loadPaymentData(
@@ -11983,11 +12029,11 @@
 	    } = paymentMethodData;
 	    const token = JSON.parse(tokenizationData.token);
 	    const { card } = token;
-	    await this.updateCart(__spreadValues$8({
+	    await this.updateCart(__spreadValues$9({
 	      account: {
 	        email
 	      },
-	      billing: __spreadValues$8({
+	      billing: __spreadValues$9({
 	        method: "card",
 	        card: {
 	          token: token.id,
@@ -12017,21 +12063,21 @@
 	  }
 	}
 
-	var __defProp$7 = Object.defineProperty;
+	var __defProp$8 = Object.defineProperty;
 	var __defProps$2 = Object.defineProperties;
 	var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$7 = (a, b) => {
+	var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$8 = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$7.call(b, prop))
-	      __defNormalProp$7(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$7)
-	    for (var prop of __getOwnPropSymbols$7(b)) {
-	      if (__propIsEnum$7.call(b, prop))
-	        __defNormalProp$7(a, prop, b[prop]);
+	    if (__hasOwnProp$8.call(b, prop))
+	      __defNormalProp$8(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$8)
+	    for (var prop of __getOwnPropSymbols$8(b)) {
+	      if (__propIsEnum$8.call(b, prop))
+	        __defNormalProp$8(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -12041,7 +12087,7 @@
 	    if (!methods.card) {
 	      throw new PaymentMethodDisabledError("Credit cards");
 	    }
-	    const method = __spreadProps$2(__spreadValues$7({}, methods.apple), {
+	    const method = __spreadProps$2(__spreadValues$8({}, methods.apple), {
 	      publishable_key: methods.card.publishable_key
 	    });
 	    super(request, options, params, method);
@@ -12064,6 +12110,13 @@
 	    StripeApplePayment.stripe = stripe;
 	  }
 	  async createElements() {
+	    const {
+	      elementId = "applepay-button",
+	      style: { type = "default", theme = "dark", height = "40px" } = {},
+	      classes = {}
+	    } = this.params;
+	    this.setElementContainer(elementId);
+	    await this.loadScripts(this.scripts);
 	    await this._authorizeDomain();
 	    const cart = await this.getCart();
 	    const paymentRequest = this._createPaymentRequest(cart);
@@ -12073,7 +12126,20 @@
 	        "This device is not capable of making Apple Pay payments"
 	      );
 	    }
-	    this._renderButton(paymentRequest);
+	    this.element = this.stripe.elements().create("paymentRequestButton", {
+	      paymentRequest,
+	      style: {
+	        paymentRequestButton: {
+	          type,
+	          theme,
+	          height
+	        }
+	      },
+	      classes
+	    });
+	  }
+	  mountElements() {
+	    this.element.mount(`#${this.elementContainer.id}`);
 	  }
 	  async _authorizeDomain() {
 	    const domain = window.location.hostname;
@@ -12089,7 +12155,7 @@
 	  }
 	  _createPaymentRequest(cart) {
 	    const { require: { name, email, shipping, phone } = {} } = this.params;
-	    const paymentRequest = this.stripe.paymentRequest(__spreadValues$7({
+	    const paymentRequest = this.stripe.paymentRequest(__spreadValues$8({
 	      requestPayerName: Boolean(name),
 	      requestPayerEmail: Boolean(email),
 	      requestPayerPhone: Boolean(phone),
@@ -12107,29 +12173,6 @@
 	    paymentRequest.on("paymentmethod", this._onPaymentMethod.bind(this));
 	    return paymentRequest;
 	  }
-	  _renderButton(paymentRequest) {
-	    const {
-	      elementId = "applepay-button",
-	      style: { type = "default", theme = "dark", height = "40px" } = {},
-	      classes = {}
-	    } = this.params;
-	    const container = document.getElementById(elementId);
-	    if (!container) {
-	      throw new DomElementNotFoundError(elementId);
-	    }
-	    const button = this.stripe.elements().create("paymentRequestButton", {
-	      paymentRequest,
-	      style: {
-	        paymentRequestButton: {
-	          type,
-	          theme,
-	          height
-	        }
-	      },
-	      classes
-	    });
-	    button.mount(`#${elementId}`);
-	  }
 	  _getPaymentRequestData(cart) {
 	    const {
 	      currency,
@@ -12187,11 +12230,11 @@
 	    const { shippingAddress, updateWith } = event;
 	    const shipping = this._mapShippingAddress(shippingAddress);
 	    const cart = await this.updateCart({
-	      shipping: __spreadProps$2(__spreadValues$7({}, shipping), { service: null }),
+	      shipping: __spreadProps$2(__spreadValues$8({}, shipping), { service: null }),
 	      shipment_rating: null
 	    });
 	    if (cart) {
-	      updateWith(__spreadValues$7({ status: "success" }, this._getPaymentRequestData(cart)));
+	      updateWith(__spreadValues$8({ status: "success" }, this._getPaymentRequestData(cart)));
 	    } else {
 	      updateWith({ status: "invalid_shipping_address" });
 	    }
@@ -12202,7 +12245,7 @@
 	      shipping: { service: shippingOption.id }
 	    });
 	    if (cart) {
-	      updateWith(__spreadValues$7({ status: "success" }, this._getPaymentRequestData(cart)));
+	      updateWith(__spreadValues$8({ status: "success" }, this._getPaymentRequestData(cart)));
 	    } else {
 	      updateWith({ status: "fail" });
 	    }
@@ -12216,16 +12259,16 @@
 	      complete
 	    } = event;
 	    const { require: { shipping: requireShipping } = {} } = this.params;
-	    await this.updateCart(__spreadProps$2(__spreadValues$7({
+	    await this.updateCart(__spreadProps$2(__spreadValues$8({
 	      account: {
 	        email: payerEmail
 	      }
 	    }, requireShipping && {
-	      shipping: __spreadProps$2(__spreadValues$7({}, this._mapShippingAddress(shippingAddress)), {
+	      shipping: __spreadProps$2(__spreadValues$8({}, this._mapShippingAddress(shippingAddress)), {
 	        service: shippingOption.id
 	      })
 	    }), {
-	      billing: __spreadProps$2(__spreadValues$7({}, this._mapBillingAddress(billing_details)), {
+	      billing: __spreadProps$2(__spreadValues$8({}, this._mapBillingAddress(billing_details)), {
 	        method: "card",
 	        card: {
 	          gateway: "stripe",
@@ -12269,19 +12312,19 @@
 	  }
 	}
 
-	var __defProp$6 = Object.defineProperty;
-	var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$6 = (a, b) => {
+	var __defProp$7 = Object.defineProperty;
+	var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$7 = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$6.call(b, prop))
-	      __defNormalProp$6(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$6)
-	    for (var prop of __getOwnPropSymbols$6(b)) {
-	      if (__propIsEnum$6.call(b, prop))
-	        __defNormalProp$6(a, prop, b[prop]);
+	    if (__hasOwnProp$7.call(b, prop))
+	      __defNormalProp$7(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$7)
+	    for (var prop of __getOwnPropSymbols$7(b)) {
+	      if (__propIsEnum$7.call(b, prop))
+	        __defNormalProp$7(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -12319,7 +12362,6 @@
 	    return this.braintree.paypalCheckout;
 	  }
 	  async createElements() {
-	    const cart = await this.getCart();
 	    const {
 	      elementId = "paypal-button",
 	      locale = "en_US",
@@ -12330,29 +12372,24 @@
 	        shape = "rect",
 	        label = "paypal",
 	        tagline = false
-	      } = {},
-	      classes = {}
+	      } = {}
 	    } = this.params;
-	    const container = document.getElementById(elementId);
-	    if (!container) {
-	      throw new DomElementNotFoundError(elementId);
-	    }
+	    this.setElementContainer(elementId);
 	    const authorization = await this.authorizeGateway({
 	      gateway: "braintree"
 	    });
 	    if (authorization.error) {
 	      throw new Error(authorization.error.message);
 	    }
+	    await this.loadScripts(this.scripts);
 	    const braintreeClient = await this.braintree.client.create({
 	      authorization
 	    });
 	    const paypalCheckout = await this.braintreePaypalCheckout.create({
 	      client: braintreeClient
 	    });
-	    if (classes.base) {
-	      container.classList.add(classes.base);
-	    }
-	    const button = this.paypal.Buttons({
+	    const cart = await this.getCart();
+	    this.element = this.paypal.Buttons({
 	      locale,
 	      style: {
 	        layout,
@@ -12372,7 +12409,14 @@
 	      onCancel: this.onCancel.bind(this),
 	      onError: this.onError.bind(this)
 	    });
-	    button.render(`#${elementId}`);
+	  }
+	  mountElements() {
+	    const { classes = {} } = this.params;
+	    const container = this.elementContainer;
+	    this.element.render(`#${container.id}`);
+	    if (classes.base) {
+	      container.classList.add(classes.base);
+	    }
 	  }
 	  _createBillingAgreement(paypalCheckout, cart) {
 	    const { require: { shipping: requireShipping = true } = {} } = this.params;
@@ -12388,7 +12432,7 @@
 	    const { require: { shipping: requireShipping = true } = {} } = this.params;
 	    const { details, nonce } = await paypalCheckout.tokenizePayment(data);
 	    const { email, countryCode, firstName, lastName } = details;
-	    await this.updateCart(__spreadValues$6({
+	    await this.updateCart(__spreadValues$7({
 	      account: {
 	        email
 	      },
@@ -12403,7 +12447,7 @@
 	        }
 	      }
 	    }, requireShipping && {
-	      shipping: __spreadValues$6({
+	      shipping: __spreadValues$7({
 	        name: details.shippingAddress.recipientName
 	      }, this._mapAddress(details.shippingAddress))
 	    }));
@@ -12421,19 +12465,19 @@
 	  }
 	}
 
-	var __defProp$5 = Object.defineProperty;
-	var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$5 = (a, b) => {
+	var __defProp$6 = Object.defineProperty;
+	var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$6 = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$5.call(b, prop))
-	      __defNormalProp$5(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$5)
-	    for (var prop of __getOwnPropSymbols$5(b)) {
-	      if (__propIsEnum$5.call(b, prop))
-	        __defNormalProp$5(a, prop, b[prop]);
+	    if (__hasOwnProp$6.call(b, prop))
+	      __defNormalProp$6(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$6)
+	    for (var prop of __getOwnPropSymbols$6(b)) {
+	      if (__propIsEnum$6.call(b, prop))
+	        __defNormalProp$6(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -12504,9 +12548,16 @@
 	    return [this.cardPaymentMethod];
 	  }
 	  async createElements() {
+	    const {
+	      elementId = "googlepay-button",
+	      locale = "en",
+	      style: { color = "black", type = "buy", sizeMode = "fill" } = {}
+	    } = this.params;
 	    if (!this.method.merchant_id) {
 	      throw new Error("Google merchant ID is not defined");
 	    }
+	    this.setElementContainer(elementId);
+	    await this.loadScripts(this.scripts);
 	    const isReadyToPay = await this.googleClient.isReadyToPay({
 	      apiVersion: API_VERSION,
 	      apiVersionMinor: API_MINOR_VERSION,
@@ -12527,7 +12578,21 @@
 	    const cart = await this.getCart();
 	    const paymentRequestData = this._createPaymentRequestData(cart);
 	    const paymentDataRequest = googlePayment.createPaymentDataRequest(paymentRequestData);
-	    this._renderButton(googlePayment, paymentDataRequest);
+	    this.element = this.googleClient.createButton({
+	      buttonColor: color,
+	      buttonType: type,
+	      buttonSizeMode: sizeMode,
+	      buttonLocale: locale,
+	      onClick: this._onClick.bind(this, googlePayment, paymentDataRequest)
+	    });
+	  }
+	  mountElements() {
+	    const { classes = {} } = this.params;
+	    const container = this.elementContainer;
+	    container.appendChild(this.element);
+	    if (classes.base) {
+	      container.classList.add(classes.base);
+	    }
 	  }
 	  async _createBraintreeClient() {
 	    const authorization = await this.authorizeGateway({
@@ -12567,29 +12632,6 @@
 	      }
 	    };
 	  }
-	  _renderButton(googlePayment, paymentDataRequest) {
-	    const {
-	      elementId = "googlepay-button",
-	      locale = "en",
-	      style: { color = "black", type = "buy", sizeMode = "fill" } = {},
-	      classes = {}
-	    } = this.params;
-	    const container = document.getElementById(elementId);
-	    if (!container) {
-	      throw new DomElementNotFoundError(elementId);
-	    }
-	    if (classes.base) {
-	      container.classList.add(classes.base);
-	    }
-	    const button = this.googleClient.createButton({
-	      buttonColor: color,
-	      buttonType: type,
-	      buttonSizeMode: sizeMode,
-	      buttonLocale: locale,
-	      onClick: this._onClick.bind(this, googlePayment, paymentDataRequest)
-	    });
-	    container.appendChild(button);
-	  }
 	  async _onClick(googlePayment, paymentDataRequest) {
 	    try {
 	      const paymentData = await this.googleClient.loadPaymentData(
@@ -12609,11 +12651,11 @@
 	    const {
 	      info: { billingAddress }
 	    } = paymentMethodData;
-	    await this.updateCart(__spreadValues$5({
+	    await this.updateCart(__spreadValues$6({
 	      account: {
 	        email
 	      },
-	      billing: __spreadValues$5({
+	      billing: __spreadValues$6({
 	        method: "google",
 	        google: {
 	          nonce,
@@ -12636,22 +12678,22 @@
 	      country: address.countryCode,
 	      phone: address.phoneNumber
 	    };
-	  }
-	}
-
-	var __defProp$4 = Object.defineProperty;
-	var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$4 = (a, b) => {
+	  }
+	}
+
+	var __defProp$5 = Object.defineProperty;
+	var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$5 = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$4.call(b, prop))
-	      __defNormalProp$4(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$4)
-	    for (var prop of __getOwnPropSymbols$4(b)) {
-	      if (__propIsEnum$4.call(b, prop))
-	        __defNormalProp$4(a, prop, b[prop]);
+	    if (__hasOwnProp$5.call(b, prop))
+	      __defNormalProp$5(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$5)
+	    for (var prop of __getOwnPropSymbols$5(b)) {
+	      if (__propIsEnum$5.call(b, prop))
+	        __defNormalProp$5(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -12684,6 +12726,9 @@
 	    return window.ApplePaySession;
 	  }
 	  async createElements() {
+	    const { elementId = "applepay-button" } = this.params;
+	    this.setElementContainer(elementId);
+	    await this.loadScripts(this.scripts);
 	    if (!this.ApplePaySession.canMakePayments()) {
 	      throw new Error(
 	        "This device is not capable of making Apple Pay payments"
@@ -12695,21 +12740,18 @@
 	      client: braintreeClient
 	    });
 	    const paymentRequest = await this._createPaymentRequest(cart, applePayment);
-	    this._renderButton(applePayment, paymentRequest);
+	    this.element = this._createButton(applePayment, paymentRequest);
 	  }
-	  _renderButton(applePayment, paymentRequest) {
-	    const {
-	      elementId = "applepay-button",
-	      style: { type = "plain", theme = "black", height = "40px" } = {},
-	      classes = {}
-	    } = this.params;
-	    const container = document.getElementById(elementId);
-	    if (!container) {
-	      throw new DomElementNotFoundError(elementId);
-	    }
+	  mountElements() {
+	    const { classes = {} } = this.params;
+	    const container = this.elementContainer;
+	    container.appendChild(this.element);
 	    if (classes.base) {
 	      container.classList.add(classes.base);
 	    }
+	  }
+	  _createButton(applePayment, paymentRequest) {
+	    const { style: { type = "plain", theme = "black", height = "40px" } = {} } = this.params;
 	    const button = document.createElement("div");
 	    button.style.appearance = "-apple-pay-button";
 	    button.style["-apple-pay-button-type"] = type;
@@ -12719,7 +12761,7 @@
 	      "click",
 	      this._createPaymentSession.bind(this, applePayment, paymentRequest)
 	    );
-	    container.appendChild(button);
+	    return button;
 	  }
 	  async _createBraintreeClient() {
 	    const authorization = await this.authorizeGateway({
@@ -12787,11 +12829,11 @@
 	      if (!payload) {
 	        return session.completePayment(this.ApplePaySession.STATUS_FAILURE);
 	      }
-	      await this.updateCart(__spreadValues$4({
+	      await this.updateCart(__spreadValues$5({
 	        account: {
 	          email: shippingContact.emailAddress
 	        },
-	        billing: __spreadValues$4({
+	        billing: __spreadValues$5({
 	          method: "apple",
 	          apple: {
 	            nonce: payload.nonce,
@@ -12958,21 +13000,21 @@
 	  }
 	}
 
-	var __defProp$3 = Object.defineProperty;
+	var __defProp$4 = Object.defineProperty;
 	var __defProps$1 = Object.defineProperties;
 	var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$3 = (a, b) => {
+	var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$4 = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$3.call(b, prop))
-	      __defNormalProp$3(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$3)
-	    for (var prop of __getOwnPropSymbols$3(b)) {
-	      if (__propIsEnum$3.call(b, prop))
-	        __defNormalProp$3(a, prop, b[prop]);
+	    if (__hasOwnProp$4.call(b, prop))
+	      __defNormalProp$4(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$4)
+	    for (var prop of __getOwnPropSymbols$4(b)) {
+	      if (__propIsEnum$4.call(b, prop))
+	        __defNormalProp$4(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -12999,7 +13041,7 @@
 	  },
 	  {}
 	);
-	const mapAddressFields = (cart, addressField) => __spreadProps$1(__spreadValues$3({}, mapFields(addressFieldsMap, cart[addressField])), {
+	const mapAddressFields = (cart, addressField) => __spreadProps$1(__spreadValues$4({}, mapFields(addressFieldsMap, cart[addressField])), {
 	  email: get(cart, "account.email")
 	});
 	function getOrderLines(cart) {
@@ -13098,19 +13140,19 @@
 	  }
 	}
 
-	var __defProp$2 = Object.defineProperty;
-	var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$2 = (a, b) => {
+	var __defProp$3 = Object.defineProperty;
+	var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$3 = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$2.call(b, prop))
-	      __defNormalProp$2(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$2)
-	    for (var prop of __getOwnPropSymbols$2(b)) {
-	      if (__propIsEnum$2.call(b, prop))
-	        __defNormalProp$2(a, prop, b[prop]);
+	    if (__hasOwnProp$3.call(b, prop))
+	      __defNormalProp$3(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$3)
+	    for (var prop of __getOwnPropSymbols$3(b)) {
+	      if (__propIsEnum$3.call(b, prop))
+	        __defNormalProp$3(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -13145,18 +13187,6 @@
 	    return `${window.location.origin + window.location.pathname}?gateway=paypal`;
 	  }
 	  async createElements() {
-	    const cart = await this.getCart();
-	    const hasSubscriptionProduct = Boolean(cart.subscription_delivery);
-	    if (hasSubscriptionProduct && !this.method.ppcp) {
-	      throw new Error(
-	        "Subscriptions are only supported by PayPal Commerce Platform. See Payment settings in the Swell dashboard to enable PayPal Commerce Platform"
-	      );
-	    }
-	    if (!(cart.capture_total > 0)) {
-	      throw new Error(
-	        "Invalid PayPal button amount. Value should be greater than zero."
-	      );
-	    }
 	    const {
 	      elementId = "paypal-button",
 	      locale = "en_US",
@@ -13167,14 +13197,13 @@
 	        shape = "rect",
 	        label = "paypal",
 	        tagline = false
-	      } = {},
-	      classes = {}
+	      } = {}
 	    } = this.params;
-	    const container = document.getElementById(elementId);
-	    if (!container) {
-	      throw new DomElementNotFoundError(elementId);
-	    }
-	    const button = this.paypal.Buttons({
+	    this.setElementContainer(elementId);
+	    const cart = await this.getCart();
+	    this._validateCart(cart);
+	    await this.loadScripts(this.scripts);
+	    this.element = this.paypal.Buttons({
 	      locale,
 	      style: {
 	        layout,
@@ -13189,11 +13218,28 @@
 	      onApprove: this._onApprove.bind(this),
 	      onError: this.onError.bind(this)
 	    });
-	    button.render(`#${elementId}`);
+	  }
+	  mountElements() {
+	    const { classes = {} } = this.params;
+	    const container = this.elementContainer;
+	    this.element.render(`#${container.id}`);
 	    if (classes.base) {
 	      container.classList.add(classes.base);
 	    }
 	  }
+	  _validateCart(cart) {
+	    const hasSubscriptionProduct = Boolean(cart.subscription_delivery);
+	    if (hasSubscriptionProduct && !this.method.ppcp) {
+	      throw new Error(
+	        "Subscriptions are only supported by PayPal Commerce Platform. See Payment settings in the Swell dashboard to enable PayPal Commerce Platform"
+	      );
+	    }
+	    if (!(cart.capture_total > 0)) {
+	      throw new Error(
+	        "Invalid PayPal button amount. Value should be greater than zero."
+	      );
+	    }
+	  }
 	  async _onCreateOrder(cart, data, actions) {
 	    const { require: { shipping: requireShipping = true } = {} } = this.params;
 	    const { capture_total, currency, subscription_delivery } = cart;
@@ -13302,11 +13348,11 @@
 	    const billing = payer.address;
 	    const shipping = get(order, "purchase_units[0].shipping");
 	    const name = `${payer.name.given_name} ${payer.name.surname}`;
-	    await this.updateCart(__spreadValues$2({
+	    await this.updateCart(__spreadValues$3({
 	      account: {
 	        email: payer.email_address
 	      },
-	      billing: __spreadValues$2({
+	      billing: __spreadValues$3({
 	        method: "paypal",
 	        paypal: {
 	          order_id: orderId
@@ -13314,7 +13360,7 @@
 	        name
 	      }, this._mapAddress(billing))
 	    }, requireShipping && {
-	      shipping: __spreadValues$2({
+	      shipping: __spreadValues$3({
 	        first_name: payer.name.given_name,
 	        last_name: payer.name.surname,
 	        name: shipping.name.full_name
@@ -13334,21 +13380,21 @@
 	  }
 	}
 
-	var __defProp$1 = Object.defineProperty;
+	var __defProp$2 = Object.defineProperty;
 	var __defProps = Object.defineProperties;
 	var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-	var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-	var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-	var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-	var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-	var __spreadValues$1 = (a, b) => {
+	var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$2 = (a, b) => {
 	  for (var prop in b || (b = {}))
-	    if (__hasOwnProp$1.call(b, prop))
-	      __defNormalProp$1(a, prop, b[prop]);
-	  if (__getOwnPropSymbols$1)
-	    for (var prop of __getOwnPropSymbols$1(b)) {
-	      if (__propIsEnum$1.call(b, prop))
-	        __defNormalProp$1(a, prop, b[prop]);
+	    if (__hasOwnProp$2.call(b, prop))
+	      __defNormalProp$2(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$2)
+	    for (var prop of __getOwnPropSymbols$2(b)) {
+	      if (__propIsEnum$2.call(b, prop))
+	        __defNormalProp$2(a, prop, b[prop]);
 	    }
 	  return a;
 	};
@@ -13384,28 +13430,39 @@
 	    return `${window.location.origin + window.location.pathname}?gateway=amazon`;
 	  }
 	  async createElements() {
+	    const {
+	      elementId = "amazonpay-button",
+	      locale = "en_US",
+	      placement = "Checkout",
+	      style: { color = "Gold" } = {},
+	      require: { shipping: requireShipping } = {}
+	    } = this.params;
+	    this.setElementContainer(elementId);
 	    const cart = await this.getCart();
-	    const returnUrl = this.returnUrl;
-	    const isSubscription = Boolean(cart.subscription_delivery);
-	    const session = await this.authorizeGateway({
-	      gateway: "amazon",
-	      params: __spreadProps(__spreadValues$1({
-	        chargePermissionType: isSubscription ? "Recurring" : "OneTime"
-	      }, isSubscription ? {
-	        recurringMetadata: {
-	          frequency: {
-	            unit: "Variable",
-	            value: "0"
-	          }
-	        }
-	      } : {}), {
-	        webCheckoutDetails: {
-	          checkoutReviewReturnUrl: `${returnUrl}&redirect_status=succeeded`,
-	          checkoutCancelUrl: `${returnUrl}&redirect_status=canceled`
-	        }
-	      })
-	    });
-	    this._renderButton(cart, session);
+	    const session = await this._createSession(cart);
+	    await this.loadScripts(this.scripts);
+	    this.element = {
+	      ledgerCurrency: cart.currency,
+	      checkoutLanguage: locale,
+	      productType: Boolean(requireShipping) ? "PayAndShip" : "PayOnly",
+	      buttonColor: color,
+	      placement,
+	      merchantId: this.merchantId,
+	      publicKeyId: this.publicKeyId,
+	      createCheckoutSessionConfig: {
+	        payloadJSON: session.payload,
+	        signature: session.signature
+	      }
+	    };
+	  }
+	  mountElements() {
+	    const { classes = {} } = this.params;
+	    const container = this.elementContainer;
+	    const amazon = this.amazon;
+	    amazon.Pay.renderButton(`#${container.id}`, this.element);
+	    if (classes.base) {
+	      container.classList.add(classes.base);
+	    }
 	  }
 	  async tokenize() {
 	    const cart = await this.getCart();
@@ -13449,39 +13506,27 @@
 	        throw new Error(`Unknown redirect status: ${redirect_status}`);
 	    }
 	  }
-	  _renderButton(cart, session) {
-	    const amazon = this.amazon;
-	    const merchantId = this.merchantId;
-	    const publicKeyId = this.publicKeyId;
-	    const { payload: payloadJSON, signature } = session;
-	    const {
-	      elementId = "amazonpay-button",
-	      locale = "en_US",
-	      placement = "Checkout",
-	      style: { color = "Gold" } = {},
-	      require: { shipping: requireShipping } = {},
-	      classes = {}
-	    } = this.params;
-	    const container = document.getElementById(elementId);
-	    if (!container) {
-	      throw new DomElementNotFoundError(elementId);
-	    }
-	    amazon.Pay.renderButton(`#${elementId}`, {
-	      ledgerCurrency: cart.currency,
-	      checkoutLanguage: locale,
-	      productType: Boolean(requireShipping) ? "PayAndShip" : "PayOnly",
-	      buttonColor: color,
-	      placement,
-	      merchantId,
-	      publicKeyId,
-	      createCheckoutSessionConfig: {
-	        payloadJSON,
-	        signature
-	      }
+	  _createSession(cart) {
+	    const returnUrl = this.returnUrl;
+	    const isSubscription = Boolean(cart.subscription_delivery);
+	    return this.authorizeGateway({
+	      gateway: "amazon",
+	      params: __spreadProps(__spreadValues$2({
+	        chargePermissionType: isSubscription ? "Recurring" : "OneTime"
+	      }, isSubscription ? {
+	        recurringMetadata: {
+	          frequency: {
+	            unit: "Variable",
+	            value: "0"
+	          }
+	        }
+	      } : {}), {
+	        webCheckoutDetails: {
+	          checkoutReviewReturnUrl: `${returnUrl}&redirect_status=succeeded`,
+	          checkoutCancelUrl: `${returnUrl}&redirect_status=canceled`
+	        }
+	      })
 	    });
-	    if (classes.base) {
-	      container.classList.add(classes.base);
-	    }
 	  }
 	  async _handleSuccessfulRedirect(queryParams) {
 	    const { confirm, amazonCheckoutSessionId } = queryParams;
@@ -13499,6 +13544,67 @@
 	  }
 	}
 
+	var __defProp$1 = Object.defineProperty;
+	var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+	var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+	var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+	var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __spreadValues$1 = (a, b) => {
+	  for (var prop in b || (b = {}))
+	    if (__hasOwnProp$1.call(b, prop))
+	      __defNormalProp$1(a, prop, b[prop]);
+	  if (__getOwnPropSymbols$1)
+	    for (var prop of __getOwnPropSymbols$1(b)) {
+	      if (__propIsEnum$1.call(b, prop))
+	        __defNormalProp$1(a, prop, b[prop]);
+	    }
+	  return a;
+	};
+	function adjustConfig(params) {
+	  if (!params.config) {
+	    return;
+	  }
+	  if (params.card) {
+	    console.warn('Please move the "config" field to the "card.config"');
+	    params.card.config = params.config;
+	  }
+	  if (params.ideal) {
+	    console.warn('Please move the "config" field to the "ideal.config"');
+	    params.ideal.config = params.config;
+	  }
+	  delete params.config;
+	}
+	function adjustElementId(methodParams) {
+	  if (methodParams.cardNumber) {
+	    adjustElementId(methodParams.cardNumber);
+	  }
+	  if (methodParams.cardExpiry) {
+	    adjustElementId(methodParams.cardExpiry);
+	  }
+	  if (methodParams.cardCvc) {
+	    adjustElementId(methodParams.cardCvc);
+	  }
+	  if (!methodParams.elementId) {
+	    return;
+	  }
+	  if (methodParams.elementId.startsWith("#")) {
+	    console.warn(
+	      `Please remove the "#" sign from the "${methodParams.elementId}" element ID`
+	    );
+	    methodParams.elementId = methodParams.elementId.substring(1);
+	  }
+	}
+	function adjustParams(_params) {
+	  const params = __spreadValues$1({}, _params);
+	  adjustConfig(params);
+	  return params;
+	}
+	function adjustMethodParams(_methodParams) {
+	  const methodParams = __spreadValues$1({}, _methodParams);
+	  adjustElementId(methodParams);
+	  return methodParams;
+	}
+
 	class PaymentController {
 	  constructor(request, options) {
 	    this.request = request;
@@ -13519,14 +13625,18 @@
 	    if (!params) {
 	      throw new Error("Payment element parameters are not provided");
 	    }
-	    this._performPaymentAction("createElements");
+	    const paymentInstances = await this._createPaymentInstances();
+	    await this._performPaymentAction(paymentInstances, "createElements").then(
+	      (paymentInstances2) => this._performPaymentAction(paymentInstances2, "mountElements")
+	    );
 	  }
 	  async tokenize(params = this.params) {
 	    this.params = params;
 	    if (!this.params) {
 	      throw new Error("Tokenization parameters are not provided");
 	    }
-	    this._performPaymentAction("tokenize");
+	    const paymentInstances = await this._createPaymentInstances();
+	    await this._performPaymentAction(paymentInstances, "tokenize");
 	  }
 	  async handleRedirect(params = this.params) {
 	    const queryParams = getLocationParams(window.location);
@@ -13538,7 +13648,12 @@
 	      throw new Error("Redirect parameters are not provided");
 	    }
 	    removeUrlParams();
-	    this._performPaymentAction("handleRedirect", queryParams);
+	    const paymentInstances = await this._createPaymentInstances();
+	    await this._performPaymentAction(
+	      paymentInstances,
+	      "handleRedirect",
+	      queryParams
+	    );
 	  }
 	  async authenticate(id) {
 	    try {
@@ -13577,23 +13692,6 @@
 	  async authorizeGateway(data) {
 	    return this._vaultRequest("post", "/authorization", data);
 	  }
-	  _normalizeParams() {
-	    if (!this.params) {
-	      return;
-	    }
-	    if (this.params.config) {
-	      console.warn(
-	        'Please move the "config" field to the payment method parameters ("card.config" or/and "ideal.config").'
-	      );
-	      if (this.params.card) {
-	        this.params.card.config = this.params.config;
-	      }
-	      if (this.params.ideal) {
-	        this.params.ideal.config = this.params.config;
-	      }
-	      delete this.params.config;
-	    }
-	  }
 	  async _getPaymentMethods() {
 	    const paymentMethods = await methods$2(
 	      this.request,
@@ -13619,35 +13717,55 @@
 	    }
 	    return response;
 	  }
-	  async _performPaymentAction(action, ...args) {
+	  async _createPaymentInstances() {
 	    const paymentMethods = await this._getPaymentMethods();
-	    this._normalizeParams();
-	    Object.entries(this.params).forEach(([method, params]) => {
+	    const params = adjustParams(this.params);
+	    return Object.entries(params).reduce((acc, [method, params2]) => {
 	      const methodSettings = paymentMethods[method];
 	      if (!methodSettings) {
-	        return console.error(new PaymentMethodDisabledError(method));
+	        console.error(new PaymentMethodDisabledError(method));
+	        return acc;
 	      }
 	      const PaymentClass = this._getPaymentClass(
 	        method,
 	        methodSettings.gateway
 	      );
 	      if (!PaymentClass) {
-	        return console.error(
+	        console.error(
 	          new UnsupportedPaymentMethodError(method, methodSettings.gateway)
 	        );
+	        return acc;
 	      }
+	      const methodParams = adjustMethodParams(params2);
 	      try {
-	        const payment = new PaymentClass(
+	        const paymentInstance = new PaymentClass(
 	          this.request,
 	          this.options,
-	          params,
+	          methodParams,
 	          paymentMethods
 	        );
-	        payment.loadScripts(payment.scripts).then(payment[action].bind(payment, ...args)).catch(payment.onError.bind(payment));
+	        acc.push(paymentInstance);
 	      } catch (error) {
-	        return console.error(error.message);
+	        console.error(error);
 	      }
-	    });
+	      return acc;
+	    }, []);
+	  }
+	  async _performPaymentAction(paymentInstances, action, ...args) {
+	    const nextPaymentInstances = [];
+	    for (const paymentInstance of paymentInstances) {
+	      try {
+	        const paymentAction = paymentInstance[action];
+	        if (paymentAction) {
+	          await paymentAction.call(paymentInstance, ...args);
+	          nextPaymentInstances.push(paymentInstance);
+	        }
+	      } catch (error) {
+	        const onPaymentError = paymentInstance.onError.bind(paymentInstance);
+	        onPaymentError(error);
+	      }
+	    }
+	    return nextPaymentInstances;
 	  }
 	  _getPaymentClass(method, gateway) {
 	    switch (method) {
@@ -13949,7 +14067,7 @@
 	  previewContent: null
 	};
 	const api = {
-	  version: "3.22.0",
+	  version: "3.22.2",
 	  options,
 	  request,
 	  init(store, key, opt = {}) {