@justifi/webcomponents 0.0.13 → 0.0.14

package/dist/cjs/{index-4f753ffd.js → index-e1b45289.js}

@@ -133,6 +133,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -147,6 +155,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -420,6 +434,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -436,6 +465,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -628,7 +670,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -695,6 +738,18 @@ const callNodeRefs = (vNode) => {
         vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -742,6 +797,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
                 hostRef.$queuedListeners$ = null;
             }
         }
+        {
+            promise = safeCall(instance, 'componentWillLoad');
+        }
     }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
@@ -905,6 +963,11 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
                 }
             }
             if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
+                if (instance.componentShouldUpdate) {
+                    if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+                        return;
+                    }
+                }
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
                 // queue that we need to do an update, but don't worry about queuing

package/dist/cjs/justifi-bank-account-form_4.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f753ffd.js');
+const index = require('./index-e1b45289.js');
 
 const BankAccountForm = class {
   constructor(hostRef) {
@@ -11,6 +11,8 @@ const BankAccountForm = class {
     this.bankAccountFormTokenize = index.createEvent(this, "bankAccountFormTokenize", 7);
     this.bankAccountFormValidate = index.createEvent(this, "bankAccountFormValidate", 7);
     this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -21,6 +23,13 @@ const BankAccountForm = class {
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+    this.internalStyleOverrides = parsedStyleOverrides;
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -38,8 +47,11 @@ const BankAccountForm = class {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
+      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
 };
 
 const CardForm = class {
@@ -49,6 +61,8 @@ const CardForm = class {
     this.cardFormTokenize = index.createEvent(this, "cardFormTokenize", 7);
     this.cardFormValidate = index.createEvent(this, "cardFormValidate", 7);
     this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -59,6 +73,13 @@ const CardForm = class {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+    this.internalStyleOverrides = parsedStyleOverrides;
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -76,8 +97,11 @@ const CardForm = class {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
+      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
 };
 
 const MessageEventType = {
@@ -86,12 +110,14 @@ const MessageEventType = {
     tokenize: 'justifi.card.tokenize',
     validate: 'justifi.card.validate',
     resize: 'justifi.card.resize',
+    styleOverrides: 'justifi.card.styleOverrides',
   },
   bankAccount: {
     ready: 'justifi.bankAccount.ready',
     tokenize: 'justifi.bankAccount.tokenize',
     validate: 'justifi.bankAccount.validate',
     resize: 'justifi.bankAccount.resize',
+    styleOverrides: 'justifi.bankAccount.styleOverrides',
   }
 };
 
@@ -104,6 +130,7 @@ const PaymentMethodForm = class {
     this.paymentMethodFormTokenize = index.createEvent(this, "paymentMethodFormTokenize", 7);
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationStrategy = undefined;
+    this.paymentMethodStyleOverrides = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -112,6 +139,14 @@ const PaymentMethodForm = class {
   disconnectedCallback() {
     window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
   }
+  componentShouldUpdate() {
+    this.sendStyleOverrides();
+  }
+  sendStyleOverrides() {
+    if (this.paymentMethodStyleOverrides) {
+      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.paymentMethodStyleOverrides });
+    }
+  }
   dispatchMessageEvent(messageEvent) {
     const messagePayload = messageEvent.data;
     const messageType = messagePayload.eventType;
@@ -123,6 +158,12 @@ const PaymentMethodForm = class {
       this.height = messageData.height;
     }
   }
+  postMessage(eventType, payload) {
+    if (this.iframeElement) {
+      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+    }
+  }
+  ;
   async postMessageWithResponseListener(eventType, payload) {
     return new Promise((resolve) => {
       const responseListener = (event) => {
@@ -132,7 +173,7 @@ const PaymentMethodForm = class {
         resolve(event.data.data);
       };
       window.addEventListener('message', responseListener);
-      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+      this.postMessage(eventType, payload);
     });
   }
   async tokenize(clientKey, paymentMethodMetadata, account) {
@@ -159,6 +200,9 @@ const PaymentMethodForm = class {
   render() {
     return (index.h(index.Host, null, index.h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: (el) => this.iframeElement = el, height: this.height })));
   }
+  static get watchers() { return {
+    "paymentMethodStyleOverrides": ["sendStyleOverrides"]
+  }; }
 };
 PaymentMethodForm.style = paymentMethodFormCss;
 

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f753ffd.js');
+const index = require('./index-e1b45289.js');
 
 /*
- Stencil Client Patch Esm v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["justifi-bank-account-form_4.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["justifi-bank-account-form_4.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
   });
 };
 

package/dist/cjs/webcomponents.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f753ffd.js');
+const index = require('./index-e1b45289.js');
 
 /*
- Stencil Client Patch Browser v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('webcomponents.cjs.js', document.baseURI).href));
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["justifi-bank-account-form_4.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["justifi-bank-account-form_4.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -7,7 +7,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.1",
+    "version": "2.22.2",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

package/dist/collection/components/bank-account-form/bank-account-form.js

@@ -2,6 +2,8 @@ import { h } from '@stencil/core';
 export class BankAccountForm {
   constructor() {
     this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -12,6 +14,13 @@ export class BankAccountForm {
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+    this.internalStyleOverrides = parsedStyleOverrides;
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -29,7 +38,7 @@ export class BankAccountForm {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
+      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get is() { return "justifi-bank-account-form"; }
   static get properties() {
@@ -50,9 +59,31 @@ export class BankAccountForm {
         },
         "attribute": "validation-strategy",
         "reflect": false
+      },
+      "styleOverrides": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "style-overrides",
+        "reflect": false
       }
     };
   }
+  static get states() {
+    return {
+      "internalStyleOverrides": {}
+    };
+  }
   static get events() {
     return [{
         "method": "bankAccountFormReady",
@@ -146,6 +177,12 @@ export class BankAccountForm {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "styleOverrides",
+        "methodName": "parseStyleOverrides"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "paymentMethodFormReady",

package/dist/collection/components/card-form/card-form.js

@@ -2,6 +2,8 @@ import { h } from '@stencil/core';
 export class CardForm {
   constructor() {
     this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -12,6 +14,13 @@ export class CardForm {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+    this.internalStyleOverrides = parsedStyleOverrides;
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -29,7 +38,7 @@ export class CardForm {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
+      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get is() { return "justifi-card-form"; }
   static get properties() {
@@ -50,9 +59,31 @@ export class CardForm {
         },
         "attribute": "validation-strategy",
         "reflect": false
+      },
+      "styleOverrides": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "style-overrides",
+        "reflect": false
       }
     };
   }
+  static get states() {
+    return {
+      "internalStyleOverrides": {}
+    };
+  }
   static get events() {
     return [{
         "method": "cardFormReady",
@@ -146,6 +177,12 @@ export class CardForm {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "styleOverrides",
+        "methodName": "parseStyleOverrides"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "paymentMethodFormReady",

package/dist/collection/components/payment-method-form/message-event-types.js

@@ -4,11 +4,13 @@ export const MessageEventType = {
     tokenize: 'justifi.card.tokenize',
     validate: 'justifi.card.validate',
     resize: 'justifi.card.resize',
+    styleOverrides: 'justifi.card.styleOverrides',
   },
   bankAccount: {
     ready: 'justifi.bankAccount.ready',
     tokenize: 'justifi.bankAccount.tokenize',
     validate: 'justifi.bankAccount.validate',
     resize: 'justifi.bankAccount.resize',
+    styleOverrides: 'justifi.bankAccount.styleOverrides',
   }
 };

package/dist/collection/components/payment-method-form/payment-method-form.js

@@ -4,6 +4,7 @@ export class PaymentMethodForm {
   constructor() {
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationStrategy = undefined;
+    this.paymentMethodStyleOverrides = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -12,6 +13,14 @@ export class PaymentMethodForm {
   disconnectedCallback() {
     window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
   }
+  componentShouldUpdate() {
+    this.sendStyleOverrides();
+  }
+  sendStyleOverrides() {
+    if (this.paymentMethodStyleOverrides) {
+      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.paymentMethodStyleOverrides });
+    }
+  }
   dispatchMessageEvent(messageEvent) {
     const messagePayload = messageEvent.data;
     const messageType = messagePayload.eventType;
@@ -23,6 +32,12 @@ export class PaymentMethodForm {
       this.height = messageData.height;
     }
   }
+  postMessage(eventType, payload) {
+    if (this.iframeElement) {
+      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+    }
+  }
+  ;
   async postMessageWithResponseListener(eventType, payload) {
     return new Promise((resolve) => {
       const responseListener = (event) => {
@@ -32,7 +47,7 @@ export class PaymentMethodForm {
         resolve(event.data.data);
       };
       window.addEventListener('message', responseListener);
-      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+      this.postMessage(eventType, payload);
     });
   }
   async tokenize(clientKey, paymentMethodMetadata, account) {
@@ -105,6 +120,26 @@ export class PaymentMethodForm {
         },
         "attribute": "payment-method-form-validation-strategy",
         "reflect": false
+      },
+      "paymentMethodStyleOverrides": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Theme",
+          "resolved": "Theme",
+          "references": {
+            "Theme": {
+              "location": "import",
+              "path": "./theme"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }
@@ -191,4 +226,10 @@ export class PaymentMethodForm {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "paymentMethodStyleOverrides",
+        "methodName": "sendStyleOverrides"
+      }];
+  }
 }

package/dist/collection/components/payment-method-form/theme.js

@@ -0,0 +1 @@
+export {};

package/dist/components/justifi-bank-account-form.js

@@ -9,6 +9,8 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.bankAccountFormTokenize = createEvent(this, "bankAccountFormTokenize", 7);
     this.bankAccountFormValidate = createEvent(this, "bankAccountFormValidate", 7);
     this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -19,6 +21,13 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+    this.internalStyleOverrides = parsedStyleOverrides;
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -36,10 +45,15 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
+      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
 }, [0, "justifi-bank-account-form", {
     "validationStrategy": [1, "validation-strategy"],
+    "styleOverrides": [1, "style-overrides"],
+    "internalStyleOverrides": [32],
     "tokenize": [64],
     "validate": [64]
   }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);

package/dist/components/justifi-card-form.js

@@ -9,6 +9,8 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.cardFormTokenize = createEvent(this, "cardFormTokenize", 7);
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
     this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -19,6 +21,13 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+    this.internalStyleOverrides = parsedStyleOverrides;
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -36,10 +45,15 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
+      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
 }, [0, "justifi-card-form", {
     "validationStrategy": [1, "validation-strategy"],
+    "styleOverrides": [1, "style-overrides"],
+    "internalStyleOverrides": [32],
     "tokenize": [64],
     "validate": [64]
   }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);