@payyo/ptp-js 0.2.0 → 0.2.2

package/README.doc.md

@@ -51,14 +51,16 @@ data (CHD). To have a fully functional application please make sure:
 
 ## CI/CD
 
-CI server is Bitbucket Pipeline. See CI configuration in `bitbucket-pipelines.yml`.
+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 the specific environment via Bitbucket Pipeline.
-Each Git tag triggers automated build and deployment DEV and PROD packages.
+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 
 
@@ -67,16 +69,30 @@ 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. To publish the 
-package to NPM you need to execute the following commands:
+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
+```
 
-1. 
-2. npm publish --access public
+The command will create a `package.json` file with the provided package details.
 
+### Publish NPM package 
 
-## TODO: 
-1. create appropriate account on NPM
-2. save account credentials in LastPass
-3. describe publishing process here
+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

package/package.json

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

package/src/form/index.js

@@ -220,7 +220,7 @@ module.exports = function (config) {
     function checkFocus() {
         for (let [, field] of Object.entries(fields)) {
             const iframe = window.frames[field.iFrameName];
-            if (typeof iframe) {
+            if (iframe) {
                 iframe.postMessage({'type': 'checkFocus'}, '*');
             }
         }

package/dist/form/v1.js

@@ -1,2 +0,0 @@
-(()=>{var e={415:e=>{e.exports=function(e){const t={},r={},n=[],o={},s=i();let a=null;function i(){return Math.random().toString(36).substr(2,9)}function l(){if(e.debug&&window.console){const e=Array.prototype.slice.call(arguments);e.unshift("[PTP FORM]"),console.log.apply(console,e)}}function d(t){const r=t.container,o=t.iFrameName,a={id:o,name:o,class:o,src:e.iframeUri+"?"+new URLSearchParams({form_id:s,field_name:t.fieldName,field_names:n,placeholder:t.placeholder,input_type:t.inputType,debug:e.debug?"1":"0"}).toString(),frameborder:"0",scrolling:"no",style:"width: 100%; height: 100%"},i=document.createElement("iframe");for(Object.keys(a).forEach((function(e){i.setAttribute(e,a[e])}));r.hasChildNodes();)r.removeChild(r.lastChild);r.appendChild(i),t.iframe=i[0]}function c(e,t={}){const n={params:t,type:e,formId:s,messageId:null};return new Promise((t=>{const s=e+":"+i();o[s]=t,n.messageId=s,l("send message",n),window.frames[r[a].iFrameName].postMessage(n,"*")}))}t.init=function(e){for(let t in e){if(!e.hasOwnProperty(t))return;let o=e[t],a=o.container;"string"==typeof a&&(a=document.getElementById(a)),r[t]={fieldName:t,iFrameName:"ptp-field-iframe-"+s+"-"+t,container:a,placeholder:o.placeholder||"",inputType:o.inputType||"text",isReady:!1},n.push(t)}a=n[0];for(let e=0;e<n.length;e++)d(r[n[e]])};const f={};function m(e){const n=e.data;if(s!==n.formId)return;l(`message received of type "${n.type}"`,n);const a={fieldReady:e=>{if(void 0===r[e.fieldName])return;r[e.fieldName].isReady=!0;Object.keys(r).map((e=>r[e].isReady)).reduce(((e,t)=>e&&t),!0)&&u("ready")},fieldChanged:function(e){u("change",e)}},i=n.messageId,d=o[i];if(void 0!==d)delete o[i],d.apply(t,[n.response]);else{const e=a[n.type];e&&e.apply(t,[n.response])}}function u(){const e=Array.prototype.slice.call(arguments),t=e.shift(),r=f[t];r?(l(`emit event "${t}"`,e),r.apply(null,e)):l(`no handler for event "${t}"`,e)}function p(){for(let[,e]of Object.entries(r)){const t=window.frames[e.iFrameName];t.postMessage({type:"checkFocus"},"*")}}return t.onChange=function(e){f.change=e},t.onReady=function(e){f.ready=e},t.validate=function(){return c("validateRequest")},t.submit=function(e){return c("submitRequest",{params:e||{},browserDetails:{browserUserAgent:navigator.userAgent,browserJavaEnabled:navigator.javaEnabled(),browserLanguage:navigator.language,browserColorDepth:screen.colorDepth,browserScreenHeight:screen.height,browserScreenWidth:screen.width,browserTZ:(new Date).getTimezoneOffset()}}).then((e=>e.success?Promise.resolve(e.result):Promise.reject({error:e.error,error_details:e.error_details})))},t.focus=function(e){const t=r[e]||null;t&&window.frames[t.iFrameName].focus()},t.setStyle=function(e,t,n){r[e]&&window.frames[r[e].iFrameName].postMessage({type:"setStyle",params:{selector:t,rules:n}},"*")},window.addEventListener("message",m,!1),t.destroy=function(){window.removeEventListener("message",m,!1),window.addEventListener("touchend",p,!0);for(let e in r){let t=document.getElementById(r[e].iFrameName);t&&t.parentNode.removeChild(t)}},t}}},t={};(function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,r),s.exports})(415)})();
-//# sourceMappingURL=v1.js.map

package/dist/form/v1.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"v1.js","mappings":"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","sources":["webpack://@payyoag/ptp-js/./src/form/index.js","webpack://@payyoag/ptp-js/webpack/bootstrap","webpack://@payyoag/ptp-js/webpack/startup"],"sourcesContent":["module.exports = function (config) {\n    const form = {},\n        fields = {},\n        fieldNames = [],\n        callbacks = {},\n        formId = generateRandomId();\n\n    const EVENT_ON_CHANGE = 'change';\n    const EVENT_ON_READY = 'ready';\n\n    let mainField = null;\n\n    function generateRandomId() {\n        return Math.random().toString(36).substr(2, 9);\n    }\n\n    function log() {\n        if (config.debug && window.console) {\n            const args = Array.prototype.slice.call(arguments);\n            args.unshift('[PTP FORM]');\n            console.log.apply(console, args);\n        }\n    }\n\n    form.init = function (fieldsMap) {\n        for (let fieldName in fieldsMap) {\n            if (!fieldsMap.hasOwnProperty(fieldName)) {\n                return;\n            }\n\n            let field = fieldsMap[fieldName];\n            let fieldContainer = field.container;\n\n            if (typeof fieldContainer === 'string') {\n                fieldContainer = document.getElementById(fieldContainer);\n            }\n\n            fields[fieldName] = {\n                fieldName: fieldName,\n                iFrameName: 'ptp-field-iframe-' + formId + '-' + fieldName,\n                container: fieldContainer,\n                placeholder: field.placeholder || '',\n                inputType: field.inputType || 'text',\n                isReady: false\n            };\n\n            fieldNames.push(fieldName);\n        }\n\n        mainField = fieldNames[0];\n\n        for (let i = 0; i < fieldNames.length; i++) {\n            createIframe(fields[fieldNames[i]]);\n        }\n    };\n\n    function createIframe(field) {\n        const placeholder = field.container,\n            iFrameName = field.iFrameName,\n            attributes = {\n                id: iFrameName,\n                name: iFrameName,\n                class: iFrameName,\n                src: config.iframeUri + '?' + (new URLSearchParams({\n                    form_id: formId,\n                    field_name: field.fieldName,\n                    field_names: fieldNames,\n                    placeholder: field.placeholder,\n                    input_type: field.inputType,\n                    debug: config.debug ? '1' : '0',\n                })).toString(),\n                frameborder: \"0\",\n                scrolling: \"no\",\n                style: 'width: 100%; height: 100%',\n            },\n            iframe = document.createElement('iframe');\n\n        Object.keys(attributes).forEach(function (key) {\n            iframe.setAttribute(key, attributes[key]);\n        });\n\n        while (placeholder.hasChildNodes()) {\n            placeholder.removeChild(placeholder.lastChild);\n        }\n        placeholder.appendChild(iframe);\n\n        field.iframe = iframe[0];\n    }\n\n    function postMessage(type, params = {}) {\n        const message = {params: params, type: type, formId: formId, messageId: null};\n\n        return new Promise((resolve) => {\n            const messageId = type + \":\" + generateRandomId();\n            callbacks[messageId] = resolve;\n            message.messageId = messageId;\n\n            log('send message', message);\n            window.frames[fields[mainField].iFrameName].postMessage(message, '*');\n        });\n    }\n\n    const handlers = {};\n    form.onChange = function (handler) {\n        handlers[EVENT_ON_CHANGE] = handler;\n    }\n\n    form.onReady = function (handler) {\n        handlers[EVENT_ON_READY] = handler;\n    }\n\n    form.validate = function () {\n        return postMessage('validateRequest');\n    }\n\n    form.submit = function (params) {\n        return postMessage('submitRequest', {\n            params: params || {},\n            browserDetails: {\n                browserUserAgent: navigator.userAgent,\n                browserJavaEnabled: navigator.javaEnabled(),\n                browserLanguage: navigator.language,\n                browserColorDepth: screen.colorDepth,\n                browserScreenHeight: screen.height,\n                browserScreenWidth: screen.width,\n                browserTZ: (new Date()).getTimezoneOffset()\n            }\n        }).then((res) => {\n            if (res.success) {\n                return Promise.resolve(res.result);\n            }\n\n            return Promise.reject({\n                error: res.error,\n                error_details: res.error_details,\n            });\n        });\n    }\n\n    form.focus = function (field) {\n        const f = fields[field] || null;\n        if (f) {\n            window.frames[f.iFrameName].focus();\n        }\n    };\n\n    form.setStyle = function (fieldName, selector, cssRules) {\n        if (!fields[fieldName]) {\n            return;\n        }\n\n        window.frames[fields[fieldName].iFrameName].postMessage({\n            type: 'setStyle',\n            params: {\n                selector: selector,\n                rules: cssRules,\n            }\n        }, '*');\n    };\n\n    function receiveMessage(message) {\n        const event = message.data;\n        if (formId !== event.formId) {\n            return;\n        }\n\n        log(`message received of type \"${event.type}\"`, event);\n\n        const handlers = {\n            fieldReady: (r) => {\n                if (fields[r.fieldName] === undefined) {\n                    return;\n                }\n                fields[r.fieldName].isReady = true;\n                const ready = Object.keys(fields)\n                    .map((key) => fields[key].isReady)\n                    .reduce((a, b) => a && b, true);\n\n                if (ready) {\n                    emitEvent('ready');\n                }\n            },\n            fieldChanged: function (response) {\n                emitEvent('change', response);\n            },\n        };\n\n        const messageId = event.messageId,\n            callback = callbacks[messageId];\n\n        if (callback !== undefined) {\n            delete callbacks[messageId];\n            callback.apply(form, [event.response]);\n        } else {\n            const handler = handlers[event.type];\n            if (handler) {\n                handler.apply(form, [event.response]);\n            }\n        }\n    }\n\n    function emitEvent() {\n        const args = Array.prototype.slice.call(arguments);\n        const eventName = args.shift();\n        const handler = handlers[eventName];\n        if (handler) {\n            log(`emit event \"${eventName}\"`, args);\n            handler.apply(null, args);\n        } else {\n            log(`no handler for event \"${eventName}\"`, args);\n        }\n    }\n\n    window.addEventListener('message', receiveMessage, false);\n\n    function addOnTouchedEventListener() {\n        window.addEventListener('touchend', checkFocus, true);\n    }\n\n    function checkFocus() {\n        for (let [, field] of Object.entries(fields)) {\n            const iframe = window.frames[field.iFrameName];\n            if (typeof iframe) {\n                iframe.postMessage({'type': 'checkFocus'}, '*');\n            }\n        }\n    }\n\n    form.destroy = function () {\n        window.removeEventListener('message', receiveMessage, false);\n        window.addEventListener('touchend', checkFocus, true);\n        for (let fieldName in fields) {\n            let iframe = document.getElementById(fields[fieldName].iFrameName);\n            if (iframe) {\n                iframe.parentNode.removeChild(iframe);\n            }\n        }\n    }\n\n    return form;\n};\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(415);\n"],"names":["module","exports","config","form","fields","fieldNames","callbacks","formId","generateRandomId","mainField","Math","random","toString","substr","log","debug","window","console","args","Array","prototype","slice","call","arguments","unshift","apply","createIframe","field","placeholder","container","iFrameName","attributes","id","name","class","src","iframeUri","URLSearchParams","form_id","field_name","fieldName","field_names","input_type","inputType","frameborder","scrolling","style","iframe","document","createElement","Object","keys","forEach","key","setAttribute","hasChildNodes","removeChild","lastChild","appendChild","postMessage","type","params","message","messageId","Promise","resolve","frames","init","fieldsMap","hasOwnProperty","fieldContainer","getElementById","isReady","push","i","length","handlers","receiveMessage","event","data","fieldReady","r","undefined","map","reduce","a","b","emitEvent","fieldChanged","response","callback","handler","eventName","shift","checkFocus","entries","onChange","onReady","validate","submit","browserDetails","browserUserAgent","navigator","userAgent","browserJavaEnabled","javaEnabled","browserLanguage","language","browserColorDepth","screen","colorDepth","browserScreenHeight","height","browserScreenWidth","width","browserTZ","Date","getTimezoneOffset","then","res","success","result","reject","error","error_details","focus","f","setStyle","selector","cssRules","rules","addEventListener","destroy","removeEventListener","parentNode","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__"],"sourceRoot":""}