@commercetools/checkout-browser-sdk - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

browser/sdk.js

@@ -1,1 +0,1 @@
-!function(){var e;let o,t={};class n extends Error{constructor(e){super(`Missing field in the configuration: ${e}`),Object.setPrototypeOf(this,n.prototype)}}let r=()=>{if(!t.host)throw new n("host");return t.host},c=()=>i()?r():window.location.origin,i=()=>!!t.iframe,l=()=>t,a=(e,o=!1)=>(o&&(t={}),t={iframe:"iframe"in e?!!e.iframe:t.iframe,applicationId:"applicationId"in e?e.applicationId:t.applicationId,callbackUrl:"callbackUrl"in e?e.callbackUrl:t.callbackUrl,sellerId:"sellerId"in e?e.sellerId:t.sellerId,accessToken:"accessToken"in e?e.accessToken:t.accessToken,applicationKey:"applicationKey"in e?e.applicationKey:t.applicationKey,returnUrl:"returnUrl"in e?e.returnUrl:t.returnUrl,cartId:"cartId"in e?e.cartId:t.cartId,locale:"locale"in e?e.locale:t.locale,projectKey:"projectKey"in e?e.projectKey:t.projectKey,storeKey:"storeKey"in e?e.storeKey:t.storeKey,host:"host"in e?e.host:t.host,skipShipping:"skipShipping"in e?e.skipShipping:t.skipShipping,styles:"styles"in e?e.styles:t.styles,languageOverrides:"languageOverrides"in e?e.languageOverrides:t.languageOverrides,forms:"forms"in e?e.forms:t.forms,currencyLocale:"currencyLocale"in e?e.currencyLocale:t.currencyLocale,showTaxes:"showTaxes"in e?e.showTaxes:t.showTaxes}),s="commercetools-checkout",d=document.body.style.overflow,u=()=>{let e=document.querySelectorAll("[data-ctc]");return e.length>0&&(e[0]instanceof HTMLDivElement||e[0]instanceof HTMLSpanElement)?e[0]:null};(e||(e={})).InitCheckout="init_checkout";let p=()=>{let e=document.getElementById(s);e&&(document.body.style.overflow=d,e.remove());let t=u();t&&(t.innerHTML=""),o&&window.removeEventListener("message",o)},y=e=>{o=({origin:o,data:t})=>{if(o===c()){if((null==t?void 0:t.code)==="checkout_cancelled"&&p(),(null==t?void 0:t.code)==="checkout_loaded"){let o=Object.assign({},l());delete o.callbackUrl,delete o.returnUrl,(e?e.contentWindow:window).postMessage({code:"init_checkout",payload:o},c())}if((null==t?void 0:t.code)==="checkout_completed"){var n;p();let{id:e}=(null==t?void 0:null===(n=t.payload)||void 0===n?void 0:n.order)||{},{callbackUrl:o,returnUrl:r}=l();r?window.location.href=`${r}?orderId=${e}`:o&&(window.location.href=`${o}?orderId=${e}`)}}},window.addEventListener("message",o)},h=()=>{let e=document.createElement("iframe");return y(e),e.src=r(),e.title="Checkout",e.setAttribute("id",s),e.setAttribute("style","display: none; top: 0; position: fixed; height: 100%; width: 100%; z-index: 100000;"),e.onload=()=>{e.scrollIntoView({behavior:"smooth",block:"center"})},document.body.appendChild(e),document.body.style.overflow="hidden",e},f=async()=>{if(p(),y(),!u()){let e=document.createElement("div");e.setAttribute("id",s),document.body.appendChild(e),document.body.style.overflow="hidden"}if("object"==typeof window.commercetoolsCheckout&&"function"==typeof window.commercetoolsCheckout.render)window.commercetoolsCheckout.render();else{let e=document.createElement("script");e.src=`${r()}/main.js`,document.head.appendChild(e)}},w=e=>o=>{if(!e||!o)return!1;if("*"===e||o===e)return!0;let t=e.split(":"),n=o.split(":");return!!n[0]&&t[0]===n[0]&&w(t.slice(1).join(":"))(n.slice(1).join(":"))},m={},g=(e,o)=>{let t=`${e}_${Math.round(1e15*Math.random())}`,n=({origin:t,data:n})=>{if(t!==c()||"commercetoolsCheckout"!==n.source)return;let r=n||{};w(e)(r.type)&&o(r)};return window.addEventListener("message",n),m[t]=n,t},k=e=>window.removeEventListener("message",m[e]),b={},v=e=>{[["info","onInfo"],["warn","onWarn"],["error","onError"]].forEach(o=>{let t=o[0],n=o[1];"function"==typeof e[n]&&(b[n]&&k(b[n]),b[n]=g(`${t}:*`,e[n]))})},I=e=>{[["info","logInfo"],["warn","logWarn"],["error","logError"]].forEach(o=>{let t=o[0],n=o[1];!0===e[n]&&(b[n]&&k(b[n]),b[n]=g(`${t}:*`,function(e){console[t]("[ctc]",e.type,e.code,e.payload||{})}))})},E={checkout:e=>{a(e),i()?(document.getElementById(s)||h()).style.display="block":f()},init:e=>{if("object"!=typeof e)throw Error("Bad config, please review docs");"object"==typeof e.checkoutConfig&&a(e.checkoutConfig),v(e),I(e)},subscribe:g,unsubscribe:k};function j(e){return E[e]&&E[e].apply(null,Array.prototype.slice.call(arguments,1))}window.ctc&&Array.isArray(window.ctc.queue)&&window.ctc.queue.forEach(e=>j.apply(null,e)),window.ctc&&Array.isArray(window.ctc.q)&&window.ctc.q.forEach(e=>j.apply(null,e)),window.ctc=j}();
+!function(){var e;let o,n={};class t extends Error{constructor(e){super(`Missing field in the configuration: ${e}`),Object.setPrototypeOf(this,t.prototype)}}let r=()=>{if(!n.region&&!n.host)throw new t("region");return n.region?`https://app.checkout.${n.region}.commercetools.com`:n.host},i=()=>n,c=(e,o=!1)=>(o&&(n={}),n={paymentButtonSelector:"paymentButtonSelector"in e?e.paymentButtonSelector:n.paymentButtonSelector,skipConfirmationPages:"skipConfirmationPages"in e?e.skipConfirmationPages:n.skipConfirmationPages,accessToken:"accessToken"in e?e.accessToken:n.accessToken,applicationId:"applicationId"in e?e.applicationId:n.applicationId,applicationKey:"applicationKey"in e?e.applicationKey:n.applicationKey,callbackUrl:"callbackUrl"in e?e.callbackUrl:n.callbackUrl,returnUrl:"returnUrl"in e?e.returnUrl:n.returnUrl,sellerId:"sellerId"in e?e.sellerId:n.sellerId,cartId:"cartId"in e?e.cartId:n.cartId,host:"host"in e?e.host:n.host,paymentReference:"paymentReference"in e?e.paymentReference:n.paymentReference,locale:"locale"in e?e.locale:n.locale,projectKey:"projectKey"in e?e.projectKey:n.projectKey,storeKey:"storeKey"in e?e.storeKey:n.storeKey,skipShipping:"skipShipping"in e?e.skipShipping:n.skipShipping,styles:"styles"in e?e.styles:n.styles,languageOverrides:"languageOverrides"in e?e.languageOverrides:n.languageOverrides,forms:"forms"in e?e.forms:n.forms,currencyLocale:"currencyLocale"in e?e.currencyLocale:n.currencyLocale,showTaxes:"showTaxes"in e?e.showTaxes:n.showTaxes,sessionId:"sessionId"in e?e.sessionId:n.sessionId,region:"region"in e?e.region:n.region}),l="commercetools-checkout",a=document.body.style.overflow,s=()=>{let e=document.querySelectorAll("[data-ctc]");return e.length>0&&(e[0]instanceof HTMLDivElement||e[0]instanceof HTMLSpanElement)?e[0]:null};(e||(e={})).InitCheckout="init_checkout";let d=()=>{let e=document.getElementById(l);e&&(document.body.style.overflow=a,e.remove());let n=s();n&&(n.innerHTML=""),o&&window.removeEventListener("message",o)},p=()=>{o=({origin:e,data:o})=>{if(e===window.location.origin){if((null==o?void 0:o.code)==="checkout_cancelled"&&d(),(null==o?void 0:o.code)==="checkout_loaded"){let e=Object.assign({},i());window.postMessage({code:"init_checkout",payload:e},window.location.origin)}if((null==o?void 0:o.code)==="checkout_completed"){var n;d();let{id:e}=(null==o?void 0:null===(n=o.payload)||void 0===n?void 0:n.order)||{},{callbackUrl:t,returnUrl:r}=i();r?window.location.href=`${r}?orderId=${e}`:t&&(window.location.href=`${t}?orderId=${e}`)}}},window.addEventListener("message",o)},u=async()=>{if(d(),p(),!s()){let e=document.createElement("div");e.setAttribute("id",l),document.body.appendChild(e),document.body.style.overflow="hidden"}if("object"==typeof window.commercetoolsCheckout&&"function"==typeof window.commercetoolsCheckout.render)window.commercetoolsCheckout.render();else{let e=document.createElement("script");e.src=`${r()}/main.js`,document.head.appendChild(e)}},y=e=>o=>{if(!e||!o)return!1;if("*"===e||o===e)return!0;let n=e.split(":"),t=o.split(":");return!!t[0]&&n[0]===t[0]&&y(n.slice(1).join(":"))(t.slice(1).join(":"))},f={},m=(e,o)=>{let n=`${e}_${Math.round(1e15*Math.random())}`,t=({origin:n,data:t})=>{if(n!==window.location.origin||"commercetoolsCheckout"!==t.source)return;let r=t||{};y(e)(r.type)&&o(r)};return window.addEventListener("message",t),f[n]=t,n},w=e=>window.removeEventListener("message",f[e]),h={},g=e=>{[["info","onInfo"],["warn","onWarn"],["error","onError"]].forEach(o=>{let n=o[0],t=o[1];"function"==typeof e[t]&&(h[t]&&w(h[t]),h[t]=m(`${n}:*`,e[t]))})},k=e=>{[["info","logInfo"],["warn","logWarn"],["error","logError"]].forEach(o=>{let n=o[0],t=o[1];!0===e[t]&&(h[t]&&w(h[t]),h[t]=m(`${n}:*`,function(e){console[n]("[ctc]",e.type,e.code,e.payload||{})}))})},v={checkout:e=>{c(e),u()},init:e=>{if("object"!=typeof e)throw Error("Bad config, please review docs");"object"==typeof e.checkoutConfig&&c(e.checkoutConfig),g(e),k(e)},subscribe:m,unsubscribe:w};function I(e){return v[e]&&v[e].apply(null,Array.prototype.slice.call(arguments,1))}window.ctc&&Array.isArray(window.ctc.queue)&&window.ctc.queue.forEach(e=>I.apply(null,e)),window.ctc&&Array.isArray(window.ctc.q)&&window.ctc.q.forEach(e=>I.apply(null,e)),window.ctc=I}();

CHANGELOG.md

 # @commercetools/checkout-browser-sdk
 
+## 0.6.0
+
+### Minor Changes
+
+- 63debc3: During initialization, host parameter has been replaced by region, while returnUrl has become deprecated
+- 02e4164: Added paymentReference to enable the payment confirmation flow
+- d56f742: SDK now accepts a `sessionId`, deprecates `accessToken`, `applicationKey` and `cartId`.
+
 ## 0.5.0
@@ -4,0 +12,0 @@

dist/checkout.d.ts

 import { CheckoutData } from './services/config';
-export declare const addMessageEventListener: (iframe?: HTMLIFrameElement) => void;
+export declare const addMessageEventListener: () => void;
 export type Checkout = (checkoutData: CheckoutData) => void;
@@ -4,0 +4,0 @@ export declare const checkout: Checkout;

dist/checkout.js

@@ -8,3 +8,2 @@ "use strict";
 let listener;
-const IFRAME_STYLES = 'display: none; top: 0; position: fixed; height: 100%; width: 100%; z-index: 100000;';
 const originalOverflow = document.body.style.overflow;
@@ -36,6 +35,6 @@ const getEmbeddedContainer = () => {
 };
-const addMessageEventListener = (iframe) => {
+const addMessageEventListener = () => {
     listener = ({ origin, data }) => {
         var _a;
-        if (origin !== (0, config_1.getInterlocutor)())
+        if (origin !== window.location.origin)
             return;
@@ -47,6 +46,3 @@ if ((data === null || data === void 0 ? void 0 : data.code) === 'checkout_cancelled') {
             const checkoutConfig = Object.assign({}, (0, config_1.getCheckoutConfig)());
-            delete checkoutConfig.callbackUrl;
-            delete checkoutConfig.returnUrl;
-            const dest = iframe ? iframe.contentWindow : window;
-            dest.postMessage({ code: PostMessageCodes.InitCheckout, payload: checkoutConfig }, (0, config_1.getInterlocutor)());
+            window.postMessage({ code: PostMessageCodes.InitCheckout, payload: checkoutConfig }, window.location.origin);
         }
@@ -68,18 +64,2 @@ if ((data === null || data === void 0 ? void 0 : data.code) === 'checkout_completed') {
 exports.addMessageEventListener = addMessageEventListener;
-const createModalIframe = () => {
-    // create the iframe and append to the document body
-    const iframe = document.createElement('iframe');
-    (0, exports.addMessageEventListener)(iframe);
-    iframe.src = (0, config_1.getAppHost)();
-    iframe.title = 'Checkout';
-    iframe.setAttribute('id', MODAL_ID);
-    iframe.setAttribute('style', IFRAME_STYLES);
-    iframe.onload = () => {
-        // scroll to the iframe
-        iframe.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    };
-    document.body.appendChild(iframe);
-    document.body.style.overflow = 'hidden';
-    return iframe;
-};
 const createModal = async () => {
@@ -106,11 +86,5 @@ closeModal();
     (0, config_1.updateCheckoutConfig)(checkoutData);
-    if ((0, config_1.getIsIframe)()) {
-        const modal = document.getElementById(MODAL_ID) || createModalIframe();
-        modal.style.display = 'block';
-    }
-    else {
-        createModal();
-    }
+    createModal();
 };
 exports.checkout = checkout;
 //# sourceMappingURL=checkout.js.map

dist/services/config.d.ts

@@ -93,23 +93,32 @@ type Definitions = Record<string, string> | {
 export type CheckoutData = {
+    /** @deprecated use sessionId instead */
     accessToken?: string;
-    /** @deprecated use applicationKey instead */
+    /** @deprecated use sessionId instead */
     applicationId?: string;
+    /** @deprecated use sessionId instead */
     applicationKey?: string;
-    /** @deprecated use returnUrl instead */
+    /** @deprecated */
     callbackUrl?: string;
+    /** @deprecated */
     returnUrl?: string;
+    /** @deprecated use sessionId instead */
     cartId?: string;
-    iframe?: boolean;
-    locale?: string;
     /** @deprecated use projectKey instead */
     sellerId?: string;
+    /** @deprecated use region instead */
+    host?: string;
+    currencyLocale?: string;
+    forms?: Forms;
+    languageOverrides?: Definitions;
+    locale?: string;
+    paymentButtonSelector?: string;
+    paymentReference?: string;
     projectKey?: string;
+    region?: string;
+    sessionId?: string;
+    showTaxes?: boolean;
+    skipConfirmationPages?: string;
+    skipShipping?: boolean;
     storeKey?: string;
-    skipShipping?: boolean;
-    host?: string;
     styles?: Record<string, string>;
-    languageOverrides?: Definitions;
-    forms?: Forms;
-    currencyLocale?: string;
-    showTaxes?: boolean;
 };
@@ -120,6 +129,4 @@ export declare class MissingConfigurationField extends Error {
 export declare const getAppHost: () => string;
-export declare const getInterlocutor: () => string;
-export declare const getIsIframe: () => boolean;
 export declare const getCheckoutConfig: () => CheckoutData;
 export declare const updateCheckoutConfig: (newConfig: CheckoutData, reset?: boolean) => CheckoutData;
 export {};

dist/services/config.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateCheckoutConfig = exports.getCheckoutConfig = exports.getIsIframe = exports.getInterlocutor = exports.getAppHost = exports.MissingConfigurationField = void 0;
+exports.updateCheckoutConfig = exports.getCheckoutConfig = exports.getAppHost = exports.MissingConfigurationField = void 0;
 const fieldComponentTypes = [
@@ -26,12 +26,10 @@ 'text',
 const getAppHost = () => {
-    if (!checkoutConfig.host) {
-        throw new MissingConfigurationField('host');
+    if (!checkoutConfig.region && !checkoutConfig.host) {
+        throw new MissingConfigurationField('region');
     }
-    return checkoutConfig.host;
+    return checkoutConfig.region
+        ? `https://app.checkout.${checkoutConfig.region}.commercetools.com`
+        : checkoutConfig.host;
 };
 exports.getAppHost = getAppHost;
-const getInterlocutor = () => ((0, exports.getIsIframe)() ? (0, exports.getAppHost)() : window.location.origin);
-exports.getInterlocutor = getInterlocutor;
-const getIsIframe = () => !!checkoutConfig.iframe;
-exports.getIsIframe = getIsIframe;
 const getCheckoutConfig = () => checkoutConfig;
@@ -43,17 +41,25 @@ exports.getCheckoutConfig = getCheckoutConfig;
     checkoutConfig = {
-        //not documented
-        iframe: 'iframe' in newConfig ? !!newConfig.iframe : checkoutConfig.iframe,
+        // not documented:
+        paymentButtonSelector: 'paymentButtonSelector' in newConfig
+            ? newConfig.paymentButtonSelector
+            : checkoutConfig.paymentButtonSelector,
+        skipConfirmationPages: 'skipConfirmationPages' in newConfig
+            ? newConfig.skipConfirmationPages
+            : checkoutConfig.skipConfirmationPages,
         // deprecated
+        accessToken: 'accessToken' in newConfig ? newConfig.accessToken : checkoutConfig.accessToken,
         applicationId: 'applicationId' in newConfig ? newConfig.applicationId : checkoutConfig.applicationId,
+        applicationKey: 'applicationKey' in newConfig ? newConfig.applicationKey : checkoutConfig.applicationKey,
         callbackUrl: 'callbackUrl' in newConfig ? newConfig.callbackUrl : checkoutConfig.callbackUrl,
+        returnUrl: 'returnUrl' in newConfig ? newConfig.returnUrl : checkoutConfig.returnUrl,
         sellerId: 'sellerId' in newConfig ? newConfig.sellerId : checkoutConfig.sellerId,
+        cartId: 'cartId' in newConfig ? newConfig.cartId : checkoutConfig.cartId,
+        host: 'host' in newConfig ? newConfig.host : checkoutConfig.host,
         // documented
-        accessToken: 'accessToken' in newConfig ? newConfig.accessToken : checkoutConfig.accessToken,
-        applicationKey: 'applicationKey' in newConfig ? newConfig.applicationKey : checkoutConfig.applicationKey,
-        returnUrl: 'returnUrl' in newConfig ? newConfig.returnUrl : checkoutConfig.returnUrl,
-        cartId: 'cartId' in newConfig ? newConfig.cartId : checkoutConfig.cartId,
+        paymentReference: 'paymentReference' in newConfig
+            ? newConfig.paymentReference
+            : checkoutConfig.paymentReference,
         locale: 'locale' in newConfig ? newConfig.locale : checkoutConfig.locale,
         projectKey: 'projectKey' in newConfig ? newConfig.projectKey : checkoutConfig.projectKey,
         storeKey: 'storeKey' in newConfig ? newConfig.storeKey : checkoutConfig.storeKey,
-        host: 'host' in newConfig ? newConfig.host : checkoutConfig.host,
         skipShipping: 'skipShipping' in newConfig ? newConfig.skipShipping : checkoutConfig.skipShipping,
@@ -67,2 +73,4 @@ styles: 'styles' in newConfig ? newConfig.styles : checkoutConfig.styles,
         showTaxes: 'showTaxes' in newConfig ? newConfig.showTaxes : checkoutConfig.showTaxes,
+        sessionId: 'sessionId' in newConfig ? newConfig.sessionId : checkoutConfig.sessionId,
+        region: 'region' in newConfig ? newConfig.region : checkoutConfig.region,
     };
@@ -69,0 +77,0 @@ return checkoutConfig;

dist/subscriptions.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.unsubscribe = exports.subscribe = exports.filterMessages = exports.matches = exports.typeMatches = void 0;
-const config_1 = require("./services/config");
 const typeMatches = (pattern) => (messageType) => {
@@ -25,3 +24,3 @@ if (!pattern || !messageType)
     const listener = ({ origin, data }) => {
-        if (origin !== (0, config_1.getInterlocutor)())
+        if (origin !== window.location.origin)
             return;
@@ -28,0 +27,0 @@ if (data.source !== 'commercetoolsCheckout')

package.json

 {
   "private": false,
   "name": "@commercetools/checkout-browser-sdk",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "main": "dist/index.js",
@@ -11,4 +11,4 @@ "types": "dist/index.d.ts",
   "dependencies": {
-    "@swc/helpers": "0.5.3"
+    "@swc/helpers": "0.5.10"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

33296

decreased by-3.01%

Lines of code

437

decreased by-2.67%

Dependency changes

• + Added@swc/helpers@0.5.10(transitive)

• - Removed@swc/helpers@0.5.3(transitive)

• Updated@swc/helpers@0.5.10