swell-js 5.9.3 → 5.10.0

package/dist/swell.umd.min.js

@@ -5111,7 +5111,7 @@
     vaultRequest: vaultRequest
   });
 
-  function methods$e(options) {
+  function methods$f(options) {
     return {
       async createToken(data) {
         let error = null;
@@ -5328,7 +5328,7 @@
 
   const RECORD_TIMEOUT = 5000;
 
-  function methods$d(opt) {
+  function methods$e(opt) {
     let VALUES = {
       /*
       [model]: {
@@ -5490,7 +5490,7 @@
     };
   }
 
-  function methods$c(api) {
+  function methods$d(api) {
     const { get, list } = defaultMethods(api, '/attributes', ['list', 'get']);
 
     return {
@@ -5502,7 +5502,7 @@
     };
   }
 
-  function methods$b(api, opt) {
+  function methods$c(api, opt) {
     const { get, list } = defaultMethods(api, '/products', ['list', 'get']);
     return {
       get: (id, ...args) => {
@@ -5711,7 +5711,7 @@
   }
 
   async function getFilterableAttributeFilters(api, products, options) {
-    const { results: filterableAttributes } = await methods$c(api).list({
+    const { results: filterableAttributes } = await methods$d(api).list({
       filterable: true,
     });
 
@@ -5895,7 +5895,7 @@
     };
   }
 
-  function methods$a(api, options) {
+  function methods$b(api, options) {
     return {
       state: null,
       order: null,
@@ -6080,7 +6080,7 @@
     };
   }
 
-  function methods$9(api) {
+  function methods$a(api) {
     return {
       state: null,
 
@@ -6254,7 +6254,7 @@
     }
 
     async updateCart(data) {
-      const cart = await methods$a(this.api, this.options).update(data);
+      const cart = await methods$b(this.api, this.options).update(data);
 
       this.setProps({ cart });
     }
@@ -6295,6 +6295,10 @@
     }
   }
 
+  /**
+   * @deprecated Payment components are mounted by `@swell/apps-sdk/components`
+   * at the host place `checkout.payment.methods`.
+   */
   class AppPaymentComponent extends AppComponent {
     constructor(app, component, api, options) {
       super(app, component, api, options);
@@ -6344,6 +6348,7 @@
     }
   }
 
+  /** @deprecated Use `@swell/apps-sdk/components` instead. */
   class App {
     constructor(app, api, options) {
       this.app = app;
@@ -6452,6 +6457,13 @@
     }
   }
 
+  let deprecationWarned = false;
+
+  /**
+   * @deprecated App components are rendered by `@swell/apps-sdk/components`
+   * (`createComponents().mount()`); this module will be removed in the next
+   * major version.
+   */
   class AppController {
     #apps = new Map();
 
@@ -6460,7 +6472,15 @@
       this.options = options;
     }
 
+    /** @deprecated Use `@swell/apps-sdk/components` instead. */
     async load(appId) {
+      if (!deprecationWarned) {
+        deprecationWarned = true;
+        console.warn(
+          'swell.app is deprecated: render app components with @swell/apps-sdk/components',
+        );
+      }
+
       const loadedApp = this.#apps.get(appId);
 
       if (loadedApp) {
@@ -6490,7 +6510,7 @@
     }
   }
 
-  function methods$8(api) {
+  function methods$9(api) {
     const { get, list } = defaultMethods(api, '/categories', ['list', 'get']);
 
     return {
@@ -6502,7 +6522,7 @@
     };
   }
 
-  function methods$7(api) {
+  function methods$8(api) {
     const { get, list } = defaultMethods(api, '/subscriptions', ['list', 'get']);
     return {
       get: (id, ...args) => {
@@ -6567,7 +6587,7 @@
     };
   }
 
-  function methods$6(api) {
+  function methods$7(api) {
     const { get, list } = defaultMethods(api, '/invoices', ['list', 'get']);
     return {
       get: (id, ...args) => {
@@ -6578,7 +6598,7 @@
     };
   }
 
-  function methods$5(api, opt) {
+  function methods$6(api, opt) {
     return {
       get: (type, id, query) => {
         return api.cache.getFetch(`content_${type}`, id, () =>
@@ -6594,7 +6614,7 @@
     };
   }
 
-  function methods$4(api, opt) {
+  function methods$5(api, opt) {
     return {
       state: null,
       menuState: null,
@@ -6889,7 +6909,7 @@
     }
   }
 
-  function methods$3(api, opt) {
+  function methods$4(api, opt) {
     return {
       /**
        * Get the decoded session as an object of session values
@@ -7277,7 +7297,7 @@
      * @returns {Promise<Cart>}
      */
     async getCart() {
-      const cart = await methods$a(this.api, this.options).get();
+      const cart = await methods$b(this.api, this.options).get();
 
       if (!cart) {
         throw new Error('Cart not found');
@@ -7305,7 +7325,7 @@
         }
       }
 
-      const updatedCart = await methods$a(this.api, this.options).update(
+      const updatedCart = await methods$b(this.api, this.options).update(
         updateData,
       );
 
@@ -7318,7 +7338,7 @@
      * @returns {Promise<object>}
      */
     async getSettings() {
-      return methods$4(this.api, this.options).get();
+      return methods$5(this.api, this.options).get();
     }
 
     /**
@@ -7585,25 +7605,184 @@
       billing_details: billingDetails,
     });
 
-    return error
-      ? { error }
-      : {
-          gateway: 'stripe',
-          token: paymentMethod.id,
-          last4: paymentMethod.card.last4,
-          exp_month: paymentMethod.card.exp_month,
-          exp_year: paymentMethod.card.exp_year,
-          brand: paymentMethod.card.brand,
-          display_brand: paymentMethod.card.display_brand,
-          address_check: paymentMethod.card.checks.address_line1_check,
-          cvc_check: paymentMethod.card.checks.cvc_check,
-          zip_check: paymentMethod.card.checks.address_postal_code_check,
-        };
+    return error ? { error } : mapCardPaymentMethod(paymentMethod);
   }
 
   /**
+   * Elements group options of the card Payment Element for the cart amount,
+   * matching the intent StripeCardPayment#_createIntent creates.
+   *
+   * @param {Cart} cart
+   * @returns {import('@stripe/stripe-js').StripeElementsOptionsMode}
+   */
+  function getCardElementsOptions(cart) {
+    const { capture_total, auth_total } = cart;
+    const currency = cart.currency || 'USD';
+    const stripeCurrency = currency.toLowerCase();
+
+    // the card is only stored when the amount is not chargeable, no intent is created
+    if (!isStripeChargeableAmount(capture_total, cart.currency)) {
+      return {
+        mode: 'setup',
+        currency: stripeCurrency,
+        paymentMethodTypes: ['card'],
+      };
+    }
+
+    return {
+      mode: 'payment',
+      amount: stripeAmountByCurrency(currency, capture_total + (auth_total || 0)),
+      currency: stripeCurrency,
+      captureMethod: 'manual',
+      setupFutureUsage: 'off_session',
+      paymentMethodTypes: ['card'],
+    };
+  }
+
+  /**
+   * Elements group options of the iDEAL Payment Element,
+   * matching the intent StripeIDealPayment#_createIntent creates.
+   *
+   * @param {Cart} cart
+   * @returns {import('@stripe/stripe-js').StripeElementsOptionsMode}
+   */
+  function getIDealElementsOptions(cart) {
+    const { capture_total } = cart;
+    const currency = cart.currency || 'EUR';
+
+    return {
+      mode: 'payment',
+      amount: stripeAmountByCurrency(currency, capture_total),
+      currency: currency.toLowerCase(),
+      paymentMethodTypes: ['ideal'],
+    };
+  }
+
+  /**
+   * Creates an Elements group without an intent and mounts the Payment Element
+   * into `#${params.elementId || 'payment-element'}`.
+   *
    * @param {Stripe} stripe
-   * @param {import('@stripe/stripe-js').StripeIdealBankElement} element
+   * @param {import('@stripe/stripe-js').StripeElementsOptionsMode} elementsOptions
+   * @param {object} params
+   * @returns {import('@stripe/stripe-js').StripeElements}
+   */
+  function createPaymentElements(stripe, elementsOptions, params) {
+    const elements = stripe.elements({
+      ...params.config,
+      ...elementsOptions,
+      // lets stripe.createPaymentMethod read the Payment Element
+      paymentMethodCreation: 'manual',
+      ...(params.appearance && { appearance: params.appearance }),
+    });
+
+    createElement('payment', elements, {
+      ...params,
+      options: {
+        layout: 'tabs',
+        fields: { billingDetails: 'never' },
+        // wallets are separate express buttons
+        wallets: { applePay: 'never', googlePay: 'never' },
+        ...params.options,
+      },
+    });
+
+    return elements;
+  }
+
+  /**
+   * Creates a PaymentMethod from the Payment Element.
+   * Brings the Elements amount up to date with the cart first.
+   *
+   * @param {Stripe} stripe
+   * @param {import('@stripe/stripe-js').StripeElements} elements
+   * @param {import('@stripe/stripe-js').StripeElementsOptionsMode} elementsOptions
+   * @param {Cart} cart
+   * @returns {Promise<import('@stripe/stripe-js').PaymentMethodResult>}
+   */
+  async function createPaymentMethodFromElements(
+    stripe,
+    elements,
+    elementsOptions,
+    cart,
+  ) {
+    // setup mode stores the card without an intent, there is no amount to update
+    if (elementsOptions.mode === 'payment') {
+      await elements.update(elementsOptions);
+    }
+
+    const { error } = await elements.submit();
+
+    if (error) {
+      return { error };
+    }
+
+    const { address, ...details } = getBillingDetails(cart);
+
+    // fields the Payment Element does not collect must all be passed, null when unknown
+    return stripe.createPaymentMethod({
+      elements,
+      params: {
+        billing_details: {
+          name: null,
+          email: null,
+          phone: null,
+          ...details,
+          address: {
+            line1: null,
+            line2: null,
+            city: null,
+            state: null,
+            postal_code: null,
+            country: null,
+            ...address,
+          },
+        },
+      },
+    });
+  }
+
+  /**
+   * @param {Stripe} stripe
+   * @param {import('@stripe/stripe-js').StripeElements} elements
+   * @param {Cart} cart
+   */
+  async function createCardPaymentMethodFromElements(
+    stripe,
+    elements,
+    cart,
+  ) {
+    const { paymentMethod, error } = await createPaymentMethodFromElements(
+      stripe,
+      elements,
+      getCardElementsOptions(cart),
+      cart,
+    );
+
+    return error ? { error } : mapCardPaymentMethod(paymentMethod);
+  }
+
+  /**
+   * @param {import('@stripe/stripe-js').PaymentMethod} paymentMethod
+   */
+  function mapCardPaymentMethod(paymentMethod) {
+    return {
+      gateway: 'stripe',
+      token: paymentMethod.id,
+      last4: paymentMethod.card.last4,
+      exp_month: paymentMethod.card.exp_month,
+      exp_year: paymentMethod.card.exp_year,
+      brand: paymentMethod.card.brand,
+      display_brand: paymentMethod.card.display_brand,
+      address_check: paymentMethod.card.checks.address_line1_check,
+      cvc_check: paymentMethod.card.checks.cvc_check,
+      zip_check: paymentMethod.card.checks.address_postal_code_check,
+    };
+  }
+
+  /**
+   * @param {Stripe} stripe
+   * @param {import('@stripe/stripe-js').StripeIdealBankElement | {}} element `{}` when there is no idealBank element
    * @param {Cart} cart
    */
   async function createIDealPaymentMethod(stripe, element, cart) {
@@ -7791,6 +7970,29 @@
     return !minAmount || amount >= minAmount;
   }
 
+  // The cart keeps what checkout v1 keeps, so the next tokenize can retrieve and reuse
+  // the intent; the vault cancels the replaced ones when the order is paid
+  const cartIntent = (cart, intent) => {
+    const exIntent = cart.billing?.intent?.stripe;
+
+    return {
+      id: intent.id,
+      client_secret: intent.client_secret,
+      amount: intent.amount,
+      currency: intent.currency,
+      ...(Boolean(cart.auth_total) && { auth_amount: cart.auth_total }),
+      ...(exIntent?.id &&
+        exIntent.id !== intent.id && {
+          canceled: [...(exIntent.canceled || []), exIntent.id],
+        }),
+    };
+  };
+
+  const intentAmount = ({ currency, capture_total, auth_total }) =>
+    stripeAmountByCurrency(currency, capture_total + auth_total);
+
+  const intentCurrency = ({ currency }) => (currency || 'USD').toLowerCase();
+
   /** @typedef {import('@stripe/stripe-js').Stripe} Stripe */
   /** @typedef {import('@stripe/stripe-js').StripeCardElement} StripeCardElement */
   /** @typedef {import('@stripe/stripe-js').StripeCardNumberElement} StripeCardNumberElement */
@@ -7834,9 +8036,30 @@
       StripeCardPayment.stripeElement = stripeElement;
     }
 
-    async createElements() {
+    /** @returns {import('@stripe/stripe-js').StripeElements} */
+    get stripeElements() {
+      return StripeCardPayment.stripeElements;
+    }
+
+    /** @param {import('@stripe/stripe-js').StripeElements} stripeElements */
+    set stripeElements(stripeElements) {
+      StripeCardPayment.stripeElements = stripeElements;
+    }
+
+    /** @param {import('../../../types').Cart} cart */
+    async createElements(cart) {
       await this.loadScripts(this.scripts);
 
+      if (this.params.paymentElement) {
+        this.stripeElements = createPaymentElements(
+          this.stripe,
+          getCardElementsOptions(cart),
+          this.params,
+        );
+
+        return;
+      }
+
       const elements = this.stripe.elements(this.params.config);
 
       if (this.params.separateElements) {
@@ -7849,18 +8072,26 @@
     }
 
     async tokenize() {
-      if (!this.stripeElement) {
+      const { paymentElement, paymentMethod: token } = this.params;
+
+      if (token) {
+        return this._authorizePaymentMethod(token);
+      }
+
+      if (!(paymentElement ? this.stripeElements : 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,
-        this.stripeElement,
-        cart,
-      );
+      const paymentMethod = paymentElement
+        ? await createCardPaymentMethodFromElements(
+            this.stripe,
+            this.stripeElements,
+            cart,
+          )
+        : await createPaymentMethod(this.stripe, this.stripeElement, cart);
 
       if (paymentMethod.error) {
         throw new Error(paymentMethod.error.message);
@@ -7870,8 +8101,12 @@
         paymentMethod.test = true;
       }
 
-      // should save payment method data when payment amount is not chargeable
-      if (!isStripeChargeableAmount(cart.capture_total, cart.currency)) {
+      // should save payment method data when payment amount is not chargeable,
+      // or when the host collects the card without authorizing it now
+      if (
+        !isStripeChargeableAmount(cart.capture_total, cart.currency) ||
+        this.params.createIntent === false
+      ) {
         await this.updateCart({
           billing: {
             method: 'card',
@@ -7882,60 +8117,129 @@
         return this.onSuccess();
       }
 
-      const intent = await this._createIntent(cart, paymentMethod);
+      const intent = await this._authorizeIntent(cart, paymentMethod.token);
 
       await this.updateCart({
         billing: {
           method: 'card',
           card: paymentMethod,
-          intent: {
-            stripe: {
-              id: intent.id,
-              ...(Boolean(cart.auth_total) && {
-                auth_amount: cart.auth_total,
-              }),
-            },
-          },
+          intent: { stripe: cartIntent(cart, intent) },
         },
       });
 
       this.onSuccess();
     }
 
-    async authenticate(payment) {
-      const { transaction_id: id, card: { token } = {} } = payment;
+    // A card the shopper already has (a saved card, a wallet's payment method) gets
+    // the intent and 3-D Secure of a new one; other cards are authorized with the order
+    async _authorizePaymentMethod(token) {
+      const cart = await this.getCart();
 
-      const intent = await this.updateIntent({
-        gateway: 'stripe',
-        intent: { id, payment_method: token },
-      });
+      if (
+        token.startsWith('pm_') &&
+        isStripeChargeableAmount(cart.capture_total, cart.currency) &&
+        this.params.createIntent !== false
+      ) {
+        await this.loadScripts(this.scripts);
+
+        const intent = await this._authorizeIntent(cart, token);
 
-      if (intent.error) {
-        throw new Error(intent.error.message);
+        if (intent.id !== cart.billing?.intent?.stripe?.id) {
+          await this.updateCart({
+            billing: {
+              method: 'card',
+              intent: { stripe: cartIntent(cart, intent) },
+            },
+          });
+        }
       }
 
-      await this.loadScripts(this.scripts);
+      this.onSuccess();
+    }
+
+    // Reuses the cart's intent while Stripe still has it for this card and amount
+    async _authorizeIntent(cart, token) {
+      const exIntent = cart.billing?.intent?.stripe;
+      const intent =
+        (exIntent?.client_secret &&
+          (await this._retrieveIntent(cart, exIntent, token))) ||
+        (await this._createIntent(cart, token));
+
+      switch (intent.status) {
+        case 'requires_capture':
+          break;
+
+        case 'requires_confirmation':
+          await this._confirmCardPayment(intent);
+          break;
+
+        case 'requires_action':
+        case 'requires_source_action': {
+          const actionResult = await this.stripe.handleCardAction(
+            intent.client_secret,
+          );
+
+          if (actionResult.error) {
+            throw new Error(actionResult.error.message);
+          }
+
+          break;
+        }
 
+        default:
+          throw new Error(`Unsupported intent status: ${intent.status}`);
+      }
+
+      return intent;
+    }
+
+    async _retrieveIntent(cart, exIntent, token) {
+      const { paymentIntent: intent, error } =
+        await this.stripe.retrievePaymentIntent(exIntent.client_secret);
+
+      const matches =
+        !error &&
+        intent.amount === intentAmount(cart) &&
+        intent.currency === intentCurrency(cart) &&
+        intent.payment_method === token &&
+        !['canceled', 'requires_source', 'requires_payment_method'].includes(
+          intent.status,
+        );
+
+      return matches ? intent : null;
+    }
+
+    async authenticate(payment) {
+      const { transaction_id: id, card: { token } = {} } = payment;
+
+      // The payment is re-queried whatever happens here: an intent the shopper
+      // already confirmed can't be updated, and the payment must still learn it
       try {
-        const result = await this._confirmCardPayment(intent);
+        const intent = await this.updateIntent({
+          gateway: 'stripe',
+          intent: { id, payment_method: token },
+        });
 
-        return result;
+        if (intent.error) {
+          throw new Error(intent.error.message);
+        }
+
+        await this.loadScripts(this.scripts);
+
+        return await this._confirmCardPayment(intent);
       } finally {
         await this.resetAsyncPayment(payment.id);
       }
     }
 
-    async _createIntent(cart, paymentMethod) {
-      const { account, currency, capture_total, auth_total } = cart;
-      const stripeCustomer = account && account.stripe_customer;
-      const stripeCurrency = (currency || 'USD').toLowerCase();
-      const amount = stripeAmountByCurrency(currency, capture_total + auth_total);
+    async _createIntent(cart, token) {
+      const stripeCustomer = cart.account && cart.account.stripe_customer;
       const intent = await this.createIntent({
         gateway: 'stripe',
         intent: {
-          amount,
-          currency: stripeCurrency,
-          payment_method: paymentMethod.token,
+          amount: intentAmount(cart),
+          currency: intentCurrency(cart),
+          payment_method: token,
           capture_method: 'manual',
           setup_future_usage: 'off_session',
           ...(stripeCustomer ? { customer: stripeCustomer } : {}),
@@ -7946,20 +8250,6 @@
         throw new Error('Stripe payment intent is not defined');
       }
 
-      switch (intent.status) {
-        case 'requires_capture':
-        case 'requires_confirmation':
-          break;
-
-        default:
-          throw new Error(`Unsupported intent status: ${intent.status}`);
-      }
-
-      // Confirm the payment intent
-      if (intent.status === 'requires_confirmation') {
-        await this._confirmCardPayment(intent);
-      }
-
       return intent;
     }
 
@@ -8027,24 +8317,58 @@
       StripeIDealPayment.stripeElement = stripeElement;
     }
 
-    async createElements() {
+    /** @returns {import('@stripe/stripe-js').StripeElements} */
+    get stripeElements() {
+      return StripeIDealPayment.stripeElements;
+    }
+
+    /** @param {import('@stripe/stripe-js').StripeElements} stripeElements */
+    set stripeElements(stripeElements) {
+      StripeIDealPayment.stripeElements = stripeElements;
+    }
+
+    /** @param {import('../../../types').Cart} cart */
+    async createElements(cart) {
       await this.loadScripts(this.scripts);
 
+      if (this.params.paymentElement) {
+        this.stripeElements = createPaymentElements(
+          this.stripe,
+          getIDealElementsOptions(cart),
+          this.params,
+        );
+
+        return;
+      }
+
       const elements = this.stripe.elements(this.params.config);
 
       this.stripeElement = createElement('idealBank', elements, this.params);
     }
 
     async tokenize() {
-      if (!this.stripeElement) {
+      const { paymentElement } = this.params;
+
+      if (paymentElement && !this.stripeElements) {
         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);
+      const { paymentMethod, error: paymentMethodError } = paymentElement
+        ? await createPaymentMethodFromElements(
+            this.stripe,
+            this.stripeElements,
+            getIDealElementsOptions(cart),
+            cart,
+          )
+        : // without an idealBank element the shopper picks the bank on the iDEAL page
+          await createIDealPaymentMethod(
+            this.stripe,
+            this.stripeElement || {},
+            cart,
+          );
 
       if (paymentMethodError) {
         throw new Error(paymentMethodError.message);
@@ -8055,6 +8379,38 @@
       await this.stripe.handleCardAction(intent.client_secret);
     }
 
+    async handleRedirect(queryParams) {
+      const { redirect_status, payment_intent_client_secret } = queryParams;
+
+      if (redirect_status !== 'succeeded') {
+        throw new UnableAuthenticatePaymentMethodError();
+      }
+
+      await this.loadScripts(this.scripts);
+
+      const { paymentIntent, error } = await this.stripe.retrievePaymentIntent(
+        payment_intent_client_secret,
+      );
+
+      if (error) {
+        throw new Error(error.message);
+      }
+
+      if (
+        !['succeeded', 'requires_capture', 'processing'].includes(
+          paymentIntent.status,
+        )
+      ) {
+        throw new Error(
+          paymentIntent.last_payment_error?.message ||
+            `Unsupported intent status (${paymentIntent.status})`,
+        );
+      }
+
+      // the cart's billing was written in `tokenize`
+      this.onSuccess();
+    }
+
     /**
      * @param {object} cart
      * @param {import('@stripe/stripe-js').PaymentMethod} paymentMethod
@@ -8072,7 +8428,8 @@
           payment_method_types: 'ideal',
           confirmation_method: 'manual',
           confirm: true,
-          return_url: window.location.href,
+          // `gateway` lets `handleRedirect` run on return; Stripe appends the intent and `redirect_status`
+          return_url: getReturnUrl(),
         },
       });
 
@@ -8104,6 +8461,14 @@
     }
   }
 
+  function getReturnUrl() {
+    const url = new URL(window.location.href);
+
+    url.searchParams.set('gateway', 'stripe');
+
+    return url.toString();
+  }
+
   /** @typedef {import('@stripe/stripe-js').Stripe} Stripe */
 
   class StripeBancontactPayment extends Payment {
@@ -8423,6 +8788,7 @@
     async _onPaymentMethod(event) {
       const {
         payerEmail,
+        payerName,
         paymentMethod: { id: paymentMethod, card, billing_details },
         shippingAddress,
         shippingOption,
@@ -8441,6 +8807,8 @@
         }),
         billing: {
           ...this._mapBillingAddress(billing_details),
+          // a wallet may leave the card's address without a name; the payer's, when asked for, fills it
+          name: billing_details?.name || payerName,
           method: 'card',
           card: {
             gateway: 'stripe',
@@ -8679,6 +9047,7 @@
     async _onPaymentMethod(event) {
       const {
         payerEmail,
+        payerName,
         paymentMethod: { id: paymentMethod, card, billing_details },
         shippingAddress,
         shippingOption,
@@ -8697,6 +9066,8 @@
         }),
         billing: {
           ...this._mapBillingAddress(billing_details),
+          // a wallet may leave the card's address without a name; the payer's, when asked for, fills it
+          name: billing_details?.name || payerName,
           method: 'card',
           card: {
             gateway: 'stripe',
@@ -11127,6 +11498,238 @@
     }
   }
 
+  // Saferpay payment-page brands per Swell method id; a list is joined because the
+  // vault rejects arrays in `PaymentMethods`
+  const PAYMENT_METHODS = {
+    card: [
+      'AMEX',
+      'DINERS',
+      'MAESTRO',
+      'JCB',
+      'VISA',
+      'BANCONTACT',
+      'MASTERCARD',
+      'SAFERPAYTEST',
+      'UNIONPAY',
+    ].join(','),
+    twint: 'TWINT',
+  };
+
+  /**
+   * @param {string} method 'card' or 'twint'
+   * @returns {string}
+   */
+  function getSaferpayPaymentMethods(method) {
+    return PAYMENT_METHODS[method];
+  }
+
+  /**
+   * The Saferpay payment page request for a cart.
+   *
+   * @param {object} cart
+   * @param {string} method 'card' or 'twint'
+   * @returns {object}
+   */
+  function getSaferpayPaymentPageData(cart, method) {
+    const currency = (cart.currency || 'USD').toUpperCase();
+    const returnUrl = window.location.origin + window.location.pathname;
+
+    return {
+      Payment: {
+        Amount: {
+          Value: amountInCents(currency, cart.grand_total || 0),
+          CurrencyCode: currency,
+        },
+        Description: 'Saferpay payment powered by Swell',
+      },
+      PaymentMethods: getSaferpayPaymentMethods(method),
+      ReturnUrls: {
+        Success: `${returnUrl}?gateway=saferpay&redirect_status=succeeded`,
+        Fail: `${returnUrl}?gateway=saferpay&redirect_status=failed`,
+        Abort: `${returnUrl}?gateway=saferpay&redirect_status=canceled`,
+      },
+    };
+  }
+
+  /**
+   * @param {object} state the Saferpay transaction state
+   * @returns {boolean}
+   */
+  function isSaferpayCardPayment(state) {
+    const brand = state?.PaymentMeans?.Brand;
+
+    return Boolean(
+      state?.RegistrationResult?.Success &&
+        brand &&
+        PAYMENT_METHODS.card.split(',').includes(brand.PaymentMethod),
+    );
+  }
+
+  /**
+   * @param {object} state the Saferpay transaction state
+   * @returns {boolean}
+   */
+  function isSaferpayTwintPayment(state) {
+    return state?.PaymentMeans?.Brand?.PaymentMethod === 'TWINT';
+  }
+
+  /**
+   * The card stored on the cart's billing from a Saferpay card state.
+   *
+   * @param {object} state
+   * @returns {object}
+   */
+  function getSaferpayCard(state) {
+    const {
+      RegistrationResult: {
+        Alias: { Id: token },
+      },
+      PaymentMeans: {
+        Card: { ExpMonth: exp_month, ExpYear: exp_year, MaskedNumber },
+        Brand: { Name: brand },
+      },
+    } = state;
+
+    return {
+      token,
+      exp_month,
+      exp_year,
+      brand,
+      last4: MaskedNumber.slice(-4),
+      gateway: 'saferpay',
+    };
+  }
+
+  /**
+   * @param {object} state
+   * @returns {string | undefined}
+   */
+  function getSaferpayTransactionId(state) {
+    return state?.Transaction?.Id;
+  }
+
+  /**
+   * Saferpay payment page: `tokenize` sends the shopper to Saferpay, and
+   * `handleRedirect` turns the returned transaction into the cart's billing.
+   * The card and TWINT classes share it; each one handles only the redirect of
+   * the method the cart was tokenized with, so a host can pass both.
+   */
+  class SaferpayPayment extends Payment {
+    constructor(api, options, params, methods, methodId) {
+      super(api, options, params, methods[methodId]);
+      this.methodId = methodId;
+      this.cardMethod = methods.card;
+    }
+
+    async tokenize() {
+      const cart = await this.getCart();
+
+      // a card Saferpay already registered on this cart pays again without a new page visit
+      if (
+        this.methodId === 'card' &&
+        cart.billing?.card?.gateway === 'saferpay' &&
+        !this.params?.replace
+      ) {
+        return this.onSuccess();
+      }
+
+      const intent = await this.createIntent({
+        gateway: 'saferpay',
+        intent: getSaferpayPaymentPageData(cart, this.methodId),
+      });
+
+      if (!intent) {
+        throw new Error('Saferpay payment page is not defined');
+      }
+
+      await this.updateCart({
+        billing: {
+          method: this.methodId,
+          intent: {
+            saferpay: {
+              token: intent.token,
+            },
+          },
+        },
+      });
+
+      window.location.replace(intent.redirect_url);
+    }
+
+    async handleRedirect(queryParams) {
+      const { redirect_status: status } = queryParams;
+      const cart = await this.getCart();
+
+      // another Saferpay method of this host was tokenized: its instance answers
+      if (cart.billing?.method !== this.methodId) {
+        return;
+      }
+
+      switch (status) {
+        case 'succeeded':
+          return this._handleSuccessfulRedirect(cart);
+        case 'canceled':
+          return this.onCancel();
+        case 'failed':
+          throw new UnableAuthenticatePaymentMethodError();
+        default:
+          throw new Error(`Unknown redirect status: ${status}.`);
+      }
+    }
+
+    async _handleSuccessfulRedirect(cart) {
+      const token = cart.billing?.intent?.saferpay?.token;
+
+      if (!token) {
+        throw new Error('Saferpay transaction token is not defined');
+      }
+
+      const intent = await this.updateIntent({
+        gateway: 'saferpay',
+        intent: { token },
+      });
+
+      if (!intent) {
+        throw new Error('Saferpay transaction is not defined');
+      }
+
+      const { state } = intent;
+      const transaction = { transaction_id: getSaferpayTransactionId(state) };
+
+      if (isSaferpayCardPayment(state)) {
+        const card = getSaferpayCard(state);
+
+        if (!isLiveMode(this.cardMethod?.mode)) {
+          card.test = true;
+        }
+
+        await this.updateCart({
+          billing: { method: 'card', card, intent: { saferpay: transaction } },
+        });
+      } else if (isSaferpayTwintPayment(state)) {
+        await this.updateCart({
+          billing: { method: 'twint', intent: { saferpay: transaction } },
+        });
+      } else {
+        throw new Error('Payment method not supported by this gateway.');
+      }
+
+      this.onSuccess();
+    }
+  }
+
+  class SaferpayCardPayment extends SaferpayPayment {
+    constructor(api, options, params, methods) {
+      super(api, options, params, methods, 'card');
+    }
+  }
+
+  class SaferpayTwintPayment extends SaferpayPayment {
+    constructor(api, options, params, methods) {
+      super(api, options, params, methods, 'twint');
+    }
+  }
+
   let convesioSettings = null;
 
   function getBaseConvesioApiUrl(mode) {
@@ -12807,6 +13410,33 @@
       return this.api.request('get', '/payments', id);
     }
 
+    /**
+     * Sends the shopper to the gateway when a submitted order waits for an
+     * asynchronous payment; resolves `true` after starting the redirect.
+     *
+     * @param {object} order the result of `cart.submitOrder()`
+     * @returns {Promise<boolean>}
+     */
+    async handleAsyncRedirect(order) {
+      const paymentId =
+        order?.authorized_payment_id ?? order?.authorizedPaymentId;
+
+      if (order?.status !== 'payment_pending' || !paymentId) {
+        return false;
+      }
+
+      const payment = await this.get(paymentId);
+      const url = payment?.async_data?.url ?? payment?.asyncData?.url;
+
+      if (!payment || payment.captured || !url) {
+        return false;
+      }
+
+      window.location.replace(url);
+
+      return true;
+    }
+
     async methods() {
       if (this.methodSettings) {
         return this.methodSettings;
@@ -12824,7 +13454,7 @@
         throw new Error('Payment element parameters are not provided');
       }
 
-      const paymentInstances = await this._createPaymentInstances();
+      const paymentInstances = await this._createPaymentInstances(params);
       const cart = await this.payment.getCart();
 
       await this._performPaymentAction(
@@ -12843,7 +13473,7 @@
         throw new Error('Tokenization parameters are not provided');
       }
 
-      const paymentInstances = await this._createPaymentInstances();
+      const paymentInstances = await this._createPaymentInstances(params);
 
       await this._performPaymentAction(paymentInstances, 'tokenize');
     }
@@ -12863,7 +13493,7 @@
 
       removeUrlParams();
 
-      const paymentInstances = await this._createPaymentInstances();
+      const paymentInstances = await this._createPaymentInstances(params);
 
       await this._performPaymentAction(
         paymentInstances,
@@ -12934,7 +13564,7 @@
     }
 
     async _getPaymentMethods() {
-      const paymentMethods = await methods$4(this.api, this.options).payments();
+      const paymentMethods = await methods$5(this.api, this.options).payments();
 
       if (paymentMethods.error) {
         throw new Error(paymentMethods.error);
@@ -12956,9 +13586,10 @@
     /**
      * @returns {Promise<Payment[]>}
      */
-    async _createPaymentInstances() {
+    // Takes the caller's params: this.params can change while the methods load (two createElements at once)
+    async _createPaymentInstances(callParams) {
       const paymentMethods = await this._getPaymentMethods();
-      const params = adjustParams(this.params);
+      const params = adjustParams(callParams);
 
       return Object.entries(params).reduce((acc, [method, params]) => {
         const methodSettings = paymentMethods[method];
@@ -13056,6 +13687,8 @@
           return this._getAmazonPaymentClass(gateway);
         case 'sezzle':
           return this._getSezzlePaymentClass(gateway);
+        case 'twint':
+          return this._getTwintPaymentClass(gateway);
         default:
           return null;
       }
@@ -13069,6 +13702,17 @@
           return QuickpayCardPayment;
         case 'convesiopay':
           return ConvesioCardPayment;
+        case 'saferpay':
+          return SaferpayCardPayment;
+        default:
+          return null;
+      }
+    }
+
+    _getTwintPaymentClass(gateway) {
+      switch (gateway) {
+        case 'saferpay':
+          return SaferpayTwintPayment;
         default:
           return null;
       }
@@ -13164,7 +13808,7 @@
     }
   }
 
-  function methods$2(api, opt) {
+  function methods$3(api, opt) {
     return {
       code: null,
       state: null,
@@ -13220,7 +13864,7 @@
     return typeof navigator === 'object' ? navigator.language : 'en-US';
   }
 
-  function methods$1(api, opt) {
+  function methods$2(api, opt) {
     // Reads a store setting without ever returning a Promise. Until settings
     // load, this starts the request and reports `loaded: false`.
     function readSetting(path, def) {
@@ -13441,7 +14085,7 @@
     };
   }
 
-  function methods(api, _opt) {
+  function methods$1(api, _opt) {
     return {
       /**
        * Make a request to an app function and greceiveet a response
@@ -13510,6 +14154,85 @@
     };
   }
 
+  const PURPOSES = ['analytics', 'marketing', 'sale_of_data'];
+
+  /**
+   * The page the shopper landed on, which the consent call sends along: the
+   * first URL of this document and its referrer. Read when needed, so nothing
+   * is kept before the shopper answers.
+   *
+   * @returns {{url: string, referrer: string} | undefined}
+   */
+  function getLanding() {
+    if (isServer()) {
+      return undefined;
+    }
+
+    let url = window.location.href;
+
+    try {
+      const [navigation] = window.performance.getEntriesByType('navigation');
+      if (navigation?.name) {
+        url = navigation.name;
+      }
+    } catch {
+      // Navigation timing is not available
+    }
+
+    return { url, referrer: window.document.referrer || '' };
+  }
+
+  function methods(api) {
+    // Calls run one after another. Consent tools fire several events for one
+    // answer, and the first call may set the visitor cookie that the next one
+    // has to send: in parallel, each would start a visitor of its own.
+    let queue = Promise.resolve();
+
+    return {
+      /**
+       * Records the shopper's consent for attribution, from the storefront's
+       * consent banner. Purposes left out stay as they are.
+       *
+       * Calls the storefront's own origin, so that Swell sees the page's
+       * cookies and sets the visitor cookie on the storefront's domain.
+       *
+       * @param {{analytics?: boolean, marketing?: boolean, sale_of_data?: boolean}} consent
+       */
+      set(consent = {}) {
+        if (isServer()) {
+          return Promise.reject(new Error('consent.set() runs in the browser'));
+        }
+
+        const data = {};
+
+        for (const purpose of PURPOSES) {
+          // camelCase clients pass saleOfData
+          const camel = purpose.replace(/_(\w)/g, (_m, c) => c.toUpperCase());
+          const value = consent[purpose] ?? consent[camel];
+
+          if (typeof value === 'boolean') {
+            data[purpose] = value;
+          }
+        }
+
+        const result = queue.then(() =>
+          api.request(
+            'put',
+            '/session/consent',
+            { ...data, landing: getLanding() },
+            undefined,
+            { fullUrl: `${window.location.origin}/api/session/consent` },
+          ),
+        );
+
+        // A failed call doesn't hold back the next one
+        queue = result.catch(() => undefined);
+
+        return result;
+      },
+    };
+  }
+
   /**
    * @template {'snake' | 'camel'} C
    * @typedef {import('../types').InitOptions<C>} InitOptions<C>
@@ -13541,7 +14264,7 @@
     const api = {};
 
     Object.assign(api, {
-      version: '5.9.3',
+      version: '5.10.0',
       options,
       request,
 
@@ -13595,39 +14318,41 @@
         return api.request('delete', url, data);
       },
 
-      cache: methods$d(options),
+      cache: methods$e(options),
 
-      card: methods$e(options),
+      card: methods$f(options),
 
-      cart: methods$a(api, options),
+      cart: methods$b(api, options),
 
-      account: methods$9(api),
+      account: methods$a(api),
 
       app: new AppController(api, options),
 
-      products: methods$b(api, options),
+      products: methods$c(api, options),
 
-      categories: methods$8(api),
+      categories: methods$9(api),
 
-      attributes: methods$c(api),
+      attributes: methods$d(api),
 
-      subscriptions: methods$7(api),
+      subscriptions: methods$8(api),
 
-      invoices: methods$6(api),
+      invoices: methods$7(api),
 
-      content: methods$5(api, options),
+      content: methods$6(api, options),
 
-      settings: methods$4(api, options),
+      settings: methods$5(api, options),
 
       payment: new PaymentController(api, options),
 
-      locale: methods$2(api, options),
+      locale: methods$3(api, options),
 
-      currency: methods$1(api, options),
+      currency: methods$2(api, options),
 
-      session: methods$3(api, options),
+      session: methods$4(api, options),
 
-      functions: methods(api),
+      functions: methods$1(api),
+
+      consent: methods(api),
 
       utils,
 
@@ -13701,6 +14426,13 @@
         reqHeaders['X-Session'] = session;
       }
 
+      // The storefront's visitor, for attribution: the cookie is on the
+      // storefront's domain and doesn't reach the store's API host
+      const visitor = allOptions.getCookie('swell-visitor');
+      if (visitor) {
+        reqHeaders['X-Visitor'] = visitor;
+      }
+
       if (locale) {
         reqHeaders['X-Locale'] = locale;
       }