@justifi/webcomponents 4.0.5 → 4.2.0-rc.0

package/dist/collection/components/payment-form/payment-form.css

@@ -67,6 +67,343 @@
   --bs-highlight-bg: #fff3cd;
 }
 
+.spinner-grow,
+.spinner-border {
+  display: inline-block;
+  width: var(--bs-spinner-width);
+  height: var(--bs-spinner-height);
+  vertical-align: var(--bs-spinner-vertical-align);
+  border-radius: 50%;
+  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
+}
+.spinner-border {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-border-width: 0.25em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-border;
+  border: var(--bs-spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+
+.spinner-border-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+  --bs-spinner-border-width: 0.2em;
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.spinner-grow {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-grow;
+  background-color: currentcolor;
+  opacity: 0;
+}
+
+.spinner-grow-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border,
+  .spinner-grow {
+    --bs-spinner-animation-speed: 1.5s;
+  }
+}
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.text-bg-primary {
+  color: #fff !important;
+  background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-secondary {
+  color: #fff !important;
+  background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-success {
+  color: #fff !important;
+  background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-info {
+  color: #000 !important;
+  background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-warning {
+  color: #000 !important;
+  background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-danger {
+  color: #fff !important;
+  background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-light {
+  color: #000 !important;
+  background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-dark {
+  color: #fff !important;
+  background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important;
+}
+
+.link-primary {
+  color: #0d6efd !important;
+}
+.link-primary:hover, .link-primary:focus {
+  color: #0a58ca !important;
+}
+
+.link-secondary {
+  color: #6c757d !important;
+}
+.link-secondary:hover, .link-secondary:focus {
+  color: #565e64 !important;
+}
+
+.link-success {
+  color: #198754 !important;
+}
+.link-success:hover, .link-success:focus {
+  color: #146c43 !important;
+}
+
+.link-info {
+  color: #0dcaf0 !important;
+}
+.link-info:hover, .link-info:focus {
+  color: #3dd5f3 !important;
+}
+
+.link-warning {
+  color: #ffc107 !important;
+}
+.link-warning:hover, .link-warning:focus {
+  color: #ffcd39 !important;
+}
+
+.link-danger {
+  color: #dc3545 !important;
+}
+.link-danger:hover, .link-danger:focus {
+  color: #b02a37 !important;
+}
+
+.link-light {
+  color: #f8f9fa !important;
+}
+.link-light:hover, .link-light:focus {
+  color: #f9fafb !important;
+}
+
+.link-dark {
+  color: #212529 !important;
+}
+.link-dark:hover, .link-dark:focus {
+  color: #1a1e21 !important;
+}
+
+.ratio {
+  position: relative;
+  width: 100%;
+}
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: "";
+}
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
+}
+
+.ratio-4x3 {
+  --bs-aspect-ratio: 75%;
+}
+
+.ratio-16x9 {
+  --bs-aspect-ratio: 56.25%;
+}
+
+.ratio-21x9 {
+  --bs-aspect-ratio: 42.8571428571%;
+}
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: 1020;
+}
+
+@media (min-width: 576px) {
+  .sticky-sm-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-sm-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 768px) {
+  .sticky-md-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-md-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 992px) {
+  .sticky-lg-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-lg-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1200px) {
+  .sticky-xl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-xl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-xxl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentcolor;
+  opacity: 0.25;
+}
+
 *,
 *::before,
 *::after {
@@ -1927,6 +2264,68 @@ progress {
   --bs-btn-border-radius: 0.25rem;
 }
 
+.spinner-grow,
+.spinner-border {
+  display: inline-block;
+  width: var(--bs-spinner-width);
+  height: var(--bs-spinner-height);
+  vertical-align: var(--bs-spinner-vertical-align);
+  border-radius: 50%;
+  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
+}
+.spinner-border {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-border-width: 0.25em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-border;
+  border: var(--bs-spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+
+.spinner-border-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+  --bs-spinner-border-width: 0.2em;
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.spinner-grow {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-grow;
+  background-color: currentcolor;
+  opacity: 0;
+}
+
+.spinner-grow-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border,
+  .spinner-grow {
+    --bs-spinner-animation-speed: 1.5s;
+  }
+}
 :host {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
@@ -2010,4 +2409,17 @@ justifi-payment-method-form {
   color: var(--jfi-submit-button-color-active);
   background-color: var(--jfi-submit-button-background-color-active);
   border-color: var(--jfi-submit-button-border-color-active);
+}
+
+.btn.jfi-submit-button-loading {
+  min-width: 75px;
+  color: var(--jfi-submit-button-color-loading);
+  background-color: var(--jfi-submit-button-background-color-loading);
+  border-color: var(--jfi-submit-button-border-color-loading);
+}
+
+.btn.jfi-submit-button-loading .spinner-border {
+  border-top-color: var(--jfi-submit-button-color-loading);
+  border-bottom-color: var(--jfi-submit-button-color-loading);
+  border-left-color: var(--jfi-submit-button-color-loading);
 }

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

@@ -10,6 +10,7 @@ export class PaymentForm {
     this.accountId = undefined;
     this.submitButtonText = undefined;
     this.submitButtonEnabled = true;
+    this.isLoading = false;
     this.selectedPaymentMethodType = undefined;
     this.allowedPaymentMethodTypes = [];
   }
@@ -43,11 +44,12 @@ export class PaymentForm {
     const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
     if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
       return;
-    this.submitButtonEnabled = false;
+    this.isLoading = true;
     const billingFormFieldValues = await this.billingFormRef.getValues();
     const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
     const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
     this.submitted.emit(tokenizeResponse);
+    this.isLoading = false;
   }
   render() {
     return (h(Host, null, h("form", { class: "row gy-3" }, this.allowedPaymentMethodTypes.length > 1 && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {
@@ -58,7 +60,9 @@ export class PaymentForm {
         if (el) {
           this.billingFormRef = el;
         }
-      } })), h("div", { class: "col-12" }, h("button", { onClick: event => this.submit(event), disabled: !this.submitButtonEnabled, type: "submit", class: "btn btn-primary jfi-submit-button" }, this.submitButtonText || 'Submit')))));
+      } })), h("div", { class: "col-12" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
+      h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")) :
+      this.submitButtonText || 'Submit')))));
   }
   static get is() { return "justifi-payment-form"; }
   static get encapsulation() { return "shadow"; }
@@ -198,6 +202,7 @@ export class PaymentForm {
   static get states() {
     return {
       "submitButtonEnabled": {},
+      "isLoading": {},
       "selectedPaymentMethodType": {},
       "allowedPaymentMethodTypes": {}
     };
@@ -278,3 +283,4 @@ export class PaymentForm {
       }];
   }
 }
+//# sourceMappingURL=payment-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"payment-form.js","sourceRoot":"","sources":["../../../../src/components/payment-form/payment-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAS/C,MAAM,OAAO,WAAW;;;;;;;;;+BASkB,IAAI;qBACd,KAAK;;qCAEwB,EAAE;;EAK7D,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC9D;IACD,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;KACrE;IACD,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,MAAM,EAAE;MAC1C,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC9D;IACD,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC;EACrE,CAAC;EAGD,4BAA4B,CAAC,KAAkB;IAC7C,MAAM,iBAAiB,GAAuB,KAAK,CAAC,MAAM,CAAC;IAC3D,IAAI,CAAC,yBAAyB,GAAG,iBAAiB,CAAC;EACrD,CAAC;EAGD,KAAK,CAAC,eAAe,CAAC,MAAyB;IAC7C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACnC,CAAC;EAGD,KAAK,CAAC,kBAAkB;IACtB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;EAClC,CAAC;EAED,KAAK,CAAC,MAAM,CAAC,KAAK;IAChB,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,cAAc;MAAE,OAAO;IAE/D,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;IACnE,MAAM,2BAA2B,GAAG,MAAM,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,CAAC;IAE/E,IAAI,CAAC,qBAAqB,CAAC,OAAO,IAAI,CAAC,2BAA2B,CAAC,OAAO;MAAE,OAAO;IAEnF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAEtB,MAAM,sBAAsB,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;IACrE,MAAM,iBAAiB,mBAAK,KAAK,EAAE,IAAI,CAAC,KAAK,IAAK,sBAAsB,CAAE,CAAC;IAC3E,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAEpH,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACtC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,UAAU;QACnB,IAAI,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5C,WAAK,KAAK,EAAC,QAAQ;UACjB,uCAAiC,kBAAkB,EAAE,IAAI,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,IAAI,CAAC,yBAAyB,GAAI,CAC9I,CACP;QACD,WAAK,KAAK,EAAC,QAAQ;UACjB,+DAC4B,IAAI,CAAC,yBAAyB,mBACzC,IAAI,CAAC,YAAY,EAChC,GAAG,EAAE,EAAE,CAAC,EAAE;cACR,IAAI,EAAE,EAAE;gBACN,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;eAChC;YACH,CAAC,GACD,CACE;QACN,WAAK,KAAK,EAAC,QAAQ;UACjB,4BACE,MAAM,EAAC,cAAc,EACrB,GAAG,EAAE,EAAE,CAAC,EAAE;cACR,IAAI,EAAE,EAAE;gBACN,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;eAC1B;YACH,CAAC,GACD,CACE;QACN,WAAK,KAAK,EAAC,QAAQ;UACjB,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,SAAS,EACrD,KAAK,EAAE,oCAAoC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,EAAE,IAG7F,IAAI,CAAC,SAAS,CAAC,CAAC;YAChB,WAAK,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,QAAQ;cACzD,YAAM,KAAK,EAAC,iBAAiB,iBAAkB,CAC3C,CAAC,CAAC;YACR,IAAI,CAAC,gBAAgB,IAAI,QAAQ,CAE5B,CACL,CACD,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\nimport { PaymentMethodTypes } from '../../api';\nimport { BillingFormFields } from '../billing-form/billing-form-schema';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-form',\n  styleUrl: 'payment-form.scss',\n  shadow: true,\n})\nexport class PaymentForm {\n  @Prop() bankAccount?: boolean;\n  @Prop() card?: boolean;\n  @Prop() email?: string;\n  @Prop() iframeOrigin?: string;\n  @Prop() clientId: string;\n  @Prop() accountId?: string;\n  @Prop() submitButtonText?: string;\n  @Event() submitted: EventEmitter<CreatePaymentMethodResponse>;\n  @State() submitButtonEnabled: boolean = true;\n  @State() isLoading: boolean = false;\n  @State() selectedPaymentMethodType: PaymentMethodTypes;\n  @State() allowedPaymentMethodTypes: PaymentMethodTypes[] = [];\n\n  private paymentMethodFormRef?: HTMLJustifiPaymentMethodFormElement;\n  private billingFormRef?: HTMLJustifiBillingFormElement;\n\n  connectedCallback() {\n    if (this.card) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);\n    }\n    if (this.bankAccount) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.bankAccount);\n    }\n    if (!this.allowedPaymentMethodTypes.length) {\n      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);\n    }\n    this.selectedPaymentMethodType = this.allowedPaymentMethodTypes[0];\n  }\n\n  @Listen('paymentMethodSelected')\n  paymentMethodSelectedHandler(event: CustomEvent) {\n    const paymentMethodType: PaymentMethodTypes = event.detail;\n    this.selectedPaymentMethodType = paymentMethodType;\n  }\n\n  @Method()\n  async fillBillingForm(fields: BillingFormFields) {\n    this.billingFormRef.fill(fields);\n  }\n\n  @Method()\n  async enableSubmitButton() {\n    this.submitButtonEnabled = true;\n  }\n\n  async submit(event) {\n    event.preventDefault();\n    if (!this.paymentMethodFormRef || !this.billingFormRef) return;\n\n    const billingFormValidation = await this.billingFormRef.validate();\n    const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();\n\n    if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid) return;\n\n    this.isLoading = true;\n\n    const billingFormFieldValues = await this.billingFormRef.getValues();\n    const paymentMethodData = { email: this.email, ...billingFormFieldValues };\n    const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);\n\n    this.submitted.emit(tokenizeResponse);\n    this.isLoading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <form class=\"row gy-3\">\n          {this.allowedPaymentMethodTypes.length > 1 && (\n            <div class=\"col-12\">\n              <justifi-payment-method-selector paymentMethodTypes={this.allowedPaymentMethodTypes} selectedPaymentMethodType={this.selectedPaymentMethodType} />\n            </div>\n          )}\n          <div class=\"col-12\">\n            <justifi-payment-method-form\n              payment-method-form-type={this.selectedPaymentMethodType}\n              iframe-origin={this.iframeOrigin}\n              ref={el => {\n                if (el) {\n                  this.paymentMethodFormRef = el;\n                }\n              }}\n            />\n          </div>\n          <div class=\"col-12\">\n            <justifi-billing-form\n              legend=\"Billing Info\"\n              ref={el => {\n                if (el) {\n                  this.billingFormRef = el;\n                }\n              }}\n            />\n          </div>\n          <div class=\"col-12\">\n            <button\n              type=\"submit\"\n              onClick={event => this.submit(event)}\n              disabled={!this.submitButtonEnabled || this.isLoading}\n              class={`btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`}\n            >\n              {\n                this.isLoading ?\n                <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                  <span class=\"visually-hidden\">Loading...</span>\n                </div> :\n                this.submitButtonText || 'Submit'\n              }\n            </button>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -67,7 +67,7 @@ Styled.args = {
   'cssVariables': `
   --jfi-primary-color: #212529;
 
-  --jfi-layout-padding: 0;
+  --jfi-layout-padding: 4px;
   --jfi-layout-form-control-spacing-x: .5rem;
   --jfi-layout-form-control-spacing-y: 1rem;
   --jfi-form-label-font-weight: 700;
@@ -85,6 +85,7 @@ Styled.args = {
   --jfi-form-control-border-right-width: 0;
   --jfi-form-control-border-radius: 4px 4px 0 0;
   --jfi-form-control-border-style: solid;
+  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   --jfi-form-control-box-shadow-focus: none;
   --jfi-form-control-box-shadow-error-focus: none;
   --jfi-form-control-border-style: solid;
@@ -133,3 +134,4 @@ Styled.args = {
   --jfi-radio-button-group-width: 100%;
   `,
 };
+//# sourceMappingURL=payment-form.stories.js.map

package/dist/collection/components/payment-form/payment-form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-form.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-form/payment-form.stories.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAYrD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC7B,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA0B,EAAE,EAAE;EAC9C,wFAAwF;EACxF,OAAO;;;eAGM,IAAI,CAAC,IAAI;wBACA,IAAI,CAAC,cAAc,CAAC;iBAC3B,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,WAAW,CAAC;sBAChB,IAAI,CAAC,YAAY,CAAC;8BACV,IAAI,CAAC,oBAAoB,CAAC;yBAC/B,IAAI,CAAC,eAAe,CAAC;;;;;UAKpC,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;GAexB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,cAAc,EAAE,IAAI;EACpB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,WAAW,EAAE,EAAE;EACf,YAAY,EAAE,EAAE;EAChB,oBAAoB,EAAE,EAAE;EACxB,eAAe,EAAE,EAAE;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,cAAc,EAAE,IAAI;EACpB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,WAAW,EAAE,EAAE;EACf,YAAY,EAAE,EAAE;EAChB,oBAAoB,EAAE,EAAE;EACxB,eAAe,EAAE,EAAE;EACnB,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEf;CACF,CAAC","sourcesContent":["const isDev = process.env.NODE_ENV === 'development';\n\ninterface PaymentFormStoryArgs {\n  'bank-account': boolean;\n  'card': boolean;\n  'email': string;\n  'client-id': string;\n  'account-id': string;\n  'submit-button-text': string;\n  'cssVariables': string;\n}\n\nexport default {\n  title: 'Components/PaymentForm',\n  component: 'justifi-payment-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n  },\n};\n\nconst Template = (args: PaymentFormStoryArgs) => {\n  // The <div> here should be replaced by a `display` property in the cardForm potentially\n  return `\n    <div>\n      <justifi-payment-form\n        card=${args.card}\n        bank-account='${args['bank-account']}'\n        email='${args.email}'\n        client-id='${args['client-id']}'\n        account-id='${args['account-id']}'\n        submit-button-text='${args['submit-button-text']}'\n        iframe-origin='${args['iframe-origin']}'\n      />\n    </div>\n    <style>\n      :root {\n        ${args.cssVariables}\n      }\n    </style>\n    <script>\n    (async () => {\n      await customElements.whenDefined('justifi-payment-form');\n      const paymentForm = document.querySelector('justifi-payment-form');\n      paymentForm.addEventListener('submitted', async (event) => {\n        // here is where you would submit a payment with the token\n        console.log(event.detail);\n        // after the payment succeeds or fails, the form submit button can be enabled again\n        await paymentForm.enableSubmitButton();\n      });\n    })()\n    </script>\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'bank-account': true,\n  'card': true,\n  'email': '',\n  'client-id': '',\n  'account-id': '',\n  'submit-button-text': '',\n  'iframe-origin': '',\n};\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'bank-account': true,\n  'card': true,\n  'email': '',\n  'client-id': '',\n  'account-id': '',\n  'submit-button-text': '',\n  'iframe-origin': '',\n  'cssVariables': `\n  --jfi-primary-color: #212529;\n\n  --jfi-layout-padding: 4px;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 700;\n  --jfi-form-label-font-family: sans-serif;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n\n  --jfi-submit-button-color: white;\n  --jfi-submit-button-background-color: #3F3F47;\n  --jfi-submit-button-border-color: var(--jfi-primary-color);\n  --jfi-submit-button-padding: 0.375rem 0.75rem;\n  --jfi-submit-button-font-size: 1rem;\n  --jfi-submit-button-border-radius: 1px;\n  --jfi-submit-button-color-hover: white;\n  --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-color-focus: white;\n  --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-color-active: white;\n  --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-width: 100%;\n  --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n\n  --jfi-radio-button-color: var(--jfi-primary-color);\n  --jfi-radio-button-background-color: transparent;\n  --jfi-radio-button-color-selected: white;\n  --jfi-radio-button-background-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-border-color: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-padding: 0.375rem 0.75rem;\n  --jfi-radio-button-font-size: 1rem;\n  --jfi-radio-button-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-color-selected-hover: white;\n  --jfi-radio-button-background-color-hover: transparent;\n  --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-group-width: 100%;\n  `,\n};\n"]}