swell-js 5.8.0 → 5.8.2

package/dist/payment.mjs

@@ -1,7 +1,7 @@
 import methods from './cart.mjs';
 import methods$1 from './settings.mjs';
-import { b as isObject, k as isFunction, l as loadScript, c as cloneDeep, v as vaultRequest, t as toSnake, p as pick, n as isEmpty, o as isLiveMode, q as base64Encode, w as map, r as reduce, x as getLocationParams, y as removeUrlParams, a as toCamel } from './index.a227b03d.mjs';
-import { g as get, t as toNumber } from './find.18f1ac6d.mjs';
+import { b as isObject, k as isFunction, l as loadScript, c as cloneDeep, v as vaultRequest, t as toSnake, p as pick, n as isEmpty, o as isLiveMode, q as base64Encode, w as getLocationParams, x as removeUrlParams, a as toCamel } from './index.a8d5c125.mjs';
+import { g as get } from './find.18f1ac6d.mjs';
 import 'qs';
 import 'deepmerge';
 import 'fast-case';
@@ -47,13 +47,18 @@ async function loadStripe() {
 
 async function loadPaypal(params) {
   if (!window.paypal) {
-    const { currency, client_id, merchant_id } = params;
+    const { vault, currency, client_id, merchant_id } = params;
+
     const paypalParams = {
       currency,
       'client-id': client_id,
       commit: false,
     };
 
+    if (vault) {
+      paypalParams.vault = vault;
+    }
+
     if (merchant_id) {
       // paypal express and ppcp onboarded
       paypalParams['merchant-id'] = merchant_id;
@@ -592,7 +597,7 @@ const MINIMUM_CHARGE_AMOUNT = {
   THB: 10,
 };
 
-const addressFieldsMap$1 = {
+const addressFieldsMap = {
   city: 'city',
   country: 'country',
   line1: 'address1',
@@ -630,7 +635,7 @@ function getBillingDetails(cart) {
     details.email = cart.account.email;
   }
 
-  const address = mapValues(addressFieldsMap$1, cart.billing);
+  const address = mapValues(addressFieldsMap, cart.billing);
   if (!isEmpty(address)) {
     details.address = address;
   }
@@ -2180,7 +2185,7 @@ async function onPaymentDataChanged(intermediatePaymentData) {
 
         // Update cart with new shipping address and force tax recalculation
         let cart = await this.updateCart({
-          shipping: convertToSwellAddress$2(
+          shipping: convertToSwellAddress$3(
             intermediatePaymentData.shippingAddress,
           ),
         });
@@ -2446,7 +2451,7 @@ function getOfferInfo(cart) {
  * @param {google.payments.api.Address} address
  * @returns {Address}
  */
-function convertToSwellAddress$2(address) {
+function convertToSwellAddress$3(address) {
   return {
     name: address.name,
     address1: address.address1,
@@ -2710,11 +2715,11 @@ class BraintreeGooglePayment extends Payment {
           nonce,
           gateway: 'braintree',
         },
-        ...convertToSwellAddress$2(billingAddress),
+        ...convertToSwellAddress$3(billingAddress),
       },
       ...(shippingAddress && {
         shipping: {
-          ...convertToSwellAddress$2(shippingAddress),
+          ...convertToSwellAddress$3(shippingAddress),
           service: shippingOptionData?.id || undefined,
         },
       }),
@@ -2751,6 +2756,7 @@ class BraintreeGooglePayment extends Payment {
 /** @typedef {import('./payment').default} Payment */
 /** @typedef {import('../../types').Cart} Cart */
 /** @typedef {import('../../types').Address} Address */
+/** @typedef {import('../../types').CartItemBillingSchedule} CartItemBillingSchedule */
 
 /**
  * @this {Payment}
@@ -2762,7 +2768,7 @@ async function onShippingAddressChange(shippingContact) {
     // Update cart with Apple Pay shipping address to get shipping options and tax
     // This happens immediately when the sheet opens with the default address
     const cart = await this.updateCart({
-      shipping: convertToSwellAddress$1(shippingContact),
+      shipping: convertToSwellAddress$2(shippingContact),
     });
 
     if (!cart.shipment_rating?.services?.length) {
@@ -3051,7 +3057,7 @@ function getShippingMethods(cart) {
  * @param {ApplePayJS.ApplePayPaymentContact} [address]
  * @returns {Address}
  */
-function convertToSwellAddress$1(address = {}) {
+function convertToSwellAddress$2(address = {}) {
   return {
     first_name: address.givenName,
     last_name: address.familyName,
@@ -3094,6 +3100,99 @@ function getRequiredContactFields(params) {
   return { requiredBillingContactFields, requiredShippingContactFields };
 }
 
+/**
+ * @param {CartItemBillingSchedule} schedule
+ * @returns {{ intervalUnit: ApplePayJS.ApplePayRecurringPaymentDateUnit, intervalCount: number }}
+ */
+function convertSwellScheduleToAppleRecurringInterval(schedule) {
+  let intervalCount = schedule.interval_count || 1;
+  let intervalUnit = 'day';
+
+  switch (schedule.interval) {
+    case 'daily':
+      intervalUnit = 'day';
+      break;
+
+    case 'weekly':
+      intervalUnit = 'day';
+      intervalCount *= 7;
+      break;
+
+    case 'monthly':
+      intervalUnit = 'month';
+      break;
+
+    case 'yearly':
+      intervalUnit = 'year';
+      break;
+  }
+
+  return { intervalUnit, intervalCount };
+}
+
+/**
+ * @param {Cart} cart
+ * @param {string} managementUrl
+ * @returns {ApplePayJS.ApplePayRecurringPaymentRequest | undefined}
+ */
+function getRecurringPaymentRequest(cart, managementUrl) {
+  if (!cart.subscription_delivery) {
+    return undefined;
+  }
+
+  const item = cart.items.find(
+    (item) =>
+      item.purchase_option?.type === 'subscription' &&
+      item.purchase_option.billing_schedule,
+  );
+
+  if (item === undefined) {
+    return undefined;
+  }
+
+  const { intervalUnit, intervalCount } =
+    convertSwellScheduleToAppleRecurringInterval(
+      item.purchase_option.billing_schedule,
+    );
+
+  /** @type {ApplePayJS.ApplePayRecurringPaymentRequest} */
+  const recurringPaymentRequest = {
+    paymentDescription:
+      item.purchase_option.plan_description ||
+      item.purchase_option.plan_name ||
+      item.product_name ||
+      item.product?.name,
+    regularBilling: {
+      type: 'final',
+      label: item.purchase_option.plan_name || 'Subscription',
+      // Calculate the subscription price manually if a trial period is specified.
+      // However, discounts are not included in the calculation due to the difficulty of taking into account all scenarios.
+      amount: (item.purchase_option.billing_schedule.trial_days
+        ? (item.price || 0) * (item.quantity || 1)
+        : item.price_total
+      ).toFixed(2),
+      paymentTiming: 'recurring',
+      recurringPaymentIntervalUnit: intervalUnit,
+      recurringPaymentIntervalCount: intervalCount,
+    },
+    trialBilling: item.purchase_option.billing_schedule.trial_days
+      ? {
+          type: 'final',
+          label: 'Trial',
+          // When a trial period is set, price_total is 0 (usually)
+          amount: Number(item.price_total || 0).toFixed(2),
+          paymentTiming: 'recurring',
+          recurringPaymentIntervalUnit: 'day',
+          recurringPaymentIntervalCount:
+            item.purchase_option.billing_schedule.trial_days,
+        }
+      : undefined,
+    managementURL: managementUrl,
+  };
+
+  return recurringPaymentRequest;
+}
+
 /** @typedef {import('../../../types').Cart} Cart */
 
 const VERSION$1 = 14;
@@ -3296,10 +3395,10 @@ class BraintreeApplePayment extends Payment {
             nonce: payload.nonce,
             gateway: 'braintree',
           },
-          ...convertToSwellAddress$1(billingContact),
+          ...convertToSwellAddress$2(billingContact),
         },
         ...(shippingContact && {
-          shipping: convertToSwellAddress$1(shippingContact),
+          shipping: convertToSwellAddress$2(shippingContact),
         }),
       });
 
@@ -3505,7 +3604,7 @@ class AbstractGooglePayment extends Payment {
    * @returns {Promise<object>}
    */
   // eslint-disable-next-line no-unused-vars
-  async preparePaymentDataForCartUpdate(paymentData) {
+  async processPaymentData(paymentData) {
     throw new Error('Implement this!');
   }
 
@@ -3527,9 +3626,7 @@ class AbstractGooglePayment extends Payment {
       throw new Error('Google Pay token is missing');
     }
 
-    await this.preparePaymentDataForCartUpdate(paymentData).then((data) =>
-      this.updateCart(data),
-    );
+    await this.processPaymentData(paymentData);
 
     this.onSuccess();
   }
@@ -3652,7 +3749,7 @@ class AuthorizeNetGooglePayment extends AbstractGooglePayment {
    * @param {google.payments.api.PaymentData} paymentData
    * @returns {Promise<object>}
    */
-  async preparePaymentDataForCartUpdate(paymentData) {
+  async processPaymentData(paymentData) {
     const { email, shippingAddress, shippingOptionData, paymentMethodData } =
       paymentData;
 
@@ -3661,7 +3758,7 @@ class AuthorizeNetGooglePayment extends AbstractGooglePayment {
       tokenizationData: { token },
     } = paymentMethodData;
 
-    return {
+    await this.updateCart({
       account: { email },
       billing: {
         method: 'google',
@@ -3671,15 +3768,15 @@ class AuthorizeNetGooglePayment extends AbstractGooglePayment {
           gateway: 'authorizenet',
           token: base64Encode(token),
         },
-        ...convertToSwellAddress$2(billingAddress),
+        ...convertToSwellAddress$3(billingAddress),
       },
       ...(shippingAddress && {
         shipping: {
-          ...convertToSwellAddress$2(shippingAddress),
+          ...convertToSwellAddress$3(shippingAddress),
           service: shippingOptionData?.id || undefined,
         },
       }),
-    };
+    });
   }
 }
 
@@ -3794,6 +3891,10 @@ class AbstractApplePayment extends Payment {
       requiredShippingContactFields,
       requiredBillingContactFields,
       supportsCouponCode: true,
+      recurringPaymentRequest: getRecurringPaymentRequest(
+        cart,
+        this.params.managementUrl,
+      ),
       lineItems: getLineItems(cart),
     };
   }
@@ -3816,7 +3917,7 @@ class AbstractApplePayment extends Payment {
    * @returns {Promise<object>}
    */
   // eslint-disable-next-line no-unused-vars
-  async preparePaymentDataForCartUpdate(event) {
+  async processPaymentData(event) {
     throw new Error('Implement this!');
   }
 
@@ -3874,9 +3975,7 @@ class AbstractApplePayment extends Payment {
         //
         // We store the payment token but DO NOT process the order yet.
         // The user must manually click "Place Order" to complete the transaction.
-        await this.preparePaymentDataForCartUpdate(event).then((data) =>
-          this.updateCart(data),
-        );
+        await this.processPaymentData(event);
 
         // Complete Apple Pay session successfully
         // This closes the Apple Pay sheet and shows success to the user
@@ -4012,12 +4111,12 @@ class AuthorizeNetApplePayment extends AbstractApplePayment {
    * @param {ApplePayJS.ApplePayPaymentAuthorizedEvent} event
    * @returns {Promise<object>}
    */
-  async preparePaymentDataForCartUpdate(event) {
+  async processPaymentData(event) {
     const {
       payment: { token, shippingContact, billingContact },
     } = event;
 
-    return {
+    return this.updateCart({
       account: {
         email: shippingContact?.emailAddress || billingContact?.emailAddress,
       },
@@ -4029,12 +4128,12 @@ class AuthorizeNetApplePayment extends AbstractApplePayment {
           gateway: 'authorizenet',
           token: base64Encode(JSON.stringify(token.paymentData)),
         },
-        ...convertToSwellAddress$1(billingContact),
+        ...convertToSwellAddress$2(billingContact),
       },
       ...(shippingContact && {
-        shipping: convertToSwellAddress$1(shippingContact),
+        shipping: convertToSwellAddress$2(shippingContact),
       }),
-    };
+    });
   }
 }
 
@@ -4402,7 +4501,7 @@ class ConvesioPayApplePayment extends AbstractApplePayment {
    * @param {ApplePayJS.ApplePayPaymentAuthorizedEvent} event
    * @returns {Promise<object>}
    */
-  async preparePaymentDataForCartUpdate(event) {
+  async processPaymentData(event) {
     const {
       payment: { token, shippingContact, billingContact },
     } = event;
@@ -4426,7 +4525,7 @@ class ConvesioPayApplePayment extends AbstractApplePayment {
       },
     );
 
-    return {
+    return this.updateCart({
       account: {
         email: shippingContact?.emailAddress || billingContact?.emailAddress,
       },
@@ -4441,12 +4540,12 @@ class ConvesioPayApplePayment extends AbstractApplePayment {
         convesiopay: {
           return_url: this.params.returnUrl,
         },
-        ...convertToSwellAddress$1(billingContact),
+        ...convertToSwellAddress$2(billingContact),
       },
       ...(shippingContact && {
-        shipping: convertToSwellAddress$1(shippingContact),
+        shipping: convertToSwellAddress$2(shippingContact),
       }),
-    };
+    });
   }
 }
 
@@ -4572,7 +4671,7 @@ class ConvesioPayGooglePayment extends AbstractGooglePayment {
    * @param {google.payments.api.PaymentData} paymentData
    * @returns {Promise<object>}
    */
-  async preparePaymentDataForCartUpdate(paymentData) {
+  async processPaymentData(paymentData) {
     const { email, shippingAddress, shippingOptionData, paymentMethodData } =
       paymentData;
 
@@ -4600,7 +4699,7 @@ class ConvesioPayGooglePayment extends AbstractGooglePayment {
       },
     );
 
-    return {
+    return this.updateCart({
       account: { email },
       billing: {
         method: 'google',
@@ -4613,15 +4712,15 @@ class ConvesioPayGooglePayment extends AbstractGooglePayment {
         convesiopay: {
           return_url: this.params.returnUrl,
         },
-        ...convertToSwellAddress$2(billingAddress),
+        ...convertToSwellAddress$3(billingAddress),
       },
       ...(shippingAddress && {
         shipping: {
-          ...convertToSwellAddress$2(shippingAddress),
+          ...convertToSwellAddress$3(shippingAddress),
           service: shippingOptionData?.id || undefined,
         },
       }),
-    };
+    });
   }
 }
 
@@ -4767,105 +4866,6 @@ class PaysafecardDirectPayment extends Payment {
   }
 }
 
-const addressFieldsMap = {
-  given_name: 'first_name',
-  family_name: 'last_name',
-  city: 'city',
-  country: 'country',
-  phone: 'phone',
-  postal_code: 'zip',
-  street_address: 'address1',
-  street_address2: 'address2',
-  region: 'state',
-};
-
-const mapFields = (fieldsMap, data) =>
-  reduce(
-    fieldsMap,
-    (acc, srcKey, destKey) => {
-      const value = data[srcKey];
-      if (value) {
-        acc[destKey] = value;
-      }
-      return acc;
-    },
-    {},
-  );
-
-const mapAddressFields = (cart, addressField) => ({
-  ...mapFields(addressFieldsMap, cart[addressField]),
-  email: get(cart, 'account.email'),
-});
-
-function getOrderLines(cart) {
-  const items = map(cart.items, (item) => ({
-    type: 'physical',
-    name: get(item, 'product.name'),
-    reference: get(item, 'product.sku') || get(item, 'product.slug'),
-    quantity: item.quantity,
-    unit_price: Math.round(toNumber(item.price - item.discount_each) * 100),
-    total_amount: Math.round(
-      toNumber(item.price_total - item.discount_total) * 100,
-    ),
-    tax_rate: 0,
-    total_tax_amount: 0,
-  }));
-
-  const tax = get(cart, 'tax_included_total');
-  const taxAmount = toNumber(tax) * 100;
-  if (tax) {
-    items.push({
-      type: 'sales_tax',
-      name: 'Taxes',
-      quantity: 1,
-      unit_price: taxAmount,
-      total_amount: taxAmount,
-      tax_rate: 0,
-      total_tax_amount: 0,
-    });
-  }
-
-  const shipping = get(cart, 'shipping', {});
-  const shippingTotal = get(cart, 'shipment_total', {});
-  const shippingAmount = toNumber(shippingTotal) * 100;
-  if (shipping.price) {
-    items.push({
-      type: 'shipping_fee',
-      name: shipping.service_name,
-      quantity: 1,
-      unit_price: shippingAmount,
-      total_amount: shippingAmount,
-      tax_rate: 0,
-      total_tax_amount: 0,
-    });
-  }
-
-  return items;
-}
-
-function getKlarnaSessionData(cart) {
-  const returnUrl = `${window.location.origin}${window.location.pathname}?gateway=klarna_direct&sid={{session_id}}`;
-  const successUrl = `${returnUrl}&authorization_token={{authorization_token}}`;
-
-  return {
-    locale: cart.display_locale || get(cart, 'settings.locale') || 'en-US',
-    purchase_country:
-      get(cart, 'billing.country') || get(cart, 'shipping.country'),
-    purchase_currency: cart.currency,
-    billing_address: mapAddressFields(cart, 'billing'),
-    shipping_address: mapAddressFields(cart, 'shipping'),
-    order_amount: Math.round(get(cart, 'capture_total', 0) * 100),
-    order_lines: JSON.stringify(getOrderLines(cart)),
-    merchant_urls: {
-      success: successUrl,
-      back: returnUrl,
-      cancel: returnUrl,
-      error: returnUrl,
-      failure: returnUrl,
-    },
-  };
-}
-
 class KlarnaDirectPayment extends Payment {
   constructor(api, options, params, methods) {
     super(api, options, params, methods.klarna);
@@ -4874,6 +4874,7 @@ class KlarnaDirectPayment extends Payment {
   async tokenize() {
     const cart = await this.getCart();
     const sessionData = getKlarnaSessionData(cart);
+
     const session = await this.createIntent({
       gateway: 'klarna',
       intent: sessionData,
@@ -4906,12 +4907,42 @@ class KlarnaDirectPayment extends Payment {
   }
 }
 
+function getKlarnaSessionData(cart) {
+  const returnUrl = `${window.location.origin}${window.location.pathname}?gateway=klarna_direct&sid={{session_id}}`;
+  const successUrl = `${returnUrl}&authorization_token={{authorization_token}}`;
+
+  return {
+    cart_id: cart.id,
+    merchant_urls: {
+      success: successUrl,
+      back: returnUrl,
+      cancel: returnUrl,
+      error: returnUrl,
+      failure: returnUrl,
+    },
+  };
+}
+
+/** @typedef {import('@paypal/paypal-js').PayPalNamespace} PayPal */
+/** @typedef {import('@paypal/paypal-js').ShippingAddress} ShippingAddress */
+/** @typedef {import('@paypal/paypal-js').CreateOrderData} CreateOrderData */
+/** @typedef {import('@paypal/paypal-js').CreateOrderActions} CreateOrderActions */
+/** @typedef {import('@paypal/paypal-js').OnShippingAddressChangeData} OnShippingAddressChangeData */
+/** @typedef {import('@paypal/paypal-js').OnShippingAddressChangeActions} OnShippingAddressChangeActions */
+/** @typedef {import('@paypal/paypal-js').OnShippingOptionsChangeData} OnShippingOptionsChangeData */
+/** @typedef {import('@paypal/paypal-js').OnShippingOptionsChangeActions} OnShippingOptionsChangeActions */
+/** @typedef {import('@paypal/paypal-js').OnApproveData} OnApproveData */
+/** @typedef {import('@paypal/paypal-js').OnApproveActions} OnApproveActions */
+/** @typedef {import('../../../types').Cart} Cart */
+/** @typedef {import('../../../types').Address} Address */
+
 class PaypalDirectPayment extends Payment {
   constructor(api, options, params, methods) {
     super(api, options, params, methods.paypal);
   }
 
-  get scripts() {
+  /** @param {Cart} cart */
+  getScripts(cart) {
     const { client_id } = this.method;
 
     return [
@@ -4921,11 +4952,13 @@ class PaypalDirectPayment extends Payment {
           client_id,
           merchant_id: this.merchantId,
           cart: ['currency'],
+          vault: cart.subscription_delivery,
         },
       },
     ];
   }
 
+  /** @returns {PayPal} */
   get paypal() {
     if (!window.paypal) {
       throw new LibraryNotLoadedError('PayPal');
@@ -4949,7 +4982,6 @@ class PaypalDirectPayment extends Payment {
   async createElements(cart) {
     const {
       elementId = 'paypal-button',
-      locale = 'en_US',
       style: {
         layout = 'horizontal',
         height = 45,
@@ -4958,15 +4990,16 @@ class PaypalDirectPayment extends Payment {
         label = 'paypal',
         tagline = false,
       } = {},
+      require: { shipping: requireShipping = true } = {},
     } = this.params;
 
     this.setElementContainer(elementId);
 
     this._validateCart(cart);
-    await this.loadScripts(this.scripts);
+    await this.loadScripts(this.getScripts(cart));
 
-    this.element = this.paypal.Buttons({
-      locale,
+    /** @type {import('@paypal/paypal-js').PayPalButtonsComponentOptions} */
+    const buttonsOptions = {
       style: {
         layout,
         height,
@@ -4975,11 +5008,27 @@ class PaypalDirectPayment extends Payment {
         label,
         tagline,
       },
+      fundingSource: this.paypal.FUNDING.PAYPAL,
       createOrder: this._onCreateOrder.bind(this, cart),
-      onShippingChange: this._onShippingChange.bind(this),
       onApprove: this._onApprove.bind(this),
       onError: this.onError.bind(this),
-    });
+    };
+
+    if (requireShipping) {
+      buttonsOptions.onShippingAddressChange =
+        this._onShippingAddressChange.bind(this);
+
+      buttonsOptions.onShippingOptionsChange =
+        this._onShippingOptionsChange.bind(this);
+    }
+
+    const component = this.paypal.Buttons(buttonsOptions);
+
+    if (!component.isEligible()) {
+      throw new Error('PayPal button with provided options is not eligible.');
+    }
+
+    this.element = component;
   }
 
   mountElements() {
@@ -4993,6 +5042,7 @@ class PaypalDirectPayment extends Payment {
     }
   }
 
+  /** @param {Cart} cart */
   _validateCart(cart) {
     const hasSubscriptionProduct = Boolean(cart.subscription_delivery);
 
@@ -5002,27 +5052,35 @@ class PaypalDirectPayment extends Payment {
       );
     }
 
-    if (!(cart.capture_total > 0)) {
+    if ((cart.capture_total || 0) <= 0) {
       throw new Error(
         'Invalid PayPal button amount. Value should be greater than zero.',
       );
     }
   }
 
+  /**
+   * @param {Cart} cart
+   * @param {CreateOrderData} _data
+   * @param {CreateOrderActions} _actions
+   * @returns {Promise<string>}
+   */
   async _onCreateOrder(cart, _data, _actions) {
-    const { require: { shipping: requireShipping = true } = {} } = this.params;
+    const {
+      locale = 'en-US',
+      require: { shipping: requireShipping = true } = {},
+    } = this.params;
+
     const { capture_total, currency, subscription_delivery } = cart;
     const hasSubscriptionProduct = Boolean(subscription_delivery);
     const merchantId = this.merchantId;
     const returnUrl = this.returnUrl;
-    const orderData = {
-      application_context: {
-        shipping_preference: requireShipping ? 'GET_FROM_FILE' : 'NO_SHIPPING',
-      },
-    };
+    /** @type {import('@paypal/paypal-js').CreateOrderRequestBody} */
+    const orderData = {};
+    /** @type {import('@paypal/paypal-js').PurchaseUnit} */
     const purchaseUnit = {
       amount: {
-        value: Number(capture_total.toFixed(2)),
+        value: Number(capture_total).toFixed(2),
         currency_code: currency,
       },
     };
@@ -5030,29 +5088,44 @@ class PaypalDirectPayment extends Payment {
     if (merchantId) {
       // express checkout and ppcp
       orderData.intent = 'AUTHORIZE';
+
+      orderData.payment_source = {
+        paypal: {
+          experience_context: {
+            locale,
+            shipping_preference: requireShipping
+              ? 'GET_FROM_FILE'
+              : 'NO_SHIPPING',
+          },
+        },
+      };
+
       purchaseUnit.payee = {
         merchant_id: merchantId,
       };
 
       if (hasSubscriptionProduct) {
-        orderData.payment_source = {
-          paypal: {
-            attributes: {
-              vault: {
-                store_in_vault: 'ON_SUCCESS',
-                usage_type: 'MERCHANT',
-              },
-            },
-            experience_context: {
-              return_url: `${returnUrl}&redirect_status=succeeded`,
-              cancel_url: `${returnUrl}&redirect_status=canceled`,
-            },
+        orderData.payment_source.paypal.attributes = {
+          vault: {
+            store_in_vault: 'ON_SUCCESS',
+            usage_type: 'MERCHANT',
           },
         };
+
+        Object.assign(orderData.payment_source.paypal.experience_context, {
+          return_url: `${returnUrl}&redirect_status=succeeded`,
+          cancel_url: `${returnUrl}&redirect_status=canceled`,
+        });
       }
     } else {
       // progressive checkout
       orderData.intent = 'CAPTURE';
+
+      orderData.application_context = {
+        locale,
+        shipping_preference: requireShipping ? 'GET_FROM_FILE' : 'NO_SHIPPING',
+      };
+
       purchaseUnit.payee = {
         email_address: this.method.store_owner_email,
       };
@@ -5068,44 +5141,37 @@ class PaypalDirectPayment extends Payment {
     return order.id;
   }
 
-  async _onShippingChange(data, actions) {
+  /**
+   * @param {OnShippingAddressChangeData} data
+   * @param {OnShippingAddressChangeActions} actions
+   */
+  async _onShippingAddressChange(data, actions) {
     try {
-      const { orderID, shipping_address, selected_shipping_option } = data;
-      const updateData = {
+      const { orderID, shippingAddress } = data;
+
+      const cart = await this.updateCart({
         shipping: {
-          state: shipping_address.state,
-          city: shipping_address.city,
-          zip: shipping_address.postal_code,
-          country: shipping_address.country_code,
+          state: shippingAddress.state,
+          city: shippingAddress.city,
+          zip: shippingAddress.postalCode,
+          country: shippingAddress.countryCode,
         },
         shipment_rating: null,
-      };
-
-      if (selected_shipping_option) {
-        updateData.shipping.service = selected_shipping_option.id;
-        updateData.$taxes = true;
-      }
+      });
 
-      const cart = await this.updateCart(updateData);
-      const shippingServices = get(cart, 'shipment_rating.services');
+      const shippingServices = cart.shipment_rating?.services;
 
-      // can't fulfill shipping to selected address
+      // Can't fulfill shipping to selected address
       if (isEmpty(shippingServices)) {
         return actions.reject();
       }
 
-      let selectedShippingService;
-
-      if (selected_shipping_option) {
-        selectedShippingService = shippingServices.find(
-          (shippingService) =>
-            shippingService.id === selected_shipping_option.id,
-        );
-      }
+      let selectedShippingService = cart.shipping?.service;
 
       // need to set first service for cart by default
       if (!selectedShippingService) {
         const [firstShippingService] = shippingServices;
+        selectedShippingService = firstShippingService.id;
 
         await this.updateCart({
           shipping: {
@@ -5122,8 +5188,33 @@ class PaypalDirectPayment extends Payment {
           paypal_order_id: orderID,
         },
       });
+    } catch (error) {
+      this.onError(error);
+
+      return actions.reject();
+    }
+  }
+
+  /**
+   * @param {OnShippingOptionsChangeData} data
+   * @param {OnShippingOptionsChangeActions} actions
+   */
+  async _onShippingOptionsChange(data, actions) {
+    try {
+      const { orderID, selectedShippingOption } = data;
+
+      const cart = await this.updateCart({
+        shipping: { service: selectedShippingOption.id },
+        $taxes: true,
+      });
 
-      return orderID;
+      await this.updateIntent({
+        gateway: 'paypal',
+        intent: {
+          cart_id: cart.id,
+          paypal_order_id: orderID,
+        },
+      });
     } catch (error) {
       this.onError(error);
 
@@ -5131,14 +5222,17 @@ class PaypalDirectPayment extends Payment {
     }
   }
 
+  /**
+   * @param {OnApproveData} data
+   * @param {OnApproveActions} actions
+   */
   async _onApprove(data, actions) {
-    const { require: { shipping: requireShipping = true } = {} } = this.params;
     const order = await actions.order.get();
     const orderId = order.id;
-    const payer = order.payer;
+    const payer = order.payment_source?.paypal || order.payer;
     const billing = payer.address;
-    const shipping = get(order, 'purchase_units[0].shipping');
-    const name = `${payer.name.given_name} ${payer.name.surname}`;
+    const shipping = order.purchase_units?.[0]?.shipping;
+    const name = `${payer.name?.given_name} ${payer.name?.surname}`;
 
     await this.updateCart({
       account: {
@@ -5150,31 +5244,35 @@ class PaypalDirectPayment extends Payment {
           order_id: orderId,
         },
         name,
-        ...this._mapAddress(billing),
+        ...convertToSwellAddress$1(billing),
       },
-      ...(requireShipping && {
+      ...(shipping?.address && {
         shipping: {
           first_name: payer.name.given_name,
           last_name: payer.name.surname,
           name: shipping.name.full_name,
-          ...this._mapAddress(shipping.address),
+          ...convertToSwellAddress$1(shipping.address),
         },
       }),
     });
 
     this.onSuccess();
   }
+}
 
-  _mapAddress(address) {
-    return {
-      address1: address.address_line_1,
-      address2: address.address_line_2,
-      state: address.admin_area_1,
-      city: address.admin_area_2,
-      zip: address.postal_code,
-      country: address.country_code,
-    };
-  }
+/**
+ * @param {ShippingAddress} address
+ * @returns {Address}
+ */
+function convertToSwellAddress$1(address) {
+  return {
+    address1: address.address_line_1,
+    address2: address.address_line_2,
+    state: address.admin_area_1,
+    city: address.admin_area_2,
+    zip: address.postal_code,
+    country: address.country_code,
+  };
 }
 
 class AmazonDirectPayment extends Payment {