@payyo/ptp-js 0.5.1 → 1.0.0-beta.1

package/README.md

@@ -1,6 +1,6 @@
 # PTP Form
 
-The goal of this JS library to provide a secure way for non-PCI compliant applications to collect CHD (card holder data), 
+The goal of this JS library to provide a secure way for non-PCI compliant applications to collect CHD (cardholder data), 
 tokenize it and use the tokens to make a payment via regular [Payyo](httsp://payyo.ch) API
 
 This library manages a form fields which may contain CHD is an HTML IFrame and JS code hosted on PCI-compliant environment.

package/dist/form.js

@@ -0,0 +1,235 @@
+var Mode = /* @__PURE__ */ ((Mode2) => {
+  Mode2["Test"] = "test";
+  Mode2["Live"] = "live";
+  return Mode2;
+})(Mode || {});
+function form(config) {
+  const fields = {};
+  const fieldNames = [];
+  const callbacks = {};
+  const formId = generateRandomId();
+  let fieldUrl = config.fieldUrl && config.mode === Mode.Test ? config.fieldUrl : "https://cdn.ptp.payyo.ch/ptp-js/1.0.0-beta.1/field.html";
+  const EVENT_ON_CHANGE = "change";
+  const EVENT_ON_READY = "ready";
+  const EVENT_ON_FOCUS = "focus";
+  const EVENT_ON_BLUR = "blur";
+  let mainFieldName = null;
+  function generateRandomId() {
+    return Math.random().toString(36).substring(2, 9);
+  }
+  function log(...args) {
+    if (config.debug && window.console) {
+      args.unshift("[PTP FORM]");
+      console.log.apply(console, args);
+    }
+  }
+  function createIframe(field) {
+    const placeholder = field.container, iFrameName = field.iFrameName, attributes = {
+      id: iFrameName,
+      name: iFrameName,
+      title: field.title,
+      class: iFrameName,
+      // @ts-ignore
+      src: `${fieldUrl}?${new URLSearchParams({
+        form_id: formId,
+        field_name: field.fieldName,
+        field_names: fieldNames,
+        main_field_name: mainFieldName || "",
+        title: field.title,
+        placeholder: field.placeholder,
+        input_type: field.inputType,
+        mode: config.mode,
+        debug: config.debug ? "1" : "0"
+      }).toString()}`,
+      frameborder: "0",
+      scrolling: "no",
+      style: "width: 100%; height: 100%; border: none;"
+    }, iframe = document.createElement("iframe");
+    Object.keys(attributes).forEach(function(key) {
+      iframe.setAttribute(key, attributes[key]);
+    });
+    while (placeholder.lastChild && placeholder.hasChildNodes()) {
+      placeholder.removeChild(placeholder.lastChild);
+    }
+    placeholder.appendChild(iframe);
+    field.iframe = iframe;
+  }
+  function createRemainingIframes() {
+    for (let i = 1; i < fieldNames.length; i++) {
+      createIframe(fields[fieldNames[i]]);
+    }
+  }
+  function postMessage(type, params = {}) {
+    const message = { params, type, formId, messageId: null };
+    return new Promise((resolve) => {
+      const messageId = `${type}:${generateRandomId()}`;
+      callbacks[messageId] = resolve;
+      message.messageId = messageId;
+      log("send message", message);
+      if (mainFieldName) {
+        window.frames[fields[mainFieldName].iFrameName].postMessage(message, "*");
+      }
+    });
+  }
+  const handlers = {};
+  function emitEvent(...args) {
+    const eventName = args.shift();
+    const handler = handlers[eventName];
+    if (handler) {
+      log(`emit event "${eventName}"`, args);
+      handler.apply(null, args);
+    } else {
+      log(`no handler for event "${eventName}"`, args);
+    }
+  }
+  window.addEventListener("message", receiveMessage, false);
+  function addOnTouchedEventListener() {
+    window.addEventListener("touchend", checkFocus, true);
+  }
+  function checkFocus() {
+    for (let [, field] of Object.entries(fields)) {
+      const iframe = window.frames[field.iFrameName];
+      if (iframe) {
+        iframe.postMessage({ type: "checkFocus" }, "*");
+      }
+    }
+  }
+  const form2 = {
+    init: function(fieldsMap) {
+      for (let fieldName in fieldsMap) {
+        if (!fieldsMap.hasOwnProperty(fieldName)) {
+          return;
+        }
+        let field = fieldsMap[fieldName];
+        let fieldContainer = field.container;
+        if (typeof fieldContainer === "string") {
+          fieldContainer = document.getElementById(fieldContainer);
+        }
+        fields[fieldName] = {
+          fieldName,
+          iFrameName: "ptp-field-iframe-" + formId + "-" + fieldName,
+          container: fieldContainer,
+          title: field.title || "",
+          placeholder: field.placeholder || "",
+          inputType: field.inputType || "text",
+          isReady: false
+        };
+        fieldNames.push(fieldName);
+      }
+      mainFieldName = fieldNames[0];
+      createIframe(fields[mainFieldName]);
+    },
+    onChange(handler) {
+      handlers[EVENT_ON_CHANGE] = handler;
+    },
+    onReady(handler) {
+      handlers[EVENT_ON_READY] = handler;
+    },
+    onFocus(handler) {
+      handlers[EVENT_ON_FOCUS] = handler;
+    },
+    onBlur(handler) {
+      handlers[EVENT_ON_BLUR] = handler;
+    },
+    validate() {
+      return postMessage("validateRequest");
+    },
+    submit(params) {
+      return postMessage("submitRequest", {
+        params: params || {},
+        browserDetails: {
+          browserUserAgent: navigator.userAgent,
+          browserJavaEnabled: navigator.javaEnabled(),
+          browserLanguage: navigator.language,
+          browserColorDepth: screen.colorDepth,
+          browserScreenHeight: screen.height,
+          browserScreenWidth: screen.width,
+          browserTZ: (/* @__PURE__ */ new Date()).getTimezoneOffset()
+        }
+      }).then((res) => {
+        if (res.success) {
+          return Promise.resolve(res.result);
+        }
+        return Promise.reject({
+          error: res.error,
+          error_details: res.error_details
+        });
+      });
+    },
+    focus(field) {
+      const f = fields[field] || null;
+      if (f) {
+        window.frames[f.iFrameName].focus();
+      }
+    },
+    setStyle: function(fieldName, selector, cssRules) {
+      if (!fields[fieldName]) {
+        return;
+      }
+      window.frames[fields[fieldName].iFrameName].postMessage({
+        type: "setStyle",
+        params: {
+          selector,
+          rules: cssRules
+        }
+      }, "*");
+    },
+    destroy: function() {
+      var _a;
+      window.removeEventListener("message", receiveMessage, false);
+      window.addEventListener("touchend", checkFocus, true);
+      for (let fieldName in fields) {
+        let iframe = document.getElementById(fields[fieldName].iFrameName);
+        if (iframe) {
+          (_a = iframe.parentNode) == null ? void 0 : _a.removeChild(iframe);
+        }
+      }
+    }
+  };
+  function receiveMessage(message) {
+    const event = message.data;
+    if (formId !== event.formId) {
+      return;
+    }
+    log(`message received of type "${event.type}"`, event);
+    const handlers2 = {
+      fieldReady: (event2) => {
+        if (fields[event2.fieldName] === void 0) {
+          return;
+        }
+        fields[event2.fieldName].isReady = true;
+        if (event2.fieldName === mainFieldName) {
+          createRemainingIframes();
+        }
+        const areAllReady = Object.keys(fields).map((key) => fields[key].isReady).reduce((a, b) => a && b, true);
+        if (areAllReady) {
+          addOnTouchedEventListener();
+          emitEvent(EVENT_ON_READY);
+        }
+      },
+      fieldChanged: function(event2) {
+        emitEvent(EVENT_ON_CHANGE, event2);
+      },
+      fieldFocused: function(event2) {
+        emitEvent(EVENT_ON_FOCUS, event2);
+      },
+      fieldBlurred: function(event2) {
+        emitEvent(EVENT_ON_BLUR, event2);
+      }
+    };
+    const messageId = event.messageId, callback = callbacks[messageId || ""] ?? void 0;
+    if (messageId && callback !== void 0) {
+      delete callbacks[messageId];
+      callback.apply(form2, [event.response]);
+    } else {
+      const handler = handlers2[event.type];
+      if (handler) {
+        handler.apply(form2, [event.response]);
+      }
+    }
+  }
+  return form2;
+}
+export {
+  form as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payyo/ptp-js",
-  "version": "0.5.1",
+  "version": "1.0.0-beta.1",
   "description": "JS library for Payyo Tokenization service (PTP)",
   "private": false,
   "author": "developers@payyo.ch",
@@ -14,27 +14,31 @@
     "url": "https://bitbucket.org/payyoag/ptp-js/issues"
   },
   "homepage": "https://bitbucket.org/payyoag/ptp-js#readme",
-  "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "babel-loader": "^8.2.3",
-    "cleave.js": "^1.6.0",
-    "html-minimizer-webpack-plugin": "^3.3.1",
-    "html-webpack-plugin": "^5.5.0",
-    "react-dev-utils": "^11.0.4",
-    "terser-webpack-plugin": "^5.2.5",
-    "webpack": "^5.63.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.4.0"
+  "type": "module",
+  "exports": {
+    ".": "./dist/form.js"
   },
   "scripts": {
-    "serve": "PTP_BASE_URL=https://ptp.dev.payyo.ch:4430 webpack-dev-server --mode development --static www --devtool source-map --output-pathinfo --env target=all",
-    "build": "webpack --mode production --env target=all",
-    "build-field": "webpack --mode production --env target=field"
+    "dev": "vite",
+    "build": "npm run build:form && npm run build:field",
+    "build:field": "tsc && MODULE_NAME=field vite build --config vite.config.build.js",
+    "build:form": "tsc && MODULE_NAME=form vite build --config vite.config.build.js",
+    "build:dev": "npm run build:dev:field",
+    "build:dev:field": "tsc && MODULE_NAME=field vite build --config vite.config.build.js --mode=development",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/cleave.js": "^1.4.12",
+    "@types/node": "^20.12.7",
+    "cleave.js": "^1.6.0",
+    "sass": "^1.75.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-singlefile": "^2.0.1"
   },
   "files": [
     "src/form",
-    "dist/form",
+    "dist",
     "README.md",
     "LICENCE",
     "package.json"

package/src/form/form.ts

@@ -0,0 +1,270 @@
+import {Field, FieldEvent, Form, FormConfig, Message, MessageResponse, Mode, SetStyleEvent} from "../types";
+
+export default function (config: FormConfig): Form {
+    const fields: Record<string, any> = {};
+    const fieldNames: string[] = [];
+    const callbacks: Record<string, Function> = {};
+    const formId = generateRandomId();
+
+    let fieldUrl = (config.fieldUrl && config.mode === Mode.Test) ? config.fieldUrl : import.meta.env.VITE_PTP_FIELD_URL;
+
+    const EVENT_ON_CHANGE = 'change';
+    const EVENT_ON_READY = 'ready';
+    const EVENT_ON_FOCUS = 'focus';
+    const EVENT_ON_BLUR = 'blur';
+
+    let mainFieldName: string | null = null;
+
+    function generateRandomId() {
+        return Math.random().toString(36).substring(2, 9);
+    }
+
+    function log(...args: any[]) {
+        if (config.debug && window.console) {
+            args.unshift('[PTP FORM]');
+            console.log.apply(console, args);
+        }
+    }
+
+    function createIframe(field: Field) {
+        const placeholder = field.container,
+            iFrameName = field.iFrameName,
+            attributes: Record<string, any> = {
+                id: iFrameName,
+                name: iFrameName,
+                title: field.title,
+                class: iFrameName,
+                // @ts-ignore
+                src: `${fieldUrl}?${(new URLSearchParams({
+                    form_id: formId,
+                    field_name: field.fieldName,
+                    field_names: fieldNames,
+                    main_field_name: mainFieldName || '',
+                    title: field.title,
+                    placeholder: field.placeholder,
+                    input_type: field.inputType,
+                    mode: config.mode,
+                    debug: config.debug ? '1' : '0',
+                })).toString()}`,
+                frameborder: '0',
+                scrolling: 'no',
+                style: 'width: 100%; height: 100%; border: none;',
+            },
+            iframe = document.createElement('iframe');
+
+        Object.keys(attributes).forEach(function (key) {
+            iframe.setAttribute(key, attributes[key]);
+        });
+
+        while (placeholder.lastChild && placeholder.hasChildNodes()) {
+            placeholder.removeChild(placeholder.lastChild);
+        }
+        placeholder.appendChild(iframe);
+
+        field.iframe = iframe;
+    }
+
+    function createRemainingIframes() {
+        for (let i = 1; i < fieldNames.length; i++) {
+            createIframe(fields[fieldNames[i]]);
+        }
+    }
+
+    function postMessage(type: string, params: Record<string, any> = {}): Promise<MessageResponse> {
+        const message: Message = {params: params, type: type, formId: formId, messageId: null};
+
+        return new Promise((resolve) => {
+            const messageId = `${type}:${generateRandomId()}`;
+            callbacks[messageId] = resolve;
+            message.messageId = messageId;
+
+            log('send message', message);
+            if (mainFieldName) {
+                window.frames[fields[mainFieldName].iFrameName].postMessage(message, '*');
+            }
+        });
+    }
+
+    const handlers: Record<string, Function> = {};
+
+    function emitEvent(...args: any[]) {
+        const eventName = args.shift();
+        const handler = handlers[eventName];
+        if (handler) {
+            log(`emit event "${eventName}"`, args);
+            handler.apply(null, args);
+        } else {
+            log(`no handler for event "${eventName}"`, args);
+        }
+    }
+
+    window.addEventListener('message', receiveMessage, false);
+
+    function addOnTouchedEventListener() {
+        window.addEventListener('touchend', checkFocus, true);
+    }
+
+    function checkFocus() {
+        for (let [, field] of Object.entries(fields)) {
+            const iframe = window.frames[field.iFrameName];
+            if (iframe) {
+                iframe.postMessage({type: 'checkFocus'}, '*');
+            }
+        }
+    }
+
+    const form: Form = {
+        init: function (fieldsMap) {
+            for (let fieldName in fieldsMap) {
+                if (!fieldsMap.hasOwnProperty(fieldName)) {
+                    return;
+                }
+
+                let field = fieldsMap[fieldName];
+                let fieldContainer = field.container;
+
+                if (typeof fieldContainer === 'string') {
+                    fieldContainer = document.getElementById(fieldContainer);
+                }
+
+                fields[fieldName] = {
+                    fieldName: fieldName,
+                    iFrameName: 'ptp-field-iframe-' + formId + '-' + fieldName,
+                    container: fieldContainer,
+                    title: field.title || '',
+                    placeholder: field.placeholder || '',
+                    inputType: field.inputType || 'text',
+                    isReady: false
+                };
+
+                fieldNames.push(fieldName);
+            }
+
+            mainFieldName = fieldNames[0];
+
+            createIframe(fields[mainFieldName]);
+        },
+        onChange(handler) {
+            handlers[EVENT_ON_CHANGE] = handler;
+        },
+        onReady(handler) {
+            handlers[EVENT_ON_READY] = handler;
+        },
+        onFocus(handler) {
+            handlers[EVENT_ON_FOCUS] = handler;
+        },
+        onBlur(handler) {
+            handlers[EVENT_ON_BLUR] = handler;
+        },
+        validate() {
+            return postMessage('validateRequest');
+        },
+        submit(params) {
+            return postMessage('submitRequest', {
+                params: params || {},
+                browserDetails: {
+                    browserUserAgent: navigator.userAgent,
+                    browserJavaEnabled: navigator.javaEnabled(),
+                    browserLanguage: navigator.language,
+                    browserColorDepth: screen.colorDepth,
+                    browserScreenHeight: screen.height,
+                    browserScreenWidth: screen.width,
+                    browserTZ: (new Date()).getTimezoneOffset()
+                }
+            }).then((res) => {
+                if (res.success) {
+                    return Promise.resolve(res.result);
+                }
+
+                return Promise.reject({
+                    error: res.error,
+                    error_details: res.error_details,
+                });
+            });
+        },
+        focus(field) {
+            const f = fields[field] || null;
+            if (f) {
+                window.frames[f.iFrameName].focus();
+            }
+        },
+        setStyle: function (fieldName, selector, cssRules) {
+            if (!fields[fieldName]) {
+                return;
+            }
+
+            window.frames[fields[fieldName].iFrameName].postMessage({
+                type: 'setStyle',
+                params: {
+                    selector: selector,
+                    rules: cssRules,
+                } as SetStyleEvent
+            }, '*');
+        },
+        destroy: function () {
+            window.removeEventListener('message', receiveMessage, false);
+            window.addEventListener('touchend', checkFocus, true);
+            for (let fieldName in fields) {
+                let iframe = document.getElementById(fields[fieldName].iFrameName);
+                if (iframe) {
+                    iframe.parentNode?.removeChild(iframe);
+                }
+            }
+        }
+    };
+
+    function receiveMessage(message: MessageEvent<Message>) {
+        const event: Message = message.data;
+        if (formId !== event.formId) {
+            return;
+        }
+
+        log(`message received of type "${event.type}"`, event);
+
+        const handlers: Record<string, Function> = {
+            fieldReady: (event: FieldEvent) => {
+                if (fields[event.fieldName] === undefined) {
+                    return;
+                }
+                fields[event.fieldName].isReady = true;
+
+                if (event.fieldName === mainFieldName) {
+                    createRemainingIframes();
+                }
+
+                const areAllReady = Object.keys(fields)
+                    .map((key) => fields[key].isReady)
+                    .reduce((a, b) => a && b, true);
+
+                if (areAllReady) {
+                    addOnTouchedEventListener();
+                    emitEvent(EVENT_ON_READY);
+                }
+            },
+            fieldChanged: function (event: FieldEvent) {
+                emitEvent(EVENT_ON_CHANGE, event);
+            },
+            fieldFocused: function (event: FieldEvent) {
+                emitEvent(EVENT_ON_FOCUS, event);
+            },
+            fieldBlurred: function (event: FieldEvent) {
+                emitEvent(EVENT_ON_BLUR, event);
+            },
+        };
+
+        const messageId = event.messageId,
+            callback = callbacks[messageId || ''] ?? undefined;
+
+        if (messageId && callback !== undefined) {
+            delete callbacks[messageId];
+            callback.apply(form, [event.response]);
+        } else {
+            const handler = handlers[event.type];
+            if (handler) {
+                handler.apply(form, [event.response]);
+            }
+        }
+    }
+
+    return form;
+};

package/src/form/index.js

@@ -1,271 +0,0 @@
-module.exports = function (config) {
-    const form = {},
-        fields = {},
-        fieldNames = [],
-        callbacks = {},
-        formId = generateRandomId();
-
-    const EVENT_ON_CHANGE = 'change';
-    const EVENT_ON_READY = 'ready';
-    const EVENT_ON_FOCUS = 'focus';
-    const EVENT_ON_BLUR = 'blur';
-
-    let mainFieldName = null;
-
-    function generateRandomId() {
-        return Math.random().toString(36).substring(2, 9);
-    }
-
-    function log() {
-        if (config.debug && window.console) {
-            const args = Array.prototype.slice.call(arguments);
-            args.unshift('[PTP FORM]');
-            console.log.apply(console, args);
-        }
-    }
-
-    form.init = function (fieldsMap) {
-        for (let fieldName in fieldsMap) {
-            if (!fieldsMap.hasOwnProperty(fieldName)) {
-                return;
-            }
-
-            let field = fieldsMap[fieldName];
-            let fieldContainer = field.container;
-
-            if (typeof fieldContainer === 'string') {
-                fieldContainer = document.getElementById(fieldContainer);
-            }
-
-            fields[fieldName] = {
-                fieldName: fieldName,
-                iFrameName: 'ptp-field-iframe-' + formId + '-' + fieldName,
-                container: fieldContainer,
-                title: field.title || '',
-                placeholder: field.placeholder || '',
-                inputType: field.inputType || 'text',
-                isReady: false
-            };
-
-            fieldNames.push(fieldName);
-        }
-
-        mainFieldName = fieldNames[0];
-
-        createIframe(fields[mainFieldName]);
-    };
-
-    function createIframe(field) {
-        const placeholder = field.container,
-            iFrameName = field.iFrameName,
-            attributes = {
-                id: iFrameName,
-                name: iFrameName,
-                title: field.title,
-                class: iFrameName,
-                src: config.iframeUri + '?' + (new URLSearchParams({
-                    form_id: formId,
-                    field_name: field.fieldName,
-                    field_names: fieldNames,
-                    main_field_name: mainFieldName,
-                    title: field.title,
-                    placeholder: field.placeholder,
-                    input_type: field.inputType,
-                    debug: config.debug ? '1' : '0',
-                })).toString(),
-                frameborder: "0",
-                scrolling: "no",
-                style: 'width: 100%; height: 100%; border: none;',
-            },
-            iframe = document.createElement('iframe');
-
-        Object.keys(attributes).forEach(function (key) {
-            iframe.setAttribute(key, attributes[key]);
-        });
-
-        while (placeholder.hasChildNodes()) {
-            placeholder.removeChild(placeholder.lastChild);
-        }
-        placeholder.appendChild(iframe);
-
-        field.iframe = iframe[0];
-    }
-
-    function createRemainingIframes() {
-        for (let i = 1; i < fieldNames.length; i++) {
-            createIframe(fields[fieldNames[i]]);
-        }
-    }
-
-    function postMessage(type, params = {}) {
-        const message = {params: params, type: type, formId: formId, messageId: null};
-
-        return new Promise((resolve) => {
-            const messageId = type + ":" + generateRandomId();
-            callbacks[messageId] = resolve;
-            message.messageId = messageId;
-
-            log('send message', message);
-            window.frames[fields[mainFieldName].iFrameName].postMessage(message, '*');
-        });
-    }
-
-    const handlers = {};
-    form.onChange = function (handler) {
-        handlers[EVENT_ON_CHANGE] = handler;
-    }
-
-    form.onReady = function (handler) {
-        handlers[EVENT_ON_READY] = handler;
-    }
-
-    form.onFocus = function (handler) {
-        handlers[EVENT_ON_FOCUS] = handler;
-    }
-
-    form.onBlur = function (handler) {
-        handlers[EVENT_ON_BLUR] = handler;
-    }
-
-    form.validate = function () {
-        return postMessage('validateRequest');
-    }
-
-    form.submit = function (params) {
-        return postMessage('submitRequest', {
-            params: params || {},
-            browserDetails: {
-                browserUserAgent: navigator.userAgent,
-                browserJavaEnabled: navigator.javaEnabled(),
-                browserLanguage: navigator.language,
-                browserColorDepth: screen.colorDepth,
-                browserScreenHeight: screen.height,
-                browserScreenWidth: screen.width,
-                browserTZ: (new Date()).getTimezoneOffset()
-            }
-        }).then((res) => {
-            if (res.success) {
-                return Promise.resolve(res.result);
-            }
-
-            return Promise.reject({
-                error: res.error,
-                error_details: res.error_details,
-            });
-        });
-    }
-
-    form.focus = function (field) {
-        const f = fields[field] || null;
-        if (f) {
-            window.frames[f.iFrameName].focus();
-        }
-    };
-
-    form.setStyle = function (fieldName, selector, cssRules) {
-        if (!fields[fieldName]) {
-            return;
-        }
-
-        window.frames[fields[fieldName].iFrameName].postMessage({
-            type: 'setStyle',
-            params: {
-                selector: selector,
-                rules: cssRules,
-            }
-        }, '*');
-    };
-
-    function receiveMessage(message) {
-        const event = message.data;
-        if (formId !== event.formId) {
-            return;
-        }
-
-        log(`message received of type "${event.type}"`, event);
-
-        const handlers = {
-            fieldReady: (r) => {
-                if (fields[r.fieldName] === undefined) {
-                    return;
-                }
-                fields[r.fieldName].isReady = true;
-
-                if (r.fieldName === mainFieldName) {
-                    createRemainingIframes();
-                }
-
-                const areAllReady = Object.keys(fields)
-                    .map((key) => fields[key].isReady)
-                    .reduce((a, b) => a && b, true);
-
-                if (areAllReady) {
-                    addOnTouchedEventListener();
-                    emitEvent(EVENT_ON_READY);
-                }
-            },
-            fieldChanged: function (response) {
-                emitEvent(EVENT_ON_CHANGE, response);
-            },
-            fieldFocused: function (response) {
-                emitEvent(EVENT_ON_FOCUS, response);
-            },
-            fieldBlurred: function (response) {
-                emitEvent(EVENT_ON_BLUR, response);
-            },
-        };
-
-        const messageId = event.messageId,
-            callback = callbacks[messageId];
-
-        if (callback !== undefined) {
-            delete callbacks[messageId];
-            callback.apply(form, [event.response]);
-        } else {
-            const handler = handlers[event.type];
-            if (handler) {
-                handler.apply(form, [event.response]);
-            }
-        }
-    }
-
-    function emitEvent() {
-        const args = Array.prototype.slice.call(arguments);
-        const eventName = args.shift();
-        const handler = handlers[eventName];
-        if (handler) {
-            log(`emit event "${eventName}"`, args);
-            handler.apply(null, args);
-        } else {
-            log(`no handler for event "${eventName}"`, args);
-        }
-    }
-
-    window.addEventListener('message', receiveMessage, false);
-
-    function addOnTouchedEventListener() {
-        window.addEventListener('touchend', checkFocus, true);
-    }
-
-    function checkFocus() {
-        for (let [, field] of Object.entries(fields)) {
-            const iframe = window.frames[field.iFrameName];
-            if (iframe) {
-                iframe.postMessage({'type': 'checkFocus'}, '*');
-            }
-        }
-    }
-
-    form.destroy = function () {
-        window.removeEventListener('message', receiveMessage, false);
-        window.addEventListener('touchend', checkFocus, true);
-        for (let fieldName in fields) {
-            let iframe = document.getElementById(fields[fieldName].iFrameName);
-            if (iframe) {
-                iframe.parentNode.removeChild(iframe);
-            }
-        }
-    }
-
-    return form;
-};

package/webpack.config.js

@@ -1,111 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const TerserPlugin = require('terser-webpack-plugin');
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
-const HtmlWebPackPlugin = require("html-webpack-plugin");
-
-module.exports = (env, argv) => {
-    const modules = [];
-    const distFolder = path.resolve('dist');
-    const isDevelopment = argv.mode === 'development';
-
-    const plugins = [
-        new webpack.DefinePlugin({
-            PTP_BASE_URL: JSON.stringify(process.env.PTP_BASE_URL || 'https://ptp.payyo.ch'),
-        })
-    ];
-
-    const optimization = {
-        minimize: true,
-        minimizer: [
-            new TerserPlugin({
-                terserOptions: {
-                    ecma: 6,
-                    format: {
-                        comments: false,
-                    },
-                    compress: {
-                        drop_debugger: !isDevelopment,
-                    },
-                },
-                extractComments: false,
-            }),
-            new HtmlMinimizerPlugin({
-                test: /\.html/i,
-            }),
-        ]
-    };
-
-    if (env.WEBPACK_SERVE) {
-        plugins.push(
-            new BundleAnalyzerPlugin({
-                // analyzerMode: 'static',
-                analyzerHost: '0.0.0.0',
-                analyzerPort: '8888',
-            }),
-        );
-
-        // test module
-        modules.push({
-            entry: './www/index.js',
-            devtool: 'source-map',
-            output: {
-                publicPath: '/',
-                filename: 'index.js',
-                clean: true,
-            },
-            plugins: [
-                ...plugins,
-                new HtmlWebPackPlugin({
-                    template: path.resolve(__dirname, "www/index.html"),
-                    filename: 'index.html',
-                }),
-            ]
-        });
-    }
-
-    // default target
-    modules.push({
-        entry: './src/form/index.js',
-        optimization: optimization,
-        devtool: 'source-map',
-        output: {
-            filename: 'v1.js',
-            path: `${distFolder}/form`,
-            publicPath: '/form',
-            clean: true,
-        },
-        plugins: plugins,
-    });
-
-    if (env.target === 'all' || env.target === 'field') {
-        // Field module
-        modules.push({
-            context: path.resolve(__dirname, 'src'),
-            entry: './field/index.js',
-            optimization: optimization,
-            devtool: 'source-map',
-            output: {
-                filename: 'v1.js',
-                path: `${distFolder}/field`,
-                publicPath: '/',
-                clean: true
-            },
-            plugins: [
-                new HtmlWebpackPlugin({
-                    inject: 'body',
-                    scriptLoading: 'defer',
-                    filename: 'v1.html',
-                    template: path.resolve('src/field/field.html'),
-                }),
-                new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*[.]js/]),
-                ...plugins,
-            ]
-        });
-    }
-
-    return modules;
-};