@gr4vy/secure-fields 0.5.4 → 0.6.1

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# v0.6.1 (Wed Sep 21 2022)
+
+#### 🐛 Bug Fix
+
+- task: update submit method [#52](https://github.com/gr4vy/secure-fields/pull/52) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
+# v0.6.0 (Wed Sep 21 2022)
+
+#### 🚀 Enhancement
+
+- feat: hooks and components [#40](https://github.com/gr4vy/secure-fields/pull/40) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 🏠 Internal
+
+- task: add react dev [#51](https://github.com/gr4vy/secure-fields/pull/51) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### Authors: 1
+
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v0.5.4 (Fri Sep 16 2022)
 
 #### 🐛 Bug Fix

package/README.md

@@ -79,6 +79,11 @@ const securityCodeField = secureFields.addSecurityCodeField('#cc-number', {
 
 secureFields.addEventListener(SecureFields.Events.CARD_VAULT_SUCCESS, () => {
   console.log('Card has been tokenized successfully!')
+  // create transaction using the Checkout Sessions API...
+})
+
+secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, () => {
+  console.log('Failed to tokenize card data')
 })
 
 cardNumberField.addEventListener('input', (data) => {
@@ -88,14 +93,7 @@ cardNumberField.addEventListener('input', (data) => {
 const form = document.getElementById('cc-form')
 form.addEventListener('submit', (e) => {
   e.preventDefault()
-  secureFields.submit((msg) => {
-    if (msg === 'Failed to update checkout session') {
-      throw new Error(err)
-    }
-
-    console.log('Data stored')
-    // create transaction using the Checkout Sessions API...
-  })
+  secureFields.submit()
 })
 ```
 
@@ -223,5 +221,5 @@ For actual fields (returned by the `addCardNumberField`, `addExpiryDateField` an
 | `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. Returns an error with invalid fields or the tokenized data in case everything went fine. <br /><br />`secureFields.submit((msg) => { ... }`                                                                                                                                         |
+| `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)`                                                                                                                                                                                         |

package/lib/index.d.ts

@@ -26,8 +26,8 @@ declare class SecureFields {
     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;
+    submit(): void;
     setDebug(debug: boolean): void;
 }
-export { SecureFields };
+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});var r,n,o="@gr4vy-secure-fields-debug";!function(t){t.CARD_VAULT_SUCCESS="card-vault-success",t.CARD_VAULT_FAILURE="card-vault-failure",t.READY="ready"}(r||(r={})),function(t){t.FOCUSED="data-secure-fields-focused",t.INVALID="data-secure-fields-invalid"}(n||(n={}));var i="secure-fields";function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function c(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,i=[],a=!0,c=!1;try{for(r=r.call(t);!(a=(n=r.next()).done)&&(i.push(n.value),!e||i.length!==e);a=!0);}catch(t){c=!0,o=t}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}}(t,e)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var s=new(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.subscribers=[]}var e=t.prototype;return e.subscribe=function(t,e){this.subscribers.push([t,e])},e.unsubscribe=function(t,e){this.subscribers=this.subscribers.filter((function(r){var n=c(r,2),o=n[0],i=n[1];return o!==t||i.toString()!==e.toString()}))},e.publish=function(t,e){this.subscribers.forEach((function(r){var n=c(r,2),o=n[0],i=n[1];return setTimeout((function(){return o===t?i(e):null}),0)}))},t}()),u=function(t){return"[object Object]"===Object.prototype.toString.call(t)};function l(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var f={debug:!1,level:"log"},d=function(t,e,r){var n=function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){l(t,e,r[e])}))}return t}({},f,r),i=n.debug,a=n.level;(i||"true"===localStorage.getItem(o))&&console[a]("Gr4vy - Secure Fields - ".concat(t),e||{})},p=function(t){return t!=t.toLowerCase()&&(t=t.replace(/[A-Z]/g,(function(t){return"-"+t.toLowerCase()}))),t};function y(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function b(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var n,o,i=[],a=!0,c=!1;try{for(r=r.call(t);!(a=(n=r.next()).done)&&(i.push(n.value),!e||i.length!==e);a=!0);}catch(t){c=!0,o=t}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}}(t,e)||m(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(t){return function(t){if(Array.isArray(t))return y(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||m(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(t,e){if(t){if("string"==typeof t)return y(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?y(t,e):void 0}}var v=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return Object.entries(t).reduce((function(n,o){var i,a=b(o,2),c=a[0],s=a[1];return u(s)?(i=n).push.apply(i,h(e(t[c],"".concat((r+c).match(/[a-zA-Z0-9]+/g).join("-"),"-")))):(c=p(c).replace(/^-/,""),n.push(["--".concat(r).concat(c),s])),n}),[])};return e(t)};function g(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function O(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){g(t,e,r[e])}))}return t}function w(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);r.push.apply(r,n)}return r}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}var j=function(){function t(e){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var n=e.frameUrl,o=e.parentOrigin,i=e.options.type,a=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=i,this.options=a;var c=v(a.styles);this.frame=document.createElement("iframe"),this.frame.id=i,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%",this.frame.onload=function(){r._postMessage({type:"update",data:w(O({},r.options),{styles:c})}),d("Added field",r.options)}}var e=t.prototype;return e._postMessage=function(t){this.frame.contentWindow.postMessage(O({channel:i},t),this.frameUrl)},e.update=function(t){this.options=O({},this.options,t);var e=v(O({},this.options.styles,t.styles)),r=w(O({},this.options,t),{styles:e});this._postMessage({type:"update",data:w(O({},r),{styles:e})}),d("Updated field",this.options)},e.setPlaceholder=function(t){this.update({placeholder:t})},e.setStyles=function(t){this.update({styles:t})},t}();function S(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function 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))},d("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(p(e.type))),o.appendChild(e.frame),t.parentNode.replaceChild(o,t),window.addEventListener("message",(function(t){var i;if(t.origin===r.frameUrl&&(null===(i=t.data.data)||void 0===i?void 0:i.id)===e.type)switch(t.data.type){case"blur":s.publish("".concat(e.type,":blur"),t.data.data),o.removeAttribute(n.FOCUSED),d("Field blurred",t.data.data);break;case"focus":s.publish("".concat(e.type,":focus"),t.data.data),o.setAttribute(n.FOCUSED,""),d("Field focused",t.data.data);break;case"input":s.publish("".concat(e.type,":input"),t.data.data),t.data.data.valid?o.removeAttribute(n.INVALID):o.setAttribute(n.INVALID,""),d("Field input changed",t.data.data)}})),e.addEventListener=this.addEventListener,e.removeEventListener=this.removeEventListener,e},c.addCardNumberField=function(t,e){return this.cardNumber||(this.cardNumber=new j({frameUrl:this.frameUrl,parentOrigin:this.parentOrigin,options:P(E({},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({},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({},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=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){},e=this,n=function(o){if(o.origin===e.frameUrl&&o.data.channel===i){switch(o.data.type){case"success":t("Checkout session updated"),s.publish(r.CARD_VAULT_SUCCESS),d("Payment method tokenized successfully");break;case"error":t("Failed to update checkout session"),s.publish(r.CARD_VAULT_FAILURE),d("Failed to update checkout session")}window.removeEventListener("message",n)}};window.addEventListener("message",n),this.controller.contentWindow.postMessage({type:"submit",channel:i},this.frameUrl)},c.setDebug=function(t){localStorage.setItem(o,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,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({},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({},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({},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})()));

package/lib/types.d.ts

@@ -20,7 +20,7 @@ export declare type FieldEvent = {
 };
 export declare type CombinedEvents = Events | keyof HTMLElementEventMap;
 export declare type Event = Events | `${FieldType}:${keyof HTMLElementEventMap}`;
-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 SupportedCSSProperties = Partial<Pick<CSS.Properties, 'backgroundColor' | 'boxShadow' | 'caretColor' | 'color' | 'colorScheme' | 'cursor' | 'font' | 'fontFamily' | 'fontFeatureSettings' | 'fontKerning' | 'fontSize' | 'fontSizeAdjust' | 'fontStretch' | 'fontStyle' | 'fontVariant' | 'fontVariantAlternates' | 'fontVariantCaps' | 'fontVariantEastAsian' | 'fontVariantLigatures' | 'fontVariantNumeric' | 'fontVariationSettings' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'opacity' | 'padding' | 'textAlign' | 'textShadow' | 'textRendering' | 'transition' | 'MozOsxFontSmoothing' | 'WebkitFontSmoothing'>>;
 export declare type SupportedCSSVariables = {
     [K in keyof SupportedCSSProperties as `--${K}`]: SupportedCSSProperties[K];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields",
-  "version": "0.5.4",
+  "version": "0.6.1",
   "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": "160286f5462c6ee37f5566082aee130ca3710400"
+  "gitHead": "2dfb0bc495e9015d8f8bd60efe564bda53263ade"
 }