@justifi/webcomponents 4.8.3 → 4.9.0

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-03-12T20:24:00",
+  "timestamp": "2024-04-08T20:31:23",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.10.0",
@@ -70,12 +70,76 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "justifi-business-details"
+        "business-details-core"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "justifi-business-details": [
+        "business-details-core": [
+          "additional-questions-details"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/business-details/business-details-core.tsx",
+      "encapsulation": "none",
+      "tag": "business-details-core",
+      "readme": "# justifi-business-details\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "getBusiness",
+          "type": "Function",
+          "complexType": {
+            "original": "Function",
+            "resolved": "Function",
+            "references": {
+              "Function": {
+                "location": "global",
+                "id": "global::Function"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "Function"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "justifi-business-details"
+      ],
+      "dependencies": [
+        "generic-info-details",
+        "legal-address-details",
+        "representative-details",
+        "owner-details",
+        "additional-questions-details"
+      ],
+      "dependencyGraph": {
+        "business-details-core": [
+          "generic-info-details",
+          "legal-address-details",
+          "representative-details",
+          "owner-details",
           "additional-questions-details"
+        ],
+        "justifi-business-details": [
+          "business-details-core"
         ]
       }
     },
@@ -1342,15 +1406,66 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "justifi-business-details"
+        "business-details-core"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "justifi-business-details": [
+        "business-details-core": [
           "generic-info-details"
         ]
       }
     },
+    {
+      "filePath": "src/components/gross-payment-chart/gross-payment-chart-core.tsx",
+      "encapsulation": "none",
+      "tag": "gross-payment-chart-core",
+      "readme": "# justifi-gross-payment-chart\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "getGrossPayment",
+          "type": "Function",
+          "complexType": {
+            "original": "Function",
+            "resolved": "Function",
+            "references": {
+              "Function": {
+                "location": "global",
+                "id": "global::Function"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "Function"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "justifi-gross-payment-chart"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "justifi-gross-payment-chart": [
+          "gross-payment-chart-core"
+        ]
+      }
+    },
     {
       "filePath": "src/components/business-form/additional-questions/additional-questions.tsx",
       "encapsulation": "none",
@@ -1863,6 +1978,7 @@
       "slots": [],
       "parts": [],
       "dependents": [
+        "justifi-new-payment-method",
         "justifi-payment-form"
       ],
       "dependencies": [
@@ -1874,6 +1990,9 @@
           "text-input",
           "select-input"
         ],
+        "justifi-new-payment-method": [
+          "justifi-billing-form"
+        ],
         "justifi-payment-form": [
           "justifi-billing-form"
         ]
@@ -2057,14 +2176,13 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "generic-info-details",
-        "legal-address-details",
-        "representative-details",
-        "owner-details",
-        "additional-questions-details"
+        "business-details-core"
       ],
       "dependencyGraph": {
         "justifi-business-details": [
+          "business-details-core"
+        ],
+        "business-details-core": [
           "generic-info-details",
           "legal-address-details",
           "representative-details",
@@ -3105,16 +3223,16 @@
       }
     },
     {
-      "filePath": "src/components/details/details.tsx",
+      "filePath": "src/components/checkout/checkout.tsx",
       "encapsulation": "shadow",
-      "tag": "justifi-details",
-      "readme": "# justifi-details\n\n\n",
-      "docs": "",
+      "tag": "justifi-checkout",
+      "readme": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>\n\n## Examples\n\n```html\n<!DOCTYPE html>\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0\" />\n    <title>justifi-payment-form: Simple example</title>\n\n    <!--\n    If you are including the components via CDN the src should be the following:\n    https://cdn.jsdelivr.net/npm/@justifi/webcomponents@2.1.0/dist/webcomponents/webcomponents.esm.js\n  -->\n    <script type=\"module\" src=\"/build/webcomponents.esm.js\"></script>\n    <script nomodule src=\"/build/webcomponents.js\"></script>\n  </head>\n\n  <body>\n    <h1>PaymentForm</h1>\n    <hr />\n    <justifi-payment-form></justifi-payment-form>\n  </body>\n\n  <script>\n    (function () {})();\n  </script>\n</html>\n```\n",
+      "docs": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>",
       "docsTags": [],
       "usage": {},
       "props": [
         {
-          "name": "errorMessage",
+          "name": "authToken",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -3122,7 +3240,28 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "error-message",
+          "attr": "auth-token",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "checkoutId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "checkout-id",
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
@@ -3133,6 +3272,27 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "iframeOrigin",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "iframe-origin",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
         }
       ],
       "methods": [],
@@ -3141,35 +3301,42 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [
-        "justifi-subaccount-details",
-        "payment-details-core",
-        "payout-details-core"
+      "dependents": [],
+      "dependencies": [
+        "justifi-checkout-core"
       ],
-      "dependencies": [],
       "dependencyGraph": {
-        "justifi-subaccount-details": [
-          "justifi-details"
+        "justifi-checkout": [
+          "justifi-checkout-core"
         ],
-        "payment-details-core": [
-          "justifi-details"
+        "justifi-checkout-core": [
+          "justifi-payment-method-options"
         ],
-        "payout-details-core": [
-          "justifi-details"
+        "justifi-payment-method-options": [
+          "justifi-new-payment-method",
+          "justifi-saved-payment-method"
+        ],
+        "justifi-new-payment-method": [
+          "justifi-payment-method-form",
+          "justifi-billing-form"
+        ],
+        "justifi-billing-form": [
+          "text-input",
+          "select-input"
         ]
       }
     },
     {
-      "filePath": "src/components/gross-payment-chart/gross-payment-chart.tsx",
+      "filePath": "src/components/checkout/checkout-core.tsx",
       "encapsulation": "shadow",
-      "tag": "justifi-gross-payment-chart",
-      "readme": "# justifi-gross-payment-chart\n\n\n",
-      "docs": "",
+      "tag": "justifi-checkout-core",
+      "readme": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>\n\n## Examples\n\n```html\n<!DOCTYPE html>\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0\" />\n    <title>justifi-payment-form: Simple example</title>\n\n    <!--\n    If you are including the components via CDN the src should be the following:\n    https://cdn.jsdelivr.net/npm/@justifi/webcomponents@2.1.0/dist/webcomponents/webcomponents.esm.js\n  -->\n    <script type=\"module\" src=\"/build/webcomponents.esm.js\"></script>\n    <script nomodule src=\"/build/webcomponents.js\"></script>\n  </head>\n\n  <body>\n    <h1>PaymentForm</h1>\n    <hr />\n    <justifi-payment-form></justifi-payment-form>\n  </body>\n\n  <script>\n    (function () {})();\n  </script>\n</html>\n```\n",
+      "docs": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>",
       "docsTags": [],
       "usage": {},
       "props": [
         {
-          "name": "accountId",
+          "name": "authToken",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -3177,7 +3344,7 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "account-id",
+          "attr": "auth-token",
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
@@ -3190,7 +3357,7 @@
           "required": false
         },
         {
-          "name": "authToken",
+          "name": "checkoutId",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -3198,7 +3365,7 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "auth-token",
+          "attr": "checkout-id",
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
@@ -3209,51 +3376,17 @@
           ],
           "optional": false,
           "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
-    {
-      "filePath": "src/components/business-form/legal-address-form/legal-address-form.tsx",
-      "encapsulation": "none",
-      "tag": "justifi-legal-address-form",
-      "readme": "# legal-address-form\n\n\n",
-      "docs": "",
-      "docsTags": [
-        {
-          "name": "exportedPart",
-          "text": "label: Label for inputs"
-        },
-        {
-          "name": "exportedPart",
-          "text": "input: The input fields"
         },
         {
-          "name": "exportedPart",
-          "text": "input-invalid: Invalid state for inputfs"
-        }
-      ],
-      "usage": {},
-      "props": [
-        {
-          "name": "formController",
-          "type": "FormController",
+          "name": "getCheckout",
+          "type": "Function",
           "complexType": {
-            "original": "FormController",
-            "resolved": "FormController",
+            "original": "Function",
+            "resolved": "Function",
             "references": {
-              "FormController": {
-                "location": "import",
-                "path": "../../form/form",
-                "id": "src/components/form/form.ts::FormController"
+              "Function": {
+                "location": "global",
+                "id": "global::Function"
               }
             }
           },
@@ -3263,39 +3396,521 @@
           "docsTags": [],
           "values": [
             {
-              "type": "FormController"
+              "type": "Function"
             }
           ],
           "optional": false,
           "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "dependents": [
+        },
+        {
+          "name": "iframeOrigin",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "iframe-origin",
+          "reflectToAttr": false,
+          "docs": "URL for the rendered iFrame. End-users need not use this.",
+          "docsTags": [],
+          "default": "config.iframeOrigin",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "pay",
+          "type": "Function",
+          "complexType": {
+            "original": "Function",
+            "resolved": "Function",
+            "references": {
+              "Function": {
+                "location": "global",
+                "id": "global::Function"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "Function"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "loadFontsOnParent",
+          "returns": {
+            "type": "Promise<any>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<any>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<any>"
+          },
+          "signature": "loadFontsOnParent() => Promise<any>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "submitted",
+          "detail": "BankAccountCreateResponse | CardCreateResponse",
+          "bubbles": true,
+          "complexType": {
+            "original": "CreatePaymentMethodResponse",
+            "resolved": "BankAccountCreateResponse | CardCreateResponse",
+            "references": {
+              "CreatePaymentMethodResponse": {
+                "location": "import",
+                "path": "../payment-method-form/payment-method-responses",
+                "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "justifi-checkout"
+      ],
+      "dependencies": [
+        "justifi-payment-method-options"
+      ],
+      "dependencyGraph": {
+        "justifi-checkout-core": [
+          "justifi-payment-method-options"
+        ],
+        "justifi-payment-method-options": [
+          "justifi-new-payment-method",
+          "justifi-saved-payment-method"
+        ],
+        "justifi-new-payment-method": [
+          "justifi-payment-method-form",
+          "justifi-billing-form"
+        ],
+        "justifi-billing-form": [
+          "text-input",
+          "select-input"
+        ],
+        "justifi-checkout": [
+          "justifi-checkout-core"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/details/details.tsx",
+      "encapsulation": "shadow",
+      "tag": "justifi-details",
+      "readme": "# justifi-details\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "errorMessage",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "error-message",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "justifi-subaccount-details",
+        "payment-details-core",
+        "payout-details-core"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "justifi-subaccount-details": [
+          "justifi-details"
+        ],
+        "payment-details-core": [
+          "justifi-details"
+        ],
+        "payout-details-core": [
+          "justifi-details"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/gross-payment-chart/gross-payment-chart.tsx",
+      "encapsulation": "shadow",
+      "tag": "justifi-gross-payment-chart",
+      "readme": "# justifi-gross-payment-chart\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "accountId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "account-id",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "authToken",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "auth-token",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "gross-payment-chart-core"
+      ],
+      "dependencyGraph": {
+        "justifi-gross-payment-chart": [
+          "gross-payment-chart-core"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/business-form/legal-address-form/legal-address-form.tsx",
+      "encapsulation": "none",
+      "tag": "justifi-legal-address-form",
+      "readme": "# legal-address-form\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "exportedPart",
+          "text": "label: Label for inputs"
+        },
+        {
+          "name": "exportedPart",
+          "text": "input: The input fields"
+        },
+        {
+          "name": "exportedPart",
+          "text": "input-invalid: Invalid state for inputfs"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "formController",
+          "type": "FormController",
+          "complexType": {
+            "original": "FormController",
+            "resolved": "FormController",
+            "references": {
+              "FormController": {
+                "location": "import",
+                "path": "../../form/form",
+                "id": "src/components/form/form.ts::FormController"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "FormController"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
         "justifi-business-form",
         "justifi-business-form-stepped"
       ],
       "dependencies": [
-        "form-control-text",
-        "form-control-number",
-        "form-control-select"
+        "form-control-text",
+        "form-control-number",
+        "form-control-select"
+      ],
+      "dependencyGraph": {
+        "justifi-legal-address-form": [
+          "form-control-text",
+          "form-control-number",
+          "form-control-select"
+        ],
+        "justifi-business-form": [
+          "justifi-legal-address-form"
+        ],
+        "justifi-business-form-stepped": [
+          "justifi-legal-address-form"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/checkout/new-payment-method.tsx",
+      "encapsulation": "none",
+      "tag": "justifi-new-payment-method",
+      "readme": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>\n\n## Examples\n\n```html\n<!DOCTYPE html>\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0\" />\n    <title>justifi-payment-form: Simple example</title>\n\n    <!--\n    If you are including the components via CDN the src should be the following:\n    https://cdn.jsdelivr.net/npm/@justifi/webcomponents@2.1.0/dist/webcomponents/webcomponents.esm.js\n  -->\n    <script type=\"module\" src=\"/build/webcomponents.esm.js\"></script>\n    <script nomodule src=\"/build/webcomponents.js\"></script>\n  </head>\n\n  <body>\n    <h1>PaymentForm</h1>\n    <hr />\n    <justifi-payment-form></justifi-payment-form>\n  </body>\n\n  <script>\n    (function () {})();\n  </script>\n</html>\n```\n",
+      "docs": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "accountId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "account-id",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "clientId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "client-id",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "iframeOrigin",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "iframe-origin",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "config.iframeOrigin",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "is-selected",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "paymentMethodOption",
+          "type": "PaymentMethodOption",
+          "complexType": {
+            "original": "PaymentMethodOption",
+            "resolved": "PaymentMethodOption",
+            "references": {
+              "PaymentMethodOption": {
+                "location": "import",
+                "path": "./payment-method-option-utils",
+                "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "PaymentMethodOption"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "getPaymentMethodToken",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string>"
+          },
+          "signature": "getPaymentMethodToken() => Promise<string>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "paymentMethodOptionSelected",
+          "detail": "any",
+          "bubbles": true,
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "justifi-payment-method-options"
+      ],
+      "dependencies": [
+        "justifi-payment-method-form",
+        "justifi-billing-form"
       ],
       "dependencyGraph": {
-        "justifi-legal-address-form": [
-          "form-control-text",
-          "form-control-number",
-          "form-control-select"
+        "justifi-new-payment-method": [
+          "justifi-payment-method-form",
+          "justifi-billing-form"
         ],
-        "justifi-business-form": [
-          "justifi-legal-address-form"
+        "justifi-billing-form": [
+          "text-input",
+          "select-input"
         ],
-        "justifi-business-form-stepped": [
-          "justifi-legal-address-form"
+        "justifi-payment-method-options": [
+          "justifi-new-payment-method"
         ]
       }
     },
@@ -3454,10 +4069,6 @@
           "name": "exportedPart",
           "text": "detail-method-data"
         },
-        {
-          "name": "exportedPart",
-          "text": "detail-section"
-        },
         {
           "name": "exportedPart",
           "text": "detail-section-title"
@@ -3754,11 +4365,11 @@
       "events": [
         {
           "event": "submitted",
-          "detail": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
+          "detail": "BankAccountCreateResponse | CardCreateResponse",
           "bubbles": true,
           "complexType": {
             "original": "CreatePaymentMethodResponse",
-            "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
+            "resolved": "BankAccountCreateResponse | CardCreateResponse",
             "references": {
               "CreatePaymentMethodResponse": {
                 "location": "import",
@@ -3989,22 +4600,280 @@
               "docs": ""
             },
             {
-              "name": "account",
-              "type": "string",
-              "docs": ""
+              "name": "account",
+              "type": "string",
+              "docs": ""
+            }
+          ],
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "name": "validate",
+          "returns": {
+            "type": "Promise<any>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<any>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<any>"
+          },
+          "signature": "validate() => Promise<any>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "paymentMethodFormReady",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "event": "paymentMethodFormTokenized",
+          "detail": "BankAccountCreateResponse | CardCreateResponse",
+          "bubbles": true,
+          "complexType": {
+            "original": "CreatePaymentMethodResponse",
+            "resolved": "BankAccountCreateResponse | CardCreateResponse",
+            "references": {
+              "CreatePaymentMethodResponse": {
+                "location": "import",
+                "path": "./payment-method-responses",
+                "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
+        {
+          "event": "paymentMethodFormValidated",
+          "detail": "any",
+          "bubbles": true,
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "justifi-bank-account-form",
+        "justifi-card-form",
+        "justifi-new-payment-method",
+        "justifi-payment-form"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "justifi-bank-account-form": [
+          "justifi-payment-method-form"
+        ],
+        "justifi-card-form": [
+          "justifi-payment-method-form"
+        ],
+        "justifi-new-payment-method": [
+          "justifi-payment-method-form"
+        ],
+        "justifi-payment-form": [
+          "justifi-payment-method-form"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/checkout/payment-method-options.tsx",
+      "encapsulation": "none",
+      "tag": "justifi-payment-method-options",
+      "readme": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>\n\n## Examples\n\n```html\n<!DOCTYPE html>\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0\" />\n    <title>justifi-payment-form: Simple example</title>\n\n    <!--\n    If you are including the components via CDN the src should be the following:\n    https://cdn.jsdelivr.net/npm/@justifi/webcomponents@2.1.0/dist/webcomponents/webcomponents.esm.js\n  -->\n    <script type=\"module\" src=\"/build/webcomponents.esm.js\"></script>\n    <script nomodule src=\"/build/webcomponents.js\"></script>\n  </head>\n\n  <body>\n    <h1>PaymentForm</h1>\n    <hr />\n    <justifi-payment-form></justifi-payment-form>\n  </body>\n\n  <script>\n    (function () {})();\n  </script>\n</html>\n```\n",
+      "docs": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "accountId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "account-id",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "clientId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "client-id",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "iframeOrigin",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "iframe-origin",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "config.iframeOrigin",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "savedPaymentMethods",
+          "type": "any[]",
+          "complexType": {
+            "original": "any[]",
+            "resolved": "any[]",
+            "references": {}
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "[]",
+          "values": [
+            {
+              "type": "any[]"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "selectedPaymentMethodId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selected-payment-method-id",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
             }
           ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "showAch",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-ach",
+          "reflectToAttr": false,
           "docs": "",
-          "docsTags": []
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
         },
         {
-          "name": "validate",
+          "name": "showCard",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "show-card",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "getPaymentMethodToken",
           "returns": {
-            "type": "Promise<any>",
+            "type": "Promise<string>",
             "docs": ""
           },
           "complexType": {
-            "signature": "() => Promise<any>",
+            "signature": "() => Promise<string>",
             "parameters": [],
             "references": {
               "Promise": {
@@ -4012,9 +4881,9 @@
                 "id": "global::Promise"
               }
             },
-            "return": "Promise<any>"
+            "return": "Promise<string>"
           },
-          "signature": "validate() => Promise<any>",
+          "signature": "getPaymentMethodToken() => Promise<string>",
           "parameters": [],
           "docs": "",
           "docsTags": []
@@ -4022,41 +4891,7 @@
       ],
       "events": [
         {
-          "event": "paymentMethodFormReady",
-          "detail": "void",
-          "bubbles": true,
-          "complexType": {
-            "original": "void",
-            "resolved": "void",
-            "references": {}
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "",
-          "docsTags": []
-        },
-        {
-          "event": "paymentMethodFormTokenized",
-          "detail": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
-          "bubbles": true,
-          "complexType": {
-            "original": "CreatePaymentMethodResponse",
-            "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
-            "references": {
-              "CreatePaymentMethodResponse": {
-                "location": "import",
-                "path": "./payment-method-responses",
-                "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
-              }
-            }
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "",
-          "docsTags": []
-        },
-        {
-          "event": "paymentMethodFormValidated",
+          "event": "toggleCreatingNewPaymentMethod",
           "detail": "any",
           "bubbles": true,
           "complexType": {
@@ -4070,25 +4905,38 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "paymentMethodOptionSelected",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [],
       "slots": [],
       "parts": [],
       "dependents": [
-        "justifi-bank-account-form",
-        "justifi-card-form",
-        "justifi-payment-form"
+        "justifi-checkout-core"
+      ],
+      "dependencies": [
+        "justifi-new-payment-method",
+        "justifi-saved-payment-method"
       ],
-      "dependencies": [],
       "dependencyGraph": {
-        "justifi-bank-account-form": [
-          "justifi-payment-method-form"
+        "justifi-payment-method-options": [
+          "justifi-new-payment-method",
+          "justifi-saved-payment-method"
         ],
-        "justifi-card-form": [
-          "justifi-payment-method-form"
+        "justifi-new-payment-method": [
+          "justifi-payment-method-form",
+          "justifi-billing-form"
         ],
-        "justifi-payment-form": [
-          "justifi-payment-method-form"
+        "justifi-billing-form": [
+          "text-input",
+          "select-input"
+        ],
+        "justifi-checkout-core": [
+          "justifi-payment-method-options"
         ]
       }
     },
@@ -4858,6 +5706,139 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/checkout/saved-payment-method.tsx",
+      "encapsulation": "none",
+      "tag": "justifi-saved-payment-method",
+      "readme": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>\n\n## Examples\n\n```html\n<!DOCTYPE html>\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0\" />\n    <title>justifi-payment-form: Simple example</title>\n\n    <!--\n    If you are including the components via CDN the src should be the following:\n    https://cdn.jsdelivr.net/npm/@justifi/webcomponents@2.1.0/dist/webcomponents/webcomponents.esm.js\n  -->\n    <script type=\"module\" src=\"/build/webcomponents.esm.js\"></script>\n    <script nomodule src=\"/build/webcomponents.js\"></script>\n  </head>\n\n  <body>\n    <h1>PaymentForm</h1>\n    <hr />\n    <justifi-payment-form></justifi-payment-form>\n  </body>\n\n  <script>\n    (function () {})();\n  </script>\n</html>\n```\n",
+      "docs": "<h1>\n  <code><justifi-payment-form /></code>\n</h1>",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "iframeOrigin",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "iframe-origin",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "config.iframeOrigin",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "is-selected",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "paymentMethodOption",
+          "type": "PaymentMethodOption",
+          "complexType": {
+            "original": "PaymentMethodOption",
+            "resolved": "PaymentMethodOption",
+            "references": {
+              "PaymentMethodOption": {
+                "location": "import",
+                "path": "./payment-method-option-utils",
+                "id": "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "PaymentMethodOption"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "getPaymentMethodToken",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string>"
+          },
+          "signature": "getPaymentMethodToken() => Promise<string>",
+          "parameters": [],
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "paymentMethodOptionSelected",
+          "detail": "any",
+          "bubbles": true,
+          "complexType": {
+            "original": "any",
+            "resolved": "any",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "justifi-payment-method-options"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "justifi-payment-method-options": [
+          "justifi-saved-payment-method"
+        ]
+      }
+    },
     {
       "filePath": "src/components/subaccount-details/subaccount-details.tsx",
       "encapsulation": "shadow",
@@ -5373,11 +6354,11 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "justifi-business-details"
+        "business-details-core"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "justifi-business-details": [
+        "business-details-core": [
           "legal-address-details"
         ]
       }
@@ -5388,28 +6369,7 @@
       "tag": "owner-details",
       "readme": "# owner-details\n\n\n",
       "docs": "",
-      "docsTags": [
-        {
-          "name": "exportedPart",
-          "text": "detail-section"
-        },
-        {
-          "name": "exportedPart",
-          "text": "detail-section-title"
-        },
-        {
-          "name": "exportedPart",
-          "text": "detail-section-item-title"
-        },
-        {
-          "name": "exportedPart",
-          "text": "detail-section-item-data"
-        },
-        {
-          "name": "exportedPart",
-          "text": "detail-empty-state"
-        }
-      ],
+      "docsTags": [],
       "usage": {},
       "props": [
         {
@@ -5446,11 +6406,11 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "justifi-business-details"
+        "business-details-core"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "justifi-business-details": [
+        "business-details-core": [
           "owner-details"
         ]
       }
@@ -5880,11 +6840,11 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "justifi-business-details"
+        "business-details-core"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "justifi-business-details": [
+        "business-details-core": [
           "representative-details"
         ]
       }
@@ -6509,7 +7469,7 @@
       "path": "src/components/pagination-menu/pagination-menu.tsx"
     },
     "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse": {
-      "declaration": "export type CreatePaymentMethodResponse =\n  | CardCreateResponse\n  | BankAccountCreateResponse\n  | PaymentMethodErrorResponse;",
+      "declaration": "export type CreatePaymentMethodResponse =\n  | CardCreateResponse\n  | BankAccountCreateResponse;",
       "docstring": "",
       "path": "src/components/payment-method-form/payment-method-responses.ts"
     },
@@ -6553,6 +7513,11 @@
       "docstring": "",
       "path": "src/components/form/form.ts"
     },
+    "src/components/checkout/payment-method-option-utils.tsx::PaymentMethodOption": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/components/checkout/payment-method-option-utils.tsx"
+    },
     "src/api/index.ts::Payment": {
       "declaration": "any",
       "docstring": "",