@justifi/webcomponents 4.11.0 → 4.12.0

package/dist/collection/components/business-forms/utils/helpers.js

@@ -1,2 +1,22 @@
-export const phoneRegex = /^\d{10}$/;
-export const urlRegex = /^(?:http(s)?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;
+import StateOptions from "../../../utils/state-options";
+export function getStateAbbreviation(stateName) {
+    const state = StateOptions.find(s => s.label === stateName);
+    return state ? state.value : stateName;
+}
+// filterNumber is intended to be used to format a string that contains a single digit to a two digit string. 
+export function filterNumber(num) {
+    if (/^\d$/.test(num)) {
+        return '0' + num;
+    }
+    return num;
+}
+export function constructDate(year, month, day) {
+    if (!year || !month || !day) {
+        return;
+    }
+    return `${year}-${filterNumber(month)}-${filterNumber(day)}`;
+}
+export function deconstructDate(date) {
+    const [dob_year, dob_month, dob_day] = date.split('-');
+    return { dob_year, dob_month, dob_day };
+}

package/dist/collection/components/business-forms/utils/payload-parsers.js

@@ -33,5 +33,6 @@ export const parseIdentityInfo = (values) => {
     delete values.address.created_at;
     delete values.address.updated_at;
     delete values.business_id;
+    delete values.dob_full;
     return values;
 };

package/dist/collection/components/business-list/business-list.js

@@ -79,7 +79,6 @@ export class BusinessList {
         return (h(Host, null, h("justifi-table", { columnData: [
                 ['Legal Name', 'The name associated with this Business'],
                 ['Business Type', 'The business type'],
-                ['Business Structure', 'The business structure'],
                 ['Tax ID', 'The tax ID associated with this business'],
                 ['Industry', 'The industry this business participates in'],
                 [
@@ -90,7 +89,6 @@ export class BusinessList {
             ], rowData: this.businesses.map((business) => [
                 business.legal_name,
                 snakeCaseToHumanReadable(business.business_type),
-                snakeCaseToHumanReadable(business.business_structure),
                 business.tax_id,
                 business.industry,
                 {

package/dist/collection/components/checkout/checkout-actions.js

@@ -15,9 +15,9 @@ export const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({
         return onError(error.message || error);
     }
 };
-export const makePay = ({ authToken, checkoutId, service }) => async ({ paymentMethodToken, onSuccess, onError }) => {
+export const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
     try {
-        const response = await service.pay(authToken, checkoutId, paymentMethodToken);
+        const response = await service.complete(authToken, checkoutId, payment);
         if (!response.error) {
             const checkout = response.data;
             onSuccess({ checkout });

package/dist/collection/components/checkout/checkout-core.css

@@ -2503,6 +2503,349 @@ progress {
     --bs-spinner-animation-speed: 1.5s;
   }
 }
+.list-group {
+  --bs-list-group-color: var(--bs-body-color);
+  --bs-list-group-bg: var(--bs-body-bg);
+  --bs-list-group-border-color: var(--bs-border-color);
+  --bs-list-group-border-width: var(--bs-border-width);
+  --bs-list-group-border-radius: var(--bs-border-radius);
+  --bs-list-group-item-padding-x: 1rem;
+  --bs-list-group-item-padding-y: 0.5rem;
+  --bs-list-group-action-color: var(--bs-secondary-color);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
+  --bs-list-group-action-active-color: var(--bs-body-color);
+  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
+  --bs-list-group-disabled-color: var(--bs-secondary-color);
+  --bs-list-group-disabled-bg: var(--bs-body-bg);
+  --bs-list-group-active-color: #fff;
+  --bs-list-group-active-bg: #0d6efd;
+  --bs-list-group-active-border-color: #0d6efd;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-radius: var(--bs-list-group-border-radius);
+}
+
+.list-group-numbered {
+  list-style-type: none;
+  counter-reset: section;
+}
+.list-group-numbered > .list-group-item::before {
+  content: counters(section, ".") ". ";
+  counter-increment: section;
+}
+
+.list-group-item-action {
+  width: 100%;
+  color: var(--bs-list-group-action-color);
+  text-align: inherit;
+}
+.list-group-item-action:hover, .list-group-item-action:focus {
+  z-index: 1;
+  color: var(--bs-list-group-action-hover-color);
+  text-decoration: none;
+  background-color: var(--bs-list-group-action-hover-bg);
+}
+.list-group-item-action:active {
+  color: var(--bs-list-group-action-active-color);
+  background-color: var(--bs-list-group-action-active-bg);
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
+  color: var(--bs-list-group-color);
+  text-decoration: none;
+  background-color: var(--bs-list-group-bg);
+  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
+}
+.list-group-item:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+.list-group-item:last-child {
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.list-group-item.disabled, .list-group-item:disabled {
+  color: var(--bs-list-group-disabled-color);
+  pointer-events: none;
+  background-color: var(--bs-list-group-disabled-bg);
+}
+.list-group-item.active {
+  z-index: 2;
+  color: var(--bs-list-group-active-color);
+  background-color: var(--bs-list-group-active-bg);
+  border-color: var(--bs-list-group-active-border-color);
+}
+.list-group-item + .list-group-item {
+  border-top-width: 0;
+}
+.list-group-item + .list-group-item.active {
+  margin-top: calc(-1 * var(--bs-list-group-border-width));
+  border-top-width: var(--bs-list-group-border-width);
+}
+
+.list-group-horizontal {
+  flex-direction: row;
+}
+.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
+  border-bottom-left-radius: var(--bs-list-group-border-radius);
+  border-top-right-radius: 0;
+}
+.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
+  border-top-right-radius: var(--bs-list-group-border-radius);
+  border-bottom-left-radius: 0;
+}
+.list-group-horizontal > .list-group-item.active {
+  margin-top: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item {
+  border-top-width: var(--bs-list-group-border-width);
+  border-left-width: 0;
+}
+.list-group-horizontal > .list-group-item + .list-group-item.active {
+  margin-left: calc(-1 * var(--bs-list-group-border-width));
+  border-left-width: var(--bs-list-group-border-width);
+}
+
+@media (min-width: 576px) {
+  .list-group-horizontal-sm {
+    flex-direction: row;
+  }
+  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 768px) {
+  .list-group-horizontal-md {
+    flex-direction: row;
+  }
+  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 992px) {
+  .list-group-horizontal-lg {
+    flex-direction: row;
+  }
+  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 1200px) {
+  .list-group-horizontal-xl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+@media (min-width: 1400px) {
+  .list-group-horizontal-xxl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
+    border-bottom-left-radius: var(--bs-list-group-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
+    border-top-right-radius: var(--bs-list-group-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
+    border-top-width: var(--bs-list-group-border-width);
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
+    margin-left: calc(-1 * var(--bs-list-group-border-width));
+    border-left-width: var(--bs-list-group-border-width);
+  }
+}
+.list-group-flush {
+  border-radius: 0;
+}
+.list-group-flush > .list-group-item {
+  border-width: 0 0 var(--bs-list-group-border-width);
+}
+.list-group-flush > .list-group-item:last-child {
+  border-bottom-width: 0;
+}
+
+.list-group-item-primary {
+  --bs-list-group-color: var(--bs-primary-text-emphasis);
+  --bs-list-group-bg: var(--bs-primary-bg-subtle);
+  --bs-list-group-border-color: var(--bs-primary-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
+  --bs-list-group-active-color: var(--bs-primary-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-primary-text-emphasis);
+}
+
+.list-group-item-secondary {
+  --bs-list-group-color: var(--bs-secondary-text-emphasis);
+  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
+  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
+  --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis);
+}
+
+.list-group-item-success {
+  --bs-list-group-color: var(--bs-success-text-emphasis);
+  --bs-list-group-bg: var(--bs-success-bg-subtle);
+  --bs-list-group-border-color: var(--bs-success-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
+  --bs-list-group-active-color: var(--bs-success-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-success-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-success-text-emphasis);
+}
+
+.list-group-item-info {
+  --bs-list-group-color: var(--bs-info-text-emphasis);
+  --bs-list-group-bg: var(--bs-info-bg-subtle);
+  --bs-list-group-border-color: var(--bs-info-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
+  --bs-list-group-active-color: var(--bs-info-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-info-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-info-text-emphasis);
+}
+
+.list-group-item-warning {
+  --bs-list-group-color: var(--bs-warning-text-emphasis);
+  --bs-list-group-bg: var(--bs-warning-bg-subtle);
+  --bs-list-group-border-color: var(--bs-warning-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
+  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
+}
+
+.list-group-item-danger {
+  --bs-list-group-color: var(--bs-danger-text-emphasis);
+  --bs-list-group-bg: var(--bs-danger-bg-subtle);
+  --bs-list-group-border-color: var(--bs-danger-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
+  --bs-list-group-active-color: var(--bs-danger-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
+}
+
+.list-group-item-light {
+  --bs-list-group-color: var(--bs-light-text-emphasis);
+  --bs-list-group-bg: var(--bs-light-bg-subtle);
+  --bs-list-group-border-color: var(--bs-light-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
+  --bs-list-group-active-color: var(--bs-light-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-light-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
+}
+
+.list-group-item-dark {
+  --bs-list-group-color: var(--bs-dark-text-emphasis);
+  --bs-list-group-bg: var(--bs-dark-bg-subtle);
+  --bs-list-group-border-color: var(--bs-dark-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
+  --bs-list-group-active-color: var(--bs-dark-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-dark-text-emphasis);
+}
+
 :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;
@@ -2518,6 +2861,10 @@ justifi-payment-method-form {
   margin-right: calc(var(--jfi-layout-padding) * -1);
 }
 
+.jfi-checkout-core {
+  color: var(--jfi-body-color);
+}
+
 *::part(label) {
   color: var(--jfi-form-label-color);
   font-family: var(--jfi-form-label-font-family);
@@ -2560,6 +2907,18 @@ justifi-payment-method-form {
   box-shadow: var(--jfi-form-control-box-shadow-error-focus);
 }
 
+*::part(invalid-feedback) {
+  color: var(--jfi-error-message-color);
+  font-size: var(--jfi-error-message-font-size);
+  margin: var(--jfi-error-message-margin);
+  line-height: normal;
+}
+
+.jfi-header {
+  color: var(--jfi-header-color);
+  border-bottom: var(--jfi-header-border);
+}
+
 .jfi-submit-button {
   font-family: var(--jfi-layout-font-family);
   color: var(--jfi-submit-button-color);
@@ -2570,6 +2929,8 @@ justifi-payment-method-form {
   border-radius: var(--jfi-submit-button-border-radius);
   width: var(--jfi-submit-button-width);
   box-shadow: var(--jfi-submit-button-box-shadow);
+  line-height: var(--jfi-submit-button-line-height);
+  text-transform: var(--jfi-submit-button-text-transform);
 }
 
 .jfi-submit-button:hover {

package/dist/collection/components/checkout/checkout-core.js

@@ -1,13 +1,18 @@
 import { h, Host } from "@stencil/core";
 import { extractComputedFontsToLoad, formatCurrency } from "../../utils/utils";
 import { config } from "../../../config";
+import { Checkout } from "../../api/Checkout";
 export class CheckoutCore {
     constructor() {
+        this.onSubmitted = (data) => {
+            this.submitted.emit(data);
+            this.isLoading = false;
+        };
         this.loadingSpinner = (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
         this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
         this.getCheckout = undefined;
-        this.pay = undefined;
+        this.complete = undefined;
         this.checkoutId = undefined;
         this.hasLoadedFonts = false;
         this.isLoading = false;
@@ -32,7 +37,7 @@ export class CheckoutCore {
         this.isLoading = true;
         this.getCheckout({
             onSuccess: ({ checkout }) => {
-                this.checkout = checkout;
+                this.checkout = new Checkout(checkout);
                 this.isLoading = false;
             },
             onError: (errorMessage) => {
@@ -55,31 +60,31 @@ export class CheckoutCore {
         parent.append(fonts);
     }
     async submit(event) {
+        var _a;
         event.preventDefault();
         this.isLoading = true;
-        const token = await this.paymentMethodOptionsRef.getPaymentMethodToken();
-        if (!token) {
+        const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod();
+        if (payload.token) {
+            this.complete({
+                payment: { payment_mode: 'ecom', payment_token: payload.token },
+                onSuccess: this.onSubmitted,
+                onError: this.onSubmitted,
+            });
+        }
+        else if (((_a = payload.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+            this.complete({
+                payment: { payment_mode: 'bnpl' },
+                onSuccess: this.onSubmitted,
+                onError: this.onSubmitted,
+            });
+        }
+        else {
             this.isLoading = false;
-            return;
         }
-        ;
-        this.pay({
-            paymentMethodToken: token,
-            onSuccess: ({ checkout }) => {
-                if (!checkout)
-                    return;
-                this.checkout = checkout;
-                this.isLoading = false;
-            },
-            onError: (errorMessage) => {
-                this.errorMessage = errorMessage;
-                this.isLoading = false;
-            },
-        });
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (h(Host, null, h("div", { class: "row gy-3" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold" }, "Summary"), this.checkout && (h("div", null, h("div", null, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, "Total ", formatCurrency(+this.checkout.payment_amount))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold border-bottom pb-3" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": ((_c = (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.payment_settings) === null || _c === void 0 ? void 0 : _c.credit_card_payments) || true, "show-ach": ((_e = (_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_settings) === null || _e === void 0 ? void 0 : _e.ach_payments) || true, "client-id": (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.payment_client_id, "account-id": (_g = this.checkout) === null || _g === void 0 ? void 0 : _g.account_id, savedPaymentMethods: (_h = this.checkout) === null || _h === void 0 ? void 0 : _h.payment_methods }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return (h(Host, null, h("div", { class: "row gy-3 jfi-checkout-core" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Summary"), this.checkout && (h("div", null, h("div", { class: "jfi-payment-description" }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", { class: "jfi-payment-total" }, h("span", { class: "jfi-payment-total-label" }, "Total"), "\u00A0", h("span", { class: "jfi-payment-total-amount" }, formatCurrency(+this.checkout.payment_amount)))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold pb-3 jfi-header" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": ((_c = (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.payment_settings) === null || _c === void 0 ? void 0 : _c.credit_card_payments) || true, "show-ach": ((_e = (_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_settings) === null || _e === void 0 ? void 0 : _e.ach_payments) || true, bnpl: (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.bnpl, "client-id": (_g = this.checkout) === null || _g === void 0 ? void 0 : _g.payment_client_id, "account-id": (_h = this.checkout) === null || _h === void 0 ? void 0 : _h.account_id, savedPaymentMethods: ((_j = this.checkout) === null || _j === void 0 ? void 0 : _j.payment_methods) || [], paymentAmount: (_k = this.checkout) === null || _k === void 0 ? void 0 : _k.payment_amount }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, part: "pay-button", class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }
@@ -150,7 +155,7 @@ export class CheckoutCore {
                     "text": ""
                 }
             },
-            "pay": {
+            "complete": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -212,13 +217,13 @@ export class CheckoutCore {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "CreatePaymentMethodResponse",
-                    "resolved": "BankAccountCreateResponse | CardCreateResponse",
+                    "original": "ICheckoutCompleteResponse",
+                    "resolved": "IApiResponse<{ payment_mode: \"ecom\" | \"bnpl\"; payment_token: null; payment_status: string; payment_response: null; checkout_id: string; additional_transactions: any[]; checkout: ICheckout; }>",
                     "references": {
-                        "CreatePaymentMethodResponse": {
+                        "ICheckoutCompleteResponse": {
                             "location": "import",
-                            "path": "../payment-method-form/payment-method-responses",
-                            "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+                            "path": "../../api/Checkout",
+                            "id": "src/api/Checkout.ts::ICheckoutCompleteResponse"
                         }
                     }
                 }

package/dist/collection/components/checkout/checkout.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { makeGetCheckout, makePay } from "./checkout-actions";
+import { makeGetCheckout, makeCheckoutComplete } from "./checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
 export class Checkout {
     constructor() {
@@ -7,7 +7,7 @@ export class Checkout {
         this.authToken = undefined;
         this.checkoutId = undefined;
         this.getCheckout = undefined;
-        this.pay = undefined;
+        this.complete = undefined;
         this.errorMessage = '';
     }
     componentWillLoad() {
@@ -20,7 +20,7 @@ export class Checkout {
                 checkoutId: this.checkoutId,
                 service: new CheckoutService()
             });
-            this.pay = makePay({
+            this.complete = makeCheckoutComplete({
                 authToken: this.authToken,
                 checkoutId: this.checkoutId,
                 service: new CheckoutService()
@@ -34,7 +34,7 @@ export class Checkout {
         this.initializeGetCheckout();
     }
     render() {
-        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, pay: this.pay }));
+        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete }));
     }
     static get is() { return "justifi-checkout"; }
     static get encapsulation() { return "shadow"; }
@@ -96,7 +96,7 @@ export class Checkout {
     static get states() {
         return {
             "getCheckout": {},
-            "pay": {},
+            "complete": {},
             "errorMessage": {}
         };
     }

package/dist/collection/components/checkout/new-payment-method.js

@@ -15,14 +15,15 @@ export class NewPaymentMethod {
         this.paymentMethodOption = undefined;
         this.isSelected = undefined;
     }
-    async getPaymentMethodToken() {
+    async resolvePaymentMethod() {
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
         const billingFormValidation = await this.billingFormRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
         if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
             return;
-        return await this.tokenize();
+        const token = await this.tokenize();
+        return { token: token };
     }
     async tokenize() {
         try {
@@ -49,7 +50,7 @@ export class NewPaymentMethod {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { class: "payment-method" }, h("div", { class: `payment-method-header p-3 border-bottom`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h("div", { class: "payment-method" }, h("div", { class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {
@@ -166,17 +167,22 @@ export class NewPaymentMethod {
     }
     static get methods() {
         return {
-            "getPaymentMethodToken": {
+            "resolvePaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<string>",
+                    "signature": "() => Promise<PaymentMethodPayload>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "./payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
                         }
                     },
-                    "return": "Promise<string>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",