swell-js 4.0.1 → 4.0.2

package/dist/api.mjs

@@ -135,7 +135,7 @@ const options = {
 };
 
 const api = {
-  version: '4.0.1',
+  version: '4.0.2',
   options,
   request,
 

package/dist/payment.mjs

@@ -740,6 +740,68 @@ async function createBancontactSource(stripe, cart) {
   return await stripe.createSource(sourceObject);
 }
 
+function getPaymentRequestData(cart, params) {
+  const {
+    currency,
+    shipping,
+    items,
+    capture_total,
+    shipment_rating,
+    shipment_total,
+    tax_included_total,
+    settings,
+  } = cart;
+  const { price: shippingPrice, 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'),
+    amount: stripeAmountByCurrency(
+      currency,
+      item.price_total - item.discount_total,
+    ),
+  }));
+
+  if (tax_included_total) {
+    displayItems.push({
+      label: 'Taxes',
+      amount: stripeAmountByCurrency(currency, tax_included_total),
+    });
+  }
+
+  if (shippingPrice && shipment_total) {
+    displayItems.push({
+      label: service_name,
+      amount: stripeAmountByCurrency(currency, shipment_total),
+    });
+  }
+
+  let shippingOptions;
+  const services = get(shipment_rating, 'services');
+  if (Array.isArray(services) && services.length > 0) {
+    shippingOptions = services.map((service) => ({
+      id: service.id,
+      label: service.name,
+      detail: service.description,
+      amount: stripeAmountByCurrency(currency, service.price),
+    }));
+  }
+
+  return {
+    country: country || 'US',
+    currency: stripeCurrency,
+    total: {
+      label: name || 'Swell store',
+      amount: stripeAmountByCurrency(currency, capture_total),
+      pending: true,
+    },
+    displayItems,
+    ...(requireShipping && { shippingOptions }),
+  };
+}
+
 function stripeAmountByCurrency(currency, amount) {
   const zeroDecimalCurrencies = [
     'BIF', // Burundian Franc
@@ -1209,19 +1271,6 @@ class StripeKlarnaPayment extends Payment {
   }
 }
 
-const VERSION$1 = '2018-10-31';
-const API_VERSION$1 = 2;
-const API_MINOR_VERSION$1 = 0;
-const ALLOWED_CARD_AUTH_METHODS$1 = ['PAN_ONLY', 'CRYPTOGRAM_3DS'];
-const ALLOWED_CARD_NETWORKS$1 = [
-  'AMEX',
-  'DISCOVER',
-  'INTERAC',
-  'JCB',
-  'MASTERCARD',
-  'VISA',
-];
-
 class StripeGooglePayment extends Payment {
   constructor(request, options, params, methods) {
     if (!methods.card) {
@@ -1237,210 +1286,210 @@ class StripeGooglePayment extends Payment {
   }
 
   get scripts() {
-    return ['google-pay'];
-  }
-
-  get google() {
-    if (!window.google) {
-      throw new LibraryNotLoadedError('Google');
-    }
-
-    return window.google;
+    return ['stripe-js'];
   }
 
-  get googleClient() {
-    if (!StripeGooglePayment.googleClient) {
-      if (this.google) {
-        this.googleClient = new this.google.payments.api.PaymentsClient({
-          environment: isLiveMode(this.method.mode) ? 'PRODUCTION' : 'TEST',
-        });
+  get stripe() {
+    if (!StripeGooglePayment.stripe) {
+      if (window.Stripe) {
+        this.stripe = window.Stripe(this.method.publishable_key);
       }
 
-      if (!StripeGooglePayment.googleClient) {
-        throw new LibraryNotLoadedError('Google client');
+      if (!StripeGooglePayment.stripe) {
+        throw new LibraryNotLoadedError('Stripe');
       }
     }
 
-    return StripeGooglePayment.googleClient;
-  }
-
-  set googleClient(googleClient) {
-    StripeGooglePayment.googleClient = googleClient;
-  }
-
-  get tokenizationSpecification() {
-    const publishableKey = this.method.publishable_key;
-
-    if (!publishableKey) {
-      throw new Error('Stripe publishable key is not defined');
-    }
-
-    return {
-      type: 'PAYMENT_GATEWAY',
-      parameters: {
-        gateway: 'stripe',
-        'stripe:version': VERSION$1,
-        'stripe:publishableKey': publishableKey,
-      },
-    };
-  }
-
-  get cardPaymentMethod() {
-    return {
-      type: 'CARD',
-      tokenizationSpecification: this.tokenizationSpecification,
-      parameters: {
-        allowedAuthMethods: ALLOWED_CARD_AUTH_METHODS$1,
-        allowedCardNetworks: ALLOWED_CARD_NETWORKS$1,
-        billingAddressRequired: true,
-        billingAddressParameters: {
-          format: 'FULL',
-          phoneNumberRequired: true,
-        },
-      },
-    };
+    return StripeGooglePayment.stripe;
   }
 
-  get allowedPaymentMethods() {
-    return [this.cardPaymentMethod];
+  set stripe(stripe) {
+    StripeGooglePayment.stripe = stripe;
   }
 
   async createElements(cart) {
-    const {
-      elementId = 'googlepay-button',
-      locale = 'en',
-      style: { color = 'black', type = 'buy', sizeMode = 'fill' } = {},
-    } = this.params;
-
-    if (!this.method.merchant_id) {
-      throw new Error('Google merchant ID is not defined');
-    }
+    const { elementId = 'googlepay-button', classes = {} } = this.params;
 
     this.setElementContainer(elementId);
     await this.loadScripts(this.scripts);
 
-    const isReadyToPay = await this.googleClient.isReadyToPay({
-      apiVersion: API_VERSION$1,
-      apiVersionMinor: API_MINOR_VERSION$1,
-      allowedPaymentMethods: this.allowedPaymentMethods,
-      existingPaymentMethodRequired: true,
-    });
+    const paymentRequest = this._createPaymentRequest(cart);
+    const canMakePayment = await paymentRequest.canMakePayment();
 
-    if (!isReadyToPay.result) {
+    if (!canMakePayment?.googlePay) {
       throw new Error(
         'This device is not capable of making Google Pay payments',
       );
     }
 
-    const paymentRequestData = this._createPaymentRequestData(cart);
-
-    this.element = this.googleClient.createButton({
-      buttonColor: color,
-      buttonType: type,
-      buttonSizeMode: sizeMode,
-      buttonLocale: locale,
-      onClick: this._onClick.bind(this, paymentRequestData),
+    this.element = this.stripe.elements().create('paymentRequestButton', {
+      paymentRequest,
+      style: {
+        paymentRequestButton: this._getButtonStyles(),
+      },
+      classes,
     });
   }
 
   mountElements() {
-    const { classes = {} } = this.params;
-    const container = this.elementContainer;
+    this.element.mount(`#${this.elementContainer.id}`);
+  }
 
-    container.appendChild(this.element);
+  _createPaymentRequest(cart) {
+    const { require: { name, email, shipping, phone } = {} } = this.params;
 
-    if (classes.base) {
-      container.classList.add(classes.base);
-    }
+    const paymentRequest = this.stripe.paymentRequest({
+      requestPayerName: Boolean(name),
+      requestPayerEmail: Boolean(email),
+      requestPayerPhone: Boolean(phone),
+      requestShipping: Boolean(shipping),
+      disableWallets: ['applePay', 'browserCard', 'link'],
+      ...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));
+
+    return paymentRequest;
   }
 
-  _createPaymentRequestData(cart) {
-    const {
-      settings: { name },
-      capture_total,
-      currency,
-    } = cart;
-    const { require: { email, shipping, phone } = {} } = this.params;
+  async _onShippingAddressChange(event) {
+    const { shippingAddress, updateWith } = event;
+    const shipping = this._mapShippingAddress(shippingAddress);
+    const cart = await this.updateCart({
+      shipping: { ...shipping, service: null },
+      shipment_rating: null,
+    });
 
-    return {
-      apiVersion: API_VERSION$1,
-      apiVersionMinor: API_MINOR_VERSION$1,
-      transactionInfo: {
-        currencyCode: currency,
-        totalPrice: capture_total.toString(),
-        totalPriceStatus: 'ESTIMATED',
-      },
-      allowedPaymentMethods: this.allowedPaymentMethods,
-      emailRequired: Boolean(email),
-      shippingAddressRequired: Boolean(shipping),
-      shippingAddressParameters: {
-        phoneNumberRequired: Boolean(phone),
-      },
-      merchantInfo: {
-        merchantName: name,
-        merchantId: this.method.merchant_id,
-      },
-    };
+    if (cart) {
+      updateWith({
+        status: 'success',
+        ...getPaymentRequestData(cart, this.params),
+      });
+    } else {
+      updateWith({ status: 'invalid_shipping_address' });
+    }
   }
 
-  async _onClick(paymentRequestData) {
-    try {
-      const paymentData = await this.googleClient.loadPaymentData(
-        paymentRequestData,
-      );
+  async _onShippingOptionChange(event) {
+    const { shippingOption, updateWith } = event;
+    const cart = await this.updateCart({
+      shipping: { service: shippingOption.id },
+    });
 
-      if (paymentData) {
-        await this._submitPayment(paymentData);
-      }
-    } catch (error) {
-      this.onError(error);
+    if (cart) {
+      updateWith({
+        status: 'success',
+        ...getPaymentRequestData(cart, this.params),
+      });
+    } else {
+      updateWith({ status: 'fail' });
     }
   }
 
-  async _submitPayment(paymentData) {
-    const { require: { shipping: requireShipping } = {} } = this.params;
-    const { email, shippingAddress, paymentMethodData } = paymentData;
+  async _onPaymentMethod(event) {
     const {
-      info: { billingAddress },
-      tokenizationData,
-    } = paymentMethodData;
-    const token = JSON.parse(tokenizationData.token);
-    const { card } = token;
+      payerEmail,
+      paymentMethod: { id: paymentMethod, card, billing_details },
+      shippingAddress,
+      shippingOption,
+      complete,
+    } = event;
+    const { require: { shipping: requireShipping } = {} } = this.params;
 
     await this.updateCart({
       account: {
-        email,
+        email: payerEmail,
       },
+      ...(requireShipping && {
+        shipping: {
+          ...this._mapShippingAddress(shippingAddress),
+          service: shippingOption.id,
+        },
+      }),
       billing: {
+        ...this._mapBillingAddress(billing_details),
         method: 'card',
         card: {
-          token: token.id,
+          gateway: 'stripe',
+          token: paymentMethod,
           brand: card.brand,
-          last4: card.last4,
           exp_month: card.exp_month,
           exp_year: card.exp_year,
-          gateway: 'stripe',
+          last4: card.last4,
+          address_check: card.checks.address_line1_check,
+          zip_check: card.checks.address_postal_code_check,
+          cvc_check: card.checks.cvc_check,
         },
-        ...this._mapAddress(billingAddress),
       },
-      ...(requireShipping && {
-        shipping: this._mapAddress(shippingAddress),
-      }),
     });
 
+    complete('success');
+
     this.onSuccess();
   }
 
-  _mapAddress(address) {
+  // Provides backward compatibility with Google Pay button options
+  // https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions
+  _getButtonStyles() {
+    let { style: { color = 'dark', type = 'default', height = '45px' } = {} } =
+      this.params;
+
+    switch (color) {
+      case 'white':
+        color = 'light';
+        break;
+      default:
+        color = 'dark';
+        break;
+    }
+
+    switch (type) {
+      case 'buy':
+      case 'donate':
+        break;
+      default:
+        type = 'default';
+        break;
+    }
+
     return {
-      name: address.name,
-      address1: address.address1,
-      address2: address.address2,
-      city: address.locality,
-      state: address.administrativeArea,
+      type,
+      height,
+      theme: color,
+    };
+  }
+
+  _mapShippingAddress(address = {}) {
+    return {
+      name: address.recipient,
+      address1: address.addressLine[0],
+      address2: address.addressLine[1],
+      city: address.city,
+      state: address.region,
       zip: address.postalCode,
-      country: address.countryCode,
-      phone: address.phoneNumber,
+      country: address.country,
+      phone: address.phone,
+    };
+  }
+
+  _mapBillingAddress(address = {}) {
+    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,
     };
   }
 }
@@ -1541,7 +1590,7 @@ class StripeApplePayment extends Payment {
       requestPayerPhone: Boolean(phone),
       requestShipping: Boolean(shipping),
       disableWallets: ['googlePay', 'browserCard', 'link'],
-      ...this._getPaymentRequestData(cart),
+      ...getPaymentRequestData(cart, this.params),
     });
 
     paymentRequest.on(
@@ -1557,65 +1606,6 @@ class StripeApplePayment extends Payment {
     return paymentRequest;
   }
 
-  _getPaymentRequestData(cart) {
-    const {
-      currency,
-      shipping,
-      items,
-      capture_total,
-      shipment_rating,
-      shipment_total,
-      tax_included_total,
-      settings,
-    } = cart;
-
-    const stripeCurrency = currency.toLowerCase();
-    const displayItems = items.map((item) => ({
-      label: item.product.name,
-      amount: stripeAmountByCurrency(
-        currency,
-        item.price_total - item.discount_total,
-      ),
-    }));
-
-    if (tax_included_total) {
-      displayItems.push({
-        label: 'Taxes',
-        amount: stripeAmountByCurrency(currency, tax_included_total),
-      });
-    }
-
-    if (shipping.price && shipment_total) {
-      displayItems.push({
-        label: shipping.service_name,
-        amount: stripeAmountByCurrency(currency, shipment_total),
-      });
-    }
-
-    const services = shipment_rating && shipment_rating.services;
-    let shippingOptions;
-    if (services) {
-      shippingOptions = services.map((service) => ({
-        id: service.id,
-        label: service.name,
-        detail: service.description,
-        amount: stripeAmountByCurrency(currency, service.price),
-      }));
-    }
-
-    return {
-      country: settings.country,
-      currency: stripeCurrency,
-      total: {
-        label: settings.name,
-        amount: stripeAmountByCurrency(currency, capture_total),
-        pending: true,
-      },
-      displayItems,
-      shippingOptions,
-    };
-  }
-
   async _onShippingAddressChange(event) {
     const { shippingAddress, updateWith } = event;
     const shipping = this._mapShippingAddress(shippingAddress);
@@ -1625,7 +1615,10 @@ class StripeApplePayment extends Payment {
     });
 
     if (cart) {
-      updateWith({ status: 'success', ...this._getPaymentRequestData(cart) });
+      updateWith({
+        status: 'success',
+        ...getPaymentRequestData(cart, this.params),
+      });
     } else {
       updateWith({ status: 'invalid_shipping_address' });
     }
@@ -1638,7 +1631,10 @@ class StripeApplePayment extends Payment {
     });
 
     if (cart) {
-      updateWith({ status: 'success', ...this._getPaymentRequestData(cart) });
+      updateWith({
+        status: 'success',
+        ...getPaymentRequestData(cart, this.params),
+      });
     } else {
       updateWith({ status: 'fail' });
     }