@gr4vy/secure-fields 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v0.4.0 (Mon Sep 05 2022)
+
+#### 🚀 Enhancement
+
+- feat: submit [#33](https://github.com/gr4vy/secure-fields/pull/33) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: event listening methods [#30](https://github.com/gr4vy/secure-fields/pull/30) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: debug mode [#27](https://github.com/gr4vy/secure-fields/pull/27) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 🐛 Bug Fix
+
+- feat: refactoring inputs [#29](https://github.com/gr4vy/secure-fields/pull/29) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: styling updates [#25](https://github.com/gr4vy/secure-fields/pull/25) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: add field public methods [#26](https://github.com/gr4vy/secure-fields/pull/26) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 🏠 Internal
+
+- Define empty process.env.SECURE_FIELDS_FRAME_URL for prod [#31](https://github.com/gr4vy/secure-fields/pull/31) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- Fix process undefined error and update sample form [#28](https://github.com/gr4vy/secure-fields/pull/28) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v0.3.0 (Wed Aug 17 2022)
 
 #### 🚀 Enhancement

package/lib/constants.d.ts

@@ -1,3 +1,4 @@
+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",

package/lib/event-bus.d.ts

@@ -0,0 +1,9 @@
+import { CombinedEvents } from './types';
+declare class EventBus {
+    subscribers: [CombinedEvents, (...args: any[]) => void][];
+    constructor();
+    subscribe(event: CombinedEvents, callback: (...args: any[]) => void): void;
+    unsubscribe(event: CombinedEvents, callback: (...args: any[]) => void): void;
+    publish(event: CombinedEvents, args?: unknown): void;
+}
+export { EventBus };

package/lib/index.d.ts

@@ -1,11 +1,16 @@
 import { Events } from './constants';
-import type { Config, Field } from './types';
+import { SecureInput } from './input';
+import type { CombinedEvents, Config, Field } from './types';
 declare class SecureFields {
     config: Config;
     controller: HTMLIFrameElement;
     frameUrl: string;
     apiUrl: string;
     parentOrigin: string;
+    private eventBus;
+    cardNumber: SecureInput;
+    securityCode: SecureInput;
+    expiryDate: SecureInput;
     /**
      * CARD_VAULT_SUCCESS: Triggered when the card is successfully vaulted.
      *
@@ -17,26 +22,11 @@ declare class SecureFields {
     static get version(): string;
     constructor(config: Config);
     private _addField;
-    addCardNumberField(element: string | HTMLElement, options: Omit<Field, 'element' | 'type'>): {
-        element: HTMLElement;
-        type: "number" | "securityCode" | "expirationDate";
-        placeholder?: string;
-        styles?: import("./types").Styles;
-    };
-    addSecurityCodeField(element: string | HTMLElement, options: Omit<Field, 'element' | 'type'>): {
-        element: HTMLElement;
-        type: "number" | "securityCode" | "expirationDate";
-        placeholder?: string;
-        styles?: import("./types").Styles;
-    };
-    addExpirationDateField(element: string | HTMLElement, options: Omit<Field, 'element' | 'type'>): {
-        element: HTMLElement;
-        type: "number" | "securityCode" | "expirationDate";
-        placeholder?: string;
-        styles?: import("./types").Styles;
-    };
-    addEventListener(event: keyof typeof Events, callback: () => void): void;
-    removeEventListener(event: keyof typeof Events, callback: () => void): void;
+    addCardNumberField(element: string | HTMLElement, options?: Omit<Field, 'element' | 'type'>): SecureInput;
+    addSecurityCodeField(element: string | HTMLElement, options?: Omit<Field, 'element' | 'type'>): SecureInput;
+    addExpiryDateField(element: string | HTMLElement, options?: Omit<Field, 'element' | 'type'>): SecureInput;
+    addEventListener(event: CombinedEvents, callback: (...args: any[]) => void): void;
+    removeEventListener(event: CombinedEvents, callback: (...args: any[]) => void): void;
     submit(callback: (error: string) => void): void;
     setDebug(debug: boolean): void;
     isFormValid(): void;

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 n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,(()=>(()=>{"use strict";var e,t,n={d:(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},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})}},r={};n.r(r),n.d(r,{SecureFields:()=>y}),function(e){e.CARD_VAULT_SUCCESS="card-vault-success",e.CARD_VAULT_FAILURE="card-vault-failure",e.READY="ready"}(e||(e={})),function(e){e.AUTOFILLED="data-secure-fields-autofilled",e.DISABLED="data-secure-fields-disabled",e.FOCUSED="data-secure-fields-focused",e.VALID="data-secure-fields-valid"}(t||(t={}));var o=function(e){return"[object Object]"===Object.prototype.toString.call(e)},i=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}}(e,t)||s(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 l(e){return function(e){if(Array.isArray(e))return a(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||s(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 s(e,t){if(e){if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){d(e,t,n[t])}))}return e}function p(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}var y=function(){function n(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.config=f({environment:"production"},e);var t="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl=process.env.SECURE_FIELDS_FRAME_URL||"https://secure-fields.".concat(t).concat(this.config.gr4vyId,".gr4vy.app"),this.parentOrigin=window.location.origin,this.controller=document.createElement("iframe"),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)}var r,a,s=n.prototype;return s._addField=function(e,n){var r=this;e="string"==typeof e?document.querySelector(e):e;var a=function(){var e=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(t).reduce((function(r,a){var s,u=c(a,2),d=u[0],f=u[1];return o(f)?(s=r).push.apply(s,l(e(t[d],"".concat((n+d).match(/[a-zA-Z0-9]+/g).join("-"),"-")))):r.push(["--".concat(n).concat(i(d)),f]),r}),[])};return e(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{})}(null==n?void 0:n.styles),s=document.createElement("iframe");s.id=n.type,s.src="".concat(this.frameUrl,"/input.html?parentOrigin=").concat(this.parentOrigin,"&type=").concat(n.type),s.style.display="block",s.style.height="48px",s.style.border="none",s.style.width="100%",s.onload=function(){s.contentWindow.postMessage({type:"init",data:p(f({},n),{styles:a})},r.frameUrl)};var u=document.createElement("div");return u.classList.add("secure-fields__input","secure-fields__input--".concat(i(n.type))),u.appendChild(s),e.parentNode.replaceChild(u,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)===n.type)switch(e.data.type){case"blur":u.removeAttribute(t.FOCUSED);break;case"focus":u.setAttribute(t.FOCUSED,"")}})),p(f({},n),{element:e})},s.addCardNumberField=function(e,t){return this._addField(e,p(f({},t),{type:"number"}))},s.addSecurityCodeField=function(e,t){return this._addField(e,p(f({},t),{type:"securityCode"}))},s.addExpirationDateField=function(e,t){return this._addField(e,p(f({},t),{type:"expirationDate"}))},s.addEventListener=function(e,t){console.log(e,t)},s.removeEventListener=function(e,t){console.log(e,t)},s.submit=function(e){var t=this,n=function(r){if(r.origin===t.frameUrl&&"secure-fields"===r.data.channel){switch(r.data.type){case"success":e(null);break;case"error":e("Failed to update checkout session")}window.removeEventListener("message",n)}};window.addEventListener("message",n),this.controller.contentWindow.postMessage("submit",this.frameUrl)},s.setDebug=function(e){console.log(e)},s.isFormValid=function(){},r=n,a=[{key:"Events",get:function(){return e}},{key:"version",get:function(){}}],null&&u(r.prototype,null),a&&u(r,a),n}();return r})()));
+!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});var r,n,i="@gr4vy-secure-fields-debug";function o(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){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=[],s=!0,a=!1;try{for(r=r.call(e);!(s=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);s=!0);}catch(e){a=!0,i=e}finally{try{s||null==r.return||r.return()}finally{if(a)throw i}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return o(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)?o(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.")}()}!function(e){e.CARD_VAULT_SUCCESS="card-vault-success",e.CARD_VAULT_FAILURE="card-vault-failure",e.READY="ready"}(r||(r={})),function(e){e.AUTOFILLED="data-secure-fields-autofilled",e.DISABLED="data-secure-fields-disabled",e.FOCUSED="data-secure-fields-focused",e.VALID="data-secure-fields-valid"}(n||(n={}));var a=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.subscribers=[]}var t=e.prototype;return t.subscribe=function(e,t){this.subscribers.push([e,t])},t.unsubscribe=function(e,t){this.subscribers=this.subscribers.filter((function(r){var n=s(r,2),i=n[0],o=n[1];return i!==e||o.toString()!==t.toString()}))},t.publish=function(e,t){this.subscribers.forEach((function(r){var n=s(r,2),i=n[0],o=n[1];return setTimeout((function(){return i===e?o(t):null}),0)}))},e}(),c=function(e){return"[object Object]"===Object.prototype.toString.call(e)};function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var l={debug:!1,level:"log"},f=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){u(e,t,r[t])}))}return e}({},l,r),o=n.debug,s=n.level;(o||"true"===localStorage.getItem(i))&&console[s]("Gr4vy - Secure Fields - ".concat(e),t||{})},d=function(e){return e!=e.toLowerCase()&&(e=e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()}))),e};function p(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 y(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=[],s=!0,a=!1;try{for(r=r.call(e);!(s=(n=r.next()).done)&&(o.push(n.value),!t||o.length!==t);s=!0);}catch(e){a=!0,i=e}finally{try{s||null==r.return||r.return()}finally{if(a)throw i}}return o}}(e,t)||h(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 b(e){return function(e){if(Array.isArray(e))return p(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.")}()}function h(e,t){if(e){if("string"==typeof e)return p(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)?p(e,t):void 0}}var m=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,s=y(i,2),a=s[0],u=s[1];return c(u)?(o=n).push.apply(o,b(t(e[a],"".concat((r+a).match(/[a-zA-Z0-9]+/g).join("-"),"-")))):n.push(["--".concat(r).concat(d(a)),u]),n}),[])};return t(e)};function v(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){v(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);var n=t.frameUrl,i=t.parentOrigin,o=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=o,this.options=s;var a=m(s.styles);this.frame=document.createElement("iframe"),this.frame.id=o,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%",this.frame.onload=function(){r._postMessage({type:"update",data:O(g({},r.options),{styles:a})}),f("Added field",r.options)}}var t=e.prototype;return t._postMessage=function(e){this.frame.contentWindow.postMessage(e,this.frameUrl)},t.update=function(e){this.options=g({},this.options,e);var t=m(g({},this.options.styles,e.styles)),r=O(g({},this.options,e),{styles:t});this._postMessage({type:"update",data:O(g({},r),{styles:t})}),f("Updated field",this.options)},t.setPlaceholder=function(e){this.update({placeholder:e})},t.setStyles=function(e){this.update({styles:e})},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),this.config=E({environment:"production"},t);var i="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl="https://secure-fields.".concat(i).concat(this.config.gr4vyId,".gr4vy.app"),this.parentOrigin=window.location.origin,this.controller=document.createElement("iframe"),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),this.addEventListener=this.addEventListener.bind(this),this.removeEventListener=this.removeEventListener.bind(this),this.eventBus=new a,window.onload=function(){n.eventBus.publish(r.READY,E({version:e.version},n.config))},f("Initialized",A(E({},this.config),{frameUrl:this.frameUrl,parentOrigin:this.parentOrigin}))}var t,o,s=e.prototype;return s._addField=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(d(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":r.eventBus.publish("blur",e.data.data),i.removeAttribute(n.FOCUSED),f("Field blurred",{type:t.type});break;case"focus":r.eventBus.publish("focus",e.data.data),i.setAttribute(n.FOCUSED,""),f("Field focused",{type:t.type});break;case"input":r.eventBus.publish("input",e.data.data)}})),t.addEventListener=this.addEventListener,t.removeEventListener=this.removeEventListener,t},s.addCardNumberField=function(e,t){return this.cardNumber||(this.cardNumber=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,options:A(E({},t),{type:"number"})})),this._addField(e,this.cardNumber)},s.addSecurityCodeField=function(e,t){return this.securityCode||(this.securityCode=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,options:A(E({},t),{type:"securityCode"})})),this._addField(e,this.securityCode)},s.addExpiryDateField=function(e,t){return this.expiryDate||(this.expiryDate=new w({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,options:A(E({},t),{type:"expiryDate"})})),this._addField(e,this.expiryDate)},s.addEventListener=function(e,t){this.eventBus.subscribe(e,t)},s.removeEventListener=function(e,t){this.eventBus.unsubscribe(e,t)},s.submit=function(e){var t=this,n=function(i){if(i.origin===t.frameUrl&&"secure-fields"===i.data.channel){switch(i.data.type){case"success":e("Checkout session updated"),t.eventBus.publish(r.CARD_VAULT_SUCCESS),f("Payment method tokenized successfully");break;case"error":e("Failed to update checkout session"),t.eventBus.publish(r.CARD_VAULT_FAILURE),f("Failed to update checkout session")}window.removeEventListener("message",n)}};window.addEventListener("message",n),this.controller.contentWindow.postMessage("submit",this.frameUrl)},s.setDebug=function(e){localStorage.setItem(i,String(e))},s.isFormValid=function(){},t=e,o=[{key:"Events",get:function(){return r}},{key:"version",get:function(){}}],null&&j(t.prototype,null),o&&j(t,o),e}();return t})()));

package/lib/input.d.ts

@@ -0,0 +1,23 @@
+import { Field, StylesTuple } from './types';
+declare type Options = Omit<Field, 'element' | 'type'>;
+declare type EventListener = (event: keyof HTMLElementEventMap, callback: (...args: any[]) => void) => void;
+declare class SecureInput {
+    frameUrl: string;
+    parentOrigin: string;
+    frame: HTMLIFrameElement;
+    type: 'number' | 'securityCode' | 'expiryDate';
+    options: Options;
+    addEventListener: EventListener;
+    removeEventListener: EventListener;
+    constructor(config: any);
+    _postMessage(message: {
+        type: string;
+        data: Options & {
+            styles: StylesTuple;
+        };
+    }): void;
+    update(data: Options): void;
+    setPlaceholder(placeholder: Options['placeholder']): void;
+    setStyles(styles: Options['styles']): void;
+}
+export { SecureInput };

package/lib/types.d.ts

@@ -1,15 +1,23 @@
 import type * as CSS from 'csstype';
+import { Events } from './constants';
 export declare type Config = {
     environment?: 'sandbox' | 'production';
     gr4vyId: string;
     sessionId: string;
 };
+export declare type CombinedEvents = Events | keyof HTMLElementEventMap;
 export declare type Field = {
     type: 'number' | 'securityCode' | 'expirationDate';
     placeholder?: string;
     styles?: Styles;
 };
-export declare type SupportedCSSProperties = Pick<CSS.Properties, 'backgroundColor' | 'caretColor' | 'color' | 'colorScheme' | 'cursor' | 'font' | 'fontFamily' | 'fontFeatureSettings' | 'fontKerning' | 'fontSize' | 'fontSizeAdjust' | 'fontStretch' | 'fontStyle' | 'fontVariant' | 'fontVariantAlternates' | 'fontVariantCaps' | 'fontVariantEastAsian' | 'fontVariantLigatures' | 'fontVariantNumeric' | 'fontVariationSettings' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'opacity' | 'textAlign' | 'textShadow' | 'textRendering' | 'transition' | 'MozOsxFontSmoothing' | 'WebkitFontSmoothing'>;
+export declare type FieldEvent = {
+    type: keyof HTMLElementEventMap;
+    data: Omit<Field, 'type' | 'styles'> & {
+        id: Field['type'];
+    };
+};
+export declare type SupportedCSSProperties = 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 = {
     [K in keyof SupportedCSSProperties as `--${K}`]: SupportedCSSProperties[K];
 };

package/lib/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './is';
+export * from './logger';
 export * from './strings';
 export * from './styles';

package/lib/utils/logger.d.ts

@@ -0,0 +1,11 @@
+declare type Options = {
+    debug?: boolean;
+    level?: 'log' | 'warn' | 'debug' | 'info' | 'error';
+};
+declare 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;
+export declare const info: LogFunction;
+export declare const error: LogFunction;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -31,20 +31,25 @@
   "scripts": {
     "build": "tsc && webpack --config webpack.prod.js",
     "clean": "rm -rf lib *.tgz",
-    "dev": "webpack serve --config webpack.dev.js",
+    "dev": "TOKEN=$(yarn --silent token) webpack serve --config webpack.dev.js",
     "docs": "typedoc --plugin typedoc-plugin-missing-exports",
     "lint": "eslint src --ext .ts",
     "prebuild": "yarn clean",
     "prepack": "yarn build",
-    "test": "jest --colors"
+    "test": "jest --colors",
+    "token": "node generate-token"
   },
   "devDependencies": {
+    "@gr4vy/node": "^0.27.0",
+    "css-loader": "^6.7.1",
     "csstype": "^3.1.0",
+    "dotenv": "^16.0.1",
+    "style-loader": "^3.3.1",
     "typedoc": "^0.23.5",
     "typedoc-plugin-missing-exports": "^0.23.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a4c39f0df7915ec2faa50de468e6431161cf0bed"
+  "gitHead": "a94d2d7231462961f9730f9ab45d15615399cf5c"
 }