@gr4vy/secure-fields 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.8.0 (Thu Oct 06 2022)
+
+#### 🚀 Enhancement
+
+- feat: google fonts support [#57](https://github.com/gr4vy/secure-fields/pull/57) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v0.7.0 (Tue Oct 04 2022)
 
 #### 🚀 Enhancement

package/README.md

@@ -59,6 +59,8 @@ Call methods to add / update fields, set flags, and attach event listeners. Call
 ```js
 secureFields.setDebug(true)
 
+secureFields.addFont('Lato')
+
 const styles = {
   color: 'black',
   fontSize: '18px',
@@ -213,13 +215,14 @@ For actual fields (returned by the `addCardNumberField`, `addExpiryDateField` an
 
 #### Methods
 
-| Name                   | Description                                                                                                                                                                                                                                                                                                                                  |
-| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `constructor`          | Instantiates SecureFields with a configuration object include `environment`, `gr4vyId` and a session id. <br /><br />`new SecureFields({...})`                                                                                                                                                                                               |
-| `addCardNumberField`   | Injects a secure field of type `number`. <br /><br />`secureFields.addCardNumberField('#cc-number', { placeholder: 'Enter card number', ... })`                                                                                                                                                                                              |
-| `addSecurityCodeField` | Injects a secure field of type `securityCode`. <br /><br />`secureFields.addSecurityCodeField('#cc-security-code', { placeholder: 'Enter security code', ... })`                                                                                                                                                                             |
-| `addExpiryDateField`   | Injects a secure field of type `expiryDate`. <br /><br />`secureFields.addExpiryDateField('#cc-expiry-date', { placeholder: 'Enter expiry date', ... })`                                                                                                                                                                                     |
-| `addEventListener`     | Attaches an event handler to the SecureFields instance or to a secure field in order to listen to specific events. Requires one of the events supported and a callback. <br /><br />`secureFields.addEventListener(SecureFields.Events.READY, (data) => { ... })` <br /><br />`cardNumberField.addEventListener('input', (data) => { ... })` |
-| `removeEventListener`  | Removes a previously attached event handler.                                                                                                                                                                                                                                                                                                 |
-| `submit`               | Calls the Vault API to tokenize and store the card data. <br /><br />`secureFields.submit()`                                                                                                                                                                                                                                                 |
-| `setDebug`             | Enable / disable debug mode. When the debug mode is enabled, SecureFields logs information to the console. <br /><br />`secureFields.setDebug(true)`                                                                                                                                                                                         |
+| Name                   | Description                                                                                                                                                                                                                                                                                                                                    |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `constructor`          | Instantiates SecureFields with a configuration object include `environment`, `gr4vyId` and a session id. <br /><br />`new SecureFields({...})`                                                                                                                                                                                                 |
+| `addCardNumberField`   | Injects a secure field of type `number`. <br /><br />`secureFields.addCardNumberField('#cc-number', { placeholder: 'Enter card number', ... })`                                                                                                                                                                                                |
+| `addSecurityCodeField` | Injects a secure field of type `securityCode`. <br /><br />`secureFields.addSecurityCodeField('#cc-security-code', { placeholder: 'Enter security code', ... })`                                                                                                                                                                               |
+| `addExpiryDateField`   | Injects a secure field of type `expiryDate`. <br /><br />`secureFields.addExpiryDateField('#cc-expiry-date', { placeholder: 'Enter expiry date', ... })`                                                                                                                                                                                       |
+| `addEventListener`     | Attaches an event handler to the SecureFields instance or to a secure field in order to listen to specific events. Requires one of the events supported and a callback. <br /><br />`secureFields.addEventListener(SecureFields.Events.READY, (data) => { ... })` <br /><br />`cardNumberField.addEventListener('input', (data) => { ... })`   |
+| `removeEventListener`  | Removes a previously attached event handler.                                                                                                                                                                                                                                                                                                   |
+| `submit`               | Calls the Vault API to tokenize and store the card data. <br /><br />`secureFields.submit()`                                                                                                                                                                                                                                                   |
+| `setDebug`             | Enable / disable debug mode. When the debug mode is enabled, SecureFields logs information to the console. <br /><br />`secureFields.setDebug(true)`                                                                                                                                                                                           |
+| `addFont`              | Load a custom font from [Google Fonts](https://fonts.google.com/) to be used inside inputs. You can define the font family as well as styles or weights as a string (e.g. "Lato:400,600"). To use the loaded font, add the correct `fontFamily` property to the styles object when creating fields. <br /><br />`secureFields.addFont('Lato')` |

package/lib/index.d.ts

@@ -7,6 +7,7 @@ declare class SecureFields {
     frameUrl: string;
     apiUrl: string;
     parentOrigin: string;
+    font: string;
     cardNumber: SecureInput;
     securityCode: SecureInput;
     expiryDate: SecureInput;
@@ -28,6 +29,7 @@ declare class SecureFields {
     removeEventListener(event: CombinedEvents, callback: (...args: any[]) => void): void;
     submit(): void;
     setDebug(debug: boolean): void;
+    addFont(font: string): void;
 }
 export { SecureFields, SecureInput };
 export type { Config, CombinedEvents, Field, FieldType, FieldEvent, Styles, StylesTuple, } from './types';

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,i="@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 o="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,i,o=[],a=!0,c=!1;try{for(r=r.call(t);!(a=(n=r.next()).done)&&(o.push(n.value),!e||o.length!==e);a=!0);}catch(t){c=!0,i=t}finally{try{a||null==r.return||r.return()}finally{if(c)throw i}}return o}}(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),i=n[0],o=n[1];return i!==t||o.toString()!==e.toString()}))},e.publish=function(t,e){this.subscribers.forEach((function(r){var n=c(r,2),i=n[0],o=n[1];return setTimeout((function(){return i===t?o(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"},p=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),o=n.debug,a=n.level;(o||"true"===localStorage.getItem(i))&&console[a]("Gr4vy - Secure Fields - ".concat(t),e||{})},d=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,i,o=[],a=!0,c=!1;try{for(r=r.call(t);!(a=(n=r.next()).done)&&(o.push(n.value),!e||o.length!==e);a=!0);}catch(t){c=!0,i=t}finally{try{a||null==r.return||r.return()}finally{if(c)throw i}}return o}}(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,i){var o,a=b(i,2),c=a[0],s=a[1];return u(s)?(o=n).push.apply(o,h(e(t[c],"".concat((r+c).match(/[a-zA-Z0-9]+/g).join("-"),"-")))):(c=d(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,i=e.parentOrigin,o=e.options.type,a=function(t,e){if(null==t)return{};var r,n,i=function(t,e){if(null==t)return{};var r,n,i={},o=Object.keys(t);for(n=0;n<o.length;n++)r=o[n],e.indexOf(r)>=0||(i[r]=t[r]);return i}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(n=0;n<o.length;n++)r=o[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(i[r]=t[r])}return i}(e.options,["type"]);this.frameUrl=n,this.parentOrigin=i,this.type=o,this.options=a;var c=v(a.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:w(O({},r.options),{styles:c})}),p("Added field",r.options)}}var e=t.prototype;return e._postMessage=function(t){this.frame.contentWindow.postMessage(O({channel:o},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})}),p("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 A(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function E(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){A(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=E({environment:"production"},e);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),window.onload=function(){s.publish(r.READY,E({version:t.version},n.config))},p("Initialized",P(E({},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 i=document.createElement("div");return i.classList.add("secure-fields__input","secure-fields__input--".concat(d(e.type))),i.appendChild(e.frame),t.parentNode.replaceChild(i,t),window.addEventListener("message",(function(t){var o;if(t.origin===r.frameUrl&&(null===(o=t.data.data)||void 0===o?void 0:o.id)===e.type)switch(t.data.type){case"blur":s.publish("".concat(e.type,":blur"),t.data.data),i.removeAttribute(n.FOCUSED),p("Field blurred",t.data.data);break;case"focus":s.publish("".concat(e.type,":focus"),t.data.data),i.setAttribute(n.FOCUSED,""),p("Field focused",t.data.data);break;case"input":s.publish("".concat(e.type,":input"),t.data.data),t.data.data.valid?i.removeAttribute(n.INVALID):i.setAttribute(n.INVALID,""),p("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,options:P(E({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,options:P(E({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,options:P(E({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===o){switch(n.data.type){case"success":s.publish(r.CARD_VAULT_SUCCESS),p("Payment method tokenized successfully");break;case"error":s.publish(r.CARD_VAULT_FAILURE),p("Failed to update checkout session")}window.removeEventListener("message",e)}};window.addEventListener("message",e),this.controller.contentWindow.postMessage({type:"submit",channel:o},this.frameUrl)},c.setDebug=function(t){localStorage.setItem(i,String(t))},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(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"},p=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||{})},d=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=d(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})}),p("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})}),p("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 A(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function E(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){A(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=E({environment:"production"},e);var o="sandbox"===this.config.environment?"sandbox.":"";this.frameUrl="https://secure-fields.".concat(o).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),window.onload=function(){s.publish(r.READY,E({version:t.version},n.config))},p("Initialized",P(E({},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(d(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),p("Field blurred",t.data.data);break;case"focus":s.publish("".concat(e.type,":focus"),t.data.data),o.setAttribute(n.FOCUSED,""),p("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,""),p("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(E({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(E({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(E({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),p("Payment method tokenized successfully");break;case"error":s.publish(r.CARD_VAULT_FAILURE),p("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})()));

package/lib/input.d.ts

@@ -1,4 +1,4 @@
-import { Field, FieldType, FieldEvent, StylesTuple } from './types';
+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;
 declare class SecureInput {
@@ -9,7 +9,7 @@ declare class SecureInput {
     options: Options;
     addEventListener: EventListener;
     removeEventListener: EventListener;
-    constructor(config: any);
+    constructor(config: Config);
     _postMessage(message: {
         type: string;
         data: Options & {

package/lib/types.d.ts

@@ -5,6 +5,12 @@ export declare type Config = {
     gr4vyId: string;
     sessionId: string;
 };
+export declare type InputConfig = {
+    frameUrl: string;
+    parentOrigin: string;
+    font?: string;
+    options: Field;
+};
 export declare type FieldType = 'number' | 'securityCode' | 'expiryDate';
 export declare type Field = {
     type: FieldType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3177b44cce669a3a1a8e666d02737d53fd2b687e"
+  "gitHead": "b5f4f0de1387377b37761fddc0ab7d4ee82a8de6"
 }