swell-js 3.12.0 → 3.13.0

package/dist/api.js

@@ -246,7 +246,7 @@ function _request() {
 
 if (typeof window !== 'undefined') {
   window.swell = {
-    version: '3.12.0'
+    version: '3.13.0'
   };
 }
 

package/dist/currency.js

@@ -110,9 +110,11 @@ function methods(request, opt) {
       var formatRate = params.rate || rate;
       var formatLocale = params.locale || this.locale;
       var formatDecimals = typeof params.decimals === 'number' ? params.decimals : decimals;
+      var _params$convert = params.convert,
+          convert = _params$convert === void 0 ? true : _params$convert;
       var formatAmount = amount;
 
-      if ((type === 'display' || params.rate) && typeof formatAmount === 'number' && typeof formatRate === 'number') {
+      if (convert && (type === 'display' || params.rate) && typeof formatAmount === 'number' && typeof formatRate === 'number') {
         // Convert the price currency into the display currency
         formatAmount = this.applyRounding(amount * formatRate, state);
       }

package/dist/payment.js

@@ -12,6 +12,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var get = require('lodash/get');
 
 var toLower = require('lodash/toLower');
@@ -42,6 +48,9 @@ var _require3 = require('./utils/quickpay'),
 var _require4 = require('./utils/paysafecard'),
     createPaysafecardPayment = _require4.createPaysafecardPayment;
 
+var _require5 = require('./utils/klarna'),
+    createKlarnaSession = _require5.createKlarnaSession;
+
 var LOADING_SCRIPTS = {};
 var CARD_ELEMENTS = {};
 var API = {};
@@ -605,7 +614,7 @@ function _stripeElements() {
           case 0:
             publishable_key = payMethods.card.publishable_key;
             stripe = window.Stripe(publishable_key);
-            elements = stripe.elements();
+            elements = stripe.elements(params.config);
 
             createElement = function createElement(type) {
               var elementParams = get(params, "card[".concat(type, "]")) || params.card || params.ideal;
@@ -652,7 +661,7 @@ function payPalButton(_x16, _x17, _x18, _x19) {
 
 function _payPalButton() {
   _payPalButton = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11(request, cart, payMethods, params) {
-    var paypal, _params$paypal, locale, style, elementId, onError, onSuccess;
+    var paypal, _params$paypal, locale, style, elementId, onError, onSuccess, _getTotalsDueRemainin, totalDue;
 
     return _regenerator["default"].wrap(function _callee11$(_context11) {
       while (1) {
@@ -678,6 +687,16 @@ function _payPalButton() {
               return isFunction(successHandler) && successHandler();
             };
 
+            _getTotalsDueRemainin = getTotalsDueRemaining(cart), totalDue = _getTotalsDueRemainin.totalDue;
+
+            if (totalDue > 0) {
+              _context11.next = 9;
+              break;
+            }
+
+            throw new Error('Invalid PayPal button amount. Value should be greater than zero.');
+
+          case 9:
             paypal.Buttons({
               locale: locale || 'en_US',
               style: style || {
@@ -693,7 +712,7 @@ function _payPalButton() {
                   intent: 'AUTHORIZE',
                   purchase_units: [{
                     amount: {
-                      value: cart.grand_total,
+                      value: +totalDue.toFixed(2),
                       currency_code: cart.currency
                     }
                   }]
@@ -704,10 +723,11 @@ function _payPalButton() {
                   var payer = authorization.payer;
                   var shipping = get(authorization, 'purchase_units[0].shipping');
                   var authorizationID = get(authorization, 'purchase_units[0].payments.authorizations[0].id');
-                  return cartApi.methods(request).update({
+                  return cartApi.methods(request).update(_objectSpread(_objectSpread({}, !cart.account_logged_in && {
                     account: {
                       email: payer.email_address
-                    },
+                    }
+                  }), {}, {
                     billing: {
                       method: 'paypal',
                       paypal: {
@@ -723,12 +743,12 @@ function _payPalButton() {
                       zip: shipping.address.postal_code,
                       country: shipping.address.country_code
                     }
-                  });
+                  }));
                 }).then(onSuccess)["catch"](onError);
               }
             }, onError).render(elementId || '#paypal-button');
 
-          case 7:
+          case 10:
           case "end":
             return _context11.stop();
         }
@@ -830,7 +850,7 @@ function paymentTokenize(_x24, _x25, _x26, _x27) {
 
 function _paymentTokenize() {
   _paymentTokenize = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13(request, params, payMethods, cart) {
-    var onError, stripe, paymentMethod, currency, amount, stripeCustomer, intent, _yield$stripe$confirm, paymentIntent, error, _intent, _yield$createIDealPay, _error, _paymentMethod, _currency, _amount, _intent2, publishable_key, _stripe, settings, _yield$createKlarnaSo, _error2, source, _publishable_key, _stripe2, _yield$createBanconta, _error3, _source, _intent3;
+    var onError, stripe, paymentMethod, currency, amount, stripeCustomer, intent, _yield$stripe$confirm, paymentIntent, error, _intent, _yield$createIDealPay, _error, _paymentMethod, _currency, _amount, _intent2, session, publishable_key, _stripe, settings, _yield$createKlarnaSo, _error2, source, _publishable_key, _stripe2, _yield$createBanconta, _error3, _source, _intent3;
 
     return _regenerator["default"].wrap(function _callee13$(_context13) {
       while (1) {
@@ -999,7 +1019,7 @@ function _paymentTokenize() {
             createQuickpayCard(methods(request).authorizeGateway)["catch"](onError);
 
           case 48:
-            _context13.next = 121;
+            _context13.next = 128;
             break;
 
           case 50:
@@ -1092,44 +1112,59 @@ function _paymentTokenize() {
             return _context13.abrupt("return", _context13.t5);
 
           case 75:
-            _context13.next = 121;
+            _context13.next = 128;
             break;
 
           case 77:
             if (!(params.klarna && payMethods.klarna)) {
-              _context13.next = 97;
+              _context13.next = 104;
+              break;
+            }
+
+            if (!(payMethods.klarna.gateway === 'klarna')) {
+              _context13.next = 85;
               break;
             }
 
+            _context13.next = 81;
+            return createKlarnaSession(cart, methods(request).createIntent)["catch"](function (err) {
+              return onError(err);
+            });
+
+          case 81:
+            session = _context13.sent;
+            return _context13.abrupt("return", session && window.location.replace(session.redirect_url));
+
+          case 85:
             if (!(payMethods.card && payMethods.card.gateway === 'stripe')) {
-              _context13.next = 95;
+              _context13.next = 102;
               break;
             }
 
             if (window.Stripe) {
-              _context13.next = 82;
+              _context13.next = 89;
               break;
             }
 
-            _context13.next = 82;
+            _context13.next = 89;
             return loadScript('stripe-js', 'https://js.stripe.com/v3/');
 
-          case 82:
+          case 89:
             publishable_key = payMethods.card.publishable_key;
             _stripe = window.Stripe(publishable_key);
             _context13.t6 = toSnake;
-            _context13.next = 87;
+            _context13.next = 94;
             return settingsApi.methods(request, options).get();
 
-          case 87:
+          case 94:
             _context13.t7 = _context13.sent;
             settings = (0, _context13.t6)(_context13.t7);
-            _context13.next = 91;
+            _context13.next = 98;
             return createKlarnaSource(_stripe, _objectSpread(_objectSpread({}, cart), {}, {
               settings: settings.store
             }));
 
-          case 91:
+          case 98:
             _yield$createKlarnaSo = _context13.sent;
             _error2 = _yield$createKlarnaSo.error;
             source = _yield$createKlarnaSo.source;
@@ -1143,36 +1178,36 @@ function _paymentTokenize() {
               return onError(err);
             }));
 
-          case 95:
-            _context13.next = 121;
+          case 102:
+            _context13.next = 128;
             break;
 
-          case 97:
+          case 104:
             if (!(params.bancontact && payMethods.bancontact)) {
-              _context13.next = 112;
+              _context13.next = 119;
               break;
             }
 
             if (!(payMethods.card && payMethods.card.gateway === 'stripe')) {
-              _context13.next = 110;
+              _context13.next = 117;
               break;
             }
 
             if (window.Stripe) {
-              _context13.next = 102;
+              _context13.next = 109;
               break;
             }
 
-            _context13.next = 102;
+            _context13.next = 109;
             return loadScript('stripe-js', 'https://js.stripe.com/v3/');
 
-          case 102:
+          case 109:
             _publishable_key = payMethods.card.publishable_key;
             _stripe2 = window.Stripe(_publishable_key);
-            _context13.next = 106;
+            _context13.next = 113;
             return createBancontactSource(_stripe2, cart);
 
-          case 106:
+          case 113:
             _yield$createBanconta = _context13.sent;
             _error3 = _yield$createBanconta.error;
             _source = _yield$createBanconta.source;
@@ -1186,31 +1221,31 @@ function _paymentTokenize() {
               return onError(err);
             }));
 
-          case 110:
-            _context13.next = 121;
+          case 117:
+            _context13.next = 128;
             break;
 
-          case 112:
+          case 119:
             if (!(params.paysafecard && payMethods.paysafecard)) {
-              _context13.next = 121;
+              _context13.next = 128;
               break;
             }
 
-            _context13.next = 115;
+            _context13.next = 122;
             return createPaysafecardPayment(cart, methods(request).createIntent)["catch"](onError);
 
-          case 115:
+          case 122:
             _intent3 = _context13.sent;
 
             if (_intent3) {
-              _context13.next = 118;
+              _context13.next = 125;
               break;
             }
 
             return _context13.abrupt("return");
 
-          case 118:
-            _context13.next = 120;
+          case 125:
+            _context13.next = 127;
             return cartApi.methods(request, options).update({
               billing: {
                 method: 'paysafecard',
@@ -1222,10 +1257,10 @@ function _paymentTokenize() {
               }
             });
 
-          case 120:
+          case 127:
             return _context13.abrupt("return", window.location.replace(_intent3.redirect.auth_url));
 
-          case 121:
+          case 128:
           case "end":
             return _context13.stop();
         }
@@ -1247,7 +1282,7 @@ function _handleRedirect3() {
         switch (_context14.prev = _context14.next) {
           case 0:
             onError = function onError(error) {
-              var errorHandler = get(params, 'card.onError') || get(params, 'paysafecard.onError');
+              var errorHandler = get(params, 'card.onError') || get(params, 'paysafecard.onError') || get(params, 'klarna.onError');
 
               if (isFunction(errorHandler)) {
                 return errorHandler(error);
@@ -1257,7 +1292,7 @@ function _handleRedirect3() {
             };
 
             onSuccess = function onSuccess(result) {
-              var successHandler = get(params, 'card.onSuccess') || get(params, 'paysafecard.onSuccess');
+              var successHandler = get(params, 'card.onSuccess') || get(params, 'paysafecard.onSuccess') || get(params, 'klarna.onSuccess');
 
               if (isFunction(successHandler)) {
                 return successHandler(result);
@@ -1280,12 +1315,12 @@ function _handleRedirect3() {
 
           case 8:
             result = _context14.sent;
-            _context14.next = 15;
+            _context14.next = 21;
             break;
 
           case 11:
             if (!(gateway === 'paysafecard')) {
-              _context14.next = 15;
+              _context14.next = 17;
               break;
             }
 
@@ -1294,27 +1329,41 @@ function _handleRedirect3() {
 
           case 14:
             result = _context14.sent;
+            _context14.next = 21;
+            break;
 
-          case 15:
+          case 17:
+            if (!(gateway === 'klarna_direct')) {
+              _context14.next = 21;
+              break;
+            }
+
+            _context14.next = 20;
+            return handleDirectKlarnaRedirectAction(request, cart, params, queryParams);
+
+          case 20:
+            result = _context14.sent;
+
+          case 21:
             if (result) {
-              _context14.next = 19;
+              _context14.next = 25;
               break;
             }
 
             return _context14.abrupt("return");
 
-          case 19:
+          case 25:
             if (!result.error) {
-              _context14.next = 23;
+              _context14.next = 29;
               break;
             }
 
             return _context14.abrupt("return", onError(result.error));
 
-          case 23:
+          case 29:
             return _context14.abrupt("return", onSuccess(result));
 
-          case 24:
+          case 30:
           case "end":
             return _context14.stop();
         }
@@ -1477,6 +1526,109 @@ function _handlePaysafecardRedirectAction() {
   return _handlePaysafecardRedirectAction.apply(this, arguments);
 }
 
+function handleDirectKlarnaRedirectAction(_x37, _x38, _x39, _x40) {
+  return _handleDirectKlarnaRedirectAction.apply(this, arguments);
+}
+
+function _handleDirectKlarnaRedirectAction() {
+  _handleDirectKlarnaRedirectAction = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17(request, cart, params, queryParams) {
+    var authorization_token;
+    return _regenerator["default"].wrap(function _callee17$(_context17) {
+      while (1) {
+        switch (_context17.prev = _context17.next) {
+          case 0:
+            authorization_token = queryParams.authorization_token;
+
+            if (authorization_token) {
+              _context17.next = 3;
+              break;
+            }
+
+            return _context17.abrupt("return", {
+              error: {
+                message: 'We are unable to authenticate your payment method. Please choose a different payment method and try again.'
+              }
+            });
+
+          case 3:
+            _context17.next = 5;
+            return cartApi.methods(request, options).update({
+              billing: {
+                method: 'klarna',
+                klarna: {
+                  token: authorization_token
+                }
+              }
+            });
+
+          case 5:
+            return _context17.abrupt("return", {
+              success: true
+            });
+
+          case 6:
+          case "end":
+            return _context17.stop();
+        }
+      }
+    }, _callee17);
+  }));
+  return _handleDirectKlarnaRedirectAction.apply(this, arguments);
+}
+
+function getTotalsDueRemaining(cart) {
+  var grand_total = cart.grand_total,
+      account = cart.account,
+      account_credit_amount = cart.account_credit_amount,
+      giftcards = cart.giftcards;
+  var totalDue = grand_total;
+  var totalRemaining = 0;
+  var totalRemainingGiftcard = 0;
+  var totalRemainingAccount = 0;
+
+  if (giftcards && giftcards.length > 0) {
+    var _iterator = _createForOfIteratorHelper(giftcards),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var gc = _step.value;
+        totalDue -= gc.amount;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    if (totalDue < 0) {
+      totalRemainingGiftcard = -totalDue;
+    }
+  }
+
+  var accountCreditAmount = typeof account_credit_amount === 'number' ? account_credit_amount : account && account.balance;
+
+  if (accountCreditAmount > 0) {
+    totalDue -= accountCreditAmount;
+
+    if (totalDue < 0) {
+      totalRemainingAccount = -totalDue - totalRemainingGiftcard;
+    }
+  }
+
+  if (totalDue < 0) {
+    totalRemaining = -totalDue;
+    totalDue = 0;
+  }
+
+  return {
+    totalDue: totalDue,
+    totalRemaining: totalRemaining,
+    totalRemainingGiftcard: totalRemainingGiftcard,
+    totalRemainingAccount: totalRemainingAccount
+  };
+}
+
 module.exports = {
   methods: methods
 };

package/dist/utils/klarna.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var _require = require('lodash'),
+    map = _require.map,
+    get = _require.get,
+    reduce = _require.reduce,
+    toNumber = _require.toNumber;
+
+var 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'
+};
+
+var mapFields = function mapFields(fieldsMap, data) {
+  return reduce(fieldsMap, function (acc, srcKey, destKey) {
+    var value = data[srcKey];
+
+    if (value) {
+      acc[destKey] = value;
+    }
+
+    return acc;
+  }, {});
+};
+
+var mapAddressFields = function mapAddressFields(cart, addressField) {
+  return _objectSpread(_objectSpread({}, mapFields(addressFieldsMap, cart[addressField])), {}, {
+    email: get(cart, 'account.email')
+  });
+};
+
+function getOrderLines(cart) {
+  var items = map(cart.items, function (item) {
+    return {
+      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
+    };
+  });
+  var tax = get(cart, 'tax_included_total');
+  var 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
+    });
+  }
+
+  var shipping = get(cart, 'shipping', {});
+  var shippingTotal = get(cart, 'shipment_total', {});
+  var 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 createKlarnaSession(_x, _x2) {
+  return _createKlarnaSession.apply(this, arguments);
+}
+
+function _createKlarnaSession() {
+  _createKlarnaSession = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(cart, createIntent) {
+    var returnUrl, successUrl;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            returnUrl = "".concat(window.location.origin).concat(window.location.pathname, "?gateway=klarna_direct&sid={{session_id}}");
+            successUrl = "".concat(returnUrl, "&authorization_token={{authorization_token}}");
+            return _context.abrupt("return", createIntent({
+              gateway: 'klarna',
+              intent: {
+                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, 'grand_total', 0) * 100),
+                order_lines: JSON.stringify(getOrderLines(cart)),
+                merchant_urls: {
+                  success: successUrl,
+                  back: returnUrl,
+                  cancel: returnUrl,
+                  error: returnUrl,
+                  failure: returnUrl
+                }
+              }
+            }));
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _createKlarnaSession.apply(this, arguments);
+}
+
+module.exports = {
+  createKlarnaSession: createKlarnaSession
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swell-js",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "Swell JS library for client-side stores",
   "repository": {
     "type": "git",

package/src/currency.js

@@ -62,9 +62,11 @@ function methods(request, opt) {
       const formatRate = params.rate || rate;
       const formatLocale = params.locale || this.locale;
       const formatDecimals = typeof params.decimals === 'number' ? params.decimals : decimals;
+      const { convert = true } = params;
 
       let formatAmount = amount;
       if (
+        convert &&
         (type === 'display' || params.rate) &&
         typeof formatAmount === 'number' &&
         typeof formatRate === 'number'

package/src/currency.test.js

@@ -158,6 +158,13 @@ describe('currency', () => {
       expect(formatted).toEqual('$0.77');
     });
 
+    it('should not convert amount by selected display currency when convert flag is false', async () => {
+      await api.currency.select('USD');
+      const formatted = api.currency.format(1, { convert: false });
+
+      expect(formatted).toEqual('$1.00');
+    });
+
     it('should convert amount by selected display currency with rounding (nearest whole)', async () => {
       const config = api.currency.list().find((curr) => curr.code === 'CNY');
       config.round = 'nearest';

package/src/payment.js

@@ -22,6 +22,7 @@ const {
   getQuickpayCardDetais,
 } = require('./utils/quickpay');
 const { createPaysafecardPayment } = require('./utils/paysafecard');
+const { createKlarnaSession } = require('./utils/klarna');
 
 const LOADING_SCRIPTS = {};
 const CARD_ELEMENTS = {};
@@ -223,7 +224,7 @@ const loadScript = async (id, src) => {
 async function stripeElements(request, payMethods, params) {
   const { publishable_key } = payMethods.card;
   const stripe = window.Stripe(publishable_key);
-  const elements = stripe.elements();
+  const elements = stripe.elements(params.config);
   const createElement = (type) => {
     const elementParams = get(params, `card[${type}]`) || params.card || params.ideal;
     const elementOptions = elementParams.options || {};
@@ -269,6 +270,12 @@ async function payPalButton(request, cart, payMethods, params) {
     return isFunction(successHandler) && successHandler();
   };
 
+  const { totalDue } = getTotalsDueRemaining(cart);
+
+  if (!(totalDue > 0)) {
+    throw new Error('Invalid PayPal button amount. Value should be greater than zero.');
+  }
+
   paypal
     .Buttons(
       {
@@ -287,7 +294,7 @@ async function payPalButton(request, cart, payMethods, params) {
             purchase_units: [
               {
                 amount: {
-                  value: cart.grand_total,
+                  value: +totalDue.toFixed(2),
                   currency_code: cart.currency,
                 },
               },
@@ -304,9 +311,11 @@ async function payPalButton(request, cart, payMethods, params) {
                 'purchase_units[0].payments.authorizations[0].id',
               );
               return cartApi.methods(request).update({
-                account: {
-                  email: payer.email_address,
-                },
+                ...(!cart.account_logged_in && {
+                  account: {
+                    email: payer.email_address,
+                  },
+                }),
                 billing: { method: 'paypal', paypal: { authorization_id: authorizationID } },
                 shipping: {
                   name: shipping.name.full_name,
@@ -526,7 +535,12 @@ async function paymentTokenize(request, params, payMethods, cart) {
       }
     }
   } else if (params.klarna && payMethods.klarna) {
-    if (payMethods.card && payMethods.card.gateway === 'stripe') {
+    if (payMethods.klarna.gateway === 'klarna') {
+      const session = await createKlarnaSession(cart, methods(request).createIntent).catch((err) =>
+        onError(err),
+      );
+      return session && window.location.replace(session.redirect_url);
+    } else if (payMethods.card && payMethods.card.gateway === 'stripe') {
       if (!window.Stripe) {
         await loadScript('stripe-js', 'https://js.stripe.com/v3/');
       }
@@ -598,14 +612,20 @@ async function paymentTokenize(request, params, payMethods, cart) {
 
 async function handleRedirect(request, params, cart) {
   const onError = (error) => {
-    const errorHandler = get(params, 'card.onError') || get(params, 'paysafecard.onError');
+    const errorHandler =
+      get(params, 'card.onError') ||
+      get(params, 'paysafecard.onError') ||
+      get(params, 'klarna.onError');
     if (isFunction(errorHandler)) {
       return errorHandler(error);
     }
     throw new Error(error.message);
   };
   const onSuccess = (result) => {
-    const successHandler = get(params, 'card.onSuccess') || get(params, 'paysafecard.onSuccess');
+    const successHandler =
+      get(params, 'card.onSuccess') ||
+      get(params, 'paysafecard.onSuccess') ||
+      get(params, 'klarna.onSuccess');
     if (isFunction(successHandler)) {
       return successHandler(result);
     }
@@ -620,6 +640,8 @@ async function handleRedirect(request, params, cart) {
     result = await handleQuickpayRedirectAction(request, cart, params, queryParams);
   } else if (gateway === 'paysafecard') {
     result = await handlePaysafecardRedirectAction(request, cart, params, queryParams);
+  } else if (gateway === 'klarna_direct') {
+    result = await handleDirectKlarnaRedirectAction(request, cart, params, queryParams);
   }
 
   if (!result) {
@@ -695,6 +717,63 @@ async function handlePaysafecardRedirectAction(request, cart) {
   }
 }
 
+async function handleDirectKlarnaRedirectAction(request, cart, params, queryParams) {
+  const { authorization_token } = queryParams;
+
+  if (!authorization_token) {
+    return {
+      error: {
+        message:
+          'We are unable to authenticate your payment method. Please choose a different payment method and try again.',
+      },
+    };
+  }
+
+  await cartApi.methods(request, options).update({
+    billing: {
+      method: 'klarna',
+      klarna: {
+        token: authorization_token,
+      },
+    },
+  });
+  return { success: true };
+}
+
+function getTotalsDueRemaining(cart) {
+  const { grand_total, account, account_credit_amount, giftcards } = cart;
+
+  let totalDue = grand_total;
+  let totalRemaining = 0;
+  let totalRemainingGiftcard = 0;
+  let totalRemainingAccount = 0;
+
+  if (giftcards && giftcards.length > 0) {
+    for (let gc of giftcards) {
+      totalDue -= gc.amount;
+    }
+    if (totalDue < 0) {
+      totalRemainingGiftcard = -totalDue;
+    }
+  }
+
+  const accountCreditAmount =
+    typeof account_credit_amount === 'number' ? account_credit_amount : account && account.balance;
+  if (accountCreditAmount > 0) {
+    totalDue -= accountCreditAmount;
+    if (totalDue < 0) {
+      totalRemainingAccount = -totalDue - totalRemainingGiftcard;
+    }
+  }
+
+  if (totalDue < 0) {
+    totalRemaining = -totalDue;
+    totalDue = 0;
+  }
+
+  return { totalDue, totalRemaining, totalRemainingGiftcard, totalRemainingAccount };
+}
+
 module.exports = {
   methods,
 };

package/src/utils/klarna.js

@@ -0,0 +1,104 @@
+const { map, get, reduce, toNumber } = require('lodash');
+
+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;
+}
+
+async function createKlarnaSession(cart, createIntent) {
+  const returnUrl = `${window.location.origin}${window.location.pathname}?gateway=klarna_direct&sid={{session_id}}`;
+  const successUrl = `${returnUrl}&authorization_token={{authorization_token}}`;
+
+  return createIntent({
+    gateway: 'klarna',
+    intent: {
+      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, 'grand_total', 0) * 100),
+      order_lines: JSON.stringify(getOrderLines(cart)),
+      merchant_urls: {
+        success: successUrl,
+        back: returnUrl,
+        cancel: returnUrl,
+        error: returnUrl,
+        failure: returnUrl,
+      },
+    },
+  });
+}
+
+module.exports = {
+  createKlarnaSession,
+};

package/test/page/components/sidebar/sidebar.js

@@ -113,6 +113,7 @@ class Sidebar extends React.Component {
           'Paysafecard',
           'Square',
           'Braintree',
+          'Klarna',
         ],
       },
     ].map((item, index) =>

package/test/page/containers/payment/klarna.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'recompose';
+import { withStyles } from '@material-ui/core/styles';
+import { Card, CardContent, Button } from '@material-ui/core';
+import Info from '../../components/info';
+
+const styles = {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  input: {
+    margin: 20,
+  },
+  card: {
+    marginBottom: 20,
+    overflow: 'visible',
+  },
+  submitContainer: {
+    display: 'flex',
+    justifyContent: 'space-around',
+  },
+  button: {
+    width: '30%',
+  },
+};
+
+class Klarna extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tokenized: false,
+    };
+  }
+
+  componentDidMount() {
+    const { api, onError } = this.props;
+    api.payment.handleRedirect({
+      klarna: { onError, onSuccess: () => this.setState({ tokenized: true }) },
+    });
+  }
+
+  onClickTokenize(event) {
+    const { api, onError } = this.props;
+
+    event.preventDefault();
+    api.payment.tokenize({
+      klarna: {
+        onError,
+      },
+    });
+  }
+
+  render() {
+    const {
+      classes,
+      onOrderSubmit,
+      cart: { billing: { method, klarna } = {} },
+    } = this.props;
+    const { tokenized } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <Card classes={{ root: classes.card }}>
+          <CardContent>
+            {tokenized && <Info title="Billing" source={{ method, klarna }} />}
+            <div className={classes.submitContainer}>
+              <Button
+                id="stripe-submit-button"
+                variant="contained"
+                color="primary"
+                size="small"
+                classes={{ root: classes.button }}
+                onClick={this.onClickTokenize.bind(this)}
+              >
+                Tokenize
+              </Button>
+              <Button
+                variant="contained"
+                color="secondary"
+                size="small"
+                disabled={!tokenized}
+                classes={{ root: classes.button }}
+                onClick={onOrderSubmit}
+              >
+                Submit
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({ api }) => ({
+  api,
+});
+
+export default compose(connect(mapStateToProps), withStyles(styles))(Klarna);

package/test/page/containers/payment/payment.js

@@ -24,6 +24,7 @@ import StripeKlarna from './stripe-klarna';
 import StripeBancontact from './stripe-bancontact';
 import Quickpay from './quickpay';
 import Paysafecard from './paysafecard';
+import Klarna from './klarna';
 import Info from '../../components/info';
 
 const styles = {
@@ -186,6 +187,15 @@ class Payment extends React.Component {
             onError={onError}
           />
         );
+      case 'klarna':
+        return (
+          <Klarna
+            cart={cart}
+            onCartUpdate={onCartUpdate}
+            onOrderSubmit={onOrderSubmit}
+            onError={onError}
+          />
+        );
       case 'square':
         return <Typography variant="h4">Coming soon</Typography>;
       case 'braintree':

package/test/page/containers/payment/stripe.js

@@ -1,8 +1,17 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'recompose';
 import { withStyles } from '@material-ui/core/styles';
-import { Card, CardContent, Button } from '@material-ui/core';
+import {
+  Card,
+  CardContent,
+  Button,
+  FormControl,
+  FormLabel,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+} from '@material-ui/core';
 
 const styles = {
   root: {
@@ -29,29 +38,84 @@ class Stripe extends React.Component {
     super(props);
     this.state = {
       tokenized: false,
+      type: 'card',
+      font: 'default',
     };
+
+    this.onTokenize = this.onTokenize.bind(this);
+    this.onError = this.onError.bind(this);
+    this.onClickTokenize = this.onClickTokenize.bind(this);
+    this.onChangeType = this.onChangeType.bind(this);
+    this.onChangeFont = this.onChangeFont.bind(this);
   }
 
   componentDidMount() {
-    const { api, onError } = this.props;
-    api.payment.createElements({
-      card: {
-        options: {
-          style: {
-            base: {
-              fontWeight: 500,
-              fontSize: '16px',
-            },
-          },
-        },
-        onSuccess: () => {
-          this.setState({ tokenized: true });
+    this.renderStripeElements();
+  }
+
+  componentDidUpdate() {
+    this.renderStripeElements();
+  }
+
+  renderStripeElements() {
+    const { type, font } = this.state;
+    const options = {
+      showIcon: true,
+      style: {
+        base: {
+          fontWeight: 500,
+          fontSize: '16px',
         },
-        onError: (err) => onError(err.message),
+      },
+    };
+
+    switch (font) {
+      case 'audiowide':
+        options.style.base.fontFamily = 'Audiowide';
+        break;
+      case 'festive':
+        options.style.base.fontFamily = 'Festive';
+        break;
+      default:
+        break;
+    }
+
+    this.props.api.payment.createElements({
+      config: {
+        fonts: [
+          {
+            cssSrc: 'https://fonts.googleapis.com/css?family=Audiowide',
+          },
+          {
+            cssSrc: 'https://fonts.googleapis.com/css?family=Festive',
+          },
+        ],
+      },
+      card: {
+        ...(type === 'card'
+          ? {
+              options,
+            }
+          : {
+              separateElements: true,
+              cardNumber: { options },
+              cardExpiry: { options },
+              cardCvc: { options },
+            }),
+        onSuccess: this.onTokenize,
+        onError: this.onError,
       },
     });
   }
 
+  onTokenize() {
+    this.setState({ tokenized: true });
+  }
+
+  onError(err) {
+    this.props.onError(err.message);
+  }
+
   onClickTokenize(event) {
     const { api } = this.props;
 
@@ -59,15 +123,46 @@ class Stripe extends React.Component {
     api.payment.tokenize();
   }
 
+  onChangeType(event, type) {
+    this.setState({ type });
+  }
+
+  onChangeFont(event, font) {
+    this.setState({ font });
+  }
+
   render() {
     const { classes, onOrderSubmit } = this.props;
-    const { tokenized } = this.state;
+    const { tokenized, type } = this.state;
 
     return (
       <div className={classes.root}>
         <Card classes={{ root: classes.card }}>
           <CardContent>
-            <div id="card-element" className={classes.cardInput} />
+            <FormControl>
+              <FormLabel>Type</FormLabel>
+              <RadioGroup defaultValue="card" row onChange={this.onChangeType}>
+                <FormControlLabel value="card" control={<Radio />} label="Card" />
+                <FormControlLabel value="separate" control={<Radio />} label="Separate elements" />
+              </RadioGroup>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Font</FormLabel>
+              <RadioGroup defaultValue="default" row onChange={this.onChangeFont}>
+                <FormControlLabel value="default" control={<Radio />} label="Default" />
+                <FormControlLabel value="audiowide" control={<Radio />} label="Audiowide" />
+                <FormControlLabel value="festive" control={<Radio />} label="Festive" />
+              </RadioGroup>
+            </FormControl>
+            {type === 'card' ? (
+              <div id="card-element" className={classes.cardInput} />
+            ) : (
+              <Fragment>
+                <div id="cardNumber-element" className={classes.cardInput} />
+                <div id="cardExpiry-element" className={classes.cardInput} />
+                <div id="cardCvc-element" className={classes.cardInput} />
+              </Fragment>
+            )}
             <div className={classes.submitContainer}>
               <Button
                 id="stripe-submit-button"
@@ -75,7 +170,7 @@ class Stripe extends React.Component {
                 color="primary"
                 size="small"
                 classes={{ root: classes.button }}
-                onClick={this.onClickTokenize.bind(this)}
+                onClick={this.onClickTokenize}
               >
                 Tokenize
               </Button>