@gr4vy/secure-fields 1.7.1 → 1.9.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# v1.8.0 (Mon Jun 12 2023)
+
+#### 🚀 Enhancement
+
+- feat: add form status event [#343](https://github.com/gr4vy/secure-fields/pull/343) ([@theturboboy](https://github.com/theturboboy))
+
+#### 🏠 Internal
+
+- chore(dev-deps): update dependency typedoc to ^0.24.8 [#342](https://github.com/gr4vy/secure-fields/pull/342) ([@renovate[bot]](https://github.com/renovate[bot]) [@luca-gr4vy](https://github.com/luca-gr4vy))
+- chore(dev-deps): update dependency dotenv to ^16.1.4 [#341](https://github.com/gr4vy/secure-fields/pull/341) ([@renovate[bot]](https://github.com/renovate[bot]))
+- build(deps): bump css-loader from 6.7.4 to 6.8.1 [#319](https://github.com/gr4vy/secure-fields/pull/319) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+- build(deps-dev): bump style-loader from 3.3.2 to 3.3.3 [#315](https://github.com/gr4vy/secure-fields/pull/315) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+- build(deps): bump css-loader from 6.7.3 to 6.7.4 [#316](https://github.com/gr4vy/secure-fields/pull/316) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 4
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- [@renovate[bot]](https://github.com/renovate[bot])
+- Andrei Haidukevich ([@theturboboy](https://github.com/theturboboy))
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v1.7.0 (Tue May 16 2023)
 
 #### 🚀 Enhancement

package/README.md

@@ -184,11 +184,12 @@ 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, ({ 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') })`                                                                                |
+| 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 }) })` |
+| `FORM_CHANGE`        | Triggered when one of the form field is changed. The `complete` property shows if the form is ready to be submitted, i.e. card number and expiry date are filled and valid. | `secureFields.addEventListener(SecureFields.Events.FORM_CHANGE, ({ complete, fields }) => { console.log('Form state', { complete, fields }) })`                                   |
+| `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/constants.d.ts

@@ -2,6 +2,7 @@ export declare const LOCAL_STORAGE_DEBUG_FLAG = "@gr4vy-secure-fields-debug";
 export declare enum Events {
     CARD_VAULT_SUCCESS = "card-vault-success",
     CARD_VAULT_FAILURE = "card-vault-failure",
+    FORM_CHANGE = "form-change",
     READY = "ready"
 }
 export declare enum FieldAttributes {

package/lib/index.d.ts

@@ -21,6 +21,8 @@ declare class SecureFields {
      *
      * CARD_VAULT_FAILURE: Triggered when the card vaulting fails.
      *
+     * FORM_CHANGED: Triggered when the form is changed.
+     *
      * READY: Triggered when the SecureFields is loaded and ready to be used.
      */
     static get Events(): typeof Events;
@@ -37,4 +39,4 @@ declare class SecureFields {
     addFont(font: string): void;
 }
 export { SecureFields, SecureInput };
-export type { Config, CombinedEvents, Field, FieldType, FieldEvent, Styles, StylesTuple, } from './types';
+export type { Config, CombinedEvents, Field, FieldType, FieldEvent, Styles, StylesTuple, FormChangeEventData, } from './types';

package/lib/index.js

@@ -1 +1 @@
-!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:()=>P,SecureInput:()=>w});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}());function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var f={debug:!1,level:"log"},d=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){l(e,t,r[t])}))}return e}({},f,r),o=n.debug,a=n.level;(o||"true"===localStorage.getItem(i))&&console[a]("Gr4vy - Secure Fields - ".concat(e),t||{})},p=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};function y(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 b(e,t){if(e){if("string"==typeof e)return y(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)?y(e,t):void 0}}var h=function(){var e=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(t).reduce((function(n,i){var o,a,s,c=(s=2,function(e){if(Array.isArray(e))return e}(a=i)||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}}(a,s)||b(a,s)||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.")}()),u=c[0],l=c[1];return!function(e){return"[object Object]"===Object.prototype.toString.call(e)}(l)?(u=p(u).replace(/^-/,""),n.push(["--".concat(r).concat(u),l])):(o=n).push.apply(o,function(e){return function(e){if(Array.isArray(e))return y(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||b(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.")}()}(e(t[u],"".concat((r+u).match(/[a-zA-Z0-9]+/g).join("-"),"-")))),n}),[])};return e(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{})};function v(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 m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function g(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){m(e,t,r[t])}))}return e}function O(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 w=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),m(this,"frameUrl",void 0),m(this,"parentOrigin",void 0),m(this,"frame",void 0),m(this,"type",void 0),m(this,"options",void 0),m(this,"addEventListener",void 0),m(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=h(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:O(g({},r.options),{styles:c})}),d("Added field",r.options)}}var t,r;return t=e,(r=[{key:"_postMessage",value:function(e){this.frame.contentWindow.postMessage(g({channel:o},e),this.frameUrl)}},{key:"update",value:function(e){this.options=g({},this.options,e);var t=h(g({},this.options.styles,e.styles)),r=O(g({},this.options,e),{styles:t});this._postMessage({type:"update",data:O(g({},r),{styles:t})}),d("Updated field",this.options)}},{key:"setPlaceholder",value:function(e){this.update({placeholder:e})}},{key:"setStyles",value:function(e){this.update({styles:e})}}])&&v(t.prototype,r),e}();function j(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 S(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function E(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){S(e,t,r[t])}))}return e}function A(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 P=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),S(this,"config",void 0),S(this,"controller",void 0),S(this,"frameUrl",void 0),S(this,"apiUrl",void 0),S(this,"parentOrigin",void 0),S(this,"font",void 0),S(this,"cardNumber",void 0),S(this,"securityCode",void 0),S(this,"expiryDate",void 0),this.config=E({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,E({version:e.version},n.config))},d("Initialized",A(E({},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(p(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),d("Field blurred",e.data.data);break;case"focus":u.publish("".concat(t.type,":focus"),e.data.data),i.setAttribute(n.FOCUSED,""),d("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,""),d("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 w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(E({label:"Card number"},t),{type:"number"})})),this._addField(e,this.cardNumber)}},{key:"addSecurityCodeField",value:function(e,t){return this.securityCode||(this.securityCode=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(E({label:"Security code"},t),{type:"securityCode"})})),this._addField(e,this.securityCode)}},{key:"addExpiryDateField",value:function(e,t){return this.expiryDate||(this.expiryDate=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(E({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===w?"".concat(r,":"):"").concat(e);u.subscribe(n,t)}},{key:"removeEventListener",value:function(e,t){var r=this.type,n="".concat(this.constructor===w?"".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),d("Payment method tokenized successfully");break;case"error":u.publish(r.CARD_VAULT_FAILURE,n.data),d("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,"+")}}])&&j(t.prototype,a),s&&j(t,s),e}();return t})()));
+!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:()=>P,SecureInput:()=>w});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.FORM_CHANGE="form-change",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}());function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var f={debug:!1,level:"log"},d=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){l(e,t,r[t])}))}return e}({},f,r),o=n.debug,a=n.level;(o||"true"===localStorage.getItem(i))&&console[a]("Gr4vy - Secure Fields - ".concat(e),t||{})},p=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};function y(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){if(e){if("string"==typeof e)return y(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)?y(e,t):void 0}}var b=function(){var e=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(t).reduce((function(n,i){var o,a,s,c=(s=2,function(e){if(Array.isArray(e))return e}(a=i)||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}}(a,s)||h(a,s)||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.")}()),u=c[0],l=c[1];return!function(e){return"[object Object]"===Object.prototype.toString.call(e)}(l)?(u=p(u).replace(/^-/,""),n.push(["--".concat(r).concat(u),l])):(o=n).push.apply(o,function(e){return function(e){if(Array.isArray(e))return y(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||h(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.")}()}(e(t[u],"".concat((r+u).match(/[a-zA-Z0-9]+/g).join("-"),"-")))),n}),[])};return e(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{})};function v(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 m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function g(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){m(e,t,r[t])}))}return e}function O(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 w=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),m(this,"frameUrl",void 0),m(this,"parentOrigin",void 0),m(this,"frame",void 0),m(this,"type",void 0),m(this,"options",void 0),m(this,"addEventListener",void 0),m(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=b(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:O(g({},r.options),{styles:c})}),d("Added field",r.options)}}var t,r;return t=e,(r=[{key:"_postMessage",value:function(e){this.frame.contentWindow.postMessage(g({channel:o},e),this.frameUrl)}},{key:"update",value:function(e){this.options=g({},this.options,e);var t=b(g({},this.options.styles,e.styles)),r=O(g({},this.options,e),{styles:t});this._postMessage({type:"update",data:O(g({},r),{styles:t})}),d("Updated field",this.options)}},{key:"setPlaceholder",value:function(e){this.update({placeholder:e})}},{key:"setStyles",value:function(e){this.update({styles:e})}}])&&v(t.prototype,r),e}();function j(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 S(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function E(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){S(e,t,r[t])}))}return e}function A(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 P=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),S(this,"config",void 0),S(this,"controller",void 0),S(this,"frameUrl",void 0),S(this,"apiUrl",void 0),S(this,"parentOrigin",void 0),S(this,"font",void 0),S(this,"cardNumber",void 0),S(this,"securityCode",void 0),S(this,"expiryDate",void 0),this.config=E({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,E({version:e.version},n.config))},d("Initialized",A(E({},this.config),{frameUrl:this.frameUrl,parentOrigin:this.parentOrigin})),window.addEventListener("message",(function(e){e.origin===n.frameUrl&&"form-change"===e.data.type&&(u.publish(r.FORM_CHANGE,e.data.data),d("Form change",e.data.data))}))}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(p(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),d("Field blurred",e.data.data);break;case"focus":u.publish("".concat(t.type,":focus"),e.data.data),i.setAttribute(n.FOCUSED,""),d("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,""),d("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 w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(E({label:"Card number"},t),{type:"number"})})),this._addField(e,this.cardNumber)}},{key:"addSecurityCodeField",value:function(e,t){return this.securityCode||(this.securityCode=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(E({label:"Security code"},t),{type:"securityCode"})})),this._addField(e,this.securityCode)}},{key:"addExpiryDateField",value:function(e,t){return this.expiryDate||(this.expiryDate=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,font:this.font,options:A(E({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===w?"".concat(r,":"):"").concat(e);u.subscribe(n,t)}},{key:"removeEventListener",value:function(e,t){var r=this.type,n="".concat(this.constructor===w?"".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),d("Payment method tokenized successfully");break;case"error":u.publish(r.CARD_VAULT_FAILURE,n.data),d("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,"+")}}])&&j(t.prototype,a),s&&j(t,s),e}();return t})()));

package/lib/types.d.ts

@@ -35,3 +35,20 @@ export type Styles = {
     [key in ':autofill' | ':hover' | ':focus' | ':disabled' | ':valid' | ':invalid' | '::placeholder']?: SupportedCSSProperties;
 } & SupportedCSSProperties;
 export type StylesTuple = [string, string][];
+export type FormChangeEventData = {
+    fields: {
+        number: {
+            valid: boolean;
+            empty: boolean;
+        };
+        expiryDate: {
+            valid: boolean;
+            empty: boolean;
+        };
+        securityCode: {
+            valid: boolean;
+            empty: boolean;
+        };
+    };
+    complete: boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields",
-  "version": "1.7.1",
+  "version": "1.9.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.3",
+    "css-loader": "^6.8.1",
     "csstype": "^3.1.2",
-    "dotenv": "^16.0.3",
-    "style-loader": "^3.3.2",
+    "dotenv": "^16.1.4",
+    "style-loader": "^3.3.3",
     "ts-patch": "^2.1.0",
-    "typedoc": "^0.23.28",
-    "typedoc-plugin-missing-exports": "^0.23.0",
+    "typedoc": "^0.24.8",
+    "typedoc-plugin-missing-exports": "^2.0.0",
     "typescript-transform-paths": "^3.4.6"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f8ba4a8db9ff45c73fecf8d5733d6be6b7d7dfc2"
+  "gitHead": "48fe152199250a322989cf9b2fd58915aee1c488"
 }