@payyo/ptp-js 1.0.0-alpha.1 → 1.0.0-beta.2

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+export declare function createForm(config: FormConfig): Form;
+
+export declare type Field = {
+    iframe: HTMLIFrameElement;
+    name: string;
+    type: FieldType;
+    iFrameName: string;
+    container: HTMLElement;
+    title: string;
+    placeholder: string;
+    inputType: string;
+    isReady: boolean;
+};
+
+export declare type FieldConfig = {
+    fieldId: string;
+    fieldName: string;
+    fieldType: FieldType;
+    formId: string;
+    fieldNames: string[];
+    title: string;
+    placeholder: string;
+    inputType: string;
+    endpoint: string;
+    mode: Mode;
+    debug: boolean;
+};
+
+export declare type FieldEvent = {
+    fieldName: string;
+    params: any;
+};
+
+export declare type FieldParams = {
+    type: FieldType;
+    container: HTMLElement | string;
+    placeholder: string;
+    title: string;
+    inputType?: string;
+};
+
+export declare enum FieldType {
+    CardNumber = "cardNumber",
+    SecurityCode = "securityCode"
+}
+
+export declare type Form = {
+    init: (fieldsMap: Record<string, FieldParams>) => void;
+    onChange: (handler: (event: FieldEvent) => void) => void;
+    onReady: (handler: (event: FieldEvent) => void) => void;
+    onFocus: (handler: (event: FieldEvent) => void) => void;
+    onBlur: (handler: (event: FieldEvent) => void) => void;
+    focus: (field: string) => void;
+    validate: () => Promise<any>;
+    setStyle: (fieldName: string, selector: string, cssRules: Record<string, any>) => void;
+    submit: (params?: any) => Promise<any>;
+    destroy: () => void;
+};
+
+export declare type FormConfig = {
+    mode: Mode | string;
+    debug: boolean;
+    /** is used in `Mode.Test` mode only */
+    fieldUrl?: string;
+};
+
+export declare type Message = {
+    params: any;
+    type: string;
+    formId: string;
+    messageId: string | null;
+    response?: MessageResponse;
+};
+
+export declare type MessageResponse = {
+    success: boolean;
+    result?: null;
+    error?: string | null;
+    fields?: Record<string, boolean>;
+    error_details?: string;
+};
+
+export declare enum Mode {
+    Test = "test",
+    Live = "live"
+}
+
+export declare type ReplyCallback = (type: string, event: MessageResponse) => void;
+
+export declare type SetStyleEvent = {
+    selector: string;
+    rules: string[];
+};
+
+export { }

package/dist/{form.js → index.es.js}

@@ -3,12 +3,17 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
   Mode2["Live"] = "live";
   return Mode2;
 })(Mode || {});
-function form(config) {
+var FieldType = /* @__PURE__ */ ((FieldType2) => {
+  FieldType2["CardNumber"] = "cardNumber";
+  FieldType2["SecurityCode"] = "securityCode";
+  return FieldType2;
+})(FieldType || {});
+function createForm(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-alpha.1/field.html";
+  let fieldUrl = config.fieldUrl && config.mode === Mode.Test ? config.fieldUrl : "https://cdn.ptp.payyo.ch/ptp-js/1.0.0-beta.2/field.html";
   const EVENT_ON_CHANGE = "change";
   const EVENT_ON_READY = "ready";
   const EVENT_ON_FOCUS = "focus";
@@ -32,7 +37,8 @@ function form(config) {
       // @ts-ignore
       src: `${fieldUrl}?${new URLSearchParams({
         form_id: formId,
-        field_name: field.fieldName,
+        field_name: field.name,
+        field_type: field.type,
         field_names: fieldNames,
         main_field_name: mainFieldName || "",
         title: field.title,
@@ -62,18 +68,18 @@ function form(config) {
   function postMessage(type, params = {}) {
     const message = { params, type, formId, messageId: null };
     return new Promise((resolve) => {
-      const messageId = type + ":" + generateRandomId();
+      const messageId = `${type}:${generateRandomId()}`;
       callbacks[messageId] = resolve;
       message.messageId = messageId;
       log("send message", message);
       if (mainFieldName) {
-        window.frames[fields[mainFieldName].iFrameName].postMessage(message, "*");
+        const mainIFrameName = fields[mainFieldName].iFrameName;
+        window.frames[mainIFrameName].postMessage(message, "*");
       }
     });
   }
   const handlers = {};
-  function emitEvent(..._) {
-    const args = Array.prototype.slice.call(arguments);
+  function emitEvent(...args) {
     const eventName = args.shift();
     const handler = handlers[eventName];
     if (handler) {
@@ -91,23 +97,26 @@ function form(config) {
     for (let [, field] of Object.entries(fields)) {
       const iframe = window.frames[field.iFrameName];
       if (iframe) {
-        iframe.postMessage({ "type": "checkFocus" }, "*");
+        iframe.postMessage({ type: "checkFocus" }, "*");
       }
     }
   }
-  const form2 = {
+  const 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);
+        let fieldContainer = null;
+        if (typeof field.container === "string") {
+          fieldContainer = document.getElementById(field.container);
+        } else {
+          fieldContainer = field.container;
         }
         fields[fieldName] = {
-          fieldName,
+          name: fieldName,
+          type: field.type,
           iFrameName: "ptp-field-iframe-" + formId + "-" + fieldName,
           container: fieldContainer,
           title: field.title || "",
@@ -221,16 +230,18 @@ function form(config) {
     const messageId = event.messageId, callback = callbacks[messageId || ""] ?? void 0;
     if (messageId && callback !== void 0) {
       delete callbacks[messageId];
-      callback.apply(form2, [event.response]);
+      callback.apply(form, [event.response]);
     } else {
       const handler = handlers2[event.type];
       if (handler) {
-        handler.apply(form2, [event.response]);
+        handler.apply(form, [event.response]);
       }
     }
   }
-  return form2;
+  return form;
 }
 export {
-  form as default
+  FieldType,
+  Mode,
+  createForm
 };

package/dist/index.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var Mode = /* @__PURE__ */ ((Mode2) => {
+  Mode2["Test"] = "test";
+  Mode2["Live"] = "live";
+  return Mode2;
+})(Mode || {});
+var FieldType = /* @__PURE__ */ ((FieldType2) => {
+  FieldType2["CardNumber"] = "cardNumber";
+  FieldType2["SecurityCode"] = "securityCode";
+  return FieldType2;
+})(FieldType || {});
+function createForm(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.2/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.name,
+        field_type: field.type,
+        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) {
+        const mainIFrameName = fields[mainFieldName].iFrameName;
+        window.frames[mainIFrameName].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 form = {
+    init: function(fieldsMap) {
+      for (let fieldName in fieldsMap) {
+        if (!fieldsMap.hasOwnProperty(fieldName)) {
+          return;
+        }
+        let field = fieldsMap[fieldName];
+        let fieldContainer = null;
+        if (typeof field.container === "string") {
+          fieldContainer = document.getElementById(field.container);
+        } else {
+          fieldContainer = field.container;
+        }
+        fields[fieldName] = {
+          name: fieldName,
+          type: field.type,
+          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(form, [event.response]);
+    } else {
+      const handler = handlers2[event.type];
+      if (handler) {
+        handler.apply(form, [event.response]);
+      }
+    }
+  }
+  return form;
+}
+exports.FieldType = FieldType;
+exports.Mode = Mode;
+exports.createForm = createForm;

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@payyo/ptp-js",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-beta.2",
   "description": "JS library for Payyo Tokenization service (PTP)",
   "private": false,
   "author": "developers@payyo.ch",
   "license": "MIT",
-  "main": "webpack.config.js",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/payyoag/ptp-js.git"
@@ -15,8 +14,15 @@
   },
   "homepage": "https://bitbucket.org/payyoag/ptp-js#readme",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/form.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js"
+    }
   },
   "scripts": {
     "dev": "vite",
@@ -25,16 +31,21 @@
     "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"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "devDependencies": {
+    "@fontsource/open-sans": "^5.2.6",
+    "@microsoft/api-extractor": "^7.52.8",
     "@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"
+    "unplugin-dts": "^1.0.0-beta.0",
+    "vite": "^6.3.5",
+    "vite-plugin-singlefile": "^2.0.1",
+    "vitest": "^3.2.3"
   },
   "files": [
     "src/form",

package/src/form/form.ts

@@ -1,7 +1,7 @@
-import {Field, FieldEvent, Form, FormConfig, Message, MessageResponse, Mode, SetStyleEvent} from "../types";
+import {Field, FieldEvent, Form, FormConfig, Message, MessageResponse, Mode, SetStyleEvent} from "../types.ts";
 
-export default function (config: FormConfig): Form {
-    const fields: Record<string, any> = {};
+export function createForm(config: FormConfig): Form {
+    const fields: Record<string, Field> = {};
     const fieldNames: string[] = [];
     const callbacks: Record<string, Function> = {};
     const formId = generateRandomId();
@@ -37,7 +37,8 @@ export default function (config: FormConfig): Form {
                 // @ts-ignore
                 src: `${fieldUrl}?${(new URLSearchParams({
                     form_id: formId,
-                    field_name: field.fieldName,
+                    field_name: field.name,
+                    field_type: field.type,
                     field_names: fieldNames,
                     main_field_name: mainFieldName || '',
                     title: field.title,
@@ -46,8 +47,8 @@ export default function (config: FormConfig): Form {
                     mode: config.mode,
                     debug: config.debug ? '1' : '0',
                 })).toString()}`,
-                frameborder: "0",
-                scrolling: "no",
+                frameborder: '0',
+                scrolling: 'no',
                 style: 'width: 100%; height: 100%; border: none;',
             },
             iframe = document.createElement('iframe');
@@ -74,21 +75,22 @@ export default function (config: FormConfig): Form {
         const message: Message = {params: params, type: type, formId: formId, messageId: null};
 
         return new Promise((resolve) => {
-            const messageId = type + ":" + generateRandomId();
+            const messageId = `${type}:${generateRandomId()}`;
             callbacks[messageId] = resolve;
             message.messageId = messageId;
 
             log('send message', message);
             if (mainFieldName) {
-                window.frames[fields[mainFieldName].iFrameName].postMessage(message, '*');
+                const mainIFrameName = fields[mainFieldName].iFrameName;
+                // @ts-ignore
+                window.frames[mainIFrameName].postMessage(message, '*');
             }
         });
     }
 
     const handlers: Record<string, Function> = {};
 
-    function emitEvent(..._: any[]) {
-        const args = Array.prototype.slice.call(arguments);
+    function emitEvent(...args: any[]) {
         const eventName = args.shift();
         const handler = handlers[eventName];
         if (handler) {
@@ -107,9 +109,10 @@ export default function (config: FormConfig): Form {
 
     function checkFocus() {
         for (let [, field] of Object.entries(fields)) {
+            // @ts-ignore
             const iframe = window.frames[field.iFrameName];
             if (iframe) {
-                iframe.postMessage({'type': 'checkFocus'}, '*');
+                iframe.postMessage({type: 'checkFocus'}, '*');
             }
         }
     }
@@ -122,14 +125,17 @@ export default function (config: FormConfig): Form {
                 }
 
                 let field = fieldsMap[fieldName];
-                let fieldContainer = field.container;
+                let fieldContainer = null;
 
-                if (typeof fieldContainer === 'string') {
-                    fieldContainer = document.getElementById(fieldContainer);
+                if (typeof field.container === 'string') {
+                    fieldContainer = document.getElementById(field.container);
+                } else {
+                    fieldContainer = field.container as HTMLElement;
                 }
 
-                fields[fieldName] = {
-                    fieldName: fieldName,
+                fields[fieldName] = <Field>{
+                    name: fieldName,
+                    type: field.type,
                     iFrameName: 'ptp-field-iframe-' + formId + '-' + fieldName,
                     container: fieldContainer,
                     title: field.title || '',
@@ -186,6 +192,7 @@ export default function (config: FormConfig): Form {
         focus(field) {
             const f = fields[field] || null;
             if (f) {
+                // @ts-ignore
                 window.frames[f.iFrameName].focus();
             }
         },
@@ -194,6 +201,7 @@ export default function (config: FormConfig): Form {
                 return;
             }
 
+            // @ts-ignore
             window.frames[fields[fieldName].iFrameName].postMessage({
                 type: 'setStyle',
                 params: {
@@ -268,4 +276,4 @@ export default function (config: FormConfig): Form {
     }
 
     return form;
-};
+}

package/src/form/index.ts

@@ -0,0 +1,2 @@
+export * from '../types.ts';
+export * from './form.ts';