@clickaroo/checkout-ui 0.1.4-beta → 0.1.6-beta

package/dist/storybook/storybook-static/assets/Guide.en-C21zCMX7.js

@@ -1,107 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as r}from"./index-ChEI-nsM.js";import{M as c,C as t,a as d}from"./index-Cx4362C8.js";import{Default as s}from"./PaymentMethods.stories-oiT2EQiz.js";import{D as a}from"./CustomCheckout.stories-OyfGgjnr.js";import"./index-DRjF_FHU.js";import"./iframe-BZKEX9PA.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-B1IKDQ7d.js";import"./useCheckoutContext-w0N5TNgR.js";/* empty css              */import"./CheckoutPage-C21Znq4d.js";import"./CustomerInfo-CYLNdAoo.js";import"./ValidateInput-C71ymd_w.js";import"./DeliveryAddress-BBT_-q56.js";function i(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"Documentation/Guide"}),`
-`,e.jsx(n.h1,{id:"getting-started-guide",children:"Getting Started Guide"}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"@clickaroo/checkout-ui"})," is a comprehensive checkout page component library designed for React applications, providing a complete checkout flow solution. The library includes core features such as customer information collection, delivery address management, payment method selection, and integrates seamlessly with payment systems."]}),`
-`,e.jsx(n.p,{children:"This guide will walk you through different ways to integrate the checkout components into your React application, from the simplest all-in-one solution to fully customized implementations."}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you're new to this library, we recommend starting with the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs",children:"Quick Start Guide"})," which covers installation, basic usage with ",e.jsx(n.code,{children:"CheckoutPage"}),", and event callbacks."]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"quick-integration-with-checkoutpage",children:"Quick Integration with CheckoutPage"}),`
-`,e.jsxs(n.p,{children:["The simplest way to integrate is using the ",e.jsx(n.code,{children:"CheckoutPage"})," component, which includes the complete checkout flow. With this single component, you can quickly integrate a full-featured checkout experience."]}),`
-`,e.jsxs(n.p,{children:["👉 See the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs#use-checkout-all-in-one",children:"Use Checkout All in One"})," section in the Quick Start Guide for detailed instructions and examples."]}),`
-`,e.jsx(n.h3,{id:"payment-only-integration",children:"Payment-Only Integration"}),`
-`,e.jsxs(n.p,{children:["If you only need payment functionality and have already collected customer and address information elsewhere in your application, you can use the ",e.jsx(n.code,{children:"PaymentMethods"})," component independently."]}),`
-`,e.jsx(t,{of:s}),`
-`,e.jsx(n.h4,{id:"props",children:"Props"}),`
-`,e.jsx(d,{of:s}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutProvider, PaymentMethods } from '@clickaroo/checkout-ui';
-
-function PaymentOnly() {
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return (
-    <CheckoutProvider cart={cart}>
-      <PaymentMethods />
-    </CheckoutProvider>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),`
-The `,e.jsx(n.code,{children:"PaymentMethods"})," component must be wrapped in a ",e.jsx(n.code,{children:"CheckoutProvider"}),". See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsx(n.p,{children:"To complete the full payment flow (including order submission), you'll need to use the APIs and hooks provided by the library:"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:["Update customer and address information using ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"})," from ",e.jsx(n.code,{children:"useCheckoutContext"})," hook"]}),`
-`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook to handle order submission"]}),`
-`,e.jsxs(n.li,{children:["Create a custom submit button that calls ",e.jsx(n.code,{children:"submitOrder()"})," from the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook when clicked"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"})," section on ",e.jsx(n.code,{children:"useOrderSubmission"}),"."]}),`
-`,e.jsx(n.h3,{id:"custom-checkout",children:"Custom Checkout"}),`
-`,e.jsx(n.p,{children:"You can build a custom checkout page by mixing and matching the library's built-in components with your own custom components. This gives you full control over the layout, styling, and user experience while leveraging the library's functionality."}),`
-`,e.jsx(t,{of:a}),`
-`,e.jsxs(n.p,{children:["You can replace some built-in components with your own custom implementations, but ",e.jsxs(n.strong,{children:[e.jsx(n.code,{children:"PaymentMethods"})," must always be used from the library"]})," as it contains critical payment logic that cannot be customized."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { 
-  CheckoutProvider, 
-  PaymentMethods,
-  useCheckoutContext,
-  useOrderSubmission
-} from '@clickaroo/checkout-ui';
-
-function CustomCheckout() {
-  const cart = [{ sku: "TEST001", offerPricePoint: "OPP-TEST001" }];
-
-  return (
-    // All components must be wrapped in CheckoutProvider
-    <CheckoutProvider cart={cart}>
-      <MyCustomCustomerInfo />
-      <MyCustomDeliveryAddress />
-      <PaymentMethods /> {/* Required - cannot be customized */}
-      <MyCustomSubmitButton />
-    </CheckoutProvider>
-  );
-}
-
-// Use hooks to build custom components
-function MyCustomCustomerInfo() {
-  const { customerInfo, updateCustomerInfo } = useCheckoutContext();
-  // use hook to update form data
-  updateCustomerInfo({ firstName: 'xxx', lastName: 'xxx', ...})
-}
-
-function MyCustomDeliveryAddress() {
-  const { deliveryAddress, updateDeliveryAddress } = useCheckoutContext();
-  // Your custom form implementation
-}
-
-function MyCustomSubmitButton() {
-  const { isFormValid } = useCheckoutContext();
-  // use hook to handle order submission
-  const { isSubmitting, submitOrder } = useOrderSubmission();
-  // Your custom button implementation
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),"  All components must be wrapped in CheckoutProvider. See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english",children:"CustomCheckout documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"apis-and-hooks",children:"APIs and Hooks"}),`
-`,e.jsx(n.p,{children:"As mentioned above, the component library provides HTTP APIs and React Hooks for more granular control and advanced use cases."}),`
-`,e.jsx(n.h4,{id:"http-apis",children:"HTTP APIs"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getPricePointInfo"})})," - Get price point information (supports single or multiple price points)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"createOrder"})})," - Create an order with the provided order data"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getOrderDetail"})})," - Get detailed information about an order by order code"]}),`
-`]}),`
-`,e.jsx(n.h4,{id:"react-hooks",children:"React Hooks"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useCheckoutContext"})})," - Access checkout state and update functions (customer info, delivery address, form validation)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderSubmission"})})," - Handle order submission with loading states and error handling"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderDetail"})})," - Fetch order details"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"usePricePointInfo"})})," - Get price point information"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For detailed API documentation and hook usage examples, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs Documentation"}),"."]})]})}function I(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{I as default};

package/dist/storybook/storybook-static/assets/Guide.en-CNP2Y7P4.js

@@ -1,107 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as r}from"./index-ChEI-nsM.js";import{M as c,C as t,a as d}from"./index-j2F2pkp4.js";import{Default as s}from"./PaymentMethods.stories-BSqcqZV0.js";import{D as a}from"./CustomCheckout.stories-BdACubjk.js";import"./index-DRjF_FHU.js";import"./iframe-CEK4S1D5.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-ro6Dfmcf.js";import"./useCheckoutContext-w0N5TNgR.js";/* empty css              */import"./CheckoutPage-Dbzt3i55.js";import"./CustomerInfo-CYLNdAoo.js";import"./ValidateInput-C71ymd_w.js";import"./DeliveryAddress-BBT_-q56.js";function i(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"Documentation/Guide"}),`
-`,e.jsx(n.h1,{id:"getting-started-guide",children:"Getting Started Guide"}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"@clickaroo/checkout-ui"})," is a comprehensive checkout page component library designed for React applications, providing a complete checkout flow solution. The library includes core features such as customer information collection, delivery address management, payment method selection, and integrates seamlessly with payment systems."]}),`
-`,e.jsx(n.p,{children:"This guide will walk you through different ways to integrate the checkout components into your React application, from the simplest all-in-one solution to fully customized implementations."}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you're new to this library, we recommend starting with the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs",children:"Quick Start Guide"})," which covers installation, basic usage with ",e.jsx(n.code,{children:"CheckoutPage"}),", and event callbacks."]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"quick-integration-with-checkoutpage",children:"Quick Integration with CheckoutPage"}),`
-`,e.jsxs(n.p,{children:["The simplest way to integrate is using the ",e.jsx(n.code,{children:"CheckoutPage"})," component, which includes the complete checkout flow. With this single component, you can quickly integrate a full-featured checkout experience."]}),`
-`,e.jsxs(n.p,{children:["👉 See the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs#use-checkout-all-in-one",children:"Use Checkout All in One"})," section in the Quick Start Guide for detailed instructions and examples."]}),`
-`,e.jsx(n.h3,{id:"payment-only-integration",children:"Payment-Only Integration"}),`
-`,e.jsxs(n.p,{children:["If you only need payment functionality and have already collected customer and address information elsewhere in your application, you can use the ",e.jsx(n.code,{children:"PaymentMethods"})," component independently."]}),`
-`,e.jsx(t,{of:s}),`
-`,e.jsx(n.h4,{id:"props",children:"Props"}),`
-`,e.jsx(d,{of:s}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutProvider, PaymentMethods } from '@clickaroo/checkout-ui';
-
-function PaymentOnly() {
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return (
-    <CheckoutProvider cart={cart}>
-      <PaymentMethods />
-    </CheckoutProvider>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),`
-The `,e.jsx(n.code,{children:"PaymentMethods"})," component must be wrapped in a ",e.jsx(n.code,{children:"CheckoutProvider"}),". See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsx(n.p,{children:"To complete the full payment flow (including order submission), you'll need to use the APIs and hooks provided by the library:"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:["Update customer and address information using ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"})," from ",e.jsx(n.code,{children:"useCheckoutContext"})," hook"]}),`
-`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook to handle order submission"]}),`
-`,e.jsxs(n.li,{children:["Create a custom submit button that calls ",e.jsx(n.code,{children:"submitOrder()"})," from the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook when clicked"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"})," section on ",e.jsx(n.code,{children:"useOrderSubmission"}),"."]}),`
-`,e.jsx(n.h3,{id:"custom-checkout",children:"Custom Checkout"}),`
-`,e.jsx(n.p,{children:"You can build a custom checkout page by mixing and matching the library's built-in components with your own custom components. This gives you full control over the layout, styling, and user experience while leveraging the library's functionality."}),`
-`,e.jsx(t,{of:a}),`
-`,e.jsxs(n.p,{children:["You can replace some built-in components with your own custom implementations, but ",e.jsxs(n.strong,{children:[e.jsx(n.code,{children:"PaymentMethods"})," must always be used from the library"]})," as it contains critical payment logic that cannot be customized."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { 
-  CheckoutProvider, 
-  PaymentMethods,
-  useCheckoutContext,
-  useOrderSubmission
-} from '@clickaroo/checkout-ui';
-
-function CustomCheckout() {
-  const cart = [{ sku: "TEST001", offerPricePoint: "OPP-TEST001" }];
-
-  return (
-    // All components must be wrapped in CheckoutProvider
-    <CheckoutProvider cart={cart}>
-      <MyCustomCustomerInfo />
-      <MyCustomDeliveryAddress />
-      <PaymentMethods /> {/* Required - cannot be customized */}
-      <MyCustomSubmitButton />
-    </CheckoutProvider>
-  );
-}
-
-// Use hooks to build custom components
-function MyCustomCustomerInfo() {
-  const { customerInfo, updateCustomerInfo } = useCheckoutContext();
-  // use hook to update form data
-  updateCustomerInfo({ firstName: 'xxx', lastName: 'xxx', ...})
-}
-
-function MyCustomDeliveryAddress() {
-  const { deliveryAddress, updateDeliveryAddress } = useCheckoutContext();
-  // Your custom form implementation
-}
-
-function MyCustomSubmitButton() {
-  const { isFormValid } = useCheckoutContext();
-  // use hook to handle order submission
-  const { isSubmitting, submitOrder } = useOrderSubmission();
-  // Your custom button implementation
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),"  All components must be wrapped in CheckoutProvider. See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english",children:"CustomCheckout documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"apis-and-hooks",children:"APIs and Hooks"}),`
-`,e.jsx(n.p,{children:"As mentioned above, the component library provides HTTP APIs and React Hooks for more granular control and advanced use cases."}),`
-`,e.jsx(n.h4,{id:"http-apis",children:"HTTP APIs"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getPricePointInfo"})})," - Get price point information (supports single or multiple price points)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"createOrder"})})," - Create an order with the provided order data"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getOrderDetail"})})," - Get detailed information about an order by order code"]}),`
-`]}),`
-`,e.jsx(n.h4,{id:"react-hooks",children:"React Hooks"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useCheckoutContext"})})," - Access checkout state and update functions (customer info, delivery address, form validation)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderSubmission"})})," - Handle order submission with loading states and error handling"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderDetail"})})," - Fetch order details"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"usePricePointInfo"})})," - Get price point information"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For detailed API documentation and hook usage examples, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs Documentation"}),"."]})]})}function I(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{I as default};

package/dist/storybook/storybook-static/assets/Guide.en-CiR7CrYZ.js

@@ -1,107 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as r}from"./index-ChEI-nsM.js";import{M as c,C as t,a as d}from"./index-LRKEu_dQ.js";import{Default as s}from"./PaymentMethods.stories-pOuLDPwE.js";import{D as a}from"./CustomCheckout.stories-CKQKzMq0.js";import"./index-DRjF_FHU.js";import"./iframe-Ce3kgeV4.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-BNEEARzu.js";import"./useCheckoutContext-B8tsk5b5.js";/* empty css              */import"./CheckoutPage-BsnzMxJk.js";import"./CustomerInfo-CTx1dFS3.js";import"./ValidateInput-Cl2O4HCX.js";import"./DeliveryAddress-X81XGbKD.js";function i(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"Documentation/Guide"}),`
-`,e.jsx(n.h1,{id:"getting-started-guide",children:"Getting Started Guide"}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"@clickaroo/checkout-ui"})," is a comprehensive checkout page component library designed for React applications, providing a complete checkout flow solution. The library includes core features such as customer information collection, delivery address management, payment method selection, and integrates seamlessly with payment systems."]}),`
-`,e.jsx(n.p,{children:"This guide will walk you through different ways to integrate the checkout components into your React application, from the simplest all-in-one solution to fully customized implementations."}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you're new to this library, we recommend starting with the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs",children:"Quick Start Guide"})," which covers installation, basic usage with ",e.jsx(n.code,{children:"CheckoutPage"}),", and event callbacks."]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"quick-integration-with-checkoutpage",children:"Quick Integration with CheckoutPage"}),`
-`,e.jsxs(n.p,{children:["The simplest way to integrate is using the ",e.jsx(n.code,{children:"CheckoutPage"})," component, which includes the complete checkout flow. With this single component, you can quickly integrate a full-featured checkout experience."]}),`
-`,e.jsxs(n.p,{children:["👉 See the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs#use-checkout-all-in-one",children:"Use Checkout All in One"})," section in the Quick Start Guide for detailed instructions and examples."]}),`
-`,e.jsx(n.h3,{id:"payment-only-integration",children:"Payment-Only Integration"}),`
-`,e.jsxs(n.p,{children:["If you only need payment functionality and have already collected customer and address information elsewhere in your application, you can use the ",e.jsx(n.code,{children:"PaymentMethods"})," component independently."]}),`
-`,e.jsx(t,{of:s}),`
-`,e.jsx(n.h4,{id:"props",children:"Props"}),`
-`,e.jsx(d,{of:s}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutProvider, PaymentMethods } from '@clickaroo/checkout-ui';
-
-function PaymentOnly() {
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return (
-    <CheckoutProvider cart={cart}>
-      <PaymentMethods />
-    </CheckoutProvider>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),`
-The `,e.jsx(n.code,{children:"PaymentMethods"})," component must be wrapped in a ",e.jsx(n.code,{children:"CheckoutProvider"}),". See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsx(n.p,{children:"To complete the full payment flow (including order submission), you'll need to use the APIs and hooks provided by the library:"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:["Update customer and address information using ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"})," from ",e.jsx(n.code,{children:"useCheckoutContext"})," hook"]}),`
-`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook to handle order submission"]}),`
-`,e.jsxs(n.li,{children:["Create a custom submit button that calls ",e.jsx(n.code,{children:"submitOrder()"})," from the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook when clicked"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"})," section on ",e.jsx(n.code,{children:"useOrderSubmission"}),"."]}),`
-`,e.jsx(n.h3,{id:"custom-checkout",children:"Custom Checkout"}),`
-`,e.jsx(n.p,{children:"You can build a custom checkout page by mixing and matching the library's built-in components with your own custom components. This gives you full control over the layout, styling, and user experience while leveraging the library's functionality."}),`
-`,e.jsx(t,{of:a}),`
-`,e.jsxs(n.p,{children:["You can replace some built-in components with your own custom implementations, but ",e.jsxs(n.strong,{children:[e.jsx(n.code,{children:"PaymentMethods"})," must always be used from the library"]})," as it contains critical payment logic that cannot be customized."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { 
-  CheckoutProvider, 
-  PaymentMethods,
-  useCheckoutContext,
-  useOrderSubmission
-} from '@clickaroo/checkout-ui';
-
-function CustomCheckout() {
-  const cart = [{ sku: "TEST001", offerPricePoint: "OPP-TEST001" }];
-
-  return (
-    // All components must be wrapped in CheckoutProvider
-    <CheckoutProvider cart={cart}>
-      <MyCustomCustomerInfo />
-      <MyCustomDeliveryAddress />
-      <PaymentMethods /> {/* Required - cannot be customized */}
-      <MyCustomSubmitButton />
-    </CheckoutProvider>
-  );
-}
-
-// Use hooks to build custom components
-function MyCustomCustomerInfo() {
-  const { customerInfo, updateCustomerInfo } = useCheckoutContext();
-  // use hook to update form data
-  updateCustomerInfo({ firstName: 'xxx', lastName: 'xxx', ...})
-}
-
-function MyCustomDeliveryAddress() {
-  const { deliveryAddress, updateDeliveryAddress } = useCheckoutContext();
-  // Your custom form implementation
-}
-
-function MyCustomSubmitButton() {
-  const { isFormValid } = useCheckoutContext();
-  // use hook to handle order submission
-  const { isSubmitting, submitOrder } = useOrderSubmission();
-  // Your custom button implementation
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),"  All components must be wrapped in CheckoutProvider. See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english",children:"CustomCheckout documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"apis-and-hooks",children:"APIs and Hooks"}),`
-`,e.jsx(n.p,{children:"As mentioned above, the component library provides HTTP APIs and React Hooks for more granular control and advanced use cases."}),`
-`,e.jsx(n.h4,{id:"http-apis",children:"HTTP APIs"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getPricePointInfo"})})," - Get price point information (supports single or multiple price points)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"createOrder"})})," - Create an order with the provided order data"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getOrderDetail"})})," - Get detailed information about an order by order code"]}),`
-`]}),`
-`,e.jsx(n.h4,{id:"react-hooks",children:"React Hooks"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useCheckoutContext"})})," - Access checkout state and update functions (customer info, delivery address, form validation)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderSubmission"})})," - Handle order submission with loading states and error handling"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderDetail"})})," - Fetch order details"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"usePricePointInfo"})})," - Get price point information"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For detailed API documentation and hook usage examples, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs Documentation"}),"."]})]})}function I(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{I as default};

package/dist/storybook/storybook-static/assets/Guide.en-DPJzC5RR.js

@@ -1,107 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as r}from"./index-ChEI-nsM.js";import{M as c,C as t,a as d}from"./index-CkNSuRJg.js";import{Default as s}from"./PaymentMethods.stories-ChiL9TJn.js";import{D as a}from"./CustomCheckout.stories-V2NHLbZo.js";import"./index-DRjF_FHU.js";import"./iframe-DsSsblW_.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-BnPZRrAs.js";import"./useCheckoutContext-C6u4Rp5U.js";/* empty css              */import"./CheckoutPage-DYMMhAMX.js";import"./CustomerInfo-Cp0u57C5.js";import"./ValidateInput-sZgX3GCF.js";import"./DeliveryAddress-CD42v0od.js";function i(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"Documentation/Guide"}),`
-`,e.jsx(n.h1,{id:"getting-started-guide",children:"Getting Started Guide"}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"@clickaroo/checkout-ui"})," is a comprehensive checkout page component library designed for React applications, providing a complete checkout flow solution. The library includes core features such as customer information collection, delivery address management, payment method selection, and integrates seamlessly with payment systems."]}),`
-`,e.jsx(n.p,{children:"This guide will walk you through different ways to integrate the checkout components into your React application, from the simplest all-in-one solution to fully customized implementations."}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you're new to this library, we recommend starting with the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs",children:"Quick Start Guide"})," which covers installation, basic usage with ",e.jsx(n.code,{children:"CheckoutPage"}),", and event callbacks."]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"quick-integration-with-checkoutpage",children:"Quick Integration with CheckoutPage"}),`
-`,e.jsxs(n.p,{children:["The simplest way to integrate is using the ",e.jsx(n.code,{children:"CheckoutPage"})," component, which includes the complete checkout flow. With this single component, you can quickly integrate a full-featured checkout experience."]}),`
-`,e.jsxs(n.p,{children:["👉 See the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs#use-checkout-all-in-one",children:"Use Checkout All in One"})," section in the Quick Start Guide for detailed instructions and examples."]}),`
-`,e.jsx(n.h3,{id:"payment-only-integration",children:"Payment-Only Integration"}),`
-`,e.jsxs(n.p,{children:["If you only need payment functionality and have already collected customer and address information elsewhere in your application, you can use the ",e.jsx(n.code,{children:"PaymentMethods"})," component independently."]}),`
-`,e.jsx(t,{of:s}),`
-`,e.jsx(n.h4,{id:"props",children:"Props"}),`
-`,e.jsx(d,{of:s}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutProvider, PaymentMethods } from '@clickaroo/checkout-ui';
-
-function PaymentOnly() {
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return (
-    <CheckoutProvider cart={cart}>
-      <PaymentMethods />
-    </CheckoutProvider>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),`
-The `,e.jsx(n.code,{children:"PaymentMethods"})," component must be wrapped in a ",e.jsx(n.code,{children:"CheckoutProvider"}),". See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsx(n.p,{children:"To complete the full payment flow (including order submission), you'll need to use the APIs and hooks provided by the library:"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:["Update customer and address information using ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"})," from ",e.jsx(n.code,{children:"useCheckoutContext"})," hook"]}),`
-`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook to handle order submission"]}),`
-`,e.jsxs(n.li,{children:["Create a custom submit button that calls ",e.jsx(n.code,{children:"submitOrder()"})," from the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook when clicked"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"})," section on ",e.jsx(n.code,{children:"useOrderSubmission"}),"."]}),`
-`,e.jsx(n.h3,{id:"custom-checkout",children:"Custom Checkout"}),`
-`,e.jsx(n.p,{children:"You can build a custom checkout page by mixing and matching the library's built-in components with your own custom components. This gives you full control over the layout, styling, and user experience while leveraging the library's functionality."}),`
-`,e.jsx(t,{of:a}),`
-`,e.jsxs(n.p,{children:["You can replace some built-in components with your own custom implementations, but ",e.jsxs(n.strong,{children:[e.jsx(n.code,{children:"PaymentMethods"})," must always be used from the library"]})," as it contains critical payment logic that cannot be customized."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { 
-  CheckoutProvider, 
-  PaymentMethods,
-  useCheckoutContext,
-  useOrderSubmission
-} from '@clickaroo/checkout-ui';
-
-function CustomCheckout() {
-  const cart = [{ sku: "TEST001", offerPricePoint: "OPP-TEST001" }];
-
-  return (
-    // All components must be wrapped in CheckoutProvider
-    <CheckoutProvider cart={cart}>
-      <MyCustomCustomerInfo />
-      <MyCustomDeliveryAddress />
-      <PaymentMethods /> {/* Required - cannot be customized */}
-      <MyCustomSubmitButton />
-    </CheckoutProvider>
-  );
-}
-
-// Use hooks to build custom components
-function MyCustomCustomerInfo() {
-  const { customerInfo, updateCustomerInfo } = useCheckoutContext();
-  // use hook to update form data
-  updateCustomerInfo({ firstName: 'xxx', lastName: 'xxx', ...})
-}
-
-function MyCustomDeliveryAddress() {
-  const { deliveryAddress, updateDeliveryAddress } = useCheckoutContext();
-  // Your custom form implementation
-}
-
-function MyCustomSubmitButton() {
-  const { isFormValid } = useCheckoutContext();
-  // use hook to handle order submission
-  const { isSubmitting, submitOrder } = useOrderSubmission();
-  // Your custom button implementation
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),"  All components must be wrapped in CheckoutProvider. See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english",children:"CustomCheckout documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"apis-and-hooks",children:"APIs and Hooks"}),`
-`,e.jsx(n.p,{children:"As mentioned above, the component library provides HTTP APIs and React Hooks for more granular control and advanced use cases."}),`
-`,e.jsx(n.h4,{id:"http-apis",children:"HTTP APIs"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getPricePointInfo"})})," - Get price point information (supports single or multiple price points)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"createOrder"})})," - Create an order with the provided order data"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getOrderDetail"})})," - Get detailed information about an order by order code"]}),`
-`]}),`
-`,e.jsx(n.h4,{id:"react-hooks",children:"React Hooks"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useCheckoutContext"})})," - Access checkout state and update functions (customer info, delivery address, form validation)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderSubmission"})})," - Handle order submission with loading states and error handling"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderDetail"})})," - Fetch order details"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"usePricePointInfo"})})," - Get price point information"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For detailed API documentation and hook usage examples, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs Documentation"}),"."]})]})}function I(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{I as default};

package/dist/storybook/storybook-static/assets/Guide.en-VxmWTbu0.js

@@ -1,107 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as r}from"./index-ChEI-nsM.js";import{M as c,C as t,a as d}from"./index-Cyd9I05m.js";import{Default as s}from"./PaymentMethods.stories-CELadurr.js";import{D as a}from"./CustomCheckout.stories-Cmt6r_Qb.js";import"./index-DRjF_FHU.js";import"./iframe-Ckasx_Sg.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./PaymentMethods-DOuQM2jZ.js";import"./useCheckoutContext-Cyg-MLQs.js";/* empty css              */import"./CheckoutPage-B959BwZO.js";import"./CustomerInfo-CdeZHMcz.js";import"./ValidateInput-C6pnsZFe.js";import"./DeliveryAddress-zAvEPauR.js";function i(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"Documentation/Guide"}),`
-`,e.jsx(n.h1,{id:"getting-started-guide",children:"Getting Started Guide"}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"@clickaroo/checkout-ui"})," is a comprehensive checkout page component library designed for React applications, providing a complete checkout flow solution. The library includes core features such as customer information collection, delivery address management, payment method selection, and integrates seamlessly with payment systems."]}),`
-`,e.jsx(n.p,{children:"This guide will walk you through different ways to integrate the checkout components into your React application, from the simplest all-in-one solution to fully customized implementations."}),`
-`,e.jsxs(n.blockquote,{children:[`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note"}),": If you're new to this library, we recommend starting with the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs",children:"Quick Start Guide"})," which covers installation, basic usage with ",e.jsx(n.code,{children:"CheckoutPage"}),", and event callbacks."]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"quick-integration-with-checkoutpage",children:"Quick Integration with CheckoutPage"}),`
-`,e.jsxs(n.p,{children:["The simplest way to integrate is using the ",e.jsx(n.code,{children:"CheckoutPage"})," component, which includes the complete checkout flow. With this single component, you can quickly integrate a full-featured checkout experience."]}),`
-`,e.jsxs(n.p,{children:["👉 See the ",e.jsx(n.a,{href:"./?path=/docs/documentation-quickstart--docs#use-checkout-all-in-one",children:"Use Checkout All in One"})," section in the Quick Start Guide for detailed instructions and examples."]}),`
-`,e.jsx(n.h3,{id:"payment-only-integration",children:"Payment-Only Integration"}),`
-`,e.jsxs(n.p,{children:["If you only need payment functionality and have already collected customer and address information elsewhere in your application, you can use the ",e.jsx(n.code,{children:"PaymentMethods"})," component independently."]}),`
-`,e.jsx(t,{of:s}),`
-`,e.jsx(n.h4,{id:"props",children:"Props"}),`
-`,e.jsx(d,{of:s}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutProvider, PaymentMethods } from '@clickaroo/checkout-ui';
-
-function PaymentOnly() {
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-TEST001",
-    },
-    {
-      sku: "TEST002",
-      offerPricePoint: "OPP-TEST002",
-    },
-  ];
-
-  return (
-    <CheckoutProvider cart={cart}>
-      <PaymentMethods />
-    </CheckoutProvider>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),`
-The `,e.jsx(n.code,{children:"PaymentMethods"})," component must be wrapped in a ",e.jsx(n.code,{children:"CheckoutProvider"}),". See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsx(n.p,{children:"To complete the full payment flow (including order submission), you'll need to use the APIs and hooks provided by the library:"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:["Update customer and address information using ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"})," from ",e.jsx(n.code,{children:"useCheckoutContext"})," hook"]}),`
-`,e.jsxs(n.li,{children:["Use the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook to handle order submission"]}),`
-`,e.jsxs(n.li,{children:["Create a custom submit button that calls ",e.jsx(n.code,{children:"submitOrder()"})," from the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook when clicked"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs documentation"})," section on ",e.jsx(n.code,{children:"useOrderSubmission"}),"."]}),`
-`,e.jsx(n.h3,{id:"custom-checkout",children:"Custom Checkout"}),`
-`,e.jsx(n.p,{children:"You can build a custom checkout page by mixing and matching the library's built-in components with your own custom components. This gives you full control over the layout, styling, and user experience while leveraging the library's functionality."}),`
-`,e.jsx(t,{of:a}),`
-`,e.jsxs(n.p,{children:["You can replace some built-in components with your own custom implementations, but ",e.jsxs(n.strong,{children:[e.jsx(n.code,{children:"PaymentMethods"})," must always be used from the library"]})," as it contains critical payment logic that cannot be customized."]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { 
-  CheckoutProvider, 
-  PaymentMethods,
-  useCheckoutContext,
-  useOrderSubmission
-} from '@clickaroo/checkout-ui';
-
-function CustomCheckout() {
-  const cart = [{ sku: "TEST001", offerPricePoint: "OPP-TEST001" }];
-
-  return (
-    // All components must be wrapped in CheckoutProvider
-    <CheckoutProvider cart={cart}>
-      <MyCustomCustomerInfo />
-      <MyCustomDeliveryAddress />
-      <PaymentMethods /> {/* Required - cannot be customized */}
-      <MyCustomSubmitButton />
-    </CheckoutProvider>
-  );
-}
-
-// Use hooks to build custom components
-function MyCustomCustomerInfo() {
-  const { customerInfo, updateCustomerInfo } = useCheckoutContext();
-  // use hook to update form data
-  updateCustomerInfo({ firstName: 'xxx', lastName: 'xxx', ...})
-}
-
-function MyCustomDeliveryAddress() {
-  const { deliveryAddress, updateDeliveryAddress } = useCheckoutContext();
-  // Your custom form implementation
-}
-
-function MyCustomSubmitButton() {
-  const { isFormValid } = useCheckoutContext();
-  // use hook to handle order submission
-  const { isSubmitting, submitOrder } = useOrderSubmission();
-  // Your custom button implementation
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important Notes:"}),"  All components must be wrapped in CheckoutProvider. See ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english#using-checkoutprovider",children:"CheckoutProvider Props"})," for all available configuration options."]}),`
-`,e.jsxs(n.p,{children:["For a complete implementation example, see the ",e.jsx(n.a,{href:"./?path=/docs/components-customcheckout--customcheckout-english",children:"CustomCheckout documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"apis-and-hooks",children:"APIs and Hooks"}),`
-`,e.jsx(n.p,{children:"As mentioned above, the component library provides HTTP APIs and React Hooks for more granular control and advanced use cases."}),`
-`,e.jsx(n.h4,{id:"http-apis",children:"HTTP APIs"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getPricePointInfo"})})," - Get price point information (supports single or multiple price points)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"createOrder"})})," - Create an order with the provided order data"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"getOrderDetail"})})," - Get detailed information about an order by order code"]}),`
-`]}),`
-`,e.jsx(n.h4,{id:"react-hooks",children:"React Hooks"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useCheckoutContext"})})," - Access checkout state and update functions (customer info, delivery address, form validation)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderSubmission"})})," - Handle order submission with loading states and error handling"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"useOrderDetail"})})," - Fetch order details"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"usePricePointInfo"})})," - Get price point information"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For detailed API documentation and hook usage examples, see the ",e.jsx(n.a,{href:"./?path=/docs/documentation-apis--docs",children:"APIs Documentation"}),"."]})]})}function I(o={}){const{wrapper:n}={...r(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(i,{...o})}):i(o)}export{I as default};

package/dist/storybook/storybook-static/assets/PaymentMethods-B1IKDQ7d.js

@@ -1,2 +0,0 @@
-import{j as f}from"./jsx-runtime-DiklIkkE.js";import{b as q,t as _}from"./useCheckoutContext-w0N5TNgR.js";import{r as k,g as Re,R as u}from"./index-DRjF_FHU.js";const W=()=>f.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10",children:f.jsxs("svg",{className:"animate-spin h-6 w-6 text-black",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fill:"none",children:[f.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),f.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})});W.__docgenInfo={description:"",methods:[],displayName:"Loading"};var V=(r=>(r.OneTime="one-time",r.Subscription="subscription",r))(V||{});const Ie=()=>{const{cart:r,clickarooInfoMap:e,offerPricePoints:t}=q(),n=k.useMemo(()=>r.reduce((o,i)=>{const c=e[i.offerPricePoint];if(!c)return o;const s=H(c);return s&&s.priceInCents>0&&o.push({...i,priceInCents:s.priceInCents,currency:s.currency,quantity:s.quantity,paymentType:c.type==="one_off"?V.OneTime:V.Subscription}),o},[]),[r,e]),a=k.useMemo(()=>{let o=0;return t.forEach(i=>{const c=e[i];if(!c)return;const s=H(c);s&&(o+=s.priceInCents*s.quantity)}),o},[t,e]);return{checkoutProducts:n,totalAmount:a}},H=r=>{if(console.log(r),r.type==="one_off"&&r.one_off)return{priceInCents:r.one_off.price_in_cents||0,currency:r.one_off.currency||"usd",quantity:r.one_off.quantity||1};if(r.type==="subscription_schedules"&&r.subscription_schedules){const e=r.subscription_schedules.find(t=>t.phase===1);if(e)return{priceInCents:e.price_in_cents||0,currency:e.currency||"usd",quantity:e.quantity||1}}return null};var ne={exports:{}},Ae="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",Te=Ae,Ne=Te;function oe(){}function ae(){}ae.resetWarningCache=oe;var Le=function(){function r(n,a,o,i,c,s){if(s!==Ne){var h=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw h.name="Invariant Violation",h}}r.isRequired=r;function e(){return r}var t={array:r,bigint:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:e,element:r,elementType:r,instanceOf:e,node:r,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:ae,resetWarningCache:oe};return t.PropTypes=t,t};ne.exports=Le();var Me=ne.exports;const l=Re(Me);function X(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter(function(a){return Object.getOwnPropertyDescriptor(r,a).enumerable})),t.push.apply(t,n)}return t}function Q(r){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?X(Object(t),!0).forEach(function(n){se(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):X(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}function U(r){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?U=function(e){return typeof e}:U=function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},U(r)}function se(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function Ue(r,e){if(r==null)return{};var t={},n=Object.keys(r),a,o;for(o=0;o<n.length;o++)a=n[o],!(e.indexOf(a)>=0)&&(t[a]=r[a]);return t}function We(r,e){if(r==null)return{};var t=Ue(r,e),n,a;if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(r);for(a=0;a<o.length;a++)n=o[a],!(e.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(r,n)&&(t[n]=r[n])}return t}function ie(r,e){return qe(r)||Be(r,e)||Fe(r,e)||De()}function qe(r){if(Array.isArray(r))return r}function Be(r,e){var t=r&&(typeof Symbol<"u"&&r[Symbol.iterator]||r["@@iterator"]);if(t!=null){var n=[],a=!0,o=!1,i,c;try{for(t=t.call(r);!(a=(i=t.next()).done)&&(n.push(i.value),!(e&&n.length===e));a=!0);}catch(s){o=!0,c=s}finally{try{!a&&t.return!=null&&t.return()}finally{if(o)throw c}}return n}}function Fe(r,e){if(r){if(typeof r=="string")return Z(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);if(t==="Object"&&r.constructor&&(t=r.constructor.name),t==="Map"||t==="Set")return Array.from(r);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return Z(r,e)}}function Z(r,e){(e==null||e>r.length)&&(e=r.length);for(var t=0,n=new Array(e);t<e;t++)n[t]=r[t];return n}function De(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var C=function(e,t,n){var a=!!n,o=u.useRef(n);u.useEffect(function(){o.current=n},[n]),u.useEffect(function(){if(!a||!e)return function(){};var i=function(){o.current&&o.current.apply(o,arguments)};return e.on(t,i),function(){e.off(t,i)}},[a,t,e,o])},$=function(e){var t=u.useRef(e);return u.useEffect(function(){t.current=e},[e]),t.current},w=function(e){return e!==null&&U(e)==="object"},Ve=function(e){return w(e)&&typeof e.then=="function"},$e=function(e){return w(e)&&typeof e.elements=="function"&&typeof e.createToken=="function"&&typeof e.createPaymentMethod=="function"&&typeof e.confirmCardPayment=="function"},ee="[object Object]",ze=function r(e,t){if(!w(e)||!w(t))return e===t;var n=Array.isArray(e),a=Array.isArray(t);if(n!==a)return!1;var o=Object.prototype.toString.call(e)===ee,i=Object.prototype.toString.call(t)===ee;if(o!==i)return!1;if(!o&&!n)return e===t;var c=Object.keys(e),s=Object.keys(t);if(c.length!==s.length)return!1;for(var h={},v=0;v<c.length;v+=1)h[c[v]]=!0;for(var E=0;E<s.length;E+=1)h[s[E]]=!0;var p=Object.keys(h);if(p.length!==c.length)return!1;var x=e,b=t,y=function(A){return r(x[A],b[A])};return p.every(y)},ce=function(e,t,n){return w(e)?Object.keys(e).reduce(function(a,o){var i=!w(t)||!ze(e[o],t[o]);return n.includes(o)?(i&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),a):i?Q(Q({},a||{}),{},se({},o,e[o])):a},null):null},ue="Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.",te=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:ue;if(e===null||$e(e))return e;throw new Error(t)},Je=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:ue;if(Ve(e))return{tag:"async",stripePromise:Promise.resolve(e).then(function(a){return te(a,t)})};var n=te(e,t);return n===null?{tag:"empty"}:{tag:"sync",stripe:n}},Ye=function(e){!e||!e._registerWrapper||!e.registerAppInfo||(e._registerWrapper({name:"react-stripe-js",version:"3.10.0"}),e.registerAppInfo({name:"react-stripe-js",version:"3.10.0",url:"https://stripe.com/docs/stripe-js/react"}))},B=u.createContext(null);B.displayName="ElementsContext";var le=function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e},pe=function(e){var t=e.stripe,n=e.options,a=e.children,o=u.useMemo(function(){return Je(t)},[t]),i=u.useState(function(){return{stripe:o.tag==="sync"?o.stripe:null,elements:o.tag==="sync"?o.stripe.elements(n):null}}),c=ie(i,2),s=c[0],h=c[1];u.useEffect(function(){var p=!0,x=function(y){h(function(O){return O.stripe?O:{stripe:y,elements:y.elements(n)}})};return o.tag==="async"&&!s.stripe?o.stripePromise.then(function(b){b&&p&&x(b)}):o.tag==="sync"&&!s.stripe&&x(o.stripe),function(){p=!1}},[o,s,n]);var v=$(t);u.useEffect(function(){v!==null&&v!==t&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")},[v,t]);var E=$(n);return u.useEffect(function(){if(s.elements){var p=ce(n,E,["clientSecret","fonts"]);p&&s.elements.update(p)}},[n,E,s.elements]),u.useEffect(function(){Ye(s.stripe)},[s.stripe]),u.createElement(B.Provider,{value:s},a)};pe.propTypes={stripe:l.any,options:l.object};var Ke=function(e){var t=u.useContext(B);return le(t,e)},Ge=function(){var e=Ke("calls useElements()"),t=e.elements;return t};l.func.isRequired;var fe=u.createContext(null);fe.displayName="CheckoutSdkContext";var He=function(e,t){if(!e)throw new Error("Could not find CheckoutProvider context; You need to wrap the part of your app that ".concat(t," in an <CheckoutProvider> provider."));return e},Xe=u.createContext(null);Xe.displayName="CheckoutContext";l.any,l.shape({fetchClientSecret:l.func.isRequired,elementsOptions:l.object}).isRequired;var z=function(e){var t=u.useContext(fe),n=u.useContext(B);if(t&&n)throw new Error("You cannot wrap the part of your app that ".concat(e," in both <CheckoutProvider> and <Elements> providers."));return t?He(t,e):le(n,e)},Qe=["mode"],Ze=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},d=function(e,t){var n="".concat(Ze(e),"Element"),a=function(s){var h=s.id,v=s.className,E=s.options,p=E===void 0?{}:E,x=s.onBlur,b=s.onFocus,y=s.onReady,O=s.onChange,A=s.onEscape,ge=s.onClick,Se=s.onLoadError,Ce=s.onLoaderStart,Ee=s.onNetworksChange,be=s.onConfirm,xe=s.onCancel,Pe=s.onShippingAddressChange,je=s.onShippingRateChange,ke=s.onSavedPaymentMethodRemove,_e=s.onSavedPaymentMethodUpdate,T=z("mounts <".concat(n,">")),N="elements"in T?T.elements:null,P="checkoutSdk"in T?T.checkoutSdk:null,we=u.useState(null),J=ie(we,2),g=J[0],Oe=J[1],j=u.useRef(null),F=u.useRef(null);C(g,"blur",x),C(g,"focus",b),C(g,"escape",A),C(g,"click",ge),C(g,"loaderror",Se),C(g,"loaderstart",Ce),C(g,"networkschange",Ee),C(g,"confirm",be),C(g,"cancel",xe),C(g,"shippingaddresschange",Pe),C(g,"shippingratechange",je),C(g,"savedpaymentmethodremove",ke),C(g,"savedpaymentmethodupdate",_e),C(g,"change",O);var D;y&&(e==="expressCheckout"?D=y:D=function(){y(g)}),C(g,"ready",D),u.useLayoutEffect(function(){if(j.current===null&&F.current!==null&&(N||P)){var S=null;if(P)switch(e){case"payment":S=P.createPaymentElement(p);break;case"address":if("mode"in p){var K=p.mode,G=We(p,Qe);if(K==="shipping")S=P.createShippingAddressElement(G);else if(K==="billing")S=P.createBillingAddressElement(G);else throw new Error("Invalid options.mode. mode must be 'billing' or 'shipping'.")}else throw new Error("You must supply options.mode. mode must be 'billing' or 'shipping'.");break;case"expressCheckout":S=P.createExpressCheckoutElement(p);break;case"currencySelector":S=P.createCurrencySelectorElement();break;case"taxId":S=P.createTaxIdElement(p);break;default:throw new Error("Invalid Element type ".concat(n,". You must use either the <PaymentElement />, <AddressElement options={{mode: 'shipping'}} />, <AddressElement options={{mode: 'billing'}} />, or <ExpressCheckoutElement />."))}else N&&(S=N.create(e,p));j.current=S,Oe(S),S&&S.mount(F.current)}},[N,P,p]);var Y=$(p);return u.useEffect(function(){if(j.current){var S=ce(p,Y,["paymentRequest"]);S&&"update"in j.current&&j.current.update(S)}},[p,Y]),u.useLayoutEffect(function(){return function(){if(j.current&&typeof j.current.destroy=="function")try{j.current.destroy(),j.current=null}catch{}}},[]),u.createElement("div",{id:h,className:v,ref:F})},o=function(s){z("mounts <".concat(n,">"));var h=s.id,v=s.className;return u.createElement("div",{id:h,className:v})},i=t?o:a;return i.propTypes={id:l.string,className:l.string,onChange:l.func,onBlur:l.func,onFocus:l.func,onReady:l.func,onEscape:l.func,onClick:l.func,onLoadError:l.func,onLoaderStart:l.func,onNetworksChange:l.func,onConfirm:l.func,onCancel:l.func,onShippingAddressChange:l.func,onShippingRateChange:l.func,onSavedPaymentMethodRemove:l.func,onSavedPaymentMethodUpdate:l.func,options:l.object},i.displayName=n,i.__elementType=e,i},m=typeof window>"u",et=u.createContext(null);et.displayName="EmbeddedCheckoutProviderContext";var tt=function(){var e=z("calls useStripe()"),t=e.stripe;return t};d("auBankAccount",m);d("card",m);d("cardNumber",m);d("cardExpiry",m);d("cardCvc",m);d("fpxBank",m);d("iban",m);d("idealBank",m);d("p24Bank",m);d("epsBank",m);var rt=d("payment",m);d("expressCheckout",m);d("currencySelector",m);d("paymentRequestButton",m);d("linkAuthentication",m);d("address",m);d("shippingAddress",m);d("paymentMethodMessaging",m);d("affirmMessage",m);d("afterpayClearpayMessage",m);d("taxId",m);var de="basil",nt=function(e){return e===3?"v3":e},me="https://js.stripe.com",ot="".concat(me,"/").concat(de,"/stripe.js"),at=/^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/,st=/^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;var it=function(e){return at.test(e)||st.test(e)},ct=function(){for(var e=document.querySelectorAll('script[src^="'.concat(me,'"]')),t=0;t<e.length;t++){var n=e[t];if(it(n.src))return n}return null},re=function(e){var t="",n=document.createElement("script");n.src="".concat(ot).concat(t);var a=document.head||document.body;if(!a)throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");return a.appendChild(n),n},ut=function(e,t){!e||!e._registerWrapper||e._registerWrapper({name:"stripe-js",version:"7.9.0",startTime:t})},R=null,L=null,M=null,lt=function(e){return function(t){e(new Error("Failed to load Stripe.js",{cause:t}))}},pt=function(e,t){return function(){window.Stripe?e(window.Stripe):t(new Error("Stripe.js not available"))}},ft=function(e){return R!==null?R:(R=new Promise(function(t,n){if(typeof window>"u"||typeof document>"u"){t(null);return}if(window.Stripe){t(window.Stripe);return}try{var a=ct();if(!(a&&e)){if(!a)a=re(e);else if(a&&M!==null&&L!==null){var o;a.removeEventListener("load",M),a.removeEventListener("error",L),(o=a.parentNode)===null||o===void 0||o.removeChild(a),a=re(e)}}M=pt(t,n),L=lt(n),a.addEventListener("load",M),a.addEventListener("error",L)}catch(i){n(i);return}}),R.catch(function(t){return R=null,Promise.reject(t)}))},dt=function(e,t,n){if(e===null)return null;var a=t[0],o=a.match(/^pk_test/),i=nt(e.version),c=de;o&&i!==c&&console.warn("Stripe.js@".concat(i," was loaded on the page, but @stripe/stripe-js@").concat("7.9.0"," expected Stripe.js@").concat(c,". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));var s=e.apply(void 0,t);return ut(s,n),s},I,ve=!1,he=function(){return I||(I=ft(null).catch(function(e){return I=null,Promise.reject(e)}),I)};Promise.resolve().then(function(){return he()}).catch(function(r){ve||console.warn(r)});var mt=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];ve=!0;var a=Date.now();return he().then(function(o){return dt(o,t,a)})};const vt=({onStripeReady:r,checkoutProducts:e,totalAmount:t})=>{const n=tt(),a=Ge(),{setStripeComplete:o,setStripeLoading:i,onPaymentInfoComplete:c}=q(),[s,h]=k.useState(!1);return k.useEffect(()=>{n&&a&&r(n,a)},[n,a,r]),f.jsx(rt,{onLoaderStart:()=>{_("stripe_form_loader_start")},onReady:()=>{i(!1),_("stripe_form_loaded",{success:!0})},onLoadError:v=>{var E;console.error("Payment element load error:",v),i(!1),_("stripe_form_loaded",{success:!1,error:((E=v.error)==null?void 0:E.message)||"Unknown error"})},onChange:({complete:v})=>{o(v),v&&!s&&c&&(h(!0),c(e,t))}})},ye=()=>{var x;const{stripeState:r,clickarooInfoMap:e,offerPricePoints:t,setStripe:n,setStripeElements:a}=q(),o=t[0]?e[t[0]]:null,{checkoutProducts:i,totalAmount:c}=Ie(),s=k.useCallback((b,y)=>{b&&n(b),y&&a(y)},[n,a]),[h]=k.useState(()=>{if(!o)return null;const b=mt(o.payment.data.publishable_key,{stripeAccount:o.payment.data.account_id});return b.then(y=>{y&&_("stripe_sdk_loaded",{success:!0})}).catch(y=>{_("stripe_sdk_loaded",{success:!1,error:(y==null?void 0:y.message)||"Failed to load Stripe SDK"})}),b});if(!o||t.length===0||!h)return f.jsx("div",{className:"flex items-center justify-center h-20",children:f.jsx(W,{})});const v=o.type==="one_off"?"payment":"subscription",E=(x=i[0])==null?void 0:x.currency.toLowerCase(),p=c<=0;return k.useEffect(()=>{p&&_("stripe_form_loaded",{success:!1,error:"Invalid payment amount",totalAmount:c})},[p,c]),p?f.jsx("div",{className:"flex items-center justify-center h-20",children:f.jsx("div",{className:"text-[#df1b41]",children:"Invalid payment amount"})}):f.jsxs("div",{className:"relative",children:[r.isLoading&&f.jsx("div",{className:"absolute inset-0 flex items-center justify-center z-10",children:f.jsx(W,{})}),f.jsx(pe,{stripe:h,options:{mode:v,currency:E,amount:c,payment_method_types:["card"],locale:"en",appearance:{theme:"stripe",variables:{colorPrimary:"#8AA3D4"}}},children:f.jsx(vt,{onStripeReady:s,checkoutProducts:i,totalAmount:c})})]})};ye.__docgenInfo={description:"",methods:[],displayName:"StripePayment"};const ht=({showText:r=!0})=>{const{clickarooInfoMap:e,offerPricePoints:t}=q(),n=t.length>0&&Object.keys(e).length>0&&t.every(a=>e[a]);return f.jsxs("div",{className:"w-full",children:[r&&f.jsxs(f.Fragment,{children:[f.jsx("div",{className:"text-lg md:text-2xl mb-2 font-medium",children:"Payment Methods"}),f.jsx("div",{className:"text-grey text-md mb-5",children:"All transactions are secure encrypted."})]}),n?f.jsx("div",{id:"stripe-payment-element",className:"relative min-h-8",children:f.jsx(ye,{})}):f.jsx("div",{className:"relative flex items-center justify-center h-20",children:f.jsx(W,{})})]})};ht.__docgenInfo={description:"",methods:[],displayName:"PaymentMethods",props:{showText:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}}}};export{ht as P,Ie as u};