swell-js 5.7.0 → 5.8.0

package/dist/payment.mjs

@@ -782,13 +782,13 @@ function getPaymentRequestData(cart, params) {
     tax_included_total,
     settings,
   } = cart;
-  const { price: shippingPrice, service_name } = shipping || {};
+  const { price: shippingPrice, service, service_name } = shipping || {};
   const { country, name } = settings || {};
   const { require: { shipping: requireShipping } = {} } = params;
 
   const stripeCurrency = currency.toLowerCase();
   const displayItems = items.map((item) => ({
-    label: get(item, 'product.name', 'Unknown product'),
+    label: item.product_name || item.product?.name || 'Unknown product',
     amount: stripeAmountByCurrency(
       currency,
       item.price_total - item.discount_total,
@@ -810,14 +810,21 @@ function getPaymentRequestData(cart, params) {
   }
 
   let shippingOptions;
-  const services = get(shipment_rating, 'services');
-  if (Array.isArray(services) && services.length > 0) {
+  const services = shipment_rating?.services;
+  if (requireShipping && Array.isArray(services) && services.length > 0) {
     shippingOptions = services.map((service) => ({
       id: service.id,
       label: service.name,
       detail: service.description,
       amount: stripeAmountByCurrency(currency, service.price),
     }));
+
+    const index = shippingOptions.findIndex((item) => item.id === service);
+
+    if (index > 0) {
+      // Move selected shipping option to the top
+      shippingOptions.unshift(...shippingOptions.splice(index, 1));
+    }
   }
 
   return {
@@ -829,7 +836,7 @@ function getPaymentRequestData(cart, params) {
       pending: true,
     },
     displayItems,
-    ...(requireShipping && { shippingOptions }),
+    ...(shippingOptions && { shippingOptions }),
   };
 }
 
@@ -1377,6 +1384,7 @@ class StripeKlarnaPayment extends Payment {
 
 /** @typedef {import('@stripe/stripe-js').Stripe} Stripe */
 /** @typedef {import('@stripe/stripe-js').PaymentRequestPaymentMethodEvent} PaymentRequestPaymentMethodEvent */
+/** @typedef {import('../../../types').Cart} Cart */
 
 class StripeGooglePayment extends Payment {
   constructor(api, options, params, methods) {
@@ -1444,6 +1452,7 @@ class StripeGooglePayment extends Payment {
     this.element.mount(`#${this.elementContainer.id}`);
   }
 
+  /** @param {Cart} cart */
   _createPaymentRequest(cart) {
     const { require: { name, email, shipping, phone } = {} } = this.params;
 
@@ -1456,15 +1465,10 @@ class StripeGooglePayment extends Payment {
       ...getPaymentRequestData(cart, this.params),
     });
 
-    paymentRequest.on(
-      'shippingaddresschange',
-      this._onShippingAddressChange.bind(this),
-    );
-    paymentRequest.on(
-      'shippingoptionchange',
-      this._onShippingOptionChange.bind(this),
-    );
-    paymentRequest.on('paymentmethod', this._onPaymentMethod.bind(this));
+    paymentRequest
+      .on('shippingaddresschange', this._onShippingAddressChange.bind(this))
+      .on('shippingoptionchange', this._onShippingOptionChange.bind(this))
+      .on('paymentmethod', this._onPaymentMethod.bind(this));
 
     return paymentRequest;
   }
@@ -1472,9 +1476,9 @@ class StripeGooglePayment extends Payment {
   /** @param {import('@stripe/stripe-js').PaymentRequestShippingAddressEvent} event */
   async _onShippingAddressChange(event) {
     const { shippingAddress, updateWith } = event;
-    const shipping = this._mapShippingAddress(shippingAddress);
+
     const cart = await this.updateCart({
-      shipping: { ...shipping, service: null },
+      shipping: this._mapShippingAddress(shippingAddress),
       shipment_rating: null,
     });
 
@@ -1514,16 +1518,15 @@ class StripeGooglePayment extends Payment {
       shippingOption,
       complete,
     } = event;
-    const { require: { shipping: requireShipping } = {} } = this.params;
 
     await this.updateCart({
       account: {
-        email: payerEmail,
+        email: payerEmail || billing_details?.email,
       },
-      ...(requireShipping && {
+      ...(shippingAddress && {
         shipping: {
           ...this._mapShippingAddress(shippingAddress),
-          service: shippingOption.id,
+          service: shippingOption?.id || undefined,
         },
       }),
       billing: {
@@ -1537,9 +1540,9 @@ class StripeGooglePayment extends Payment {
           exp_month: card.exp_month,
           exp_year: card.exp_year,
           last4: card.last4,
-          address_check: card.checks.address_line1_check,
-          zip_check: card.checks.address_postal_code_check,
-          cvc_check: card.checks.cvc_check,
+          address_check: card.checks?.address_line1_check,
+          zip_check: card.checks?.address_postal_code_check,
+          cvc_check: card.checks?.cvc_check,
         },
       },
     });
@@ -1587,8 +1590,8 @@ class StripeGooglePayment extends Payment {
   _mapShippingAddress(address = {}) {
     return {
       name: address.recipient,
-      address1: address.addressLine[0],
-      address2: address.addressLine[1],
+      address1: address.addressLine?.[0],
+      address2: address.addressLine?.[1],
       city: address.city,
       state: address.region,
       zip: address.postalCode,
@@ -1602,18 +1605,19 @@ class StripeGooglePayment extends Payment {
     return {
       name: address.name,
       phone: address.phone,
-      address1: address.address.line1,
-      address2: address.address.line2,
-      city: address.address.city,
-      state: address.address.state,
-      zip: address.address.postal_code,
-      country: address.address.country,
+      address1: address.address?.line1,
+      address2: address.address?.line2,
+      city: address.address?.city,
+      state: address.address?.state,
+      zip: address.address?.postal_code,
+      country: address.address?.country,
     };
   }
 }
 
 /** @typedef {import('@stripe/stripe-js').Stripe} Stripe */
 /** @typedef {import('@stripe/stripe-js').PaymentRequestPaymentMethodEvent} PaymentRequestPaymentMethodEvent */
+/** @typedef {import('../../../types').Cart} Cart */
 
 class StripeApplePayment extends Payment {
   constructor(api, options, params, methods) {
@@ -1667,7 +1671,7 @@ class StripeApplePayment extends Payment {
     const paymentRequest = this._createPaymentRequest(cart);
     const canMakePayment = await paymentRequest.canMakePayment();
 
-    if (!canMakePayment || !canMakePayment.applePay) {
+    if (!canMakePayment?.applePay) {
       throw new Error(
         'This device is not capable of making Apple Pay payments',
       );
@@ -1704,6 +1708,7 @@ class StripeApplePayment extends Payment {
     }
   }
 
+  /** @param {Cart} cart */
   _createPaymentRequest(cart) {
     const { require: { name, email, shipping, phone } = {} } = this.params;
 
@@ -1716,15 +1721,10 @@ class StripeApplePayment extends Payment {
       ...getPaymentRequestData(cart, this.params),
     });
 
-    paymentRequest.on(
-      'shippingaddresschange',
-      this._onShippingAddressChange.bind(this),
-    );
-    paymentRequest.on(
-      'shippingoptionchange',
-      this._onShippingOptionChange.bind(this),
-    );
-    paymentRequest.on('paymentmethod', this._onPaymentMethod.bind(this));
+    paymentRequest
+      .on('shippingaddresschange', this._onShippingAddressChange.bind(this))
+      .on('shippingoptionchange', this._onShippingOptionChange.bind(this))
+      .on('paymentmethod', this._onPaymentMethod.bind(this));
 
     return paymentRequest;
   }
@@ -1732,9 +1732,9 @@ class StripeApplePayment extends Payment {
   /** @param {import('@stripe/stripe-js').PaymentRequestShippingAddressEvent} event */
   async _onShippingAddressChange(event) {
     const { shippingAddress, updateWith } = event;
-    const shipping = this._mapShippingAddress(shippingAddress);
+
     const cart = await this.updateCart({
-      shipping: { ...shipping, service: null },
+      shipping: this._mapShippingAddress(shippingAddress),
       shipment_rating: null,
     });
 
@@ -1774,16 +1774,15 @@ class StripeApplePayment extends Payment {
       shippingOption,
       complete,
     } = event;
-    const { require: { shipping: requireShipping } = {} } = this.params;
 
     await this.updateCart({
       account: {
-        email: payerEmail,
+        email: payerEmail || billing_details?.email,
       },
-      ...(requireShipping && {
+      ...(shippingAddress && {
         shipping: {
           ...this._mapShippingAddress(shippingAddress),
-          service: shippingOption.id,
+          service: shippingOption?.id || undefined,
         },
       }),
       billing: {
@@ -1797,9 +1796,9 @@ class StripeApplePayment extends Payment {
           exp_month: card.exp_month,
           exp_year: card.exp_year,
           last4: card.last4,
-          address_check: card.checks.address_line1_check,
-          zip_check: card.checks.address_postal_code_check,
-          cvc_check: card.checks.cvc_check,
+          address_check: card.checks?.address_line1_check,
+          zip_check: card.checks?.address_postal_code_check,
+          cvc_check: card.checks?.cvc_check,
         },
       },
     });
@@ -1813,8 +1812,8 @@ class StripeApplePayment extends Payment {
   _mapShippingAddress(address = {}) {
     return {
       name: address.recipient,
-      address1: address.addressLine[0],
-      address2: address.addressLine[1],
+      address1: address.addressLine?.[0],
+      address2: address.addressLine?.[1],
       city: address.city,
       state: address.region,
       zip: address.postalCode,
@@ -1828,12 +1827,12 @@ class StripeApplePayment extends Payment {
     return {
       name: address.name,
       phone: address.phone,
-      address1: address.address.line1,
-      address2: address.address.line2,
-      city: address.address.city,
-      state: address.address.state,
-      zip: address.address.postal_code,
-      country: address.address.country,
+      address1: address.address?.line1,
+      address2: address.address?.line2,
+      city: address.address?.city,
+      state: address.address?.state,
+      zip: address.address?.postal_code,
+      country: address.address?.country,
     };
   }
 }
@@ -2101,6 +2100,44 @@ function getDiscountLabel(discount, cart) {
   return discount.id;
 }
 
+/** @type {Map<string, number>} */
+const CURRENCIES_CENTS = new Map();
+
+/**
+ * @param {string} currency
+ * @returns {number}
+ */
+function getCurrencyCents(currency) {
+  let cents = CURRENCIES_CENTS.get(currency);
+
+  if (cents !== undefined) {
+    return cents;
+  }
+
+  const formatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+  });
+
+  const options = formatter.resolvedOptions();
+  const decimals = options.maximumFractionDigits ?? 2;
+
+  cents = 10 ** decimals;
+
+  CURRENCIES_CENTS.set(currency, cents);
+
+  return cents;
+}
+
+/**
+ * @param {string} currency
+ * @param {number} amount
+ * @returns {number}
+ */
+function amountInCents(currency, amount) {
+  return Math.round(amount * getCurrencyCents(currency));
+}
+
 /** @typedef {import('./payment').default} Payment */
 /** @typedef {import('../../types').Cart} Cart */
 /** @typedef {import('../../types').Address} Address */
@@ -2188,7 +2225,7 @@ async function onPaymentDataChanged(intermediatePaymentData) {
             this,
             cart,
           ),
-          newTransactionInfo: getTransactionInfo(cart),
+          newTransactionInfo: getTransactionInfo.call(this, cart),
         };
       }
 
@@ -2201,7 +2238,7 @@ async function onPaymentDataChanged(intermediatePaymentData) {
             },
           });
 
-          return { newTransactionInfo: getTransactionInfo(cart) };
+          return { newTransactionInfo: getTransactionInfo.call(this, cart) };
         } catch (err) {
           return createError(
             intermediatePaymentData.callbackTrigger,
@@ -2223,7 +2260,7 @@ async function onPaymentDataChanged(intermediatePaymentData) {
 
           return {
             newOfferInfo: getOfferInfo(cart),
-            newTransactionInfo: getTransactionInfo(cart),
+            newTransactionInfo: getTransactionInfo.call(this, cart),
           };
         } catch (err) {
           return createError(
@@ -2323,12 +2360,13 @@ function getDisplayItems(cart) {
 
 /**
  * Converts cart data to Google Pay transaction information.
+ * @this {Payment}
  * @param {Cart} cart - The current cart data
  * @returns {google.payments.api.TransactionInfo} Transaction info for Google Pay
  */
 function getTransactionInfo(cart) {
-  const { settings, capture_total, currency, shipment_delivery, shipping } =
-    cart;
+  const { require: { shipping: shipmentDelivery = false } = {} } = this.params;
+  const { settings, capture_total, currency, shipping } = cart;
 
   return {
     countryCode: settings?.country || 'US',
@@ -2336,7 +2374,7 @@ function getTransactionInfo(cart) {
     totalPrice: String(capture_total ?? 0),
     // Set status to FINAL if shipping has been selected, otherwise ESTIMATED
     totalPriceStatus:
-      !shipment_delivery || shipping?.service ? 'FINAL' : 'ESTIMATED',
+      !shipmentDelivery || shipping?.service ? 'FINAL' : 'ESTIMATED',
     totalPriceLabel: 'Total',
     displayItems: getDisplayItems(cart),
   };
@@ -2349,12 +2387,14 @@ function getTransactionInfo(cart) {
  * @returns {google.payments.api.ShippingOptionParameters | undefined} Shipping options for Google Pay
  */
 function getShippingOptionParameters(cart) {
-  const { shipment_delivery, shipment_rating, shipping } = cart;
+  const { require: { shipping: shipmentDelivery = false } = {} } = this.params;
 
-  if (!shipment_delivery) {
+  if (!shipmentDelivery) {
     return undefined;
   }
 
+  const { shipment_rating, shipping } = cart;
+
   if (!shipment_rating?.services?.length) {
     // Return placeholder when no shipping services are available
     return {
@@ -2435,20 +2475,11 @@ function createError(intent, reason, message) {
   };
 }
 
+/** @typedef {import('../../../types').Cart} Cart */
+
 const API_VERSION$1 = 2;
 const API_MINOR_VERSION$1 = 0;
 
-const ALLOWED_CARD_AUTH_METHODS = ['PAN_ONLY', 'CRYPTOGRAM_3DS'];
-
-const ALLOWED_CARD_NETWORKS = [
-  'AMEX',
-  'DISCOVER',
-  'INTERAC',
-  'JCB',
-  'MASTERCARD',
-  'VISA',
-];
-
 class BraintreeGooglePayment extends Payment {
   constructor(api, options, params, methods) {
     if (!methods.card) {
@@ -2484,6 +2515,9 @@ class BraintreeGooglePayment extends Payment {
       if (this.google) {
         this.googleClient = new this.google.payments.api.PaymentsClient({
           environment: isLiveMode(this.method.mode) ? 'PRODUCTION' : 'TEST',
+          paymentDataCallbacks: {
+            onPaymentDataChanged: onPaymentDataChanged.bind(this),
+          },
         });
       }
 
@@ -2499,31 +2533,12 @@ class BraintreeGooglePayment extends Payment {
     BraintreeGooglePayment.googleClient = googleClient;
   }
 
-  /** @returns {google.payments.api.PaymentMethodSpecification} */
-  get cardPaymentMethod() {
-    return {
-      type: 'CARD',
-      parameters: {
-        allowedAuthMethods: ALLOWED_CARD_AUTH_METHODS,
-        allowedCardNetworks: ALLOWED_CARD_NETWORKS,
-        billingAddressRequired: true,
-        billingAddressParameters: {
-          format: 'FULL',
-          phoneNumberRequired: true,
-        },
-      },
-    };
-  }
-
-  /** @returns {google.payments.api.PaymentMethodSpecification[]} */
-  get allowedPaymentMethods() {
-    return [this.cardPaymentMethod];
-  }
-
+  /** @param {Cart} cart */
   async createElements(cart) {
     const {
       elementId = 'googlepay-button',
       locale = 'en',
+      require: { phone } = {},
       style: { color = 'black', type = 'plain', sizeMode = 'fill' } = {},
     } = this.params;
 
@@ -2534,10 +2549,35 @@ class BraintreeGooglePayment extends Payment {
     this.setElementContainer(elementId);
     await this.loadScripts(this.scripts);
 
+    const braintreeClient = await this._createBraintreeClient();
+
+    const googlePayment = await this.braintree.googlePayment.create({
+      client: braintreeClient,
+      googleMerchantId: this.method.merchant_id,
+      googlePayVersion: API_VERSION$1,
+    });
+
+    const paymentDataRequest = googlePayment.createPaymentDataRequest(
+      this._createPaymentRequestData(cart),
+    );
+
+    const cardPaymentMethod = paymentDataRequest.allowedPaymentMethods.find(
+      (method) => method.type === 'CARD',
+    );
+
+    if (cardPaymentMethod !== undefined) {
+      cardPaymentMethod.parameters.billingAddressRequired = true;
+
+      cardPaymentMethod.parameters.billingAddressParameters = {
+        format: 'FULL',
+        phoneNumberRequired: Boolean(phone),
+      };
+    }
+
     const isReadyToPay = await this.googleClient.isReadyToPay({
       apiVersion: API_VERSION$1,
       apiVersionMinor: API_MINOR_VERSION$1,
-      allowedPaymentMethods: this.allowedPaymentMethods,
+      allowedPaymentMethods: paymentDataRequest.allowedPaymentMethods,
       existingPaymentMethodRequired: true,
     });
 
@@ -2547,16 +2587,6 @@ class BraintreeGooglePayment extends Payment {
       );
     }
 
-    const braintreeClient = await this._createBraintreeClient();
-    const googlePayment = await this.braintree.googlePayment.create({
-      client: braintreeClient,
-      googleMerchantId: this.method.merchant_id,
-      googlePayVersion: API_VERSION$1,
-    });
-    const paymentRequestData = this._createPaymentRequestData(cart);
-    const paymentDataRequest =
-      googlePayment.createPaymentDataRequest(paymentRequestData);
-
     this.element = this.googleClient.createButton({
       buttonColor: color,
       buttonType: type,
@@ -2583,6 +2613,7 @@ class BraintreeGooglePayment extends Payment {
     }
   }
 
+  /** @returns {Promise<braintree.Client>} */
   async _createBraintreeClient() {
     const authorization = await this.authorizeGateway({
       gateway: 'braintree',
@@ -2597,39 +2628,51 @@ class BraintreeGooglePayment extends Payment {
     });
   }
 
-  /** @returns {google.payments.api.PaymentDataRequest} */
+  /**
+   * @param {Cart} cart
+   * @returns {google.payments.api.PaymentDataRequest}
+   */
   _createPaymentRequestData(cart) {
     const {
-      settings: { name, country },
-      capture_total,
-      currency,
+      settings: { name },
     } = cart;
+
     const { require: { email, shipping, phone } = {} } = this.params;
 
+    /** @type {google.payments.api.CallbackIntent[]} */
+    const callbackIntents = ['OFFER'];
+
+    if (shipping) {
+      callbackIntents.push('SHIPPING_ADDRESS', 'SHIPPING_OPTION');
+    }
+
     return {
       apiVersion: API_VERSION$1,
       apiVersionMinor: API_MINOR_VERSION$1,
-      transactionInfo: {
-        countryCode: country,
-        currencyCode: currency,
-        totalPrice: capture_total.toString(),
-        totalPriceStatus: 'ESTIMATED',
-      },
-      allowedPaymentMethods: this.allowedPaymentMethods,
+      transactionInfo: getTransactionInfo.call(this, cart),
+      /**
+       * @see {@link https://developer.paypal.com/braintree/docs/guides/google-pay/client-side/javascript/v3/#requesting-a-payment}
+       *
+       * Braintree automatically populates the `allowedPaymentMethods` property.
+       */
       emailRequired: Boolean(email),
       shippingAddressRequired: Boolean(shipping),
       shippingAddressParameters: {
         phoneNumberRequired: Boolean(phone),
       },
+      shippingOptionRequired: Boolean(shipping),
+      shippingOptionParameters: getShippingOptionParameters.call(this, cart),
+      offerInfo: getOfferInfo(cart),
       merchantInfo: {
         merchantName: name,
         merchantId: this.method.merchant_id,
       },
+      callbackIntents,
     };
   }
 
   /**
-   * @param {object} googlePayment
+   * @param {braintree.GooglePayment} googlePayment
    * @param {google.payments.api.PaymentDataRequest} paymentDataRequest
    */
   async _onClick(googlePayment, paymentDataRequest) {
@@ -2646,34 +2689,59 @@ class BraintreeGooglePayment extends Payment {
   }
 
   /**
-   * @param {object} googlePayment
+   * @param {braintree.GooglePayment} googlePayment
    * @param {google.payments.api.PaymentData} paymentData
    */
   async _submitPayment(googlePayment, paymentData) {
-    const { require: { shipping: requireShipping } = {} } = this.params;
     const { nonce } = await googlePayment.parseResponse(paymentData);
-    const { email, shippingAddress, paymentMethodData } = paymentData;
-    const {
-      info: { billingAddress },
-    } = paymentMethodData;
+    const { email, shippingAddress, shippingOptionData, paymentMethodData } =
+      paymentData;
+    const { info: { billingAddress } = {} } = paymentMethodData;
 
-    await this.updateCart({
+    const cart = await this.updateCart({
       account: {
         email,
       },
       billing: {
         method: 'google',
+        account_card_id: null,
+        card: null,
         google: {
           nonce,
           gateway: 'braintree',
         },
         ...convertToSwellAddress$2(billingAddress),
       },
-      ...(requireShipping && {
-        shipping: convertToSwellAddress$2(shippingAddress),
+      ...(shippingAddress && {
+        shipping: {
+          ...convertToSwellAddress$2(shippingAddress),
+          service: shippingOptionData?.id || undefined,
+        },
       }),
     });
 
+    if (cart.subscription_delivery) {
+      try {
+        const card = await cardApi.createToken({
+          gateway: 'braintree',
+          account_id: cart.account_id,
+          nonce,
+        });
+
+        delete card.nonce;
+
+        await this.updateCart({
+          billing: {
+            method: 'card',
+            card,
+            google: null,
+          },
+        });
+      } catch (error) {
+        console.warn('Failed to extract card data from google token', error);
+      }
+    }
+
     this.onSuccess();
   }
 }
@@ -2703,7 +2771,7 @@ async function onShippingAddressChange(shippingContact) {
         'Shipping is not available for the provided address.';
 
       return {
-        newTotal: getTotal(cart, this.merchantInfo),
+        newTotal: getTotal.call(this, cart, this.merchantInfo),
         newLineItems: getLineItems(cart),
         newShippingMethods: [], // REQUIRED: Must always provide this, even as empty array
         errors: [
@@ -2714,15 +2782,15 @@ async function onShippingAddressChange(shippingContact) {
 
     // Success: Return updated totals and shipping methods
     return {
-      newTotal: getTotal(cart, this.merchantInfo),
+      newTotal: getTotal.call(this, cart, this.merchantInfo),
       newLineItems: getLineItems(cart),
-      newShippingMethods: getShippingMethods(cart),
+      newShippingMethods: getShippingMethods.call(this, cart),
     };
   } catch (err) {
     const cartData = await this.getCart();
 
     return {
-      newTotal: getTotal(cartData, this.merchantInfo),
+      newTotal: getTotal.call(this, cartData, this.merchantInfo),
       newLineItems: getLineItems(cartData),
       newShippingMethods: [], // REQUIRED: Must always provide this, even as empty array
       errors: [new ApplePayError('unknown', undefined, err.message)],
@@ -2768,12 +2836,12 @@ async function onShippingMethodChange(shippingMethod) {
     });
 
     return {
-      newTotal: getTotal(cart, this.merchantInfo),
+      newTotal: getTotal.call(this, cart, this.merchantInfo),
       newLineItems: getLineItems(cart),
     };
   } catch (err) {
     return {
-      newTotal: getTotal(await this.getCart(), this.merchantInfo),
+      newTotal: getTotal.call(this, await this.getCart(), this.merchantInfo),
       errors: [new ApplePayError('unknown', undefined, err.message)],
     };
   }
@@ -2813,7 +2881,7 @@ async function onCouponCodeUpdated(couponCode) {
 
     // Valid coupon applied successfully
     return {
-      newTotal: getTotal(cart, this.merchantInfo),
+      newTotal: getTotal.call(this, cart, this.merchantInfo),
       newLineItems: getLineItems(cart),
     };
   } catch (err) {
@@ -2821,7 +2889,7 @@ async function onCouponCodeUpdated(couponCode) {
     const currentCart = await this.getCart();
 
     return {
-      newTotal: getTotal(currentCart, this.merchantInfo),
+      newTotal: getTotal.call(this, currentCart, this.merchantInfo),
       newLineItems: getLineItems(currentCart),
       errors: [new ApplePayError('couponCodeInvalid', undefined, err.message)],
     };
@@ -2855,15 +2923,17 @@ async function onCouponCodeChanged(session, event) {
  * This ensures the user sees "pending" until they've selected shipping,
  * then sees the final amount once everything is calculated.
  *
+ * @this {Payment}
  * @param {Cart} cart
  * @param {object} [merchantInfo]
  * @returns {ApplePayJS.ApplePayLineItem}
  */
 function getTotal(cart, merchantInfo) {
-  const { capture_total, shipment_delivery, shipping } = cart;
+  const { require: { shipping: shipmentDelivery = false } = {} } = this.params;
+  const { capture_total, shipping } = cart;
 
   // Use 'final' only after shipping method is selected or not needed, otherwise 'pending'
-  const isFinalPrice = !shipment_delivery || shipping?.service;
+  const isFinalPrice = !shipmentDelivery || shipping?.service;
   const type = isFinalPrice ? 'final' : 'pending';
 
   return {
@@ -2932,16 +3002,19 @@ function getLineItems(cart) {
  *
  * IMPORTANT: Amounts must be formatted as strings with 2 decimals.
  *
+ * @this {Payment}
  * @param {Cart} cart
  * @returns {ApplePayJS.ApplePayShippingMethod[]}
  */
 function getShippingMethods(cart) {
-  const { shipment_delivery, shipment_rating } = cart;
+  const { require: { shipping: shipmentDelivery = false } = {} } = this.params;
 
-  if (!shipment_delivery) {
+  if (!shipmentDelivery) {
     return [];
   }
 
+  const { shipment_rating } = cart;
+
   if (!shipment_rating?.services?.length) {
     return [];
   }
@@ -2992,13 +3065,38 @@ function convertToSwellAddress$1(address = {}) {
   };
 }
 
-const VERSION$1 = 3;
+/** @param {object} params */
+function getRequiredContactFields(params) {
+  const { require = {} } = params;
+  /** @type {ApplePayJS.ApplePayContactField[]} */
+  const requiredFields = [];
+
+  if (require.email) {
+    requiredFields.push('email');
+  }
+
+  if (require.name) {
+    requiredFields.push('name');
+  }
+
+  if (require.phone) {
+    requiredFields.push('phone');
+  }
+
+  /** @type {ApplePayJS.ApplePayContactField[]} */
+  const requiredShippingContactFields = require.shipping
+    ? [...requiredFields, 'postalAddress']
+    : [];
+
+  /** @type {ApplePayJS.ApplePayContactField[]} */
+  const requiredBillingContactFields = [...requiredFields, 'postalAddress'];
+
+  return { requiredBillingContactFields, requiredShippingContactFields };
+}
+
+/** @typedef {import('../../../types').Cart} Cart */
 
-const MERCHANT_CAPABILITIES = [
-  'supports3DS',
-  'supportsDebit',
-  'supportsCredit',
-];
+const VERSION$1 = 14;
 
 class BraintreeApplePayment extends Payment {
   constructor(api, options, params, methods) {
@@ -3030,6 +3128,7 @@ class BraintreeApplePayment extends Payment {
     return window.ApplePaySession;
   }
 
+  /** @param {Cart} cart */
   async createElements(cart) {
     const { elementId = 'applepay-button' } = this.params;
 
@@ -3043,10 +3142,12 @@ class BraintreeApplePayment extends Payment {
     }
 
     const braintreeClient = await this._createBraintreeClient();
+
     const applePayment = await this.braintree.applePay.create({
       client: braintreeClient,
     });
-    const paymentRequest = await this._createPaymentRequest(cart, applePayment);
+
+    const paymentRequest = this._createPaymentRequest(cart, applePayment);
 
     this.element = this._createButton(applePayment, paymentRequest);
   }
@@ -3063,8 +3164,9 @@ class BraintreeApplePayment extends Payment {
   }
 
   /**
-   * @param {object} applePayment
+   * @param {braintree.ApplePay} applePayment
    * @param {ApplePayJS.ApplePayPaymentRequest} paymentRequest
+   * @returns {HTMLDivElement}
    */
   _createButton(applePayment, paymentRequest) {
     const { style: { type = 'plain', theme = 'black', height = '40px' } = {} } =
@@ -3085,6 +3187,7 @@ class BraintreeApplePayment extends Payment {
     return button;
   }
 
+  /** @returns {Promise<braintree.Client>} */
   async _createBraintreeClient() {
     const authorization = await this.authorizeGateway({
       gateway: 'braintree',
@@ -3099,47 +3202,43 @@ class BraintreeApplePayment extends Payment {
     });
   }
 
-  /** @returns {ApplePayJS.ApplePayPaymentRequest} */
+  /**
+   * @param {Cart} cart
+   * @param {braintree.ApplePay} applePayment
+   * @returns {ApplePayJS.ApplePayPaymentRequest}
+   */
   _createPaymentRequest(cart, applePayment) {
-    const { require = {} } = this.params;
     const {
       settings: { name, country },
       capture_total,
       currency,
     } = cart;
 
-    const requiredShippingContactFields = [];
-    const requiredBillingContactFields = ['postalAddress'];
-
-    if (require.name) {
-      requiredShippingContactFields.push('name');
-    }
-    if (require.email) {
-      requiredShippingContactFields.push('email');
-    }
-    if (require.phone) {
-      requiredShippingContactFields.push('phone');
-    }
-    if (require.shipping) {
-      requiredShippingContactFields.push('postalAddress');
-    }
+    const { requiredBillingContactFields, requiredShippingContactFields } =
+      getRequiredContactFields(this.params);
 
     return applePayment.createPaymentRequest({
       total: {
         label: name,
         type: 'pending',
-        amount: capture_total.toString(),
+        amount: (capture_total || 0).toFixed(2),
       },
       countryCode: country,
       currencyCode: currency,
-      merchantCapabilities: MERCHANT_CAPABILITIES,
+      /**
+       * @see {@link https://developer.paypal.com/braintree/docs/guides/apple-pay/client-side/javascript/v3/#create-anapplepaysession}
+       *
+       * Braintree automatically fills in `supportedNetworks` and `merchantCapabilities`.
+       */
       requiredShippingContactFields,
       requiredBillingContactFields,
+      supportsCouponCode: true,
+      lineItems: getLineItems(cart),
     });
   }
 
   /**
-   * @param {object} applePayment
+   * @param {braintree.ApplePay} applePayment
    * @param {ApplePayJS.ApplePayPaymentRequest} paymentRequest
    */
   _createPaymentSession(applePayment, paymentRequest) {
@@ -3160,11 +3259,23 @@ class BraintreeApplePayment extends Payment {
       }
     };
 
+    session.onshippingcontactselected = onShippingContactSelected.bind(
+      this,
+      session,
+    );
+
+    session.onshippingmethodselected = onShippingMethodSelected.bind(
+      this,
+      session,
+    );
+
+    session.oncouponcodechanged = onCouponCodeChanged.bind(this, session);
+
     session.onpaymentauthorized = async (event) => {
       const {
         payment: { token, shippingContact, billingContact },
       } = event;
-      const { require: { shipping: requireShipping } = {} } = this.params;
+
       const payload = await applePayment
         .tokenize({ token })
         .catch(this.onError.bind(this));
@@ -3173,23 +3284,47 @@ class BraintreeApplePayment extends Payment {
         return session.completePayment(this.ApplePaySession.STATUS_FAILURE);
       }
 
-      await this.updateCart({
+      const cart = await this.updateCart({
         account: {
-          email: shippingContact.emailAddress,
+          email: shippingContact?.emailAddress || billingContact?.emailAddress,
         },
         billing: {
           method: 'apple',
+          account_card_id: null,
+          card: null,
           apple: {
             nonce: payload.nonce,
             gateway: 'braintree',
           },
           ...convertToSwellAddress$1(billingContact),
         },
-        ...(requireShipping && {
+        ...(shippingContact && {
           shipping: convertToSwellAddress$1(shippingContact),
         }),
       });
 
+      if (cart.subscription_delivery) {
+        try {
+          const card = await cardApi.createToken({
+            gateway: 'braintree',
+            account_id: cart.account_id,
+            nonce: payload.nonce,
+          });
+
+          delete card.nonce;
+
+          await this.updateCart({
+            billing: {
+              method: 'card',
+              card,
+              apple: null,
+            },
+          });
+        } catch (error) {
+          console.warn('Failed to extract card data from apple token', error);
+        }
+      }
+
       this.onSuccess();
 
       return session.completePayment(this.ApplePaySession.STATUS_SUCCESS);
@@ -3295,6 +3430,8 @@ class AbstractGooglePayment extends Payment {
    * @returns {google.payments.api.PaymentMethodSpecification}
    */
   _getCardPaymentMethod(submit = false) {
+    const { require: { phone } = {} } = this.params;
+
     return {
       type: 'CARD',
       parameters: {
@@ -3303,7 +3440,7 @@ class AbstractGooglePayment extends Payment {
         billingAddressRequired: true,
         billingAddressParameters: {
           format: 'FULL',
-          phoneNumberRequired: true,
+          phoneNumberRequired: Boolean(phone),
         },
       },
       ...(submit && {
@@ -3336,29 +3473,30 @@ class AbstractGooglePayment extends Payment {
     cart.shipment_price = 0;
     cart.shipping = {};
 
-    const { shipment_delivery } = cart;
     const { require: { email, shipping, phone } = {} } = this.params;
 
+    /** @type {google.payments.api.CallbackIntent[]} */
+    const callbackIntents = ['OFFER', 'PAYMENT_AUTHORIZATION'];
+
+    if (shipping) {
+      callbackIntents.push('SHIPPING_ADDRESS', 'SHIPPING_OPTION');
+    }
+
     return {
       apiVersion: API_VERSION,
       apiVersionMinor: API_MINOR_VERSION,
-      transactionInfo: getTransactionInfo(cart),
+      transactionInfo: getTransactionInfo.call(this, cart),
       allowedPaymentMethods: this._getAllowedPaymentMethods(true),
       emailRequired: Boolean(email),
       shippingAddressRequired: Boolean(shipping),
       shippingAddressParameters: {
         phoneNumberRequired: Boolean(phone),
       },
-      shippingOptionRequired: Boolean(shipment_delivery),
+      shippingOptionRequired: Boolean(shipping),
       shippingOptionParameters: getShippingOptionParameters.call(this, cart),
       offerInfo: getOfferInfo(cart),
       merchantInfo,
-      callbackIntents: [
-        'OFFER',
-        'SHIPPING_ADDRESS',
-        'SHIPPING_OPTION',
-        'PAYMENT_AUTHORIZATION',
-      ],
+      callbackIntents,
     };
   }
 
@@ -3482,6 +3620,22 @@ class AbstractGooglePayment extends Payment {
 /** @typedef {import('../../../types').Cart} Cart */
 
 class AuthorizeNetGooglePayment extends AbstractGooglePayment {
+  /**
+   * @override
+   * @returns {google.payments.api.CardNetwork[]}
+   */
+  getAllowedCardNetworks() {
+    return ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA'];
+  }
+
+  /**
+   * @override
+   * @returns {google.payments.api.CardAuthMethod[]}
+   */
+  getAllowedCardAuthMethods() {
+    return ['PAN_ONLY', 'CRYPTOGRAM_3DS'];
+  }
+
   /**
    * @override
    * @returns {google.payments.api.PaymentGatewayTokenizationParameters}
@@ -3499,7 +3653,6 @@ class AuthorizeNetGooglePayment extends AbstractGooglePayment {
    * @returns {Promise<object>}
    */
   async preparePaymentDataForCartUpdate(paymentData) {
-    const { require: { shipping: requireShipping } = {} } = this.params;
     const { email, shippingAddress, shippingOptionData, paymentMethodData } =
       paymentData;
 
@@ -3520,7 +3673,7 @@ class AuthorizeNetGooglePayment extends AbstractGooglePayment {
         },
         ...convertToSwellAddress$2(billingAddress),
       },
-      ...(requireShipping && {
+      ...(shippingAddress && {
         shipping: {
           ...convertToSwellAddress$2(shippingAddress),
           service: shippingOptionData?.id || undefined,
@@ -3587,9 +3740,15 @@ class AbstractApplePayment extends Payment {
     return window.ApplePaySession;
   }
 
-  /** @returns {string[]} */
+  /**
+   * We should specify the payment methods in the order preferred by the gateway.
+   *
+   * @see {@link https://developer.apple.com/documentation/applepayontheweb/applepaypaymentrequest/supportednetworks}
+   *
+   * @returns {string[]}
+   */
   getSupportedCardNetworks() {
-    return ['amex', 'discover', 'interac', 'jcb', 'masterCard', 'visa'];
+    return ['visa', 'masterCard', 'amex', 'discover', 'interac', 'jcb'];
   }
 
   /** @returns {ApplePayJS.ApplePayMerchantCapability[]} */
@@ -3600,12 +3759,12 @@ class AbstractApplePayment extends Payment {
   /**
    * Creates the Apple Pay payment request object
    *
-   * IMPORTANT: countryCode here is the MERCHANT's country (where your business is located),
-   * NOT the customer's country. Customer country comes from shippingContact.countryCode.
+   * IMPORTANT: `countryCode` here is the MERCHANT's country (where your business is located),
+   * NOT the customer's country. Customer country comes from `shippingContact.countryCode`.
    *
-   * NOTE: We do NOT pass shippingMethods in the initial request. Shipping methods
+   * NOTE: We do NOT pass `shippingMethods` in the initial request. Shipping methods
    * are provided dynamically after the user selects/confirms their address in the
-   * 'shippingcontactselected' event handler.
+   * `'shippingcontactselected'` event handler.
    *
    * @param {Cart} cart
    * @returns {ApplePayJS.ApplePayPaymentRequest}
@@ -3613,38 +3772,21 @@ class AbstractApplePayment extends Payment {
   _createPaymentRequest(cart) {
     cart = { ...cart };
 
-    const { require = {} } = this.params;
     const {
       settings: { country },
       currency,
     } = cart;
 
-    const requiredShippingContactFields = [];
-    const requiredBillingContactFields = ['postalAddress'];
-
-    if (require.name) {
-      requiredShippingContactFields.push('name');
-    }
-
-    if (require.email) {
-      requiredShippingContactFields.push('email');
-    }
-
-    if (require.phone) {
-      requiredShippingContactFields.push('phone');
-    }
-
-    if (require.shipping) {
-      requiredShippingContactFields.push('postalAddress');
-    }
-
     // When initiating a payment request,
     // we should not display the shipping cost, as it will be calculated later.
     cart.shipment_price = 0;
     cart.shipping = {};
 
+    const { requiredBillingContactFields, requiredShippingContactFields } =
+      getRequiredContactFields(this.params);
+
     return {
-      total: getTotal(cart, this.merchantInfo),
+      total: getTotal.call(this, cart, this.merchantInfo),
       countryCode: country, // Merchant's country
       currencyCode: currency,
       supportedNetworks: this.getSupportedCardNetworks(),
@@ -3826,6 +3968,22 @@ class AbstractApplePayment extends Payment {
 }
 
 class AuthorizeNetApplePayment extends AbstractApplePayment {
+  /**
+   * @override
+   * @returns {string[]}
+   */
+  getSupportedCardNetworks() {
+    return ['visa', 'masterCard', 'amex', 'discover'];
+  }
+
+  /**
+   * @override
+   * @returns {ApplePayJS.ApplePayMerchantCapability[]}
+   */
+  getMerchantCapabilities() {
+    return ['supports3DS', 'supportsDebit', 'supportsCredit'];
+  }
+
   /**
    * @override
    * @param {ApplePayJS.ApplePayValidateMerchantEvent} event
@@ -3859,11 +4017,9 @@ class AuthorizeNetApplePayment extends AbstractApplePayment {
       payment: { token, shippingContact, billingContact },
     } = event;
 
-    const { require: { shipping: requireShipping } = {} } = this.params;
-
     return {
       account: {
-        email: shippingContact.emailAddress,
+        email: shippingContact?.emailAddress || billingContact?.emailAddress,
       },
       billing: {
         method: 'apple',
@@ -3875,7 +4031,7 @@ class AuthorizeNetApplePayment extends AbstractApplePayment {
         },
         ...convertToSwellAddress$1(billingContact),
       },
-      ...(requireShipping && {
+      ...(shippingContact && {
         shipping: convertToSwellAddress$1(shippingContact),
       }),
     };
@@ -3995,7 +4151,7 @@ async function getConvesioPaymentSettings(mode, settings, country) {
         merchantAccount: false,
         countryCode: country || 'US',
         shopperLocale: 'en-US',
-        // shopperReference: email ? md5(email) : undefined,
+        // shopperReference: email ? md5(email.toLowerCase()) : undefined,
       }),
     },
   ).then((res) => res.json());
@@ -4123,15 +4279,20 @@ class ConvesioCardPayment extends Payment {
   }
 }
 
+function getBaseConvesioVaultUrl(mode) {
+  return isLiveMode(mode)
+    ? 'https://vault.convesiopay.com'
+    : 'https://qa-vault.convesiopay.com';
+}
+
 function createConvesioCardPaymentToken(settings, data) {
-  const baseUrl = getBaseConvesioApiUrl(settings.mode);
+  const baseUrl = getBaseConvesioVaultUrl(settings.mode);
 
   return fetch(`${baseUrl}/v1/create-token`, {
     method: 'POST',
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
-      'X-Requested-With': 'convesio-pay-dashboard',
       'X-Api-Key': settings.public_key,
     },
     body: JSON.stringify(data),
@@ -4246,8 +4407,6 @@ class ConvesioPayApplePayment extends AbstractApplePayment {
       payment: { token, shippingContact, billingContact },
     } = event;
 
-    const { require: { shipping: requireShipping } = {} } = this.params;
-
     const payment = await createConvesioApplePaymentToken(
       this.method.mode,
       this.convesiopay,
@@ -4269,7 +4428,7 @@ class ConvesioPayApplePayment extends AbstractApplePayment {
 
     return {
       account: {
-        email: shippingContact.emailAddress,
+        email: shippingContact?.emailAddress || billingContact?.emailAddress,
       },
       billing: {
         method: 'apple',
@@ -4284,7 +4443,7 @@ class ConvesioPayApplePayment extends AbstractApplePayment {
         },
         ...convertToSwellAddress$1(billingContact),
       },
-      ...(requireShipping && {
+      ...(shippingContact && {
         shipping: convertToSwellAddress$1(shippingContact),
       }),
     };
@@ -4414,7 +4573,6 @@ class ConvesioPayGooglePayment extends AbstractGooglePayment {
    * @returns {Promise<object>}
    */
   async preparePaymentDataForCartUpdate(paymentData) {
-    const { require: { shipping: requireShipping } = {} } = this.params;
     const { email, shippingAddress, shippingOptionData, paymentMethodData } =
       paymentData;
 
@@ -4457,7 +4615,7 @@ class ConvesioPayGooglePayment extends AbstractGooglePayment {
         },
         ...convertToSwellAddress$2(billingAddress),
       },
-      ...(requireShipping && {
+      ...(shippingAddress && {
         shipping: {
           ...convertToSwellAddress$2(shippingAddress),
           service: shippingOptionData?.id || undefined,
@@ -5353,20 +5511,29 @@ class SezzleDirectPayment extends Payment {
       settings: { name },
     } = cart;
 
-    const shipmentDelivery = Boolean(cart.shipment_delivery);
+    const { require: { shipping } = {} } = this.params;
     const cartCurrency = getCartCurrency(cart);
 
     return {
       checkout_payload: {
-        express_checkout_type: shipmentDelivery ? 'multi-step' : 'no-shipping',
+        express_checkout_type: shipping ? 'multi-step' : 'no-shipping',
+        customer: {
+          email: cart.account?.email,
+          first_name: cart.account?.first_name,
+          last_name: cart.account?.last_name,
+          phone: cart.account?.phone,
+          // TODO: recurring payments https://docs.sezzle.com/docs/api/tokenization/intro
+          // tokenize: cart.subscription_delivery,
+          // recurring: cart.subscription_delivery,
+        },
         order: {
           intent: 'AUTH',
           reference_id: cart.checkout_id,
           description: `${name} #${cart.number}`,
-          requires_shipping_info: shipmentDelivery,
+          requires_shipping_info: shipping,
           items: getItems(cart),
           discounts: getDiscounts(cart),
-          tax_amount: shipmentDelivery
+          tax_amount: shipping
             ? undefined
             : getAmountInCents(cartCurrency, cart.tax_total),
           order_amount: getAmountInCents(cartCurrency, cart.capture_total),
@@ -5626,15 +5793,6 @@ function convertToSwellAddress(address) {
   };
 }
 
-/**
- * @param {string} currency
- * @param {number} amount
- * @returns {number}
- */
-function amountInCents(currency, amount) {
-  return Math.round(amount * 100);
-}
-
 class PaymentController {
   constructor(api, options) {
     this.api = api;