swell-js 3.22.0 → 3.22.2

package/dist/swell.cjs.js

@@ -5521,36 +5521,50 @@ function methods$8(request, options) {
     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);
+
         if (result && result.errors) {
           return result;
         }
+
         this.state = result;
         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, resolve } = this.pendingRequests.shift();
-        resolve(handler());
+
+      try {
+        const result = await handler();
+
+        return result;
+      } finally {
+        this.nextRequest();
       }
-      return result;
     },
 
     get() {
@@ -5559,7 +5573,7 @@ function methods$8(request, options) {
       }
       let data;
       if (this.cacheClear) {
-        this.cacheClear = null;
+        this.cacheClear = false;
         data = { $cache: false };
       }
       return this.requestStateChange('get', '/cart', undefined, data);
@@ -5653,7 +5667,7 @@ function methods$8(request, options) {
     },
 
     async submitOrder() {
-      const result = await request('post', '/cart/order');
+      const result = await this.requestStateChange('post', '/cart/order');
       if (result.errors) {
         return result;
       }
@@ -6367,7 +6381,65 @@ async function loadScripts(scripts) {
   await new Promise((resolve) => setTimeout(resolve, 1000));
 }
 
+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);
+  }
+}
+
 class Payment {
+  _element = null;
+  _elementContainer = null;
+
   constructor(request, options, params, method) {
     this.request = request;
     this.options = options;
@@ -6375,11 +6447,65 @@ class Payment {
     this.method = method;
   }
 
+  /**
+   * Returns a payment element.
+   *
+   * @returns {any}
+   */
+  get element() {
+    if (!this._element) {
+      throw new PaymentElementNotCreatedError(this.method.name);
+    }
+
+    return this._element;
+  }
+
+  /**
+   * Sets a payment element.
+   *
+   * @param {any} element
+   */
+  set element(element) {
+    this._element = element;
+  }
+
+  /**
+   * Returns a HTMLElement container of the payment element.
+   *
+   * @returns {HTMLElement}
+   */
+  get elementContainer() {
+    return this._elementContainer;
+  }
+
+  /**
+   * Sets a HTMLElement container of the payment element.
+   *
+   * @param {string} elementId
+   */
+  setElementContainer(elementId) {
+    this._elementContainer = document.getElementById(elementId);
+
+    if (!this.elementContainer) {
+      throw new DomElementNotFoundError(elementId);
+    }
+  }
+
+  /**
+   * Loads payment scripts.
+   *
+   * @param {Array<string | object>} scripts
+   */
   async loadScripts(scripts) {
     await this._populateScriptsParams(scripts);
     await loadScripts(scripts);
   }
 
+  /**
+   * Returns a cart.
+   *
+   * @returns {object}
+   */
   async getCart() {
     const cart = await methods$8(this.request, this.options).get();
 
@@ -6390,6 +6516,12 @@ class Payment {
     return this._adjustCart(cart);
   }
 
+  /**
+   * Updates a cart.
+   *
+   * @param {object} data
+   * @returns {object}
+   */
   async updateCart(data) {
     const updateData = cloneDeep(data);
 
@@ -6410,22 +6542,51 @@ class Payment {
     return this._adjustCart(updatedCart);
   }
 
+  /**
+   * Returns the store settings.
+   *
+   * @returns {object}
+   */
   async getSettings() {
     return methods$2(this.request, this.options).get();
   }
 
+  /**
+   * Creates a payment intent.
+   *
+   * @param {object} data
+   * @returns {object}
+   */
   async createIntent(data) {
     return this._vaultRequest('post', '/intent', data);
   }
 
+  /**
+   * Updates a payment intent.
+   *
+   * @param {object} data
+   * @returns {object}
+   */
   async updateIntent(data) {
     return this._vaultRequest('put', '/intent', data);
   }
 
+  /**
+   * Authorizes a payment gateway.
+   *
+   * @param {object} data
+   * @returns {object}
+   */
   async authorizeGateway(data) {
     return this._vaultRequest('post', '/authorization', data);
   }
 
+  /**
+   * Calls the onSuccess handler.
+   *
+   * @param {object | undefined} data
+   * @returns {any}
+   */
   onSuccess(data) {
     const successHandler = get(this.params, 'onSuccess');
 
@@ -6434,6 +6595,11 @@ class Payment {
     }
   }
 
+  /**
+   * Calls the onCancel handler.
+   *
+   * @returns {any}
+   */
   onCancel() {
     const cancelHandler = get(this.params, 'onCancel');
 
@@ -6442,6 +6608,12 @@ class Payment {
     }
   }
 
+  /**
+   * Calls the onError handler.
+   *
+   * @param {Error} error
+   * @returns {any}
+   */
   onError(error) {
     const errorHandler = get(this.params, 'onError');
 
@@ -6452,10 +6624,22 @@ class Payment {
     console.error(error.message);
   }
 
+  /**
+   * Adjusts cart data.
+   *
+   * @param {object} cart
+   * @returns {object}
+   */
   async _adjustCart(cart) {
     return this._ensureCartSettings(cart).then(toSnake);
   }
 
+  /**
+   * Sets the store settings to cart.
+   *
+   * @param {object} cart
+   * @returns {object}
+   */
   async _ensureCartSettings(cart) {
     if (cart.settings) {
       return cart;
@@ -6466,6 +6650,14 @@ class Payment {
     return { ...cart, settings: { ...settings.store } };
   }
 
+  /**
+   * Sends a Vault request.
+   *
+   * @param {string} method
+   * @param {string} url
+   * @param {object} data
+   * @returns {object}
+   */
   async _vaultRequest(method, url, data) {
     const response = await vaultRequest(method, url, data);
 
@@ -6481,12 +6673,22 @@ class Payment {
     return response;
   }
 
+  /**
+   * Sets values for payment scripts.
+   *
+   * @param {Array<string | object>} scripts
+   */
   async _populateScriptsParams(scripts = []) {
     for (const script of scripts) {
       await this._populateScriptWithCartParams(script);
     }
   }
 
+  /**
+   * Sets the cart values to the payment script params.
+   *
+   * @param {string | object} script
+   */
   async _populateScriptWithCartParams(script) {
     const cartParams = get(script, 'params.cart');
 
@@ -6613,6 +6815,7 @@ function setBancontactOwner(source, data) {
 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);
@@ -6622,7 +6825,7 @@ function createElement(type, elements, params) {
   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;
 }
@@ -6735,54 +6938,6 @@ function isStripeChargeableAmount(amount, currency) {
   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);
-  }
-}
-
 class StripeCardPayment extends Payment {
   constructor(request, options, params, methods) {
     super(request, options, params, methods.card);
@@ -6819,6 +6974,8 @@ class StripeCardPayment extends Payment {
   }
 
   async createElements() {
+    await this.loadScripts(this.scripts);
+
     const elements = this.stripe.elements(this.params.config);
 
     if (this.params.separateElements) {
@@ -6835,6 +6992,8 @@ class StripeCardPayment extends Payment {
       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,
@@ -6889,6 +7048,8 @@ class StripeCardPayment extends Payment {
       throw new Error(intent.error.message);
     }
 
+    await this.loadScripts(this.scripts);
+
     return this._confirmCardPayment(intent);
   }
 
@@ -6985,6 +7146,8 @@ class StripeIDealPayment extends Payment {
   }
 
   async createElements() {
+    await this.loadScripts(this.scripts);
+
     const elements = this.stripe.elements(this.params.config);
 
     this.stripeElement = createElement('idealBank', elements, this.params);
@@ -6995,6 +7158,8 @@ class StripeIDealPayment extends Payment {
       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);
@@ -7090,6 +7255,8 @@ class StripeBancontactPayment extends Payment {
   }
 
   async tokenize() {
+    await this.loadScripts(this.scripts);
+
     const cart = await this.getCart();
     const { source, error: sourceError } = await createBancontactSource(
       this.stripe,
@@ -7152,6 +7319,9 @@ class StripeKlarnaPayment extends Payment {
       gateway: 'stripe',
       intent: getKlarnaIntentDetails(cart),
     });
+
+    await this.loadScripts(this.scripts);
+
     const { error } = await this.stripe.confirmKlarnaPayment(
       intent.client_secret,
       getKlarnaConfirmationDetails(cart),
@@ -7292,10 +7462,19 @@ class StripeGooglePayment extends Payment {
   }
 
   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,
@@ -7312,7 +7491,24 @@ class StripeGooglePayment extends Payment {
     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) {
@@ -7344,35 +7540,6 @@ class StripeGooglePayment extends Payment {
     };
   }
 
-  _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(
@@ -7472,6 +7639,14 @@ class StripeApplePayment extends Payment {
   }
 
   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();
@@ -7484,7 +7659,21 @@ class StripeApplePayment extends Payment {
       );
     }
 
-    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() {
@@ -7526,34 +7715,6 @@ class StripeApplePayment extends Payment {
     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,
@@ -7753,7 +7914,6 @@ class BraintreePaypalPayment extends Payment {
   }
 
   async createElements() {
-    const cart = await this.getCart();
     const {
       elementId = 'paypal-button',
       locale = 'en_US',
@@ -7765,13 +7925,9 @@ class BraintreePaypalPayment extends Payment {
         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',
@@ -7781,18 +7937,17 @@ class BraintreePaypalPayment extends Payment {
       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,
     });
+    const cart = await this.getCart();
 
-    if (classes.base) {
-      container.classList.add(classes.base);
-    }
-
-    const button = this.paypal.Buttons({
+    this.element = this.paypal.Buttons({
       locale,
       style: {
         layout,
@@ -7812,8 +7967,17 @@ class BraintreePaypalPayment extends Payment {
       onCancel: this.onCancel.bind(this),
       onError: this.onError.bind(this),
     });
+  }
+
+  mountElements() {
+    const { classes = {} } = this.params;
+    const container = this.elementContainer;
+
+    this.element.render(`#${container.id}`);
 
-    button.render(`#${elementId}`);
+    if (classes.base) {
+      container.classList.add(classes.base);
+    }
   }
 
   _createBillingAgreement(paypalCheckout, cart) {
@@ -7951,10 +8115,19 @@ class BraintreeGooglePayment extends Payment {
   }
 
   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,
@@ -7979,7 +8152,24 @@ class BraintreeGooglePayment extends Payment {
     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() {
@@ -8025,35 +8215,6 @@ class BraintreeGooglePayment extends Payment {
     };
   }
 
-  _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(
@@ -8147,6 +8308,11 @@ class BraintreeApplePayment extends Payment {
   }
 
   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',
@@ -8160,24 +8326,23 @@ class BraintreeApplePayment extends Payment {
     });
     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);
+  mountElements() {
+    const { classes = {} } = this.params;
+    const container = this.elementContainer;
 
-    if (!container) {
-      throw new DomElementNotFoundError(elementId);
-    }
+    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');
 
@@ -8191,7 +8356,7 @@ class BraintreeApplePayment extends Payment {
       this._createPaymentSession.bind(this, applePayment, paymentRequest),
     );
 
-    container.appendChild(button);
+    return button;
   }
 
   async _createBraintreeClient() {
@@ -8654,21 +8819,6 @@ class PaypalDirectPayment extends Payment {
   }
 
   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',
@@ -8680,15 +8830,16 @@ class PaypalDirectPayment extends Payment {
         label = 'paypal',
         tagline = false,
       } = {},
-      classes = {},
     } = this.params;
-    const container = document.getElementById(elementId);
 
-    if (!container) {
-      throw new DomElementNotFoundError(elementId);
-    }
+    this.setElementContainer(elementId);
+
+    const cart = await this.getCart();
+
+    this._validateCart(cart);
+    await this.loadScripts(this.scripts);
 
-    const button = this.paypal.Buttons({
+    this.element = this.paypal.Buttons({
       locale,
       style: {
         layout,
@@ -8703,14 +8854,35 @@ class PaypalDirectPayment extends Payment {
       onApprove: this._onApprove.bind(this),
       onError: this.onError.bind(this),
     });
+  }
+
+  mountElements() {
+    const { classes = {} } = this.params;
+    const container = this.elementContainer;
 
-    button.render(`#${elementId}`);
+    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;
@@ -8923,31 +9095,46 @@ class AmazonDirectPayment extends Payment {
   }
 
   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: {
-        chargePermissionType: isSubscription ? 'Recurring' : 'OneTime',
-        ...(isSubscription
-          ? {
-              recurringMetadata: {
-                frequency: {
-                  unit: 'Variable',
-                  value: '0',
-                },
-              },
-            }
-          : {}),
-        webCheckoutDetails: {
-          checkoutReviewReturnUrl: `${returnUrl}&redirect_status=succeeded`,
-          checkoutCancelUrl: `${returnUrl}&redirect_status=canceled`,
-        },
+    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);
 
-    this._renderButton(cart, session);
+    if (classes.base) {
+      container.classList.add(classes.base);
+    }
   }
 
   async tokenize() {
@@ -9003,43 +9190,30 @@ class AmazonDirectPayment extends Payment {
     }
   }
 
-  _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);
-    }
+  _createSession(cart) {
+    const returnUrl = this.returnUrl;
+    const isSubscription = Boolean(cart.subscription_delivery);
 
-    amazon.Pay.renderButton(`#${elementId}`, {
-      ledgerCurrency: cart.currency,
-      checkoutLanguage: locale,
-      productType: Boolean(requireShipping) ? 'PayAndShip' : 'PayOnly',
-      buttonColor: color,
-      placement,
-      merchantId,
-      publicKeyId,
-      createCheckoutSessionConfig: {
-        payloadJSON,
-        signature,
+    return this.authorizeGateway({
+      gateway: 'amazon',
+      params: {
+        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) {
@@ -9060,6 +9234,68 @@ class AmazonDirectPayment extends Payment {
   }
 }
 
+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 = { ..._params };
+
+  adjustConfig(params);
+
+  return params;
+}
+
+function adjustMethodParams(_methodParams) {
+  const methodParams = { ..._methodParams };
+
+  adjustElementId(methodParams);
+
+  return methodParams;
+}
+
 class PaymentController {
   constructor(request, options) {
     this.request = request;
@@ -9087,7 +9323,12 @@ class PaymentController {
       throw new Error('Payment element parameters are not provided');
     }
 
-    this._performPaymentAction('createElements');
+    const paymentInstances = await this._createPaymentInstances();
+
+    await this._performPaymentAction(paymentInstances, 'createElements').then(
+      (paymentInstances) =>
+        this._performPaymentAction(paymentInstances, 'mountElements'),
+    );
   }
 
   async tokenize(params = this.params) {
@@ -9097,7 +9338,9 @@ class PaymentController {
       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) {
@@ -9114,7 +9357,14 @@ class PaymentController {
     }
 
     removeUrlParams();
-    this._performPaymentAction('handleRedirect', queryParams);
+
+    const paymentInstances = await this._createPaymentInstances();
+
+    await this._performPaymentAction(
+      paymentInstances,
+      'handleRedirect',
+      queryParams,
+    );
   }
 
   async authenticate(id) {
@@ -9165,28 +9415,6 @@ class PaymentController {
     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,
@@ -9219,16 +9447,17 @@ class PaymentController {
     return response;
   }
 
-  async _performPaymentAction(action, ...args) {
+  async _createPaymentInstances() {
     const paymentMethods = await this._getPaymentMethods();
+    const params = adjustParams(this.params);
 
-    this._normalizeParams();
-
-    Object.entries(this.params).forEach(([method, params]) => {
+    return Object.entries(params).reduce((acc, [method, params]) => {
       const methodSettings = paymentMethods[method];
 
       if (!methodSettings) {
-        return console.error(new PaymentMethodDisabledError(method));
+        console.error(new PaymentMethodDisabledError(method));
+
+        return acc;
       }
 
       const PaymentClass = this._getPaymentClass(
@@ -9237,27 +9466,51 @@ class PaymentController {
       );
 
       if (!PaymentClass) {
-        return console.error(
+        console.error(
           new UnsupportedPaymentMethodError(method, methodSettings.gateway),
         );
+
+        return acc;
       }
 
+      const methodParams = adjustMethodParams(params);
+
       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) {
@@ -9614,7 +9867,7 @@ const options = {
 };
 
 const api = {
-  version: '3.22.0',
+  version: '3.22.2',
   options,
   request,