@gr4vy/secure-fields 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+# v1.4.0 (Wed Apr 12 2023)
+
+#### 🚀 Enhancement
+
+- fix: card vault success callback not fired in mobile view [#263](https://github.com/gr4vy/secure-fields/pull/263) ([@theturboboy](https://github.com/theturboboy))
+
+#### 🐛 Bug Fix
+
+- fix: return useful information on card vault failure [#248](https://github.com/gr4vy/secure-fields/pull/248) ([@theturboboy](https://github.com/theturboboy))
+
+#### 🏠 Internal
+
+- build(deps-dev): bump style-loader from 3.3.1 to 3.3.2 [#234](https://github.com/gr4vy/secure-fields/pull/234) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+- build(deps-dev): bump typedoc from 0.23.26 to 0.23.28 [#235](https://github.com/gr4vy/secure-fields/pull/235) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+- build(deps-dev): bump typedoc from 0.23.25 to 0.23.26 [#208](https://github.com/gr4vy/secure-fields/pull/208) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 2
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- Andrei Haidukevich ([@theturboboy](https://github.com/theturboboy))
+
+---
+
+# v1.3.0 (Thu Feb 16 2023)
+
+#### 🐛 Bug Fix
+
+- build(deps): bump css-loader from 6.7.2 to 6.7.3 [#191](https://github.com/gr4vy/secure-fields/pull/191) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+- build(deps-dev): bump typedoc from 0.23.24 to 0.23.25 [#195](https://github.com/gr4vy/secure-fields/pull/195) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### 🏠 Internal
+
+- build(deps-dev): bump typescript-transform-paths from 3.4.4 to 3.4.6 [#181](https://github.com/gr4vy/secure-fields/pull/181) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 1
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+
+---
+
 # v1.2.0 (Fri Feb 03 2023)
 
 #### 🐛 Bug Fix

package/README.md

@@ -68,8 +68,8 @@ secureFields.addEventListener(SecureFields.Events.CARD_VAULT_SUCCESS, () =>
   console.log('Card tokenized successfully')
 )
 
-secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, () =>
-  console.log('Card tokenization failed')
+secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, (data) =>
+  console.log('Card tokenization failed', data) // data.status, data.code, data.message
 )
 
 number.addEventListener('input', (data) => {
@@ -183,11 +183,11 @@ WebkitFontSmoothing
 
 The following events can be listened to by attaching an event handler to the `SecureFields` instance using the `addEventListener` method.
 
-| Name                 | Description                                                  | Example                                                                                                                                 |
-| -------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `CARD_VAULT_SUCCESS` | Triggered when the card is successfully vaulted.             | `secureFields.addEventListener(SecureFields.Events.CARD_VAULT_SUCCESS, () => { console.log('Card has been tokenized successfully!') })` |
-| `CARD_VAULT_FAILURE` | Triggered when the card vaulting fails.                      | `secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, () => { console.log('Couldn\'t tokenize the card') })`           |
-| `READY`              | Triggered when Secure Fields is loaded and ready to be used. | `secureFields.addEventListener(SecureFields.READY, () => { console.log('Secure fields loaded') })`                                      |
+| Name                 | Description                                                  | Example                                                                                                                                                                           |
+| -------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `CARD_VAULT_SUCCESS` | Triggered when the card is successfully vaulted.             | `secureFields.addEventListener(SecureFields.Events.CARD_VAULT_SUCCESS, () => { console.log('Card has been tokenized successfully!') })`                                           |
+| `CARD_VAULT_FAILURE` | Triggered when the card vaulting fails.                      | `secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, ({ code, status, message }) => { console.log('Couldn\'t tokenize the card', { code, status, message }) })` |
+| `READY`              | Triggered when Secure Fields is loaded and ready to be used. | `secureFields.addEventListener(SecureFields.READY, () => { console.log('Secure fields loaded') })`                                                                                |
 
 ### Field events
 

package/lib/index.js

@@ -1 +1 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var r=e();for(var n in r)("object"==typeof exports?exports:t)[n]=r[n]}}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{SecureFields:()=>U,SecureInput:()=>j});var r,n,o="@gr4vy-secure-fields-debug";!function(t){t.CARD_VAULT_SUCCESS="card-vault-success",t.CARD_VAULT_FAILURE="card-vault-failure",t.READY="ready"}(r||(r={})),function(t){t.FOCUSED="data-secure-fields-focused",t.INVALID="data-secure-fields-invalid"}(n||(n={}));var i="secure-fields";function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function c(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,i=[],a=!0,c=!1;try{for(r=r.call(t);!(a=(n=r.next()).done)&&(i.push(n.value),!e||i.length!==e);a=!0);}catch(t){c=!0,o=t}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}}(t,e)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var s=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.subscribers=[]}var e=t.prototype;return e.subscribe=function(t,e){this.subscribers.push([t,e])},e.unsubscribe=function(t,e){this.subscribers=this.subscribers.filter((function(r){var n=c(r,2),o=n[0],i=n[1];return o!==t||i.toString()!==e.toString()}))},e.publish=function(t,e){this.subscribers.forEach((function(r){var n=c(r,2),o=n[0],i=n[1];return setTimeout((function(){return o===t?i(e):null}),0)}))},t}()),u=function(t){return"[object Object]"===Object.prototype.toString.call(t)};function l(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var f={debug:!1,level:"log"},d=function(t,e,r){var n=function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){l(t,e,r[e])}))}return t}({},f,r),i=n.debug,a=n.level;(i||"true"===localStorage.getItem(o))&&console[a]("Gr4vy - Secure Fields - ".concat(t),e||{})},p=function(t){return t!=t.toLowerCase()&&(t=t.replace(/[A-Z]/g,(function(t){return"-"+t.toLowerCase()}))),t};function y(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function b(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,i=[],a=!0,c=!1;try{for(r=r.call(t);!(a=(n=r.next()).done)&&(i.push(n.value),!e||i.length!==e);a=!0);}catch(t){c=!0,o=t}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}}(t,e)||m(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(t){return function(t){if(Array.isArray(t))return y(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||m(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(t,e){if(t){if("string"==typeof t)return y(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?y(t,e):void 0}}var v=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(t).reduce((function(n,o){var i,a=b(o,2),c=a[0],s=a[1];return u(s)?(i=n).push.apply(i,h(e(t[c],"".concat((r+c).match(/[a-zA-Z0-9]+/g).join("-"),"-")))):(c=p(c).replace(/^-/,""),n.push(["--".concat(r).concat(c),s])),n}),[])};return e(t)};function g(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function O(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){g(t,e,r[e])}))}return t}function w(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);r.push.apply(r,n)}return r}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}var j=function(){function t(e){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var n=e.frameUrl,o=e.parentOrigin,i=e.font,a=e.options.type,c=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}(e.options,["type"]);this.frameUrl=n,this.parentOrigin=o,this.type=a,this.options=c;var s=v(c.styles);this.frame=document.createElement("iframe"),this.frame.id=a,this.frame.src="".concat(n,"/input.html?parentOrigin=").concat(o,"&type=").concat(this.type),this.frame.style.display="block",this.frame.style.height="100%",this.frame.style.border="none",this.frame.style.width="100%",i&&(this.frame.src+="&font=".concat(i)),this.frame.onload=function(){r._postMessage({type:"update",data:w(O({},r.options),{styles:s})}),d("Added field",r.options)}}var e=t.prototype;return e._postMessage=function(t){this.frame.contentWindow.postMessage(O({channel:i},t),this.frameUrl)},e.update=function(t){this.options=O({},this.options,t);var e=v(O({},this.options.styles,t.styles)),r=w(O({},this.options,t),{styles:e});this._postMessage({type:"update",data:w(O({},r),{styles:e})}),d("Updated field",this.options)},e.setPlaceholder=function(t){this.update({placeholder:t})},e.setStyles=function(t){this.update({styles:t})},t}();function S(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function E(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function A(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){E(t,e,r[e])}))}return t}function P(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);r.push.apply(r,n)}return r}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}var U=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.config=A({environment:"production"},e);var o="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl=window.SECURE_FIELDS_FRAME_URL||"https://secure-fields.".concat(o).concat(this.config.gr4vyId,".gr4vy.app"),this.parentOrigin=window.location.origin,this.controller=document.createElement("iframe"),this.controller.id="controller",this.controller.src="".concat(this.frameUrl,"/controller.html?parentOrigin=").concat(this.parentOrigin,"&sessionId=").concat(this.config.sessionId,"&gr4vyId=").concat(this.config.gr4vyId,"&environment=").concat(this.config.environment),this.controller.style.position="absolute",this.controller.style.left="-9999999px",document.body.appendChild(this.controller),window.onload=function(){s.publish(r.READY,A({version:t.version},n.config))},d("Initialized",P(A({},this.config),{frameUrl:this.frameUrl,parentOrigin:this.parentOrigin}))}var e,a,c=t.prototype;return c._addField=function(t,e){var r=this;if(!(t="string"==typeof t?document.querySelector(t):t))return e;var o=document.createElement("div");return o.classList.add("secure-fields__input","secure-fields__input--".concat(p(e.type))),o.appendChild(e.frame),t.parentNode.replaceChild(o,t),window.addEventListener("message",(function(t){var i;if(t.origin===r.frameUrl&&(null===(i=t.data.data)||void 0===i?void 0:i.id)===e.type)switch(t.data.type){case"blur":s.publish("".concat(e.type,":blur"),t.data.data),o.removeAttribute(n.FOCUSED),d("Field blurred",t.data.data);break;case"focus":s.publish("".concat(e.type,":focus"),t.data.data),o.setAttribute(n.FOCUSED,""),d("Field focused",t.data.data);break;case"input":s.publish("".concat(e.type,":input"),t.data.data),t.data.data.valid?o.removeAttribute(n.INVALID):o.setAttribute(n.INVALID,""),d("Field input changed",t.data.data)}})),e.addEventListener=this.addEventListener,e.removeEventListener=this.removeEventListener,e},c.addCardNumberField=function(t,e){return this.cardNumber||(this.cardNumber=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:P(A({label:"Card number"},e),{type:"number"})})),this._addField(t,this.cardNumber)},c.addSecurityCodeField=function(t,e){return this.securityCode||(this.securityCode=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:P(A({label:"Security code"},e),{type:"securityCode"})})),this._addField(t,this.securityCode)},c.addExpiryDateField=function(t,e){return this.expiryDate||(this.expiryDate=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:P(A({label:"Expiry date"},e),{type:"expiryDate"})})),this._addField(t,this.expiryDate)},c.addEventListener=function(t,e){var r=this.type,n="".concat(this.constructor===j?"".concat(r,":"):"").concat(t);s.subscribe(n,e)},c.removeEventListener=function(t,e){var r=this.type,n="".concat(this.constructor===j?"".concat(r,":"):"").concat(t);s.unsubscribe(n,e)},c.submit=function(){var t=this,e=function(n){if(n.origin===t.frameUrl&&n.data.channel===i){switch(n.data.type){case"success":s.publish(r.CARD_VAULT_SUCCESS),d("Payment method tokenized successfully");break;case"error":s.publish(r.CARD_VAULT_FAILURE),d("Failed to update checkout session")}window.removeEventListener("message",e)}};window.addEventListener("message",e),this.controller.contentWindow.postMessage({type:"submit",channel:i},this.frameUrl)},c.setDebug=function(t){localStorage.setItem(o,String(t))},c.addFont=function(t){this.font=t.replace(/\s/g,"+")},e=t,a=[{key:"Events",get:function(){return r}},{key:"version",get:function(){}}],null&&S(e.prototype,null),a&&S(e,a),t}();return e})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var r=t();for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{SecureFields:()=>C,SecureInput:()=>E});var r,n,i="@gr4vy-secure-fields-debug";!function(e){e.CARD_VAULT_SUCCESS="card-vault-success",e.CARD_VAULT_FAILURE="card-vault-failure",e.READY="ready"}(r||(r={})),function(e){e.FOCUSED="data-secure-fields-focused",e.INVALID="data-secure-fields-invalid"}(n||(n={}));var o="secure-fields";function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function s(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,i,o=[],a=!0,s=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);a=!0);}catch(e){s=!0,i=e}finally{try{a||null==r.return||r.return()}finally{if(s)throw i}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var u=new(function(){function e(){var t,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),r=void 0,(t="subscribers")in this?Object.defineProperty(this,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):this[t]=r,this.subscribers=[]}var t,r;return t=e,(r=[{key:"subscribe",value:function(e,t){this.subscribers.push([e,t])}},{key:"unsubscribe",value:function(e,t){this.subscribers=this.subscribers.filter((function(r){var n=c(r,2),i=n[0],o=n[1];return i!==e||o.toString()!==t.toString()}))}},{key:"publish",value:function(e,t){this.subscribers.forEach((function(r){var n=c(r,2),i=n[0],o=n[1];return setTimeout((function(){return i===e?o(t):null}),0)}))}}])&&s(t.prototype,r),e}()),l=function(e){return"[object Object]"===Object.prototype.toString.call(e)};function f(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var d={debug:!1,level:"log"},p=function(e,t,r){var n=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){f(e,t,r[t])}))}return e}({},d,r),o=n.debug,a=n.level;(o||"true"===localStorage.getItem(i))&&console[a]("Gr4vy - Secure Fields - ".concat(e),t||{})},y=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function h(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,i,o=[],a=!0,s=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);a=!0);}catch(e){s=!0,i=e}finally{try{a||null==r.return||r.return()}finally{if(s)throw i}}return o}}(e,t)||m(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e){return function(e){if(Array.isArray(e))return b(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||m(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(e,t){if(e){if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?b(e,t):void 0}}var g=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(e).reduce((function(n,i){var o,a=h(i,2),s=a[0],c=a[1];return l(c)?(o=n).push.apply(o,v(t(e[s],"".concat((r+s).match(/[a-zA-Z0-9]+/g).join("-"),"-")))):(s=y(s).replace(/^-/,""),n.push(["--".concat(r).concat(s),c])),n}),[])};return t(e)};function O(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){w(e,t,r[t])}))}return e}function S(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}var E=function(){function e(t){var r=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),w(this,"frameUrl",void 0),w(this,"parentOrigin",void 0),w(this,"frame",void 0),w(this,"type",void 0),w(this,"options",void 0),w(this,"addEventListener",void 0),w(this,"removeEventListener",void 0);var n=t.frameUrl,i=t.parentOrigin,o=t.font,a=t.options.type,s=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t.options,["type"]);this.frameUrl=n,this.parentOrigin=i,this.type=a,this.options=s;var c=g(s.styles);this.frame=document.createElement("iframe"),this.frame.id=a,this.frame.src="".concat(n,"/input.html?parentOrigin=").concat(i,"&type=").concat(this.type),this.frame.style.display="block",this.frame.style.height="100%",this.frame.style.border="none",this.frame.style.width="100%",o&&(this.frame.src+="&font=".concat(o)),this.frame.onload=function(){r._postMessage({type:"update",data:S(j({},r.options),{styles:c})}),p("Added field",r.options)}}var t,r;return t=e,(r=[{key:"_postMessage",value:function(e){this.frame.contentWindow.postMessage(j({channel:o},e),this.frameUrl)}},{key:"update",value:function(e){this.options=j({},this.options,e);var t=g(j({},this.options.styles,e.styles)),r=S(j({},this.options,e),{styles:t});this._postMessage({type:"update",data:S(j({},r),{styles:t})}),p("Updated field",this.options)}},{key:"setPlaceholder",value:function(e){this.update({placeholder:e})}},{key:"setStyles",value:function(e){this.update({styles:e})}}])&&O(t.prototype,r),e}();function A(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function P(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function U(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){P(e,t,r[t])}))}return e}function k(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}var C=function(){function e(t){var n=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),P(this,"config",void 0),P(this,"controller",void 0),P(this,"frameUrl",void 0),P(this,"apiUrl",void 0),P(this,"parentOrigin",void 0),P(this,"font",void 0),P(this,"cardNumber",void 0),P(this,"securityCode",void 0),P(this,"expiryDate",void 0),this.config=U({environment:"production"},t);var i="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl=window.SECURE_FIELDS_FRAME_URL||"https://secure-fields.".concat(i).concat(this.config.gr4vyId,".gr4vy.app"),this.parentOrigin=window.location.origin,this.controller=document.createElement("iframe"),this.controller.id="controller",this.controller.src="".concat(this.frameUrl,"/controller.html?parentOrigin=").concat(this.parentOrigin,"&sessionId=").concat(this.config.sessionId,"&gr4vyId=").concat(this.config.gr4vyId,"&environment=").concat(this.config.environment),this.controller.style.position="absolute",this.controller.style.left="-9999999px",document.body.appendChild(this.controller),window.onload=function(){u.publish(r.READY,U({version:e.version},n.config))},p("Initialized",k(U({},this.config),{frameUrl:this.frameUrl,parentOrigin:this.parentOrigin}))}var t,a,s;return t=e,s=[{key:"Events",get:function(){return r}},{key:"version",get:function(){}}],(a=[{key:"_addField",value:function(e,t){var r=this;if(!(e="string"==typeof e?document.querySelector(e):e))return t;var i=document.createElement("div");return i.classList.add("secure-fields__input","secure-fields__input--".concat(y(t.type))),i.appendChild(t.frame),e.parentNode.replaceChild(i,e),window.addEventListener("message",(function(e){var o;if(e.origin===r.frameUrl&&(null===(o=e.data.data)||void 0===o?void 0:o.id)===t.type)switch(e.data.type){case"blur":u.publish("".concat(t.type,":blur"),e.data.data),i.removeAttribute(n.FOCUSED),p("Field blurred",e.data.data);break;case"focus":u.publish("".concat(t.type,":focus"),e.data.data),i.setAttribute(n.FOCUSED,""),p("Field focused",e.data.data);break;case"input":u.publish("".concat(t.type,":input"),e.data.data),e.data.data.valid?i.removeAttribute(n.INVALID):i.setAttribute(n.INVALID,""),p("Field input changed",e.data.data)}})),t.addEventListener=this.addEventListener,t.removeEventListener=this.removeEventListener,t}},{key:"addCardNumberField",value:function(e,t){return this.cardNumber||(this.cardNumber=new E({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:k(U({label:"Card number"},t),{type:"number"})})),this._addField(e,this.cardNumber)}},{key:"addSecurityCodeField",value:function(e,t){return this.securityCode||(this.securityCode=new E({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:k(U({label:"Security code"},t),{type:"securityCode"})})),this._addField(e,this.securityCode)}},{key:"addExpiryDateField",value:function(e,t){return this.expiryDate||(this.expiryDate=new E({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:k(U({label:"Expiry date"},t),{type:"expiryDate"})})),this._addField(e,this.expiryDate)}},{key:"addEventListener",value:function(e,t){var r=this.type,n="".concat(this.constructor===E?"".concat(r,":"):"").concat(e);u.subscribe(n,t)}},{key:"removeEventListener",value:function(e,t){var r=this.type,n="".concat(this.constructor===E?"".concat(r,":"):"").concat(e);u.unsubscribe(n,t)}},{key:"submit",value:function(){var e=this,t=function(n){if(["success","error"].includes(n.data.type)&&n.origin===e.frameUrl&&n.data.channel===o){switch(n.data.type){case"success":u.publish(r.CARD_VAULT_SUCCESS),p("Payment method tokenized successfully");break;case"error":u.publish(r.CARD_VAULT_FAILURE,n.data),p("Failed to update checkout session",n.data.data)}window.removeEventListener("message",t)}};window.addEventListener("message",t),this.controller.contentWindow.postMessage({type:"submit",channel:o},this.frameUrl)}},{key:"setDebug",value:function(e){localStorage.setItem(i,String(e))}},{key:"addFont",value:function(e){this.font=e.replace(/\s/g,"+")}}])&&A(t.prototype,a),s&&A(t,s),e}();return t})()));

package/lib/input.d.ts

@@ -1,6 +1,6 @@
 import { InputConfig as Config, Field, FieldType, FieldEvent, StylesTuple } from './types';
-declare type Options = Omit<Field, 'element' | 'type'>;
-declare type EventListener = (event: FieldEvent['type'], callback: (...args: any[]) => void) => void;
+type Options = Omit<Field, 'element' | 'type'>;
+type EventListener = (event: FieldEvent['type'], callback: (...args: any[]) => void) => void;
 declare class SecureInput {
     frameUrl: string;
     parentOrigin: string;

package/lib/types.d.ts

@@ -1,37 +1,37 @@
 import { Events } from './constants';
 import type * as CSS from 'csstype';
-export declare type Config = {
+export type Config = {
     environment?: 'sandbox' | 'production';
     gr4vyId: string;
     sessionId: string;
 };
-export declare type InputConfig = {
+export type InputConfig = {
     frameUrl: string;
     parentOrigin: string;
     font?: string;
     options: Field;
 };
-export declare type FieldType = 'number' | 'securityCode' | 'expiryDate';
-export declare type Field = {
+export type FieldType = 'number' | 'securityCode' | 'expiryDate';
+export type Field = {
     type: FieldType;
     placeholder?: string;
     styles?: Styles;
     label?: string;
 };
-export declare type FieldEvent = {
+export type FieldEvent = {
     type: keyof HTMLElementEventMap;
     data: Omit<Field, 'type' | 'styles'> & {
         id: Field['type'];
         valid: boolean;
     };
 };
-export declare type CombinedEvents = Events | keyof HTMLElementEventMap;
-export declare type Event = Events | `${FieldType}:${keyof HTMLElementEventMap}`;
-export declare type SupportedCSSProperties = Partial<Pick<CSS.Properties, 'backgroundColor' | 'boxShadow' | 'caretColor' | 'color' | 'colorScheme' | 'cursor' | 'font' | 'fontFamily' | 'fontFeatureSettings' | 'fontKerning' | 'fontSize' | 'fontSizeAdjust' | 'fontStretch' | 'fontStyle' | 'fontVariant' | 'fontVariantAlternates' | 'fontVariantCaps' | 'fontVariantEastAsian' | 'fontVariantLigatures' | 'fontVariantNumeric' | 'fontVariationSettings' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'opacity' | 'padding' | 'textAlign' | 'textShadow' | 'textRendering' | 'transition' | 'MozOsxFontSmoothing' | 'WebkitFontSmoothing'>>;
-export declare type SupportedCSSVariables = {
+export type CombinedEvents = Events | keyof HTMLElementEventMap;
+export type Event = Events | `${FieldType}:${keyof HTMLElementEventMap}`;
+export type SupportedCSSProperties = Partial<Pick<CSS.Properties, 'backgroundColor' | 'boxShadow' | 'caretColor' | 'color' | 'colorScheme' | 'cursor' | 'font' | 'fontFamily' | 'fontFeatureSettings' | 'fontKerning' | 'fontSize' | 'fontSizeAdjust' | 'fontStretch' | 'fontStyle' | 'fontVariant' | 'fontVariantAlternates' | 'fontVariantCaps' | 'fontVariantEastAsian' | 'fontVariantLigatures' | 'fontVariantNumeric' | 'fontVariationSettings' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'opacity' | 'padding' | 'textAlign' | 'textShadow' | 'textRendering' | 'transition' | 'MozOsxFontSmoothing' | 'WebkitFontSmoothing'>>;
+export type SupportedCSSVariables = {
     [K in keyof SupportedCSSProperties as `--${K}`]: SupportedCSSProperties[K];
 };
-export declare type Styles = {
+export type Styles = {
     [key in ':autofill' | ':hover' | ':focus' | ':disabled' | ':valid' | ':invalid' | '::placeholder']?: SupportedCSSProperties;
 } & SupportedCSSProperties;
-export declare type StylesTuple = [string, string][];
+export type StylesTuple = [string, string][];

package/lib/utils/logger.d.ts

@@ -1,8 +1,8 @@
-declare type Options = {
+type Options = {
     debug?: boolean;
     level?: 'log' | 'warn' | 'debug' | 'info' | 'error';
 };
-declare type LogFunction = (key: string, object?: Record<string, unknown>, options?: Options) => void;
+type LogFunction = (key: string, object?: Record<string, unknown>, options?: Options) => void;
 export declare const log: LogFunction;
 export declare const warn: LogFunction;
 export declare const debug: LogFunction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -41,17 +41,17 @@
     "token": "node generate-token"
   },
   "devDependencies": {
-    "css-loader": "^6.7.2",
+    "css-loader": "^6.7.3",
     "csstype": "^3.1.1",
     "dotenv": "^16.0.3",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.2",
     "ts-patch": "^2.1.0",
-    "typedoc": "^0.23.24",
+    "typedoc": "^0.23.28",
     "typedoc-plugin-missing-exports": "^0.23.0",
-    "typescript-transform-paths": "^3.4.4"
+    "typescript-transform-paths": "^3.4.6"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f932a5fb2d92483a800a5b85af1e7aa2f60ed617"
+  "gitHead": "11c5e0e78470d22572e9b09cb112af33b3c3b44e"
 }