@dintero/checkout-web-sdk 0.0.15 → 0.3.0

package/dist/{src → declarations}/src/subscribe.d.ts

@@ -1,5 +1,5 @@
-import { CheckoutEvents, InternalCheckoutEvents, SessionEvent } from "./checkout";
-import { DinteroCheckoutInstance } from "./dintero-checkout-web-sdk";
+import { CheckoutEvents, InternalCheckoutEvents, SessionEvent, SessionValidationCallback } from "./checkout";
+import { DinteroCheckoutInstance } from ".";
 /**
  * Unsubscribe handler from event(s).
  */
@@ -21,10 +21,18 @@ export declare type Subscription = {
  * Post a SessionLock-event to the checkout iframe.
  */
 export declare const postSessionLock: (iframe: HTMLIFrameElement, sid: string) => void;
+/**
+ * Post the validation result to the checkout iframe
+ */
+export declare const postValidationResult: (iframe: HTMLIFrameElement, sid: string, result: SessionValidationCallback) => void;
 /**
  * Post RefreshSession-event to the checkout iframe.
  */
 export declare const postSessionRefresh: (iframe: HTMLIFrameElement, sid: string) => void;
+/**
+ * Post setActivePaymentProductType-event to the checkout iframe.
+ */
+export declare const postActivePaymentProductType: (iframe: HTMLIFrameElement, sid: string, paymentProductType?: string) => void;
 /**
  * Subscribe to events from an iframe given a handler and a set
  * of event types.

package/dist/{src → declarations}/src/url.d.ts

@@ -11,5 +11,6 @@ export interface SessionUrlOptions {
     endpoint: string;
     language: string | undefined;
     ui?: "fullscreen" | "inline";
+    shouldCallValidateSession: boolean;
 }
 export declare const getSessionUrl: (options: SessionUrlOptions) => string;

package/dist/dintero-checkout-web-sdk.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

package/dist/dintero-checkout-web-sdk.cjs.dev.js

@@ -0,0 +1,475 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('native-promise-only');
+
+var pkg = {
+	name: "@dintero/checkout-web-sdk",
+	version: "0.0.0-development",
+	description: "Dintero Checkout SDK for web frontends",
+	main: "dist/dintero-checkout-web-sdk.cjs.js",
+	module: "dist/dintero-checkout-web-sdk.esm.js",
+	"umd:main": "dist/dintero-checkout-web-sdk.umd.min.js",
+	unpkg: "dist/dintero-checkout-web-sdk.umd.min.js",
+	types: "dist/dintero-checkout-web-sdk.cjs.d.ts",
+	preconstruct: {
+		umdName: "dintero"
+	},
+	scripts: {
+		build: "preconstruct build",
+		test: "karma start",
+		"semantic-release": "semantic-release"
+	},
+	"private": false,
+	repository: {
+		type: "git",
+		url: "https://github.com/Dintero/Dintero.Checkout.Web.SDK.git"
+	},
+	homepage: "https://github.com/Dintero/Dintero.Checkout.Web.SDK#readme",
+	author: "Sven Nicolai Viig <sven@dintero.com> (http://dintero.com)",
+	license: "MIT",
+	bugs: {
+		url: "https://github.com/Dintero/Dintero.Checkout.Web.SDK/issues"
+	},
+	devDependencies: {
+		"@babel/preset-env": "^7.14.1",
+		"@babel/preset-typescript": "^7.13.0",
+		"@preconstruct/cli": "^2.1.0",
+		"@semantic-release/git": "^10.0.1",
+		chai: "^4.2.0",
+		karma: "^6.3.14",
+		"karma-chai": "^0.1.0",
+		"karma-chrome-launcher": "^3.1.0",
+		"karma-mocha": "^2.0.1",
+		"karma-typescript": "^5.0.3",
+		mocha: "^8.1.1",
+		prettier: "^1.19.1",
+		puppeteer: "^2.1.0",
+		rollup: "^1.30.1",
+		"semantic-release": "^19.0.2",
+		sinon: "^8.1.1",
+		typescript: "^4.2.4"
+	},
+	dependencies: {
+		"native-promise-only": "^0.8.1"
+	}
+};
+
+let CheckoutEvents;
+
+(function (CheckoutEvents) {
+  CheckoutEvents["SessionNotFound"] = "SessionNotFound";
+  CheckoutEvents["SessionLoaded"] = "SessionLoaded";
+  CheckoutEvents["SessionUpdated"] = "SessionUpdated";
+  CheckoutEvents["SessionCancel"] = "SessionCancel";
+  CheckoutEvents["SessionPaymentOnHold"] = "SessionPaymentOnHold";
+  CheckoutEvents["SessionPaymentAuthorized"] = "SessionPaymentAuthorized";
+  CheckoutEvents["SessionPaymentError"] = "SessionPaymentError";
+  CheckoutEvents["SessionLocked"] = "SessionLocked";
+  CheckoutEvents["SessionLockFailed"] = "SessionLockFailed";
+  CheckoutEvents["ActivePaymentProductType"] = "ActivePaymentProductType";
+  CheckoutEvents["ValidateSession"] = "ValidateSession";
+})(CheckoutEvents || (CheckoutEvents = {}));
+
+let InternalCheckoutEvents;
+
+(function (InternalCheckoutEvents) {
+  InternalCheckoutEvents["HeightChanged"] = "HeightChanged";
+  InternalCheckoutEvents["LanguageChanged"] = "LanguageChanged";
+})(InternalCheckoutEvents || (InternalCheckoutEvents = {}));
+
+/**
+ * Wraps window.location.assign()
+ */
+
+const windowLocationAssign = url => {
+  window.location.assign(url);
+};
+/**
+ * Get the url for the session./yarn-error.log
+.DS_Store
+ */
+
+const getSessionUrl = options => {
+  const {
+    sid,
+    endpoint,
+    language,
+    ui,
+    shouldCallValidateSession
+  } = options;
+
+  if (!endpoint) {
+    throw new Error("Invalid endpoint");
+  } // Compose url for view session endpoint with optional language parameter.
+
+
+  let languageParam = language ? `language=${language}` : "";
+  let uiParam = ui ? `ui=${ui}` : "";
+  let sdk = `sdk=${pkg.version}`;
+  let validate = shouldCallValidateSession ? `client_side_validation=true` : undefined;
+  const params = [languageParam, uiParam, sdk, validate].filter(x => x).join("&");
+  return `${endpoint}/v1/view/${sid}${params ? "?" + params : ""}`;
+};
+
+/**
+ * Creates an iframe and adds it to the container.
+ *
+ * Returns a promise that resolves to the iframe when the iframe has loaded.
+ * Rejects the promise if there is a problem loading the iframe.
+ */
+const createIframeAsync = (container, endpoint, url) => {
+  if (!container || !container.appendChild) {
+    throw new Error("Invalid container");
+  }
+
+  const iframe = document.createElement("iframe"); // No border, transparent and stretch to 100% of the container width.
+
+  iframe.setAttribute("frameborder", "0");
+  iframe.setAttribute("allowTransparency", "true");
+  iframe.setAttribute("style", "width:100%; height:0;"); // TODO: Get this to work as expected, might be tricky with current
+  // tests since they will require the csp to be "unsafe-inline".
+  // The server needs to add the same property in the Content Security
+  // Policy headers in the response for this to work. A CSP header set by
+  //  a meta tag in the iframe target will not be detected as a valid
+  // CSP from the iframe host.
+  // Content Security Policy, should be limited to "endpoint".
+  // iframe.setAttribute("csp", `default-src  ${endpoint}`);
+  // Apply extra restrictions to the content in the iframe.
+  // allow popups is needed to open terms in new window
+
+  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-same-origin allow-popups"); // The download priority of the resource in the <iframe>'s src attribute.
+
+  iframe.setAttribute("importance", "high"); // Set the iframe source to the url.
+
+  iframe.setAttribute("src", url); // Resolve or reject promise when iframe loads.
+  // // Add iframe to the container.
+  // container.appendChild(iframe);
+
+  return {
+    iframe,
+    initiate: async () => {
+      return new Promise((resolve, reject) => {
+        iframe.onload = () => resolve();
+
+        iframe.onerror = () => reject();
+
+        container.appendChild(iframe);
+      });
+    }
+  };
+};
+
+/**
+ * Unsubscribe handler from event(s).
+ */
+
+/**
+ * Post a message acknowledgement to the checkout iframe.
+ */
+const postAck = (iframe, event) => {
+  if (event.data.mid && iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      ack: event.data.mid
+    }, event.origin || "*");
+  }
+};
+/**
+ * Post a SessionLock-event to the checkout iframe.
+ */
+
+
+const postSessionLock = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "LockSession",
+      sid
+    }, "*");
+  }
+};
+/**
+ * Post the validation result to the checkout iframe
+ */
+
+const postValidationResult = (iframe, sid, result) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "ValidationResult",
+      sid,
+      ...result
+    }, "*");
+  }
+};
+/**
+ * Post RefreshSession-event to the checkout iframe.
+ */
+
+const postSessionRefresh = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "RefreshSession",
+      sid
+    }, "*");
+  }
+};
+/**
+ * Post setActivePaymentProductType-event to the checkout iframe.
+ */
+
+const postActivePaymentProductType = (iframe, sid, paymentProductType) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "SetActivePaymentProductType",
+      sid,
+      payment_product_type: paymentProductType
+    }, "*");
+  }
+};
+/**
+ * Subscribe to events from an iframe given a handler and a set
+ * of event types.
+ */
+
+const subscribe = options => {
+  const {
+    sid,
+    endpoint,
+    handler,
+    eventTypes,
+    checkout
+  } = options; // Wrap event handler in a function that checks for correct origin and
+  // filters on event type(s) in the event data.
+
+  const wrappedHandler = event => {
+    const correctOrigin = event.origin === endpoint;
+    const correctWindow = event.source === checkout.iframe.contentWindow;
+    const correctSid = event.data && event.data.sid === sid;
+    const correctMessageType = eventTypes.indexOf(event.data && event.data.type) !== -1;
+
+    if (correctOrigin && correctWindow && correctSid && correctMessageType) {
+      postAck(checkout.iframe, event);
+      handler(event.data, checkout);
+    }
+  }; // Add event listener to the iframe.
+
+
+  window.addEventListener("message", wrappedHandler, false); // Function to remove the event listener from the iframe.
+
+  const unsubscribe = () => {
+    window.removeEventListener("message", wrappedHandler, false);
+  }; // Return object with unsubscribe function.
+
+
+  return {
+    unsubscribe
+  };
+};
+
+/**
+ * An event handler that navigates to the href in the event.
+ */
+const followHref = event => {
+  if (event.href) {
+    windowLocationAssign(event.href);
+  }
+};
+/**
+ * An event handler that sets height of the iframe.
+ */
+
+
+const setIframeHeight = (event, checkout) => {
+  if (event.height || event.height === 0) {
+    checkout.iframe.setAttribute("style", `width:100%; height:${event.height}px;`);
+  }
+};
+
+const setLanguage = (event, checkout) => {
+  if (event.language) {
+    checkout.language = event.language;
+  }
+};
+
+const handleWithResult = (sid, endpoint, handler) => {
+  return (event, checkout) => {
+    const eventKeys = ["sid", "merchant_reference", "transaction_id", "error"];
+    const pairs = eventKeys.map(key => [key, event[key]]);
+
+    if (event.type === CheckoutEvents.SessionCancel && !event.error) {
+      pairs.push(["error", "cancelled"]);
+    }
+
+    pairs.push(["language", checkout.language]);
+    pairs.push(["sdk", pkg.version]);
+    const urlQuery = pairs.filter(([key, value]) => value).map(([key, value]) => `${key}=${value}`).join("&");
+    checkout.iframe.setAttribute("src", `${endpoint}/embedResult/?${urlQuery}`);
+    handler(event, checkout);
+  };
+};
+/**
+ * Show a dintero payment session in an embedded iframe.
+ */
+
+
+const embed = async options => {
+  const {
+    container,
+    sid,
+    language,
+    endpoint = "https://checkout.dintero.com",
+    onSession,
+    onSessionCancel,
+    onPayment,
+    onPaymentAuthorized,
+    onPaymentError,
+    onSessionNotFound,
+    onSessionLocked,
+    onSessionLockFailed,
+    onActivePaymentType,
+    onValidateSession
+  } = options;
+  const subscriptions = []; // Create iframe
+
+  const {
+    iframe,
+    initiate
+  } = createIframeAsync(container, endpoint, getSessionUrl({
+    sid,
+    endpoint,
+    language,
+    ui: "inline",
+    shouldCallValidateSession: onValidateSession !== undefined
+  }));
+  /**
+   * Function that removes the iframe and all event listeners.
+   */
+
+  const destroy = () => {
+    if (iframe) {
+      subscriptions.forEach(sub => sub.unsubscribe());
+
+      if (iframe.parentElement) {
+        container.removeChild(iframe);
+      }
+    }
+  };
+
+  const lockSession = () => {
+    postSessionLock(iframe, sid);
+  };
+
+  const refreshSession = () => {
+    postSessionRefresh(iframe, sid);
+  };
+
+  const setActivePaymentProductType = paymentProductType => {
+    postActivePaymentProductType(iframe, sid, paymentProductType);
+  };
+
+  const submitValidationResult = result => {
+    postValidationResult(iframe, sid, result);
+  };
+
+  const wrappedOnValidateSession = (event, checkout) => {
+    if (onValidateSession) {
+      onValidateSession(event, checkout, submitValidationResult);
+    }
+  };
+
+  const wrappedOnSessionLocked = (event, checkout) => {
+    if (onSessionLocked) {
+      onSessionLocked(event, checkout, refreshSession);
+    }
+  }; // Create checkout object that wraps the destroy function.
+
+
+  const checkout = {
+    destroy,
+    iframe,
+    language,
+    lockSession,
+    refreshSession,
+    setActivePaymentProductType,
+    submitValidationResult
+  }; // Add event handlers (or in some cases add a fallback href handler).
+
+  [{
+    handler: setLanguage,
+    eventTypes: [InternalCheckoutEvents.LanguageChanged]
+  }, {
+    handler: setIframeHeight,
+    eventTypes: [InternalCheckoutEvents.HeightChanged]
+  }, {
+    handler: onSession,
+    eventTypes: [CheckoutEvents.SessionLoaded, CheckoutEvents.SessionUpdated]
+  }, {
+    eventTypes: [CheckoutEvents.SessionPaymentOnHold],
+    handler: onPayment ? handleWithResult(sid, endpoint, onPayment) : followHref
+  }, {
+    eventTypes: [CheckoutEvents.SessionPaymentAuthorized],
+    handler: onPaymentAuthorized || onPayment ? handleWithResult(sid, endpoint, onPaymentAuthorized || onPayment) : followHref
+  }, {
+    handler: onSessionCancel ? handleWithResult(sid, endpoint, onSessionCancel) : followHref,
+    eventTypes: [CheckoutEvents.SessionCancel]
+  }, {
+    handler: onPaymentError ? handleWithResult(sid, endpoint, onPaymentError) : followHref,
+    eventTypes: [CheckoutEvents.SessionPaymentError]
+  }, {
+    handler: onSessionNotFound,
+    eventTypes: [CheckoutEvents.SessionNotFound]
+  }, {
+    handler: wrappedOnSessionLocked,
+    eventTypes: [CheckoutEvents.SessionLocked]
+  }, {
+    handler: onSessionLockFailed,
+    eventTypes: [CheckoutEvents.SessionLockFailed]
+  }, {
+    handler: onActivePaymentType,
+    eventTypes: [CheckoutEvents.ActivePaymentProductType]
+  }, {
+    handler: onActivePaymentType,
+    eventTypes: [CheckoutEvents.ActivePaymentProductType]
+  }, {
+    handler: wrappedOnValidateSession,
+    eventTypes: [CheckoutEvents.ValidateSession]
+  }].forEach(({
+    handler,
+    eventTypes
+  }) => {
+    if (handler) {
+      subscriptions.push(subscribe({
+        sid,
+        endpoint,
+        handler,
+        eventTypes,
+        checkout
+      }));
+    }
+  }); // Add iframe to DOM
+
+  await initiate(); // Return object with function to destroy the checkout.
+
+  return checkout;
+};
+/**
+ * Redirect the customer to a payment session in the Dintero Checkout.
+ */
+
+const redirect = options => {
+  const {
+    sid,
+    language,
+    endpoint = "https://checkout.dintero.com"
+  } = options; // Redirect the current browser window to the checkout session url.
+
+  windowLocationAssign(getSessionUrl({
+    sid,
+    endpoint,
+    language,
+    shouldCallValidateSession: false
+  }));
+};
+
+exports.embed = embed;
+exports.redirect = redirect;

package/dist/dintero-checkout-web-sdk.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./dintero-checkout-web-sdk.cjs.prod.js");
+} else {
+  module.exports = require("./dintero-checkout-web-sdk.cjs.dev.js");
+}