@payyo/ptp-js 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payyo/ptp-js",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "JS library for Payyo Tokenization service (PTP)",
   "private": false,
   "author": "developers@payyo.ch",

package/src/form/index.js

@@ -7,11 +7,13 @@ module.exports = function (config) {
 
     const EVENT_ON_CHANGE = 'change';
     const EVENT_ON_READY = 'ready';
+    const EVENT_ON_FOCUS = 'focus';
+    const EVENT_ON_BLUR = 'blur';
 
-    let mainField = null;
+    let mainFieldName = null;
 
     function generateRandomId() {
-        return Math.random().toString(36).substr(2, 9);
+        return Math.random().toString(36).substring(2, 9);
     }
 
     function log() {
@@ -48,11 +50,9 @@ module.exports = function (config) {
             fieldNames.push(fieldName);
         }
 
-        mainField = fieldNames[0];
+        mainFieldName = fieldNames[0];
 
-        for (let i = 0; i < fieldNames.length; i++) {
-            createIframe(fields[fieldNames[i]]);
-        }
+        createIframe(fields[mainFieldName]);
     };
 
     function createIframe(field) {
@@ -67,6 +67,7 @@ module.exports = function (config) {
                     form_id: formId,
                     field_name: field.fieldName,
                     field_names: fieldNames,
+                    main_field_name: mainFieldName,
                     title: field.title,
                     placeholder: field.placeholder,
                     input_type: field.inputType,
@@ -74,7 +75,7 @@ module.exports = function (config) {
                 })).toString(),
                 frameborder: "0",
                 scrolling: "no",
-                style: 'width: 100%; height: 100%',
+                style: 'width: 100%; height: 100%; border: none;',
             },
             iframe = document.createElement('iframe');
 
@@ -90,6 +91,12 @@ module.exports = function (config) {
         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};
 
@@ -99,7 +106,7 @@ module.exports = function (config) {
             message.messageId = messageId;
 
             log('send message', message);
-            window.frames[fields[mainField].iFrameName].postMessage(message, '*');
+            window.frames[fields[mainFieldName].iFrameName].postMessage(message, '*');
         });
     }
 
@@ -112,6 +119,14 @@ module.exports = function (config) {
         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');
     }
@@ -175,16 +190,28 @@ module.exports = function (config) {
                     return;
                 }
                 fields[r.fieldName].isReady = true;
-                const ready = Object.keys(fields)
+
+                if (r.fieldName === mainFieldName) {
+                    createRemainingIframes();
+                }
+
+                const areAllReady = Object.keys(fields)
                     .map((key) => fields[key].isReady)
                     .reduce((a, b) => a && b, true);
 
-                if (ready) {
-                    emitEvent('ready');
+                if (areAllReady) {
+                    addOnTouchedEventListener();
+                    emitEvent(EVENT_ON_READY);
                 }
             },
             fieldChanged: function (response) {
-                emitEvent('change', response);
+                emitEvent(EVENT_ON_CHANGE, response);
+            },
+            fieldFocused: function (response) {
+                emitEvent(EVENT_ON_FOCUS, response);
+            },
+            fieldBlurred: function (response) {
+                emitEvent(EVENT_ON_BLUR, response);
             },
         };
 

package/README.doc.md

@@ -1,98 +0,0 @@
-# PTP Form/Field
-
-This repository is part of the PTP project. The goal of this JS library to provide a secure way for non-PCI compliant 
-applications to collect CHD (card holder data), tokenize it and use the tokens to make a payment via regular Payyo API
-
-This library consists of two parts:
-
-1. Form - manages a form of secure fields
-2. and Field - secure field itself
-
-Each field which is may contain CHD is an HTML IFrame and JS code hosted on PCI-compliant environment. Field and Form 
-components are communicates with each other by message passing. The Field component avoids exposing CHD from IFrame to 
-the Form component which is supposed to be running on client (non-PCI -compliant environment).
-
-## Development
-
-### Requirements
-
-Before you start please make sure that you have installed and configured the following tools and utils:
-
-1. [Docker](https://docs.docker.com/engine/install/)
-
-### Install project dependencies
-
-Project requirements are managed by [Yarn](https://yarnpkg.com/) which is running inside Docker container. 
-You can install all the dependencies with the command: 
-
-```shell
-make inastall
-```
-
-To run arbitrary Yarn command you can use Makefile target like this:
-
-```shell
-make yarn <command> [arguments]
-```
-
-### Dev Server
-
-Webpack dev server is used for development. To run it execute the following command
-
-```shell
-make serve
-```
-
-The dev server serves the test page with example form. The page used PTP project as backend to tokenize the card holder 
-data (CHD). To have a fully functional application please make sure:
-
-1. you need to have PTP project up and running locally
-2. or adjust the project settings to use PTP SANDBOX/PROD environment as backend by adjusting `PTP_BASE_URL` variable in `package.json`
-
-## CI/CD
-
-The project CI/DC is AWS Code Tools. See CI configuration in `buildspec.yml` and `buildspec-npm.yml`. 
-See details in [Deployment](#deployment) and [NPM package publishing](#npm-package-publishing) sections.
-
-## Deployment
-
-### Field component
-
-Each push to the repository produces a build which can be deployed to with AWS Code Tools. The `fielld` component is
-deployed to AWS S3 and distributed with AWS CloudFront. The client part is published to npm registry. 
-See [NPM package publishing](#npm-package-publishing) section for more details. 
-
-### Form component 
-
-Form component is distributed via [NPM](https://www.npmjs.com/) to let the library easily pulled and used by Payyo team
-as well as other integrators.
-
-## NPM package publishing
-
-> ⚠ **Note**: Before publishing the package ensure that the package version is updated in `package.json`.
-
-To make the library available to the public and used in other Payyo projects and other user you need to publish it to NPM. 
-We have the NPM account registered to `developers@payyo.ch` email and organization `payyo` defined there. 
-
-### Init the package
-
-This needs to be run once when package is created or renamed:
-
-```shell
-npm init --scope=<your_org_name>
-```
-
-For example:
-
-```shell
-npm init --scope=payyo
-```
-
-The command will create a `package.json` file with the provided package details.
-
-### Publish NPM package 
-
-Run the following commands to publish the package to NPM and make it public:
-
-1. `make npmlogin` and provide your credentials
-2. `make publish` to publish the package