@vue-storefront/checkout-com - npm Package Compare versions

Comparing version 0.0.8-lc.9 to 0.0.8-lc.10

CHANGELOG.md

@@ -5,2 +5,3 @@ # Changelog
 - Sofort support ([#5158](https://github.com/DivanteLtd/vue-storefront/issues/5158))
+- Klarna support ([#5157](https://github.com/DivanteLtd/vue-storefront/pull/5157))
 
@@ -7,0 +8,0 @@ ## 0.0.8

lib/configuration.d.ts

@@ -10,5 +10,11 @@ declare const defaultConfig: {
     };
+    klarna: {
+        containerSelector: string;
+    };
     channels: {};
     currentChannel: any;
 };
+interface KlarnaConfiguration {
+    containerSelector: string;
+}
 interface CardConfiguration {
@@ -24,2 +30,3 @@ style?: any;
     card?: CardConfiguration;
+    klarna?: KlarnaConfiguration;
 }
@@ -41,2 +48,5 @@ interface MultichannelConfiguration {
 declare const getPublicKey: () => any;
+declare const getCurrentChannel: () => any;
+declare const getTransactionTokenKey: () => string;
+declare const getSaveInstrumentKey: () => string;
 declare const getApiUrl: () => string;
@@ -46,5 +56,3 @@ declare const getCkoProxyUrl: () => string;
 declare const getFramesLocalization: () => any;
-declare const getTransactionTokenKey: () => string;
-declare const getSaveInstrumentKey: () => string;
-declare const getCurrentChannel: () => any;
-export { defaultConfig, setChannel, setup, getPublicKey, getCurrentChannel, getApiUrl, getFramesStyles, getFramesLocalization, getCkoProxyUrl, getTransactionTokenKey, getSaveInstrumentKey, Configuration, CardConfiguration };
+declare const getKlarnaContainerSelector: () => string;
+export { defaultConfig, setChannel, setup, getPublicKey, getCurrentChannel, getApiUrl, getFramesStyles, getFramesLocalization, getCkoProxyUrl, getTransactionTokenKey, getSaveInstrumentKey, getKlarnaContainerSelector, Configuration, CardConfiguration, KlarnaConfiguration };

lib/helpers.d.ts

@@ -46,2 +46,5 @@ interface PaymentPropeties {
 declare const getCurrentPaymentMethodPayload: (paymentMethod: CkoPaymentType, payload: PaymentPropeties) => any;
-export { CkoPaymentType, getCurrentPaymentMethodPayload, PaymentPropeties, PaymentMethodPayload, PaymentInstrument };
+declare const getTransactionToken: () => string;
+declare const setTransactionToken: (token: any) => void;
+declare const removeTransactionToken: () => void;
+export { CkoPaymentType, PaymentPropeties, PaymentMethodPayload, PaymentInstrument, getCurrentPaymentMethodPayload, setTransactionToken, removeTransactionToken, getTransactionToken };

lib/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("axios"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("@vue-storefront/core"),r=require("@vue/composition-api"),o=function(){return(o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function a(e,t,n,r){return new(n||(n=Promise))((function(o,a){function u(e){try{s(r.next(e))}catch(e){a(e)}}function i(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){e.done?o(e.value):new n((function(t){t(e.value)})).then(u,i)}s((r=r.apply(e,t||[])).next())}))}function u(e,t){var n,r,o,a,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function i(a){return function(i){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=t.call(e,u)}catch(e){a=[6,e],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,i])}}}var i,s,c=o({},{publicKey:null,ctApiUrl:"https://play-commercetools.cko-playground.ckotech.co/api",tokenizedCardKey:"temporary-tokenized-card",saveInstrumentKey:"save-instrument",card:{style:{},localization:null},channels:{},currentChannel:null}),l={"card-number":{color:"red"},base:{color:"#72757e",fontSize:"19px",minWidth:"60px"},invalid:{color:"red"},placeholder:{base:{color:"black",fontSize:"19px"}}},d=function(e){var t,n;if(c.channels[e]){var r=c.channels[e];c.publicKey=r.publicKey,c.card.style=(null===(t=r.card)||void 0===t?void 0:t.style)||l,c.card.localization=(null===(n=r.card)||void 0===n?void 0:n.localization)||null,c.tokenizedCardKey=r.tokenizedCardKey||c.tokenizedCardKey,c.saveInstrumentKey=r.saveInstrumentKey||c.saveInstrumentKey,c.ctApiUrl=r.ctApiUrl||c.ctApiUrl,c.currentChannel=e}else console.error("[CKO] Requested channel does not exist in the config")},v=function(){return c.publicKey},m=function(){return c.ctApiUrl},f=function(){return window.location.origin+"/cko-api"},y=function(){return c.card.style},p=function(){return c.tokenizedCardKey},h=function(){return c.saveInstrumentKey},C=function(){return c.currentChannel},_=function(){return{crossDomain:!0,headers:{authorization:v()}}},k=function(e){var n=e.reference,r=e.email,i=void 0===r?null:r;return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,t.post(m()+"/api/contexts",o({reference:n},i?{customer_email:i}:{}),_())]}))}))},P=function(e){return a(void 0,void 0,void 0,(function(){return u(this,(function(n){return[2,t.post(m()+"/api/payments",e,_())]}))}))},b=function(e){var n=e.customer_id;return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,t.post(f()+"/payment-instruments",{customer_id:n,channel:C()})]}))}))},x=function(e){var n=e.customer_id,r=e.payment_instrument_id;return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,t.delete(f()+"/payment-instruments/"+n+"/"+r+"/"+C())]}))}))};(s=exports.CkoPaymentType||(exports.CkoPaymentType={}))[s.NOT_SELECTED=0]="NOT_SELECTED",s[s.CREDIT_CARD=1]="CREDIT_CARD",s[s.SAVED_CARD=2]="SAVED_CARD",s[s.KLARNA=3]="KLARNA",s[s.PAYPAL=4]="PAYPAL",s[s.SOFORT=5]="SOFORT";var T=function(e){var t=e.context_id,n=e.save_payment_instrument,r=e.secure3d,a=e.success_url,u=e.failure_url,i=e.cvv,s=e.reference;return o(o(o(o(o(o({context_id:t},i?{cvv:i}:{}),n?{save_payment_instrument:n}:{}),r?{"3ds":r}:{}),a?{success_url:a}:{}),u?{failure_url:u}:{}),s?{reference:s}:{})},I=((i={})[exports.CkoPaymentType.CREDIT_CARD]=function(e){return o(o({},T(e)),{type:"token",token:e.token})},i[exports.CkoPaymentType.SAVED_CARD]=function(e){return o(o({},T(e)),{type:"id",token:e.token})},i[exports.CkoPaymentType.KLARNA]=function(e){return o(o({},T(e)),{type:"klarna",token:e.token})},i[exports.CkoPaymentType.PAYPAL]=function(e){return o(o({},T(e)),{type:"paypal"})},i[exports.CkoPaymentType.SOFORT]=function(e){return o(o({},T(e)),{type:"sofort"})},i),w=function(e,t){return I[e](t)},A=function(){return sessionStorage.getItem(p())},R=function(e){return sessionStorage.setItem(p(),e)},D=function(){return sessionStorage.removeItem(p())},g=function(e){var t=n.sharedRef(!1,"useCkoCard-isCardValid"),i=n.sharedRef(null,"useCkoCard-error"),s=n.sharedRef([],"useCkoCard-storedPaymentInstruments"),l=r.computed((function(){return e.value===exports.CkoPaymentType.CREDIT_CARD&&!t.value}));return{error:i,submitDisabled:l,storedPaymentInstruments:s,selectedCardPaymentMethod:r.computed((function(){return e.value})),submitForm:function(){return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,Frames.submitCard()]}))}))},makePayment:function(t){var n=t.cartId,r=t.email,o=t.secure3d,s=t.cvv,c=void 0===s?null:s,l=t.contextDataId,d=void 0===l?null:l,v=t.savePaymentInstrument,m=void 0!==v&&v,f=t.success_url,y=void 0===f?null:f,p=t.failure_url,h=void 0===p?null:p,C=t.reference,_=void 0===C?null:C;return a(void 0,void 0,void 0,(function(){var t,a,s,l;return u(this,(function(u){switch(u.label){case 0:if(u.trys.push([0,4,,5]),!(t=A()))throw new Error("There is no payment token");return a=void 0,d?[3,2]:[4,k({reference:n,email:r})];case 1:if(a=u.sent(),e.value===exports.CkoPaymentType.SAVED_CARD&&a.data.payment_settings&&a.data.payment_settings.cvv_required&&!c)throw new Error("CVV is required");u.label=2;case 2:return[4,P(w(e.value,{token:t,secure3d:o,cvv:c,reference:_,context_id:d||a.data.id,save_payment_instrument:e.value===exports.CkoPaymentType.CREDIT_CARD&&m,success_url:y||window.location.origin+"/cko/payment-success",failure_url:h||window.location.origin+"/cko/payment-error"}))];case 3:if(s=u.sent(),D(),![200,202].includes(s.status))throw new Error(s.data.error_type);return[2,s];case 4:return l=u.sent(),D(),i.value=l,[2,null];case 5:return[2]}}))}))},initCardForm:function(e){var n=(null==e?void 0:e.localization)||c.card.localization;Frames.init(o(o({publicKey:v(),style:(null==e?void 0:e.style)||y()},n?{localization:n}:{}),{cardValidationChanged:function(){t.value=Frames.isCardValid()},cardTokenized:function(e){var t=e.token;return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return R(t),[2]}))}))},cardTokenizationFailed:function(e){i.value=e,t.value=!1}}))},setTransactionToken:R,loadStoredPaymentInstruments:function(e){return a(void 0,void 0,void 0,(function(){var t,n;return u(this,(function(r){switch(r.label){case 0:return r.trys.push([0,2,,3]),[4,b({customer_id:e})];case 1:return t=r.sent().data,s.value=t.payment_instruments,[3,3];case 2:return n=r.sent(),i.value=n,[3,3];case 3:return[2]}}))}))},removePaymentInstrument:function(t,n){return a(void 0,void 0,void 0,(function(){var r,o;return u(this,(function(a){switch(a.label){case 0:return a.trys.push([0,2,,3]),[4,x({customer_id:t,payment_instrument_id:n})];case 1:return a.sent(),r=s.value.find((function(e){return e.payment_instrument_id===n})).id,s.value=s.value.filter((function(e){return e.payment_instrument_id!==n})),r===A()&&(e.value=exports.CkoPaymentType.CREDIT_CARD,D()),[3,3];case 2:return o=a.sent(),i.value=o,[3,3];case 3:return[2]}}))}))},setPaymentInstrument:function(t){R(t),e.value=exports.CkoPaymentType.SAVED_CARD},removeTransactionToken:D}},S=function(e){localStorage.setItem(h(),JSON.stringify(e))},E=function(){var e=localStorage.getItem(h());return!!e&&JSON.parse(e)};exports.getApiUrl=m,exports.getFramesStyles=y,exports.getPublicKey=v,exports.setChannel=d,exports.setup=function(e){var t=e.channels,n=e.defaultChannel;t[n]?(c.channels=t,d(n)):console.error("[CKO] Bad config provided")},exports.useCko=function(){var e=n.sharedRef(null,"useCko-error"),t=n.sharedRef([],"useCko-availableMethods"),o=n.sharedRef(null,"useCko-contextId"),i=n.sharedRef(!1,"useCko-requiresCvv"),s=n.sharedRef(exports.CkoPaymentType.NOT_SELECTED,"useCko-selectedPaymentMethod"),c=g(s),l=c.initCardForm,d=c.makePayment,v=c.error,m=c.submitForm,f=c.setPaymentInstrument,y=c.removePaymentInstrument,p=c.loadStoredPaymentInstruments,h=c.removeTransactionToken,C=c.storedPaymentInstruments,_=c.submitDisabled,b=function(){var e=n.sharedRef(null,"useCkoPaypal-error");return{error:e,makePayment:function(t){var n=t.cartId,r=t.email,o=t.secure3d,i=t.contextDataId,s=void 0===i?null:i,c=t.savePaymentInstrument,l=void 0!==c&&c,d=t.success_url,v=void 0===d?null:d,m=t.failure_url,f=void 0===m?null:m,y=t.reference,p=void 0===y?null:y;return a(void 0,void 0,void 0,(function(){var t,a,i;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,4,,5]),t=void 0,s?[3,2]:[4,k({reference:n,email:r})];case 1:t=u.sent(),u.label=2;case 2:return[4,P(w(exports.CkoPaymentType.PAYPAL,{secure3d:o,reference:p,context_id:s||t.data.id,save_payment_instrument:l,success_url:v||window.location.origin+"/cko/payment-success",failure_url:f||window.location.origin+"/cko/payment-error"}))];case 3:if(a=u.sent(),![200,202].includes(a.status))throw new Error(a.data.error_type);return[2,a];case 4:return i=u.sent(),e.value=i,[2,null];case 5:return[2]}}))}))}}}(),x=b.makePayment,T=b.error,I=function(){var e=n.sharedRef(null,"useCkoSofort-error");return{error:e,makePayment:function(t){var n=t.cartId,r=t.email,o=t.contextDataId,i=void 0===o?null:o,s=t.success_url,c=void 0===s?null:s,l=t.failure_url,d=void 0===l?null:l,v=t.reference,m=void 0===v?null:v;return a(void 0,void 0,void 0,(function(){var t,o,a;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,4,,5]),t=void 0,i?[3,2]:[4,k({reference:n,email:r})];case 1:t=u.sent(),u.label=2;case 2:return[4,P(w(exports.CkoPaymentType.SOFORT,{reference:m,context_id:i||t.data.id,success_url:c||window.location.origin+"/cko/payment-success",failure_url:d||window.location.origin+"/cko/payment-error"}))];case 3:if(o=u.sent(),![200,202].includes(o.status))throw new Error(o.data.error_type);return[2,o];case 4:return a=u.sent(),e.value=a,[2,null];case 5:return[2]}}))}))}}}(),A=I.makePayment,R=I.error;return{availableMethods:t,error:e,selectedPaymentMethod:s,storedPaymentInstruments:C,submitDisabled:_,storedContextId:r.computed((function(){return o.value})),isCvvRequired:r.computed((function(){return i.value})),loadAvailableMethods:function(n,r){return a(void 0,void 0,void 0,(function(){var a,s;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,2,,3]),[4,k({reference:n,email:r})];case 1:return a=u.sent(),t.value=function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),o=0;for(t=0;t<n;t++)for(var a=arguments[t],u=0,i=a.length;u<i;u++,o++)r[o]=a[u];return r}(a.data.apms,[{name:"card"}]),o.value=a.data.id,a.data.payment_settings&&"cvv_required"in a.data.payment_settings&&(i.value=a.data.payment_settings.cvv_required),[2,a.data];case 2:return s=u.sent(),e.value=s,[2,null];case 3:return[2]}}))}))},initForm:function(e,n){if(void 0===e&&(e=null),void 0===n&&(n={}),!e||0!==Object.keys(e).length)for(var r=e&&Object.keys(e).length>0,o=0,a=t.value;o<a.length;o++){var u=a[o].name;if(!r||e[u]){var i=n[u];switch(u){case"card":l(i)}}}},submitCardForm:m,makePayment:function(t){var n=void 0===t?{}:t,r=n.cartId,c=void 0===r?null:r,l=n.email,m=void 0===l?null:l,f=n.contextDataId,y=void 0===f?null:f,p=n.success_url,h=void 0===p?null:p,C=n.failure_url,_=void 0===C?null:C,k=n.secure3d,P=void 0===k||k,b=n.cvv,I=void 0===b?null:b,w=n.reference,D=void 0===w?null:w;return a(void 0,void 0,void 0,(function(){var t,n,r;return u(this,(function(a){switch(a.label){case 0:if(!s.value)return e.value=new Error("Payment method not selected"),[2];if(console.log("contextid",y||o.value),[exports.CkoPaymentType.CREDIT_CARD,exports.CkoPaymentType.SAVED_CARD].includes(s.value)){if(s.value===exports.CkoPaymentType.SAVED_CARD&&i.value&&!I)return e.value=new Error("CVV is required"),[2];t=d,n=v}else if(s.value===exports.CkoPaymentType.PAYPAL)t=x,n=T;else{if(s.value!==exports.CkoPaymentType.SOFORT)return e.value=new Error("Not supported payment method"),[2];t=A,n=R}return[4,t({cartId:c,email:m,success_url:h,failure_url:_,secure3d:P,cvv:I,reference:D,contextDataId:y||o.value,savePaymentInstrument:E()})];case 1:return r=a.sent(),n.value&&(e.value=n.value),[2,r]}}))}))},setPaymentInstrument:f,setSavePaymentInstrument:S,loadSavePaymentInstrument:E,removePaymentInstrument:y,loadStoredPaymentInstruments:p,removeTransactionToken:h}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=(e=require("axios"))&&"object"==typeof e&&"default"in e?e.default:e,t=require("@vue-storefront/core"),r=require("@vue/composition-api"),o=function(){return(o=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e}).apply(this,arguments)};function a(e,n,t,r){return new(t||(t=Promise))((function(o,a){function u(e){try{s(r.next(e))}catch(e){a(e)}}function i(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){e.done?o(e.value):new t((function(n){n(e.value)})).then(u,i)}s((r=r.apply(e,n||[])).next())}))}function u(e,n){var t,r,o,a,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function i(a){return function(i){return function(a){if(t)throw new TypeError("Generator is already executing.");for(;u;)try{if(t=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=n.call(e,u)}catch(e){a=[6,e],r=0}finally{t=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,i])}}}var i,s,c=o({},{publicKey:null,ctApiUrl:"https://play-commercetools.cko-playground.ckotech.co/api",tokenizedCardKey:"temporary-tokenized-card",saveInstrumentKey:"save-instrument",card:{style:{},localization:null},klarna:{containerSelector:"#klarna_container"},channels:{},currentChannel:null}),l={"card-number":{color:"red"},base:{color:"#72757e",fontSize:"19px",minWidth:"60px"},invalid:{color:"red"},placeholder:{base:{color:"black",fontSize:"19px"}}},d=function(e){var n,t,r;if(c.channels[e]){var o=c.channels[e];c.publicKey=o.publicKey,c.card.style=(null===(n=o.card)||void 0===n?void 0:n.style)||l,c.card.localization=(null===(t=o.card)||void 0===t?void 0:t.localization)||null,c.klarna.containerSelector=(null===(r=o.klarna)||void 0===r?void 0:r.containerSelector)||c.klarna.containerSelector,c.tokenizedCardKey=o.tokenizedCardKey||c.tokenizedCardKey,c.saveInstrumentKey=o.saveInstrumentKey||c.saveInstrumentKey,c.ctApiUrl=o.ctApiUrl||c.ctApiUrl,c.currentChannel=e}else console.error("[CKO] Requested channel does not exist in the config")},v=function(){return c.publicKey},m=function(){return c.currentChannel},f=function(){return c.tokenizedCardKey},y=function(){return c.saveInstrumentKey},p=function(){return c.ctApiUrl},h=function(){return window.location.origin+"/cko-api"},k=function(){return c.card.style},_=function(){return{crossDomain:!0,headers:{authorization:v()}}},C=function(e){var t=e.reference,r=e.email,i=void 0===r?null:r;return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,n.post(p()+"/api/contexts",o({reference:t},i?{customer_email:i}:{}),_())]}))}))},P=function(e){return a(void 0,void 0,void 0,(function(){return u(this,(function(t){return[2,n.post(p()+"/api/payments",e,_())]}))}))},b=function(e){var t=e.customer_id;return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,n.post(h()+"/payment-instruments",{customer_id:t,channel:m()})]}))}))},w=function(e){var t=e.customer_id,r=e.payment_instrument_id;return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,n.delete(h()+"/payment-instruments/"+t+"/"+r+"/"+m())]}))}))};(s=exports.CkoPaymentType||(exports.CkoPaymentType={}))[s.NOT_SELECTED=0]="NOT_SELECTED",s[s.CREDIT_CARD=1]="CREDIT_CARD",s[s.SAVED_CARD=2]="SAVED_CARD",s[s.KLARNA=3]="KLARNA",s[s.PAYPAL=4]="PAYPAL",s[s.SOFORT=5]="SOFORT";var x=function(e){var n=e.context_id,t=e.save_payment_instrument,r=e.secure3d,a=e.success_url,u=e.failure_url,i=e.cvv,s=e.reference;return o(o(o(o(o(o({context_id:n},i?{cvv:i}:{}),t?{save_payment_instrument:t}:{}),r?{"3ds":r}:{}),a?{success_url:a}:{}),u?{failure_url:u}:{}),s?{reference:s}:{})},T=((i={})[exports.CkoPaymentType.CREDIT_CARD]=function(e){return o(o({},x(e)),{type:"token",token:e.token})},i[exports.CkoPaymentType.SAVED_CARD]=function(e){return o(o({},x(e)),{type:"id",token:e.token})},i[exports.CkoPaymentType.KLARNA]=function(e){return o(o({},x(e)),{type:"klarna",token:e.token})},i[exports.CkoPaymentType.PAYPAL]=function(e){return o(o({},x(e)),{type:"paypal"})},i[exports.CkoPaymentType.SOFORT]=function(e){return o(o({},x(e)),{type:"sofort"})},i),A=function(e,n){return T[e](n)},I=function(){return sessionStorage.getItem(f())},R=function(e){return sessionStorage.setItem(f(),e)},g=function(){return sessionStorage.removeItem(f())},D=function(e){var n=t.sharedRef(!1,"useCkoCard-isCardValid"),i=t.sharedRef(null,"useCkoCard-error"),s=t.sharedRef([],"useCkoCard-storedPaymentInstruments"),l=r.computed((function(){return e.value===exports.CkoPaymentType.CREDIT_CARD&&!n.value}));return{error:i,submitDisabled:l,storedPaymentInstruments:s,selectedCardPaymentMethod:r.computed((function(){return e.value})),submitForm:function(){return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,Frames.submitCard()]}))}))},makePayment:function(n){var t=n.cartId,r=n.email,o=n.secure3d,s=n.cvv,c=void 0===s?null:s,l=n.contextDataId,d=void 0===l?null:l,v=n.savePaymentInstrument,m=void 0!==v&&v,f=n.success_url,y=void 0===f?null:f,p=n.failure_url,h=void 0===p?null:p,k=n.reference,_=void 0===k?null:k;return a(void 0,void 0,void 0,(function(){var n,a,s,l;return u(this,(function(u){switch(u.label){case 0:if(u.trys.push([0,4,,5]),!(n=I()))throw new Error("There is no payment token");return a=void 0,d?[3,2]:[4,C({reference:t,email:r})];case 1:if(a=u.sent(),e.value===exports.CkoPaymentType.SAVED_CARD&&a.data.payment_settings&&a.data.payment_settings.cvv_required&&!c)throw new Error("CVV is required");u.label=2;case 2:return[4,P(A(e.value,{token:n,secure3d:o,cvv:c,reference:_,context_id:d||a.data.id,save_payment_instrument:e.value===exports.CkoPaymentType.CREDIT_CARD&&m,success_url:y||window.location.origin+"/cko/payment-success",failure_url:h||window.location.origin+"/cko/payment-error"}))];case 3:if(s=u.sent(),g(),![200,202].includes(s.status))throw new Error(s.data.error_type);return[2,s];case 4:return l=u.sent(),g(),i.value=l,[2,null];case 5:return[2]}}))}))},initCardForm:function(e){var t=(null==e?void 0:e.localization)||c.card.localization;Frames.init(o(o({publicKey:v(),style:(null==e?void 0:e.style)||k()},t?{localization:t}:{}),{cardValidationChanged:function(){n.value=Frames.isCardValid()},cardTokenized:function(e){var n=e.token;return a(void 0,void 0,void 0,(function(){return u(this,(function(e){return R(n),[2]}))}))},cardTokenizationFailed:function(e){i.value=e,n.value=!1}}))},setTransactionToken:R,loadStoredPaymentInstruments:function(e){return a(void 0,void 0,void 0,(function(){var n,t;return u(this,(function(r){switch(r.label){case 0:return r.trys.push([0,2,,3]),[4,b({customer_id:e})];case 1:return n=r.sent().data,s.value=n.payment_instruments,[3,3];case 2:return t=r.sent(),i.value=t,[3,3];case 3:return[2]}}))}))},removePaymentInstrument:function(n,t){return a(void 0,void 0,void 0,(function(){var r,o;return u(this,(function(a){switch(a.label){case 0:return a.trys.push([0,2,,3]),[4,w({customer_id:n,payment_instrument_id:t})];case 1:return a.sent(),r=s.value.find((function(e){return e.payment_instrument_id===t})).id,s.value=s.value.filter((function(e){return e.payment_instrument_id!==t})),r===I()&&(e.value=exports.CkoPaymentType.CREDIT_CARD,g()),[3,3];case 2:return o=a.sent(),i.value=o,[3,3];case 3:return[2]}}))}))},setPaymentInstrument:function(n){R(n),e.value=exports.CkoPaymentType.SAVED_CARD},removeTransactionToken:g}},S=function(){var e=t.sharedRef(null,"useCkoKlarna-error");return{makePayment:function(n){var t=n.contextDataId,r=n.secure3d,o=n.savePaymentInstrument,i=n.reference,s=void 0===i?null:i,c=n.success_url,l=void 0===c?null:c,d=n.failure_url,v=void 0===d?null:d;return a(void 0,void 0,void 0,(function(){var n,a,i;return u(this,(function(u){switch(u.label){case 0:if(u.trys.push([0,2,,3]),!(n=I()))throw new Error("There is no payment token");return[4,P(A(exports.CkoPaymentType.KLARNA,{token:n,context_id:t,secure3d:r,reference:s,save_payment_instrument:o,success_url:l||window.location.origin+"/cko/payment-success",failure_url:v||window.location.origin+"/cko/payment-error"}))];case 1:if(a=u.sent(),g(),![200,202].includes(a.status))throw new Error(a.data.error_type);return[2,a];case 2:return i=u.sent(),g(),e.value=i,[2,null];case 3:return[2]}}))}))},initKlarnaForm:function(e,n,t){Klarna.Payments.init({client_token:n.metadata.details.client_token}),Klarna.Payments.load({container:(null==e?void 0:e.containerSelector)||c.klarna.containerSelector,payment_method_categories:n.metadata.details.payment_method_category.map((function(e){return e.identifier})),instance_id:t},n.metadata.session)},submitForm:function(e){return new Promise((function(n,t){try{Klarna.Payments.authorize({instance_id:e},{},(function(e){R(e.authorization_token),n(e)}))}catch(e){t(e)}}))},error:e}},E=function(e){localStorage.setItem(y(),JSON.stringify(e))},K=function(){var e=localStorage.getItem(y());return!!e&&JSON.parse(e)};exports.getApiUrl=p,exports.getFramesStyles=k,exports.getPublicKey=v,exports.setChannel=d,exports.setup=function(e){var n=e.channels,t=e.defaultChannel;n[t]?(c.channels=n,d(t)):console.error("[CKO] Bad config provided")},exports.useCko=function(){var e=t.sharedRef(null,"useCko-error"),n=t.sharedRef([],"useCko-availableMethods"),o=t.sharedRef(null,"useCko-contextId"),i=t.sharedRef(!1,"useCko-requiresCvv"),s=t.sharedRef(exports.CkoPaymentType.NOT_SELECTED,"useCko-selectedPaymentMethod"),c=D(s),l=c.initCardForm,d=c.makePayment,v=c.error,m=c.submitForm,f=c.setPaymentInstrument,y=c.removePaymentInstrument,p=c.loadStoredPaymentInstruments,h=c.removeTransactionToken,k=c.storedPaymentInstruments,_=c.submitDisabled,b=S(),w=b.initKlarnaForm,x=b.submitForm,T=b.makePayment,I=b.error,R=function(){var e=t.sharedRef(null,"useCkoPaypal-error");return{error:e,makePayment:function(n){var t=n.cartId,r=n.email,o=n.secure3d,i=n.contextDataId,s=void 0===i?null:i,c=n.savePaymentInstrument,l=void 0!==c&&c,d=n.success_url,v=void 0===d?null:d,m=n.failure_url,f=void 0===m?null:m,y=n.reference,p=void 0===y?null:y;return a(void 0,void 0,void 0,(function(){var n,a,i;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,4,,5]),n=void 0,s?[3,2]:[4,C({reference:t,email:r})];case 1:n=u.sent(),u.label=2;case 2:return[4,P(A(exports.CkoPaymentType.PAYPAL,{secure3d:o,reference:p,context_id:s||n.data.id,save_payment_instrument:l,success_url:v||window.location.origin+"/cko/payment-success",failure_url:f||window.location.origin+"/cko/payment-error"}))];case 3:if(a=u.sent(),![200,202].includes(a.status))throw new Error(a.data.error_type);return[2,a];case 4:return i=u.sent(),e.value=i,[2,null];case 5:return[2]}}))}))}}}(),g=R.makePayment,O=R.error,F=function(){var e=t.sharedRef(null,"useCkoSofort-error");return{error:e,makePayment:function(n){var t=n.cartId,r=n.email,o=n.contextDataId,i=void 0===o?null:o,s=n.success_url,c=void 0===s?null:s,l=n.failure_url,d=void 0===l?null:l,v=n.reference,m=void 0===v?null:v;return a(void 0,void 0,void 0,(function(){var n,o,a;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,4,,5]),n=void 0,i?[3,2]:[4,C({reference:t,email:r})];case 1:n=u.sent(),u.label=2;case 2:return[4,P(A(exports.CkoPaymentType.SOFORT,{reference:m,context_id:i||n.data.id,success_url:c||window.location.origin+"/cko/payment-success",failure_url:d||window.location.origin+"/cko/payment-error"}))];case 3:if(o=u.sent(),![200,202].includes(o.status))throw new Error(o.data.error_type);return[2,o];case 4:return a=u.sent(),e.value=a,[2,null];case 5:return[2]}}))}))}}}(),z=F.makePayment,V=F.error;return{availableMethods:n,error:e,selectedPaymentMethod:s,storedPaymentInstruments:k,submitDisabled:_,storedContextId:r.computed((function(){return o.value})),isCvvRequired:r.computed((function(){return i.value})),loadAvailableMethods:function(t,r){return a(void 0,void 0,void 0,(function(){var a,s;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,2,,3]),[4,C({reference:t,email:r})];case 1:return a=u.sent(),n.value=function(){for(var e=0,n=0,t=arguments.length;n<t;n++)e+=arguments[n].length;var r=Array(e),o=0;for(n=0;n<t;n++)for(var a=arguments[n],u=0,i=a.length;u<i;u++,o++)r[o]=a[u];return r}(a.data.apms,[{name:"card"}]),o.value=a.data.id,a.data.payment_settings&&"cvv_required"in a.data.payment_settings&&(i.value=a.data.payment_settings.cvv_required),[2,a.data];case 2:return s=u.sent(),e.value=s,[2,null];case 3:return[2]}}))}))},initForm:function(e,t){if(void 0===e&&(e=null),void 0===t&&(t={}),!e||0!==Object.keys(e).length)for(var r=e&&Object.keys(e).length>0,a=0,u=n.value;a<u.length;a++){var i=u[a];if(!r||e[i.name]){var s=t[i.name];switch(i.name){case"card":l(s);break;case"klarna":w(s,i,o.value)}}}},submitCardForm:m,submitKlarnaForm:function(e){return x(e||o.value)},makePayment:function(n){var t=void 0===n?{}:n,r=t.cartId,c=void 0===r?null:r,l=t.email,m=void 0===l?null:l,f=t.contextDataId,y=void 0===f?null:f,p=t.success_url,h=void 0===p?null:p,k=t.failure_url,_=void 0===k?null:k,C=t.secure3d,P=void 0===C||C,b=t.cvv,w=void 0===b?null:b,x=t.reference,A=void 0===x?null:x;return a(void 0,void 0,void 0,(function(){var n,t,r;return u(this,(function(a){switch(a.label){case 0:if(!s.value)return e.value=new Error("Payment method not selected"),[2];if([exports.CkoPaymentType.CREDIT_CARD,exports.CkoPaymentType.SAVED_CARD].includes(s.value)){if(s.value===exports.CkoPaymentType.SAVED_CARD&&i.value&&!w)return e.value=new Error("CVV is required"),[2];n=d,t=v}else if(s.value===exports.CkoPaymentType.KLARNA)n=T,t=I;else if(s.value===exports.CkoPaymentType.PAYPAL)n=g,t=O;else{if(s.value!==exports.CkoPaymentType.SOFORT)return e.value=new Error("Not supported payment method"),[2];n=z,t=V}return[4,n({cartId:c,email:m,success_url:h,failure_url:_,secure3d:P,cvv:w,reference:A,contextDataId:y||o.value,savePaymentInstrument:K()})];case 1:return r=a.sent(),t.value&&(e.value=t.value),[2,r]}}))}))},setPaymentInstrument:f,setSavePaymentInstrument:E,loadSavePaymentInstrument:K,removePaymentInstrument:y,loadStoredPaymentInstruments:p,removeTransactionToken:h}};
 //# sourceMappingURL=index.cjs.js.map

lib/index.es.js

@@ -15,3 +15,3 @@ import e from"axios";import{sharedRef as n}from"@vue-storefront/core";import{computed as t}from"@vue/composition-api";
 and limitations under the License.
-***************************************************************************** */var r=function(){return(r=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e}).apply(this,arguments)};function o(e,n,t,r){return new(t||(t=Promise))((function(o,u){function a(e){try{s(r.next(e))}catch(e){u(e)}}function i(e){try{s(r.throw(e))}catch(e){u(e)}}function s(e){e.done?o(e.value):new t((function(n){n(e.value)})).then(a,i)}s((r=r.apply(e,n||[])).next())}))}function u(e,n){var t,r,o,u,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return u={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function i(u){return function(i){return function(u){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,r&&(o=2&u[0]?r.return:u[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,u[1])).done)return o;switch(r=0,o&&(u=[2&u[0],o.value]),u[0]){case 0:case 1:o=u;break;case 4:return a.label++,{value:u[1],done:!1};case 5:a.label++,r=u[1],u=[0];continue;case 7:u=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==u[0]&&2!==u[0])){a=0;continue}if(3===u[0]&&(!o||u[1]>o[0]&&u[1]<o[3])){a.label=u[1];break}if(6===u[0]&&a.label<o[1]){a.label=o[1],o=u;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(u);break}o[2]&&a.ops.pop(),a.trys.pop();continue}u=n.call(e,a)}catch(e){u=[6,e],r=0}finally{t=o=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,i])}}}var a,i,s=r({},{publicKey:null,ctApiUrl:"https://play-commercetools.cko-playground.ckotech.co/api",tokenizedCardKey:"temporary-tokenized-card",saveInstrumentKey:"save-instrument",card:{style:{},localization:null},channels:{},currentChannel:null}),c={"card-number":{color:"red"},base:{color:"#72757e",fontSize:"19px",minWidth:"60px"},invalid:{color:"red"},placeholder:{base:{color:"black",fontSize:"19px"}}},l=function(e){var n,t;if(s.channels[e]){var r=s.channels[e];s.publicKey=r.publicKey,s.card.style=(null===(n=r.card)||void 0===n?void 0:n.style)||c,s.card.localization=(null===(t=r.card)||void 0===t?void 0:t.localization)||null,s.tokenizedCardKey=r.tokenizedCardKey||s.tokenizedCardKey,s.saveInstrumentKey=r.saveInstrumentKey||s.saveInstrumentKey,s.ctApiUrl=r.ctApiUrl||s.ctApiUrl,s.currentChannel=e}else console.error("[CKO] Requested channel does not exist in the config")},d=function(e){var n=e.channels,t=e.defaultChannel;n[t]?(s.channels=n,l(t)):console.error("[CKO] Bad config provided")},v=function(){return s.publicKey},f=function(){return s.ctApiUrl},m=function(){return window.location.origin+"/cko-api"},y=function(){return s.card.style},p=function(){return s.tokenizedCardKey},h=function(){return s.saveInstrumentKey},_=function(){return s.currentChannel},C=function(){return{crossDomain:!0,headers:{authorization:v()}}},k=function(n){var t=n.reference,a=n.email,i=void 0===a?null:a;return o(void 0,void 0,void 0,(function(){return u(this,(function(n){return[2,e.post(f()+"/api/contexts",r({reference:t},i?{customer_email:i}:{}),C())]}))}))},b=function(n){return o(void 0,void 0,void 0,(function(){return u(this,(function(t){return[2,e.post(f()+"/api/payments",n,C())]}))}))},I=function(n){var t=n.customer_id;return o(void 0,void 0,void 0,(function(){return u(this,(function(n){return[2,e.post(m()+"/payment-instruments",{customer_id:t,channel:_()})]}))}))},w=function(n){var t=n.customer_id,r=n.payment_instrument_id;return o(void 0,void 0,void 0,(function(){return u(this,(function(n){return[2,e.delete(m()+"/payment-instruments/"+t+"/"+r+"/"+_())]}))}))};!function(e){e[e.NOT_SELECTED=0]="NOT_SELECTED",e[e.CREDIT_CARD=1]="CREDIT_CARD",e[e.SAVED_CARD=2]="SAVED_CARD",e[e.KLARNA=3]="KLARNA",e[e.PAYPAL=4]="PAYPAL",e[e.SOFORT=5]="SOFORT"}(i||(i={}));var A=function(e){var n=e.context_id,t=e.save_payment_instrument,o=e.secure3d,u=e.success_url,a=e.failure_url,i=e.cvv,s=e.reference;return r(r(r(r(r(r({context_id:n},i?{cvv:i}:{}),t?{save_payment_instrument:t}:{}),o?{"3ds":o}:{}),u?{success_url:u}:{}),a?{failure_url:a}:{}),s?{reference:s}:{})},P=((a={})[i.CREDIT_CARD]=function(e){return r(r({},A(e)),{type:"token",token:e.token})},a[i.SAVED_CARD]=function(e){return r(r({},A(e)),{type:"id",token:e.token})},a[i.KLARNA]=function(e){return r(r({},A(e)),{type:"klarna",token:e.token})},a[i.PAYPAL]=function(e){return r(r({},A(e)),{type:"paypal"})},a[i.SOFORT]=function(e){return r(r({},A(e)),{type:"sofort"})},a),D=function(e,n){return P[e](n)},g=function(){return sessionStorage.getItem(p())},E=function(e){return sessionStorage.setItem(p(),e)},S=function(){return sessionStorage.removeItem(p())},R=function(e){var a=n(!1,"useCkoCard-isCardValid"),c=n(null,"useCkoCard-error"),l=n([],"useCkoCard-storedPaymentInstruments"),d=t((function(){return e.value===i.CREDIT_CARD&&!a.value}));return{error:c,submitDisabled:d,storedPaymentInstruments:l,selectedCardPaymentMethod:t((function(){return e.value})),submitForm:function(){return o(void 0,void 0,void 0,(function(){return u(this,(function(e){return[2,Frames.submitCard()]}))}))},makePayment:function(n){var t=n.cartId,r=n.email,a=n.secure3d,s=n.cvv,l=void 0===s?null:s,d=n.contextDataId,v=void 0===d?null:d,f=n.savePaymentInstrument,m=void 0!==f&&f,y=n.success_url,p=void 0===y?null:y,h=n.failure_url,_=void 0===h?null:h,C=n.reference,I=void 0===C?null:C;return o(void 0,void 0,void 0,(function(){var n,o,s,d;return u(this,(function(u){switch(u.label){case 0:if(u.trys.push([0,4,,5]),!(n=g()))throw new Error("There is no payment token");return o=void 0,v?[3,2]:[4,k({reference:t,email:r})];case 1:if(o=u.sent(),e.value===i.SAVED_CARD&&o.data.payment_settings&&o.data.payment_settings.cvv_required&&!l)throw new Error("CVV is required");u.label=2;case 2:return[4,b(D(e.value,{token:n,secure3d:a,cvv:l,reference:I,context_id:v||o.data.id,save_payment_instrument:e.value===i.CREDIT_CARD&&m,success_url:p||window.location.origin+"/cko/payment-success",failure_url:_||window.location.origin+"/cko/payment-error"}))];case 3:if(s=u.sent(),S(),![200,202].includes(s.status))throw new Error(s.data.error_type);return[2,s];case 4:return d=u.sent(),S(),c.value=d,[2,null];case 5:return[2]}}))}))},initCardForm:function(e){var n=(null==e?void 0:e.localization)||s.card.localization;Frames.init(r(r({publicKey:v(),style:(null==e?void 0:e.style)||y()},n?{localization:n}:{}),{cardValidationChanged:function(){a.value=Frames.isCardValid()},cardTokenized:function(e){var n=e.token;return o(void 0,void 0,void 0,(function(){return u(this,(function(e){return E(n),[2]}))}))},cardTokenizationFailed:function(e){c.value=e,a.value=!1}}))},setTransactionToken:E,loadStoredPaymentInstruments:function(e){return o(void 0,void 0,void 0,(function(){var n,t;return u(this,(function(r){switch(r.label){case 0:return r.trys.push([0,2,,3]),[4,I({customer_id:e})];case 1:return n=r.sent().data,l.value=n.payment_instruments,[3,3];case 2:return t=r.sent(),c.value=t,[3,3];case 3:return[2]}}))}))},removePaymentInstrument:function(n,t){return o(void 0,void 0,void 0,(function(){var r,o;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,2,,3]),[4,w({customer_id:n,payment_instrument_id:t})];case 1:return u.sent(),r=l.value.find((function(e){return e.payment_instrument_id===t})).id,l.value=l.value.filter((function(e){return e.payment_instrument_id!==t})),r===g()&&(e.value=i.CREDIT_CARD,S()),[3,3];case 2:return o=u.sent(),c.value=o,[3,3];case 3:return[2]}}))}))},setPaymentInstrument:function(n){E(n),e.value=i.SAVED_CARD},removeTransactionToken:S}},T=function(e){localStorage.setItem(h(),JSON.stringify(e))},x=function(){var e=localStorage.getItem(h());return!!e&&JSON.parse(e)},O=function(){var e=n(null,"useCko-error"),r=n([],"useCko-availableMethods"),a=n(null,"useCko-contextId"),s=n(!1,"useCko-requiresCvv"),c=n(i.NOT_SELECTED,"useCko-selectedPaymentMethod"),l=R(c),d=l.initCardForm,v=l.makePayment,f=l.error,m=l.submitForm,y=l.setPaymentInstrument,p=l.removePaymentInstrument,h=l.loadStoredPaymentInstruments,_=l.removeTransactionToken,C=l.storedPaymentInstruments,I=l.submitDisabled,w=function(){var e=n(null,"useCkoPaypal-error");return{error:e,makePayment:function(n){var t=n.cartId,r=n.email,a=n.secure3d,s=n.contextDataId,c=void 0===s?null:s,l=n.savePaymentInstrument,d=void 0!==l&&l,v=n.success_url,f=void 0===v?null:v,m=n.failure_url,y=void 0===m?null:m,p=n.reference,h=void 0===p?null:p;return o(void 0,void 0,void 0,(function(){var n,o,s;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,4,,5]),n=void 0,c?[3,2]:[4,k({reference:t,email:r})];case 1:n=u.sent(),u.label=2;case 2:return[4,b(D(i.PAYPAL,{secure3d:a,reference:h,context_id:c||n.data.id,save_payment_instrument:d,success_url:f||window.location.origin+"/cko/payment-success",failure_url:y||window.location.origin+"/cko/payment-error"}))];case 3:if(o=u.sent(),![200,202].includes(o.status))throw new Error(o.data.error_type);return[2,o];case 4:return s=u.sent(),e.value=s,[2,null];case 5:return[2]}}))}))}}}(),A=w.makePayment,P=w.error,g=function(){var e=n(null,"useCkoSofort-error");return{error:e,makePayment:function(n){var t=n.cartId,r=n.email,a=n.contextDataId,s=void 0===a?null:a,c=n.success_url,l=void 0===c?null:c,d=n.failure_url,v=void 0===d?null:d,f=n.reference,m=void 0===f?null:f;return o(void 0,void 0,void 0,(function(){var n,o,a;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,4,,5]),n=void 0,s?[3,2]:[4,k({reference:t,email:r})];case 1:n=u.sent(),u.label=2;case 2:return[4,b(D(i.SOFORT,{reference:m,context_id:s||n.data.id,success_url:l||window.location.origin+"/cko/payment-success",failure_url:v||window.location.origin+"/cko/payment-error"}))];case 3:if(o=u.sent(),![200,202].includes(o.status))throw new Error(o.data.error_type);return[2,o];case 4:return a=u.sent(),e.value=a,[2,null];case 5:return[2]}}))}))}}}(),E=g.makePayment,S=g.error;return{availableMethods:r,error:e,selectedPaymentMethod:c,storedPaymentInstruments:C,submitDisabled:I,storedContextId:t((function(){return a.value})),isCvvRequired:t((function(){return s.value})),loadAvailableMethods:function(n,t){return o(void 0,void 0,void 0,(function(){var o,i;return u(this,(function(u){switch(u.label){case 0:return u.trys.push([0,2,,3]),[4,k({reference:n,email:t})];case 1:return o=u.sent(),r.value=function(){for(var e=0,n=0,t=arguments.length;n<t;n++)e+=arguments[n].length;var r=Array(e),o=0;for(n=0;n<t;n++)for(var u=arguments[n],a=0,i=u.length;a<i;a++,o++)r[o]=u[a];return r}(o.data.apms,[{name:"card"}]),a.value=o.data.id,o.data.payment_settings&&"cvv_required"in o.data.payment_settings&&(s.value=o.data.payment_settings.cvv_required),[2,o.data];case 2:return i=u.sent(),e.value=i,[2,null];case 3:return[2]}}))}))},initForm:function(e,n){if(void 0===e&&(e=null),void 0===n&&(n={}),!e||0!==Object.keys(e).length)for(var t=e&&Object.keys(e).length>0,o=0,u=r.value;o<u.length;o++){var a=u[o].name;if(!t||e[a]){var i=n[a];switch(a){case"card":d(i)}}}},submitCardForm:m,makePayment:function(n){var t=void 0===n?{}:n,r=t.cartId,l=void 0===r?null:r,d=t.email,m=void 0===d?null:d,y=t.contextDataId,p=void 0===y?null:y,h=t.success_url,_=void 0===h?null:h,C=t.failure_url,k=void 0===C?null:C,b=t.secure3d,I=void 0===b||b,w=t.cvv,D=void 0===w?null:w,g=t.reference,R=void 0===g?null:g;return o(void 0,void 0,void 0,(function(){var n,t,r;return u(this,(function(o){switch(o.label){case 0:if(!c.value)return e.value=new Error("Payment method not selected"),[2];if(console.log("contextid",p||a.value),[i.CREDIT_CARD,i.SAVED_CARD].includes(c.value)){if(c.value===i.SAVED_CARD&&s.value&&!D)return e.value=new Error("CVV is required"),[2];n=v,t=f}else if(c.value===i.PAYPAL)n=A,t=P;else{if(c.value!==i.SOFORT)return e.value=new Error("Not supported payment method"),[2];n=E,t=S}return[4,n({cartId:l,email:m,success_url:_,failure_url:k,secure3d:I,cvv:D,reference:R,contextDataId:p||a.value,savePaymentInstrument:x()})];case 1:return r=o.sent(),t.value&&(e.value=t.value),[2,r]}}))}))},setPaymentInstrument:y,setSavePaymentInstrument:T,loadSavePaymentInstrument:x,removePaymentInstrument:p,loadStoredPaymentInstruments:h,removeTransactionToken:_}};export{i as CkoPaymentType,f as getApiUrl,y as getFramesStyles,v as getPublicKey,l as setChannel,d as setup,O as useCko};
+***************************************************************************** */var r=function(){return(r=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function a(e,n,t,r){return new(t||(t=Promise))((function(a,o){function i(e){try{s(r.next(e))}catch(e){o(e)}}function u(e){try{s(r.throw(e))}catch(e){o(e)}}function s(e){e.done?a(e.value):new t((function(n){n(e.value)})).then(i,u)}s((r=r.apply(e,n||[])).next())}))}function o(e,n){var t,r,a,o,i={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function u(o){return function(u){return function(o){if(t)throw new TypeError("Generator is already executing.");for(;i;)try{if(t=1,r&&(a=2&o[0]?r.return:o[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,o[1])).done)return a;switch(r=0,a&&(o=[2&o[0],a.value]),o[0]){case 0:case 1:a=o;break;case 4:return i.label++,{value:o[1],done:!1};case 5:i.label++,r=o[1],o=[0];continue;case 7:o=i.ops.pop(),i.trys.pop();continue;default:if(!(a=i.trys,(a=a.length>0&&a[a.length-1])||6!==o[0]&&2!==o[0])){i=0;continue}if(3===o[0]&&(!a||o[1]>a[0]&&o[1]<a[3])){i.label=o[1];break}if(6===o[0]&&i.label<a[1]){i.label=a[1],a=o;break}if(a&&i.label<a[2]){i.label=a[2],i.ops.push(o);break}a[2]&&i.ops.pop(),i.trys.pop();continue}o=n.call(e,i)}catch(e){o=[6,e],r=0}finally{t=a=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,u])}}}var i,u,s=r({},{publicKey:null,ctApiUrl:"https://play-commercetools.cko-playground.ckotech.co/api",tokenizedCardKey:"temporary-tokenized-card",saveInstrumentKey:"save-instrument",card:{style:{},localization:null},klarna:{containerSelector:"#klarna_container"},channels:{},currentChannel:null}),c={"card-number":{color:"red"},base:{color:"#72757e",fontSize:"19px",minWidth:"60px"},invalid:{color:"red"},placeholder:{base:{color:"black",fontSize:"19px"}}},l=function(e){var n,t,r;if(s.channels[e]){var a=s.channels[e];s.publicKey=a.publicKey,s.card.style=(null===(n=a.card)||void 0===n?void 0:n.style)||c,s.card.localization=(null===(t=a.card)||void 0===t?void 0:t.localization)||null,s.klarna.containerSelector=(null===(r=a.klarna)||void 0===r?void 0:r.containerSelector)||s.klarna.containerSelector,s.tokenizedCardKey=a.tokenizedCardKey||s.tokenizedCardKey,s.saveInstrumentKey=a.saveInstrumentKey||s.saveInstrumentKey,s.ctApiUrl=a.ctApiUrl||s.ctApiUrl,s.currentChannel=e}else console.error("[CKO] Requested channel does not exist in the config")},d=function(e){var n=e.channels,t=e.defaultChannel;n[t]?(s.channels=n,l(t)):console.error("[CKO] Bad config provided")},v=function(){return s.publicKey},m=function(){return s.currentChannel},f=function(){return s.tokenizedCardKey},y=function(){return s.saveInstrumentKey},p=function(){return s.ctApiUrl},h=function(){return window.location.origin+"/cko-api"},_=function(){return s.card.style},k=function(){return{crossDomain:!0,headers:{authorization:v()}}},C=function(n){var t=n.reference,i=n.email,u=void 0===i?null:i;return a(void 0,void 0,void 0,(function(){return o(this,(function(n){return[2,e.post(p()+"/api/contexts",r({reference:t},u?{customer_email:u}:{}),k())]}))}))},w=function(n){return a(void 0,void 0,void 0,(function(){return o(this,(function(t){return[2,e.post(p()+"/api/payments",n,k())]}))}))},b=function(n){var t=n.customer_id;return a(void 0,void 0,void 0,(function(){return o(this,(function(n){return[2,e.post(h()+"/payment-instruments",{customer_id:t,channel:m()})]}))}))},I=function(n){var t=n.customer_id,r=n.payment_instrument_id;return a(void 0,void 0,void 0,(function(){return o(this,(function(n){return[2,e.delete(h()+"/payment-instruments/"+t+"/"+r+"/"+m())]}))}))};!function(e){e[e.NOT_SELECTED=0]="NOT_SELECTED",e[e.CREDIT_CARD=1]="CREDIT_CARD",e[e.SAVED_CARD=2]="SAVED_CARD",e[e.KLARNA=3]="KLARNA",e[e.PAYPAL=4]="PAYPAL",e[e.SOFORT=5]="SOFORT"}(u||(u={}));var P=function(e){var n=e.context_id,t=e.save_payment_instrument,a=e.secure3d,o=e.success_url,i=e.failure_url,u=e.cvv,s=e.reference;return r(r(r(r(r(r({context_id:n},u?{cvv:u}:{}),t?{save_payment_instrument:t}:{}),a?{"3ds":a}:{}),o?{success_url:o}:{}),i?{failure_url:i}:{}),s?{reference:s}:{})},A=((i={})[u.CREDIT_CARD]=function(e){return r(r({},P(e)),{type:"token",token:e.token})},i[u.SAVED_CARD]=function(e){return r(r({},P(e)),{type:"id",token:e.token})},i[u.KLARNA]=function(e){return r(r({},P(e)),{type:"klarna",token:e.token})},i[u.PAYPAL]=function(e){return r(r({},P(e)),{type:"paypal"})},i[u.SOFORT]=function(e){return r(r({},P(e)),{type:"sofort"})},i),D=function(e,n){return A[e](n)},g=function(){return sessionStorage.getItem(f())},S=function(e){return sessionStorage.setItem(f(),e)},E=function(){return sessionStorage.removeItem(f())},R=function(e){var i=n(!1,"useCkoCard-isCardValid"),c=n(null,"useCkoCard-error"),l=n([],"useCkoCard-storedPaymentInstruments"),d=t((function(){return e.value===u.CREDIT_CARD&&!i.value}));return{error:c,submitDisabled:d,storedPaymentInstruments:l,selectedCardPaymentMethod:t((function(){return e.value})),submitForm:function(){return a(void 0,void 0,void 0,(function(){return o(this,(function(e){return[2,Frames.submitCard()]}))}))},makePayment:function(n){var t=n.cartId,r=n.email,i=n.secure3d,s=n.cvv,l=void 0===s?null:s,d=n.contextDataId,v=void 0===d?null:d,m=n.savePaymentInstrument,f=void 0!==m&&m,y=n.success_url,p=void 0===y?null:y,h=n.failure_url,_=void 0===h?null:h,k=n.reference,b=void 0===k?null:k;return a(void 0,void 0,void 0,(function(){var n,a,s,d;return o(this,(function(o){switch(o.label){case 0:if(o.trys.push([0,4,,5]),!(n=g()))throw new Error("There is no payment token");return a=void 0,v?[3,2]:[4,C({reference:t,email:r})];case 1:if(a=o.sent(),e.value===u.SAVED_CARD&&a.data.payment_settings&&a.data.payment_settings.cvv_required&&!l)throw new Error("CVV is required");o.label=2;case 2:return[4,w(D(e.value,{token:n,secure3d:i,cvv:l,reference:b,context_id:v||a.data.id,save_payment_instrument:e.value===u.CREDIT_CARD&&f,success_url:p||window.location.origin+"/cko/payment-success",failure_url:_||window.location.origin+"/cko/payment-error"}))];case 3:if(s=o.sent(),E(),![200,202].includes(s.status))throw new Error(s.data.error_type);return[2,s];case 4:return d=o.sent(),E(),c.value=d,[2,null];case 5:return[2]}}))}))},initCardForm:function(e){var n=(null==e?void 0:e.localization)||s.card.localization;Frames.init(r(r({publicKey:v(),style:(null==e?void 0:e.style)||_()},n?{localization:n}:{}),{cardValidationChanged:function(){i.value=Frames.isCardValid()},cardTokenized:function(e){var n=e.token;return a(void 0,void 0,void 0,(function(){return o(this,(function(e){return S(n),[2]}))}))},cardTokenizationFailed:function(e){c.value=e,i.value=!1}}))},setTransactionToken:S,loadStoredPaymentInstruments:function(e){return a(void 0,void 0,void 0,(function(){var n,t;return o(this,(function(r){switch(r.label){case 0:return r.trys.push([0,2,,3]),[4,b({customer_id:e})];case 1:return n=r.sent().data,l.value=n.payment_instruments,[3,3];case 2:return t=r.sent(),c.value=t,[3,3];case 3:return[2]}}))}))},removePaymentInstrument:function(n,t){return a(void 0,void 0,void 0,(function(){var r,a;return o(this,(function(o){switch(o.label){case 0:return o.trys.push([0,2,,3]),[4,I({customer_id:n,payment_instrument_id:t})];case 1:return o.sent(),r=l.value.find((function(e){return e.payment_instrument_id===t})).id,l.value=l.value.filter((function(e){return e.payment_instrument_id!==t})),r===g()&&(e.value=u.CREDIT_CARD,E()),[3,3];case 2:return a=o.sent(),c.value=a,[3,3];case 3:return[2]}}))}))},setPaymentInstrument:function(n){S(n),e.value=u.SAVED_CARD},removeTransactionToken:E}},T=function(){var e=n(null,"useCkoKlarna-error");return{makePayment:function(n){var t=n.contextDataId,r=n.secure3d,i=n.savePaymentInstrument,s=n.reference,c=void 0===s?null:s,l=n.success_url,d=void 0===l?null:l,v=n.failure_url,m=void 0===v?null:v;return a(void 0,void 0,void 0,(function(){var n,a,s;return o(this,(function(o){switch(o.label){case 0:if(o.trys.push([0,2,,3]),!(n=g()))throw new Error("There is no payment token");return[4,w(D(u.KLARNA,{token:n,context_id:t,secure3d:r,reference:c,save_payment_instrument:i,success_url:d||window.location.origin+"/cko/payment-success",failure_url:m||window.location.origin+"/cko/payment-error"}))];case 1:if(a=o.sent(),E(),![200,202].includes(a.status))throw new Error(a.data.error_type);return[2,a];case 2:return s=o.sent(),E(),e.value=s,[2,null];case 3:return[2]}}))}))},initKlarnaForm:function(e,n,t){Klarna.Payments.init({client_token:n.metadata.details.client_token}),Klarna.Payments.load({container:(null==e?void 0:e.containerSelector)||s.klarna.containerSelector,payment_method_categories:n.metadata.details.payment_method_category.map((function(e){return e.identifier})),instance_id:t},n.metadata.session)},submitForm:function(e){return new Promise((function(n,t){try{Klarna.Payments.authorize({instance_id:e},{},(function(e){S(e.authorization_token),n(e)}))}catch(e){t(e)}}))},error:e}},K=function(e){localStorage.setItem(y(),JSON.stringify(e))},x=function(){var e=localStorage.getItem(y());return!!e&&JSON.parse(e)},O=function(){var e=n(null,"useCko-error"),r=n([],"useCko-availableMethods"),i=n(null,"useCko-contextId"),s=n(!1,"useCko-requiresCvv"),c=n(u.NOT_SELECTED,"useCko-selectedPaymentMethod"),l=R(c),d=l.initCardForm,v=l.makePayment,m=l.error,f=l.submitForm,y=l.setPaymentInstrument,p=l.removePaymentInstrument,h=l.loadStoredPaymentInstruments,_=l.removeTransactionToken,k=l.storedPaymentInstruments,b=l.submitDisabled,I=T(),P=I.initKlarnaForm,A=I.submitForm,g=I.makePayment,S=I.error,E=function(){var e=n(null,"useCkoPaypal-error");return{error:e,makePayment:function(n){var t=n.cartId,r=n.email,i=n.secure3d,s=n.contextDataId,c=void 0===s?null:s,l=n.savePaymentInstrument,d=void 0!==l&&l,v=n.success_url,m=void 0===v?null:v,f=n.failure_url,y=void 0===f?null:f,p=n.reference,h=void 0===p?null:p;return a(void 0,void 0,void 0,(function(){var n,a,s;return o(this,(function(o){switch(o.label){case 0:return o.trys.push([0,4,,5]),n=void 0,c?[3,2]:[4,C({reference:t,email:r})];case 1:n=o.sent(),o.label=2;case 2:return[4,w(D(u.PAYPAL,{secure3d:i,reference:h,context_id:c||n.data.id,save_payment_instrument:d,success_url:m||window.location.origin+"/cko/payment-success",failure_url:y||window.location.origin+"/cko/payment-error"}))];case 3:if(a=o.sent(),![200,202].includes(a.status))throw new Error(a.data.error_type);return[2,a];case 4:return s=o.sent(),e.value=s,[2,null];case 5:return[2]}}))}))}}}(),O=E.makePayment,F=E.error,z=function(){var e=n(null,"useCkoSofort-error");return{error:e,makePayment:function(n){var t=n.cartId,r=n.email,i=n.contextDataId,s=void 0===i?null:i,c=n.success_url,l=void 0===c?null:c,d=n.failure_url,v=void 0===d?null:d,m=n.reference,f=void 0===m?null:m;return a(void 0,void 0,void 0,(function(){var n,a,i;return o(this,(function(o){switch(o.label){case 0:return o.trys.push([0,4,,5]),n=void 0,s?[3,2]:[4,C({reference:t,email:r})];case 1:n=o.sent(),o.label=2;case 2:return[4,w(D(u.SOFORT,{reference:f,context_id:s||n.data.id,success_url:l||window.location.origin+"/cko/payment-success",failure_url:v||window.location.origin+"/cko/payment-error"}))];case 3:if(a=o.sent(),![200,202].includes(a.status))throw new Error(a.data.error_type);return[2,a];case 4:return i=o.sent(),e.value=i,[2,null];case 5:return[2]}}))}))}}}(),V=z.makePayment,L=z.error;return{availableMethods:r,error:e,selectedPaymentMethod:c,storedPaymentInstruments:k,submitDisabled:b,storedContextId:t((function(){return i.value})),isCvvRequired:t((function(){return s.value})),loadAvailableMethods:function(n,t){return a(void 0,void 0,void 0,(function(){var a,u;return o(this,(function(o){switch(o.label){case 0:return o.trys.push([0,2,,3]),[4,C({reference:n,email:t})];case 1:return a=o.sent(),r.value=function(){for(var e=0,n=0,t=arguments.length;n<t;n++)e+=arguments[n].length;var r=Array(e),a=0;for(n=0;n<t;n++)for(var o=arguments[n],i=0,u=o.length;i<u;i++,a++)r[a]=o[i];return r}(a.data.apms,[{name:"card"}]),i.value=a.data.id,a.data.payment_settings&&"cvv_required"in a.data.payment_settings&&(s.value=a.data.payment_settings.cvv_required),[2,a.data];case 2:return u=o.sent(),e.value=u,[2,null];case 3:return[2]}}))}))},initForm:function(e,n){if(void 0===e&&(e=null),void 0===n&&(n={}),!e||0!==Object.keys(e).length)for(var t=e&&Object.keys(e).length>0,a=0,o=r.value;a<o.length;a++){var u=o[a];if(!t||e[u.name]){var s=n[u.name];switch(u.name){case"card":d(s);break;case"klarna":P(s,u,i.value)}}}},submitCardForm:f,submitKlarnaForm:function(e){return A(e||i.value)},makePayment:function(n){var t=void 0===n?{}:n,r=t.cartId,l=void 0===r?null:r,d=t.email,f=void 0===d?null:d,y=t.contextDataId,p=void 0===y?null:y,h=t.success_url,_=void 0===h?null:h,k=t.failure_url,C=void 0===k?null:k,w=t.secure3d,b=void 0===w||w,I=t.cvv,P=void 0===I?null:I,A=t.reference,D=void 0===A?null:A;return a(void 0,void 0,void 0,(function(){var n,t,r;return o(this,(function(a){switch(a.label){case 0:if(!c.value)return e.value=new Error("Payment method not selected"),[2];if([u.CREDIT_CARD,u.SAVED_CARD].includes(c.value)){if(c.value===u.SAVED_CARD&&s.value&&!P)return e.value=new Error("CVV is required"),[2];n=v,t=m}else if(c.value===u.KLARNA)n=g,t=S;else if(c.value===u.PAYPAL)n=O,t=F;else{if(c.value!==u.SOFORT)return e.value=new Error("Not supported payment method"),[2];n=V,t=L}return[4,n({cartId:l,email:f,success_url:_,failure_url:C,secure3d:b,cvv:P,reference:D,contextDataId:p||i.value,savePaymentInstrument:x()})];case 1:return r=a.sent(),t.value&&(e.value=t.value),[2,r]}}))}))},setPaymentInstrument:y,setSavePaymentInstrument:K,loadSavePaymentInstrument:x,removePaymentInstrument:p,loadStoredPaymentInstruments:h,removeTransactionToken:_}};export{u as CkoPaymentType,p as getApiUrl,_ as getFramesStyles,v as getPublicKey,l as setChannel,d as setup,O as useCko};
 //# sourceMappingURL=index.es.js.map

lib/useCko.d.ts

@@ -1,11 +0,9 @@
-import { CardConfiguration } from './configuration';
+import { CardConfiguration, KlarnaConfiguration } from './configuration';
 interface PaymentMethods {
     card?: boolean;
     klarna?: boolean;
-    paypal?: boolean;
 }
 interface PaymentMethodsConfig {
     card?: CardConfiguration;
-    klarna?: any;
-    paypal?: any;
+    klarna?: KlarnaConfiguration;
 }
@@ -23,2 +21,3 @@ declare const useCko: () => {
     submitCardForm: () => Promise<any>;
+    submitKlarnaForm: (ctx?: any) => Promise<unknown>;
     makePayment: ({ cartId, email, contextDataId, success_url, failure_url, secure3d, cvv, reference }?: {
@@ -25,0 +24,0 @@ cartId?: any;

nuxt/index.js

@@ -6,3 +6,3 @@ import path from 'path';
   cc: true,
-  klarna: false
+  klarna: true
 };
@@ -9,0 +9,0 @@

package.json

 {
   "name": "@vue-storefront/checkout-com",
-  "version": "0.0.8-lc.9",
+  "version": "0.0.8-lc.10",
   "sideEffects": false,
@@ -5,0 +5,0 @@ "main": "lib/index.cjs.js",

README.md

@@ -76,10 +76,11 @@ # Checkout.com Nuxt module
 const { isAuthenticated, user } = useUser();
-const { 
-    initForm, 
-    loadAvailableMethods, 
-    availableMethods, 
-    submitDisabled, 
-    storedPaymentInstruments, 
-    loadStoredPaymentInstruments, 
-    error 
+const {
+    initForm,
+    loadAvailableMethods,
+    availableMethods,
+    submitDisabled,
+    storedPaymentInstruments,
+    loadStoredPaymentInstruments,
+    submitKlarnaForm,
+    error
 } = useCko();
@@ -125,4 +126,8 @@ ```
 ```
-5. Execute `initForm`. It mounts different payment handlers depends on arguments (check details below). If you are calling it after load component - **use `onMounted` to make sure DOM Element where it should be mounted already exists**. Card's Frames will be mounted in DOM element with class `card-frame`. Caution: PayPal and Sofort do not need any SDK, we just redirect to their's website like in 3DS redirection process for credit cards. So if you are interested only in this payment method you could omit this step.
+5. Execute `initForm`. It mounts different payment handlers depends on arguments (check details below). If you are calling it after load component - **use `onMounted` to make sure DOM Element where it should be mounted already exists**.   
 
+- Card's Frames will be mounted in DOM element with class `card-frame`.
+- PayPal & Sofort does not need any SDK, we just redirect to their's website like in 3DS redirection process for credit cards. So if you are interested only in this payment method you could omit this step.
+- Klarna by default will be mounted in container with id `klarna_container`
+
 ```ts
@@ -164,3 +169,3 @@ interface PaymentMethods {
 6. When `submitDisabled` changes to false - it means provided Card's data is proper and you could allow your user go forward. Card's token will be stored in sessionStorage for a moment.
-7. Call `submitCardForm` function on card form submit (only for Credit Card method - not necessary for Stored Payment Method). It requires mounted `Frames` instance as it uses `Frames.submitCard()` under the hood.
+7. Call `submitCardForm` function on card form submit (only for Credit Card method - not necessary for Stored Payment Method). It requires mounted `Frames` instance as it uses `Frames.submitCard()` under the hood. If you are using **Klarna** please call `submitKlarnaForm` (it returns promise) to authorize payment.
 8. Then you need to make Payment
@@ -269,3 +274,3 @@ `error` - contains error message from the response if you do not use 3ds or we have some server related issues. If the user just removed stored token from sessionStorage it will have `There is no payment token` inside.
     SAVED_CARD,
-    KLARNA, // Not supported yet
+    KLARNA,
     PAYPAL,
@@ -368,2 +373,14 @@ SOFORT
 
+## Customizing Klarna
+In `nuxt.config.js` and `initForm` method call you can configure Klarna component.
+E.g:
+```js
+['@vue-storefront/checkout-com/nuxt', {
+    // ...
+    klarna: {
+        containerSelector: '#my-klarna-div'
+    }
+}]
+```
+
 ## Fetching available payment methods
@@ -370,0 +387,0 @@ At first, you have to save billing address in your backend to do that. You can do it just after `setBillingDetails` call from `Creadit card component` step. Then you can easily use `loadAvailableMethods` method. It requires reference as the first argument - which is cartId. E.g:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136376

increased by13.51%

Number of package files

21

increased by5%

Lines of code

488

increased by8.44%

Number of lines in readme file

468

increased by3.77%

No dependency changes