hosted-fields-sdk 1.2.2 → 1.2.4

package/CHANGES.md

@@ -1,3 +1,10 @@
+#### 1.2.4
+- Updated dependencies and patched vulnerabilities
+
+#### 1.2.3
+- Security update: PostMessage origin checks
+- Support auto-focus on next field when value is valid
+
 #### 1.2.2
 - Upgrade in package.json and security vulnerabilities in dependencies
 

package/README.md

@@ -3,6 +3,11 @@
 Hosted fields SDK is a toolkit that allows you generate a form/set of fields. It is published as a node-module to the public [npm registry](https://www.npmjs.com/package/hosted-fields-sdk).
 
 
+## Demo
+[[Live demo](https://codesandbox.io/s/dry-fire-q9txy?file=/src/App.js:5219-5240)]
+
+## Setup
+
 ```
   npm i hosted-fields-sdk --save
 
@@ -78,6 +83,7 @@ Setup is the first function you will call. It takes a config-object as its only
     service: 'payment_method_service', // service of the payment method. Not mandatory (AstropayCard requires this)
     styles: 'any custom styles you wish to include',
     callback: () => someFunction,
+    autoFocusNext: true,
     onLoadCallback: () => someFunction
     el = A domElement to render the hosted fields in
 }
@@ -87,6 +93,11 @@ Setup is the first function you will call. It takes a config-object as its only
 
 Choose if all fields should be returned in a single iframe (`single`) or separate iframes (`multiple`). Defaults to `multiple` for backwards compability.
 
+#### autoFocusNext
+From version `1.2.3` of the hosted-fields-sdk and Hosted-fields `1.0.31`, hosted-fields can be support to auto focus on the next field when a valid value has been entered. E.g when the user has entered their creditcard number, focus will automatically be put on expiry and then on to cvc.
+
+Defaults to `false`.
+
 **callback**
 Pass in a function that you want to be called when the values from the fields are fetched.
 
@@ -356,7 +367,7 @@ HostedFields.setup({
   service: 'some service',
   styles: '.hosted-input-container .input-container input { color: red; }',
   callback: () => formCallbackHandler,
-  onLoadCallback: () => formHasLoadedCallbackhandler
+  onLoadCallback: () => formHasLoadedCallbackhandler,
   el: '#hosted-fields-wrapper'
 })
 

package/dist/sdk/api/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HostedFields=void 0;var merchantId,renderMode,fields,hostedfieldsurl,service,styles,_keys=require("babel-runtime/core-js/object/keys"),_keys2=_interopRequireDefault(_keys),_extends2=require("babel-runtime/helpers/extends"),_extends3=_interopRequireDefault(_extends2),_objectWithoutProperties2=require("babel-runtime/helpers/objectWithoutProperties"),_objectWithoutProperties3=_interopRequireDefault(_objectWithoutProperties2),_actions=require("./actions");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var el,callback,onLoadCallback,targets=[],responses=[],onLoadCounter=0,window=document.parentWindow||document.defaultView;function setup(e){merchantId=e.merchantId,renderMode=e.renderMode,hostedfieldsurl=e.hostedfieldsurl,fields=e.fields,service=e.service,styles=e.styles,callback=e.callback,onLoadCallback=e.onLoadCallback,el=e.el,(renderMode&&"single"===renderMode?registerSingleIframe:registerIframes)()}function get(){targets.forEach(function(e){e.target.postMessage({action:_actions.actions.get,merchantId:merchantId,id:e.id},"*")})}function reset(){targets=[]}function destroyContent(){targets=[],responses=[],onLoadCallback=callback=el=styles=service=hostedfieldsurl=fields=merchantId=null,onLoadCounter=0}function registerIframes(){targets=targets.concat(fields.map(function(e){return initIframe(e)}))}function registerSingleIframe(){targets=initSingleIframe()}function eventHandler(e){switch(e.data.action){case _actions.actions.formData:responses.push({id:e.data.id,data:e.data.formData}),sendCallback();break;case _actions.actions.formSubmit:get()}}function sendCallback(){var t,r=responses.map(function(e){return e.id}),e=targets.map(function(e){return e.id});r.length===e.length&&(t=!0,e.forEach(function(e){t=r.includes(e)}),t&&(e=responses.reduce(function(e,t){var r=e.errors,n=(0,_objectWithoutProperties3.default)(e,["errors"]),e=t.data,t=e.errors,e=(0,_objectWithoutProperties3.default)(e,["errors"]),e=(0,_extends3.default)({},n,e),t=(0,_extends3.default)({},r,t);return 0<(0,_keys2.default)(t).length&&(e.errors=t),e},{}),responses=[],callback()(e)))}function initIframe(e){var t=document.createElement("iframe");t.id="hosted-field-"+e.id,t.name="hosted-field-"+e.id,t.src=hostedfieldsurl+"?mid="+merchantId;var r=document.querySelector(el),n=document.createElement("div");n.id="hosted-field-container-"+e.id,n.className="hosted-field-container";try{n.appendChild(t),r.appendChild(n);var a=document.querySelector("#"+t.id).contentWindow;return t.onload=createIframeProxy.bind(this,e,a),{id:t.id,target:a}}catch(e){console.log(e),onLoadCallback()()}}function createIframeProxy(e,t){var r={};r[e.name]=e,window.addEventListener("message",eventHandler,!1),t.postMessage({action:_actions.actions.setupContent,styles:styles,fields:r,service:service},"*"),++onLoadCounter===fields.length&&onLoadCallback&&(onLoadCallback()(),onLoadCounter=0)}function initSingleIframe(){var e=document.createElement("iframe");e.id="hosted-field-single-iframe",e.name="hosted-field-single-iframe",e.src=hostedfieldsurl+"?mid="+merchantId;var t=document.querySelector(el),r=document.createElement("div");r.id="hosted-field-container-single-iframe",r.className="hosted-field-container";try{r.appendChild(e),t.appendChild(r);var n=document.querySelector("#hosted-field-single-iframe").contentWindow;return e.onload=createSingleIframeProxy.bind(this,fields,n),[{id:e.id,target:n}]}catch(e){console.log(e),onLoadCallback()()}}function createSingleIframeProxy(e,t){var r={};e.forEach(function(e){r[e.name]=e}),window.addEventListener("message",eventHandler,!1),t.postMessage({action:_actions.actions.setupSingleIframeContent,styles:styles,fields:r,service:service},"*"),onLoadCallback()()}var HostedFields=exports.HostedFields={setup:setup,get:get,reset:reset};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HostedFields=void 0;var merchantId,renderMode,fields,hostedfieldsurl,service,styles,_keys=require("babel-runtime/core-js/object/keys"),_keys2=_interopRequireDefault(_keys),_extends2=require("babel-runtime/helpers/extends"),_extends3=_interopRequireDefault(_extends2),_objectWithoutProperties2=require("babel-runtime/helpers/objectWithoutProperties"),_objectWithoutProperties3=_interopRequireDefault(_objectWithoutProperties2),_actions=require("./actions");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var el,callback,onLoadCallback,autoFocusNext,targets=[],responses=[],onLoadCounter=0,window=document.parentWindow||document.defaultView;function setup(e){merchantId=e.merchantId,renderMode=e.renderMode,hostedfieldsurl=e.hostedfieldsurl,fields=e.fields,service=e.service,styles=e.styles,callback=e.callback,onLoadCallback=e.onLoadCallback,autoFocusNext=e.autoFocusNext||!1,el=e.el,renderMode&&"single"===renderMode?registerSingleIframe():registerIframes()}function validateOrigin(e){return-1<[e,"https://test-hostedpages.paymentiq.io","https://hostedpages.paymentiq.io"].indexOf(e)}function get(){targets.forEach(function(e){e.target.postMessage({action:_actions.actions.get,merchantId:merchantId,id:e.id},hostedfieldsurl)})}function reset(){targets=[]}function destroyContent(){targets=[],responses=[],onLoadCallback=callback=el=styles=service=hostedfieldsurl=fields=merchantId=null,onLoadCounter=0}function registerIframes(){targets=targets.concat(fields.map(function(e){return initIframe(e)}))}function registerSingleIframe(){targets=initSingleIframe()}function eventHandler(e){if(validateOrigin(e.origin))switch(e.data.action){case _actions.actions.formData:responses.push({id:e.data.id,data:e.data.formData}),sendCallback();break;case _actions.actions.formSubmit:get()}else console.error("Received message from invalid origin",e.origin)}function sendCallback(){var t=responses.map(function(e){return e.id}),e=targets.map(function(e){return e.id});if(t.length===e.length){var r=!0;if(e.forEach(function(e){r=t.includes(e)}),r){var n=responses.reduce(function(e,t){var r=e.errors,n=(0,_objectWithoutProperties3.default)(e,["errors"]),o=t.data,a=o.errors,s=(0,_objectWithoutProperties3.default)(o,["errors"]),i=(0,_extends3.default)({},n,s),d=(0,_extends3.default)({},r,a);return 0<(0,_keys2.default)(d).length&&(i.errors=d),i},{});responses=[],callback()(n)}}}function initIframe(e){var t=document.createElement("iframe");t.id="hosted-field-"+e.id,t.name="hosted-field-"+e.id,t.src=hostedfieldsurl+"?mid="+merchantId;var r=document.querySelector(el),n=document.createElement("div");n.id="hosted-field-container-"+e.id,n.className="hosted-field-container";try{n.appendChild(t),r.appendChild(n);var o=document.querySelector("#"+t.id).contentWindow;return t.onload=createIframeProxy.bind(this,e,o),{id:t.id,target:o}}catch(e){console.log(e),onLoadCallback()()}}function createIframeProxy(e,t){var r={};r[e.name]=e,window.addEventListener("message",eventHandler,!1),t.postMessage({action:_actions.actions.setupContent,styles:styles,fields:r,service:service},hostedfieldsurl),++onLoadCounter===fields.length&&onLoadCallback&&(onLoadCallback()(),onLoadCounter=0)}function initSingleIframe(){var e=document.createElement("iframe");e.id="hosted-field-single-iframe",e.name="hosted-field-single-iframe",e.src=hostedfieldsurl+"?mid="+merchantId;var t=document.querySelector(el),r=document.createElement("div");r.id="hosted-field-container-single-iframe",r.className="hosted-field-container";try{r.appendChild(e),t.appendChild(r);var n=document.querySelector("#hosted-field-single-iframe").contentWindow;return e.onload=createSingleIframeProxy.bind(this,fields,n),[{id:e.id,target:n}]}catch(e){console.log(e),onLoadCallback()()}}function createSingleIframeProxy(e,t){var r={};e.forEach(function(e){r[e.name]=e}),window.addEventListener("message",eventHandler,!1),t.postMessage({action:_actions.actions.setupSingleIframeContent,styles:styles,fields:r,service:service,settings:{autoFocusNext:autoFocusNext}},hostedfieldsurl),onLoadCallback()()}var HostedFields=exports.HostedFields={setup:setup,get:get,reset:reset};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hosted-fields-sdk",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Hosted fields sdk",
   "main": "dist/index.js",
   "scripts": {
@@ -10,20 +10,20 @@
     "uglify": "recursive-uglifyjs dist"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.2.6",
-    "babel-plugin-rewire": "^1.1.0",
+    "babel-cli": "^6.18.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-rewire": "^1.2.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "latest",
     "babel-preset-stage-2": "^6.24.1",
-    "babelify": "^7.3.0",
-    "browserify": "^16.2.3",
-    "eslint": "^5.4.0",
-    "jasmine-core": "^2.5.2",
+    "babelify": "^10.0.0",
+    "browserify": "^17.0.0",
+    "eslint": "^8.11.0",
+    "jasmine-core": "^4.0.1",
     "ncp": "^2.0.0",
     "recursive-uglifyjs": "0.2.0",
-    "rimraf": "^2.5.4",
-    "watchify": "^3.7.0"
+    "rimraf": "^3.0.2",
+    "watchify": "^4.0.0"
   },
   "repository": {
     "type": "git",