@gr4vy/secure-fields 0.8.0 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,55 @@
+# v1.1.0 (Fri Jan 20 2023)
+
+#### 🐛 Bug Fix
+
+- build(deps-dev): Bump typedoc from 0.23.21 to 0.23.24 [#154](https://github.com/gr4vy/secure-fields/pull/154) ([@dependabot[bot]](https://github.com/dependabot[bot]) [@luca-gr4vy](https://github.com/luca-gr4vy))
+- build(deps): bump css-loader from 6.7.1 to 6.7.2 [#119](https://github.com/gr4vy/secure-fields/pull/119) ([@dependabot[bot]](https://github.com/dependabot[bot]) [@brunodesde1987](https://github.com/brunodesde1987))
+- build(deps-dev): bump typedoc from 0.23.18 to 0.23.19 [#103](https://github.com/gr4vy/secure-fields/pull/103) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+- build(deps-dev): bump typedoc from 0.23.16 to 0.23.18 [#99](https://github.com/gr4vy/secure-fields/pull/99) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### 🏠 Internal
+
+- chore: absolute import [#145](https://github.com/gr4vy/secure-fields/pull/145) ([@theturboboy](https://github.com/theturboboy))
+- build(deps-dev): bump typedoc from 0.23.19 to 0.23.21 [#118](https://github.com/gr4vy/secure-fields/pull/118) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 4
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- Andrei Haidukevich ([@theturboboy](https://github.com/theturboboy))
+- Bruno Carvalho ([@brunodesde1987](https://github.com/brunodesde1987))
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
+# v1.0.0 (Tue Oct 18 2022)
+
+#### 🚀 Enhancement
+
+- build(deps-dev): bump @gr4vy/node from 0.27.0 to 0.31.0 [#70](https://github.com/gr4vy/secure-fields/pull/70) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### 🐛 Bug Fix
+
+- task: playwright tests [#73](https://github.com/gr4vy/secure-fields/pull/73) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- chore: update deps [#80](https://github.com/gr4vy/secure-fields/pull/80) ([@douglaseggleton](https://github.com/douglaseggleton) [@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 🏠 Internal
+
+- fix: jsdom local testing issue [#92](https://github.com/gr4vy/secure-fields/pull/92) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+- feat: playwright test [#54](https://github.com/gr4vy/secure-fields/pull/54) ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+#### 📝 Documentation
+
+- Update README.md [#58](https://github.com/gr4vy/secure-fields/pull/58) ([@cbetta](https://github.com/cbetta))
+
+#### Authors: 4
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- Cristiano Betta ([@cbetta](https://github.com/cbetta))
+- Douglas Eggleton ([@douglaseggleton](https://github.com/douglaseggleton))
+- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
+
+---
+
 # v0.8.0 (Thu Oct 06 2022)
 
 #### 🚀 Enhancement

package/README.md

@@ -3,9 +3,9 @@
 ![NPM Version](https://img.shields.io/npm/v/@gr4vy/secure-fields?color=green)
 [![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](https://github.com/gr4vy/secure-fields/blob/main/LICENSE)
 
-Load Secure Fields in your Node app.
+Add Secure Fields to your Node app.
 
-Use [`@gr4vy/secure-fields-react`](../secure-fields-react) in a React application or [`@gr4vy/secure-fields-cdn`](../secure-fields-cdn) in a regular web application.
+Use [`@gr4vy/secure-fields-react`](../secure-fields-react) in a React application or [`@gr4vy/secure-fields-cdn`](../secure-fields-cdn) in non-Node web application.
 
 ## Usage
 
@@ -18,115 +18,129 @@ npm install @gr4vy/secure-fields --save-prod
 
 ## Get started
 
-To use Secure Fields, you first need a form with placeholder elements that will be replaced by secure fields (`iframe`s), each with a specific `id` attribute.
+To use Secure Fields, you need some placeholder elements to attach the secure fields on to. Each of these elements will be replaced by a secure field. These elements can be `<input>` but do not need to be.
 
 ```html
-<form id="cc-form">
-  <label for="cc-holder-name">Name</label>
-  <input
-    id="cc-holder-name"
-    class="form-control"
-    placeholder="Name on the card"
-  />
-  <label for="cc-number">Card Number</label>
-  <input id="cc-number" class="form-control" />
-  <label for="cc-security-code">Security Code</label>
-  <input id="cc-security-code" class="form-control" />
-  <label for="cc-expiry-date">Expiry date</label>
-  <input id="cc-expiry-date" class="form-control" />
-  <button id="pay-button">Pay now</button>
-</form>
+<label for="cc-number">Card Number</label>
+<input id="cc-number" />
+
+<label for="cc-cvv">Security code</label>
+<input id="cc-cvv" />
+
+<label for="cc-expiry">Expiry date</label>
+<input id="cc-expiry" />
+
+<button id="cc-button">Submit</button>
 ```
 
-Generate a client token which is going to be used to make an authenticated call (you can use any of our [SDKs](https://gr4vy.com/docs/web-checkout/sdks)). Then, get a session id by making a request to the [Checkout Sessions API](https://gr4vy.com/docs/reference#tag/Checkout-Sessions), passing an `Authorization` header with the generated bearer token.
+To use Secure Fields, call the `new SecureFields()` method with a configuration object that includes the `environment` (`sandbox` or `production`), your `gr4vyId` and a `sessionId` obtained from calling the [Checkout Sessions API](https://gr4vy.com/docs/reference#tag/Checkout-Sessions).
 
-Import the library and call the class constructor to create an instance. Pass the session id returned by the Checkout Sessions API, an environment and your gr4vyId.
+Then, add the fields and event listeners needed to handle the form submission.
 
 ```js
-const { SecureFields } = require(`@gr4vy/secure-fields`)
+const { SecureFields } = require('@gr4vy/secure-fields')
+
+// Alternatively
+// import { SecureFields } from '@gr4vy/secure-fields'
 
 const secureFields = new SecureFields({
+  gr4vyId: '[GR4VY_ID]',
   environment: 'sandbox',
-  gr4vyId: '[GR4VY_ID]'
-  sessionId: '[SESSION_ID]'
+  sessionId: '[SESSION_ID]',
 })
 
-> **Note**: Replace `[GR4VY_ID]` with your Gr4vy ID and `[SESSION_ID]` with the session id.
-```
-
-Call methods to add / update fields, set flags, and attach event listeners. Call `submit` to capture the data and send it to Gr4vy, passing an optional callback to handle other UI interactions.
-
-```js
-secureFields.setDebug(true)
-
 secureFields.addFont('Lato')
 
 const styles = {
   color: 'black',
   fontSize: '18px',
+  fontFamily: 'Lato',
   ':focus': {
     color: 'blue',
   },
 }
 
-const cardNumberField = secureFields.addCardNumberField('#cc-number', {
-  styles,
-})
-const expiryDateField = secureFields.addExpiryDateField('#cc-number', {
-  styles,
-})
-const securityCodeField = secureFields.addSecurityCodeField('#cc-number', {
-  styles,
-})
+const number = secureFields.addCardNumberField('#cc-number', { styles })
+const expiry = secureFields.addExpiryDateField('#cc-expiry', { styles })
+const cvv = secureFields.addSecurityCodeField('#cc-cvv', { styles })
 
-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_SUCCESS, () =>
+  console.log('Card tokenized successfully')
+)
 
-secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, () => {
-  console.log('Failed to tokenize card data')
-})
+secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, () =>
+  console.log('Card tokenization failed')
+)
 
-cardNumberField.addEventListener('input', (data) => {
+number.addEventListener('input', (data) => {
   console.warn('Input changed', data) // data.schema, data.codeLabel...
 })
 
-const form = document.getElementById('cc-form')
-form.addEventListener('submit', (e) => {
-  e.preventDefault()
+const button = document.querySelector('#cc-button')
+button.addEventListener('click', () => {
   secureFields.submit()
 })
 ```
 
-This will initialize Secure Fields and inject corresponding iframe elements into your form. On form submit, it will capture and store the payment method data securely via Gr4vy, so you can then create a transaction via the Checkout Sessions API.
+> **Note**: Replace `[GR4VY_ID]` with your Gr4vy ID and `[SESSION_ID]` with a valid checkout session id.
+
+This will initialize Secure Fields and replace each of the inputs with a corresponding secure element. On submit, it will store the card data securely with Gr4vy, after which you can create a transaction or vault the card for later use.
 
-### Styles
+For more information please
+refer to the [Secure Fields get started guide](https://gr4vy.com/docs/web-secure-fields).
+
+## Styles
+
+The outer styling of every Secure Field is completely in your control by applying your own CSS to the following class names.
+
+```css
+/* Applied to each field */
+.secure-fields__input {
+}
+/* Applied to the card number field */
+.secure-fields__input--number {
+}
+/* Applied to the expiry date field */
+.secure-fields__input--expiry-date {
+}
+/* Applied to the security code field */
+.secure-fields__input--security-code {
+}
+/* Applied to a focused field */
+.secure-fields__input[data-secure-fields-focused] {
+}
+/* Applied to an invalid field */
+.secure-fields__input[data-secure-fields-invalid] {
+}
+```
 
-The outer styling (any containers around fields, etc) is completely in the your control. SecureFields will also generate classes along with a set of data attributes and attach them to the outer iframe containers, so you can target them with your own CSS. Finally, an object of CSS rules can be passed to the `addCardNumberField`, `addExpiryDateField` and `addSecurityCodeField` methods options to style elements inside the iframe(s).
+To set the CSS of the content of a field an object of CSS rules can be passed to the `addCardNumberField`, `addExpiryDateField` and `addSecurityCodeField` methods.
 
 ```js
 const styles = {
-  // Default styles (any of the supported CSS property)
-  color: ...,
-  // Rules applied when the field has its value autofilled by a browser / extension
+  // Default styles applied to field
+  color: "#66666",
+  fontSize: "1.3em",
+  // ...etc
+
+  // Applied when field has a value autofilled by browser/extension
   ':autofill': { ... },
-  // Rules applied when the field is hovered
+  // Applied when field is hovered
   ':hover': { ... },
-  // Rules applied when the field is focused
+  // Applied when field is focused
   ':focus': { ... },
-  // Rules applied when the field is disabled
+  // Applied when field is disabled
   ':disabled': { ... },
-  // Rules applied when the field is valid
+  // Applied when field is valid
   ':valid': { ... },
-  // Rules applied when the field is invalid
+  // Applied when field is invalid
   ':invalid': { ... },
-  // Rules applied to the field placeholder
+  // Applied to field placeholder
   '::placeholder': { ... },
 }
 ```
 
-We only allow the following CSS properties:
+Not all CSS properties can be set. The currently supported list is as follows.
 
 ```
 backgroundColor
@@ -163,40 +177,23 @@ MozOsxFontSmoothing
 WebkitFontSmoothing
 ```
 
-Here are the selectors you can use to style the outer frame containers:
+## Events
 
-```css
-/* Applied to each field */
-.secure-fields__input {
-}
-/* Applied to the card number field */
-.secure-fields__input--number {
-}
-/* Applied to the expiry date field */
-.secure-fields__input--expiry-date {
-}
-/* Applied to the security code field */
-.secure-fields__input--security-code {
-}
-/* Applied to a focused field */
-.secure-fields__input[data-secure-fields-focused] {
-}
-/* Applied to an invalid field */
-.secure-fields__input[data-secure-fields-invalid] {
-}
-```
+### Global events
+
+The following events can be listened to by attaching an event handler to the `SecureFields` instance using the `addEventListener` method.
 
-### Events
+| Name                 | Description                                                  | Example                                                                                                                                 |
+| -------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `CARD_VAULT_SUCCESS` | Triggered when the card is successfully vaulted.             | `secureFields.addEventListener(SecureFields.Events.CARD_VAULT_SUCCESS, () => { console.log('Card has been tokenized successfully!') })` |
+| `CARD_VAULT_FAILURE` | Triggered when the card vaulting fails.                      | `secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, () => { console.log('Couldn\'t tokenize the card') })`           |
+| `READY`              | Triggered when Secure Fields is loaded and ready to be used. | `secureFields.addEventListener(SecureFields.READY, () => { console.log('Secure fields loaded') })`                                      |
 
-You can call the `addEventListener` on a Secure Fields instance or on fields, passing one of the supported events and a callback. Here are the events you can listen to on an instance:
+### Field events
 
-| Name                 | Description                                                     | Example                                                                                                                                 |
-| -------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| `CARD_VAULT_SUCCESS` | Triggered when the card is successfully vaulted.                | `secureFields.addEventListener(SecureFields.Events.CARD_VAULT_SUCCESS, () => { console.log('Card has been tokenized successfully!') })` |
-| `CARD_VAULT_FAILURE` | Triggered when the card vaulting fails.                         | `secureFields.addEventListener(SecureFields.Events.CARD_VAULT_FAILURE, () => { console.log('Couldn\'t tokenize the card') })`           |
-| `READY`              | Triggered when the SecureFields is loaded and ready to be used. | `secureFields.addEventListener(SecureFields.READY, () => { console.log('Secure fields loaded') })`                                      |
+The following events can be listened to by attaching an event handler to a field (returned by the `addCardNumberField`, `addExpiryDateField` and `addSecurityCodeField` methods) using the `addEventListener` method.
 
-For actual fields (returned by the `addCardNumberField`, `addExpiryDateField` and `addSecurityCodeField` methods), you can subscribe to default events and have access to more useful data (bin, validation status, etc). For example, the input event on a card number field might include `{ schema: 'american-express', codeLabel: 'CID', valid: true, ... }`. You can expect to be able to listen to the following events:
+Some of these provide additional useful data like the card BIN, validation status, and scheme. For example, the input event on a card number field might include `{ schema: 'visa', codeLabel: 'CVV', valid: true, ... }`.
 
 | Name    | Description                                      | Example                                                                                                                                           |
 | ------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |

package/lib/index.d.ts

@@ -1,6 +1,11 @@
 import { Events } from './constants';
 import { SecureInput } from './input';
 import type { CombinedEvents, Config, Field } from './types';
+declare global {
+    interface Window {
+        SECURE_FIELDS_FRAME_URL?: string;
+    }
+}
 declare class SecureFields {
     config: Config;
     controller: HTMLIFrameElement;

package/lib/index.js

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

package/lib/types.d.ts

@@ -1,5 +1,5 @@
-import type * as CSS from 'csstype';
 import { Events } from './constants';
+import type * as CSS from 'csstype';
 export declare type Config = {
     environment?: 'sandbox' | 'production';
     gr4vyId: string;

package/lib/utils/styles.d.ts

@@ -1,2 +1,2 @@
-import type { Styles, StylesTuple } from '../types';
+import type { Styles, StylesTuple } from "../types";
 export declare const stylesTransformer: (styles?: Styles) => StylesTuple;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gr4vy/secure-fields",
-  "version": "0.8.0",
+  "version": "1.1.0",
   "description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
   "main": "lib/index",
   "types": "lib/index",
@@ -29,7 +29,8 @@
     }
   },
   "scripts": {
-    "build": "tsc && webpack --config webpack.prod.js",
+    "prepare": "ts-patch install -s",
+    "build": "tsc -p tsconfig.prod.json && webpack --config webpack.prod.js",
     "clean": "rm -rf lib *.tgz",
     "dev": "TOKEN=$(yarn --silent token) webpack serve --config webpack.dev.js",
     "docs": "typedoc --plugin typedoc-plugin-missing-exports",
@@ -40,16 +41,17 @@
     "token": "node generate-token"
   },
   "devDependencies": {
-    "@gr4vy/node": "^0.27.0",
-    "css-loader": "^6.7.1",
-    "csstype": "^3.1.0",
-    "dotenv": "^16.0.1",
+    "css-loader": "^6.7.2",
+    "csstype": "^3.1.1",
+    "dotenv": "^16.0.3",
     "style-loader": "^3.3.1",
-    "typedoc": "^0.23.5",
-    "typedoc-plugin-missing-exports": "^0.23.0"
+    "ts-patch": "^2.1.0",
+    "typedoc": "^0.23.24",
+    "typedoc-plugin-missing-exports": "^0.23.0",
+    "typescript-transform-paths": "^3.4.4"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b5f4f0de1387377b37761fddc0ab7d4ee82a8de6"
+  "gitHead": "2bddb6226846b2fced4419ff156e99d4235dd9e3"
 }