@clickaroo/checkout-ui 0.1.3-beta → 0.1.5-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/storybook/storybook-static/assets/APIs.en-BZfNNuoc.js +372 -0
- package/dist/storybook/storybook-static/assets/APIs.en-BZzPbEJW.js +372 -0
- package/dist/storybook/storybook-static/assets/APIs.en-Bf5J1Ifk.js +372 -0
- package/dist/storybook/storybook-static/assets/APIs.en-DSVQkUt3.js +372 -0
- package/dist/storybook/storybook-static/assets/APIs.en-DcEWunRx.js +372 -0
- package/dist/storybook/storybook-static/assets/APIs.en-DfWH0fys.js +372 -0
- package/dist/storybook/storybook-static/assets/APIs.en-TWb_-3VC.js +372 -0
- package/dist/storybook/storybook-static/assets/APIs.en-m6cq4XTv.js +372 -0
- package/dist/storybook/storybook-static/assets/APIs.en-nicPQ5AW.js +372 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-BsnzMxJk.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-CDW7SRyI.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-CrHN6Fcv.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-DFb28rrp.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-DSLcTghb.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-DYMMhAMX.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-DgZ1RopD.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-DvHYA1Jd.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage-d8MZfjpI.js +3 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-BeknEgWZ.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-Bsh4jm31.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-Byu6MnFF.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-C5I1UUQc.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-CNVaEQvK.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-D87qzfwm.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-DLb_7NPf.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-DQ0u0fHa.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.en-DiHMI_iH.js +147 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-B5y94bOo.js +44 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-B8Vyz9GJ.js +44 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-BRP4VrvR.js +44 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-BahbUp4O.js +44 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-DAo0u2QI.js +44 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-DFK1bMdr.js +44 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-DLD3oWo_.js +44 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-DeC6lyzr.js +44 -0
- package/dist/storybook/storybook-static/assets/CheckoutPage.stories-DvaZetee.js +44 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-B0J9WR4k.js +1 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-BE_XGTCZ.js +1 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-B_hoSOu5.js +1 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-Bly_OAJP.js +1 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-BorkAxO4.js +1 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-C2GhQi7e.js +1 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-D3zu28Rn.js +1 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-DI94E3AI.js +1 -0
- package/dist/storybook/storybook-static/assets/Color-YHDXOIA2-DVI1_7_g.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-8VNcggT9.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-BMJEFVTk.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-Bg4oz9hS.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-Bq25x8qa.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-BvF7SmOy.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-CckpRGsp.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-D80ZpldF.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-uXQeih6h.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.en-wshSoFMr.js +211 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-B8CnjGCn.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-BQkpNbox.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-BrF5j7zs.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-CKQKzMq0.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-DhCrUQc1.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-F2GZKkIG.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-V2NHLbZo.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-ZCeqtMGJ.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomCheckout.stories-rMIVoUs4.js +6 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-BMTfZ9z3.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-BqCSWi4I.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-BwyY9803.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-CPNuEjrH.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-CTx1dFS3.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-Cp0u57C5.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-D3WHpN32.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-DShSrjMR.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo-mKAI6gWW.js +1 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-BAbhNSal.js +9 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-BeF8Yh1A.js +9 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-BwCrEBgN.js +9 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-CYx1hKNg.js +9 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-D1l3Glaq.js +9 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-DB2C3zqQ.js +9 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-Dv6cHWui.js +9 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-jpdDC3ta.js +9 -0
- package/dist/storybook/storybook-static/assets/CustomerInfo.stories-tyhy9PWf.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-CD42v0od.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-CeuByf4d.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-DOxyPw17.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-DY5lFnTv.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-DaRy4l-D.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-Lfanl1PO.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-QAGxLlLf.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-TRtlNz2v.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress-X81XGbKD.js +2 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-BvAXTiNm.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-C1JtetLS.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-C8sE6JJZ.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-CBScReyV.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-CTyS3zFt.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-CqmJ_Wn7.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-DHyw5QNl.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-FMwTSh9f.js +9 -0
- package/dist/storybook/storybook-static/assets/DeliveryAddress.stories-vQ0cdVl6.js +9 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-4VFo0TRH.js +2 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-BKek9MhZ.js +2 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-C4t3f4os.js +2 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-CtrnOF1G.js +2 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-DU1kBIGp.js +2 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-DzgR8M-W.js +2 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-OiuU2wez.js +2 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-Q5WDl3Gp.js +2 -0
- package/dist/storybook/storybook-static/assets/DocsRenderer-CFRXHY34-sE6BxCwu.js +2 -0
- package/dist/storybook/storybook-static/assets/Guide.en-BJ4qiYIc.js +107 -0
- package/dist/storybook/storybook-static/assets/Guide.en-BRVwtDXj.js +107 -0
- package/dist/storybook/storybook-static/assets/Guide.en-Boc44Lax.js +107 -0
- package/dist/storybook/storybook-static/assets/Guide.en-CKA244dX.js +107 -0
- package/dist/storybook/storybook-static/assets/Guide.en-CiR7CrYZ.js +107 -0
- package/dist/storybook/storybook-static/assets/Guide.en-Citkzdg9.js +107 -0
- package/dist/storybook/storybook-static/assets/Guide.en-DPJzC5RR.js +107 -0
- package/dist/storybook/storybook-static/assets/Guide.en-Dn9xb9YI.js +107 -0
- package/dist/storybook/storybook-static/assets/Guide.en-XzxJQK_F.js +107 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-BFtlMopq.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-BNEEARzu.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-BnPZRrAs.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-Buladk2O.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-CBXk2f9N.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-DmV3o0ow.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-DxorWSOl.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-afz1CTO5.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods-e9HqQtxN.js +2 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-6fZvfvMO.js +9 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-Bc4jYrum.js +9 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-CcjSRFbb.js +9 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-ChiL9TJn.js +9 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-D1SSfWqv.js +9 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-DJpOtGJg.js +9 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-Dyg3R8Cs.js +9 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-U-xbCFtF.js +9 -0
- package/dist/storybook/storybook-static/assets/PaymentMethods.stories-pOuLDPwE.js +9 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-8otT6VDx.js +136 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-B2goyY4Q.js +136 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-Bz56Z2wW.js +136 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-C1fKNHfm.js +136 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-CEFLfOWt.js +136 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-Ct2dMZNT.js +136 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-D5OiYfrB.js +136 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-D6K1vnx2.js +136 -0
- package/dist/storybook/storybook-static/assets/QuickStart.en-wgtxGAFt.js +136 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-BKNagaQv.js +2 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-BMZhq5zE.js +2 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-CECRKp4c.js +2 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-CXYuXafK.js +2 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-Cl2O4HCX.js +2 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-DcnOO9py.js +2 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-LNzX4jJP.js +2 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-np1-zwvJ.js +2 -0
- package/dist/storybook/storybook-static/assets/ValidateInput-sZgX3GCF.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-BAF1DioI.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-BAb-nh3P.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-BQMc41xo.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-Bnn64O7J.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-C4SPQchM.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-CAnH1TUA.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-Dbi49YCK.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-GhM6ttN0.js +2 -0
- package/dist/storybook/storybook-static/assets/entry-preview-hHv11-z5.js +2 -0
- package/dist/storybook/storybook-static/assets/iframe-CakT_Hx-.js +211 -0
- package/dist/storybook/storybook-static/assets/iframe-Ce3kgeV4.js +211 -0
- package/dist/storybook/storybook-static/assets/iframe-Crv4raYy.js +211 -0
- package/dist/storybook/storybook-static/assets/iframe-CueR_wS4.js +211 -0
- package/dist/storybook/storybook-static/assets/iframe-DWFwLXCc.js +211 -0
- package/dist/storybook/storybook-static/assets/iframe-DsSsblW_.js +211 -0
- package/dist/storybook/storybook-static/assets/iframe-PThBYPHV.js +211 -0
- package/dist/storybook/storybook-static/assets/iframe-SJLFWhX6.js +211 -0
- package/dist/storybook/storybook-static/assets/iframe-eGyOKkka.js +211 -0
- package/dist/storybook/storybook-static/assets/index-3vMs57rT.js +575 -0
- package/dist/storybook/storybook-static/assets/index-BlPVJQpb.js +575 -0
- package/dist/storybook/storybook-static/assets/index-Bz3Q1Yw_.js +575 -0
- package/dist/storybook/storybook-static/assets/index-CZFGp9Su.js +575 -0
- package/dist/storybook/storybook-static/assets/index-CkNSuRJg.js +575 -0
- package/dist/storybook/storybook-static/assets/index-D66ljFJA.js +575 -0
- package/dist/storybook/storybook-static/assets/index-DnrKlQ76.js +575 -0
- package/dist/storybook/storybook-static/assets/index-DoDFfets.js +575 -0
- package/dist/storybook/storybook-static/assets/index-LRKEu_dQ.js +575 -0
- package/dist/storybook/storybook-static/assets/preview-884UjfA3.js +2 -0
- package/dist/storybook/storybook-static/assets/preview-C1X5Ys-q.js +2 -0
- package/dist/storybook/storybook-static/assets/preview-CbAwkmzD.js +2 -0
- package/dist/storybook/storybook-static/assets/preview-DGJdQn9n.js +2 -0
- package/dist/storybook/storybook-static/assets/preview-DJkpO_nB.js +2 -0
- package/dist/storybook/storybook-static/assets/preview-DNROAajq.js +2 -0
- package/dist/storybook/storybook-static/assets/preview-De1PUXkc.js +2 -0
- package/dist/storybook/storybook-static/assets/preview-DyVoah3G.js +2 -0
- package/dist/storybook/storybook-static/assets/preview-EmPtksy2.js +2 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-3YTrU8Qh.js +27 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-B8tsk5b5.js +27 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-BW2h13W8.js +27 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-BXtGY5u3.js +27 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-C6u4Rp5U.js +27 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-C7KjDyWW.js +27 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-CroxIBFh.js +27 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-DuJ1Ep0-.js +27 -0
- package/dist/storybook/storybook-static/assets/useCheckoutContext-L3zhltsm.js +27 -0
- package/dist/storybook/storybook-static/iframe.html +1 -1
- package/dist/storybook/storybook-static/project.json +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as c}from"./index-ChEI-nsM.js";import{M as s,C as o,a as d}from"./index-LRKEu_dQ.js";import{C as l,D as r}from"./CheckoutPage.stories-DLD3oWo_.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"./useCheckoutContext-B8tsk5b5.js";import"./CheckoutPage-BsnzMxJk.js";import"./CustomerInfo-CTx1dFS3.js";import"./ValidateInput-Cl2O4HCX.js";import"./DeliveryAddress-X81XGbKD.js";import"./PaymentMethods-BNEEARzu.js";function i(t){const n={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...c(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:l,title:"Documentation/Usage Guide/CheckoutPage",name:"CheckoutPage (English)"}),`
|
|
2
|
+
`,e.jsx(n.h1,{id:"checkoutpage",children:"CheckoutPage"}),`
|
|
3
|
+
`,e.jsx(n.p,{children:"A complete checkout page component that integrates customer information, delivery address, payment methods, and order submission functionality."}),`
|
|
4
|
+
`,e.jsx(n.h3,{id:"basic-usage",children:"Basic Usage"}),`
|
|
5
|
+
`,e.jsx(o,{of:r}),`
|
|
6
|
+
`,e.jsx(n.h3,{id:"props",children:"Props"}),`
|
|
7
|
+
`,e.jsx(d,{of:r}),`
|
|
8
|
+
`,e.jsx(n.h4,{id:"cart",children:"cart"}),`
|
|
9
|
+
`,e.jsx(n.p,{children:"Array of cart items. Each item represents a product in the checkout."}),`
|
|
10
|
+
`,e.jsxs(n.p,{children:["Type: ",e.jsx(n.code,{children:"CartItem[]"}),". See ",e.jsx(n.a,{href:"#cartitem",children:"CartItem Type Definition"})," for details."]}),`
|
|
11
|
+
`,e.jsx(n.p,{children:"Each cart item contains the following fields:"}),`
|
|
12
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Required Fields:"})}),`
|
|
13
|
+
`,e.jsxs("table",{children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Field"}),e.jsx("th",{children:"Type"}),e.jsx("th",{children:"Required"}),e.jsx("th",{children:"Description"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"sku"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Product SKU"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"offerPricePoint"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Price Point ID"})]})]})]}),`
|
|
14
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Optional Fields:"})}),`
|
|
15
|
+
`,e.jsxs(n.p,{children:["In addition to the two required fields ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),", you can pass any other fields to each cart item. These additional fields will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be accessed later when retrieving order details through the ",e.jsx(n.code,{children:"useOrderDetail"})," hook."]}),`
|
|
16
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const cart = [
|
|
17
|
+
{
|
|
18
|
+
sku: "TEST001",
|
|
19
|
+
offerPricePoint: "OPP-TEST001",
|
|
20
|
+
// Any other fields are allowed
|
|
21
|
+
title: "Product Title",
|
|
22
|
+
price: 99.99,
|
|
23
|
+
image: "https://example.com/product.jpg",
|
|
24
|
+
category: "Electronics",
|
|
25
|
+
// ... more fields
|
|
26
|
+
}
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const { orderDetail } = useOrderDetail(orderCode)
|
|
30
|
+
console.log(orderDetail.metadata.products)
|
|
31
|
+
/** [
|
|
32
|
+
{
|
|
33
|
+
sku: "TEST001",
|
|
34
|
+
offerPricePoint: "OPP-TEST001",
|
|
35
|
+
title: "Product Title",
|
|
36
|
+
price: 99.99,
|
|
37
|
+
image: "https://example.com/product.jpg",
|
|
38
|
+
category: "Electronics",
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
**/
|
|
42
|
+
`})}),`
|
|
43
|
+
`,e.jsx(n.h4,{id:"oncheckoutinit",children:"onCheckoutInit"}),`
|
|
44
|
+
`,e.jsxs(n.p,{children:["Callback function when checkout initializes, triggered immediately after the ",e.jsx(n.code,{children:"CheckoutPage"})," component mounts, used to track the start of the checkout flow."]}),`
|
|
45
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onCheckoutInit?: () => void
|
|
46
|
+
`})}),`
|
|
47
|
+
`,e.jsx(n.h4,{id:"onpaymentinfocomplete",children:"onPaymentInfoComplete"}),`
|
|
48
|
+
`,e.jsx(n.p,{children:"Callback function when payment information is complete, triggered when the user completes the payment form and payment element validation passes."}),`
|
|
49
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onPaymentInfoComplete?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
50
|
+
`})}),`
|
|
51
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
52
|
+
`,e.jsxs(n.ul,{children:[`
|
|
53
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". Returns an array of cart items. See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
54
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total payment amount in cents (e.g., 9999 represents $99.99). For multiple items, this is the sum of all items"]}),`
|
|
55
|
+
`]}),`
|
|
56
|
+
`,e.jsx(n.h4,{id:"onordersubmit",children:"onOrderSubmit"}),`
|
|
57
|
+
`,e.jsx(n.p,{children:"Callback function when order is submitted, triggered after the user clicks the submit button and before order processing begins."}),`
|
|
58
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSubmit?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
59
|
+
`})}),`
|
|
60
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
61
|
+
`,e.jsxs(n.ul,{children:[`
|
|
62
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Submitted cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
63
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total amount at submission time in cents (e.g., 9999 represents $99.99)"]}),`
|
|
64
|
+
`]}),`
|
|
65
|
+
`,e.jsx(n.h4,{id:"onordersuccess",children:"onOrderSuccess"}),`
|
|
66
|
+
`,e.jsx(n.p,{children:"Callback function when order succeeds, triggered after the order is successfully created."}),`
|
|
67
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSuccess?: (orderCode: string, tradeCode?: string) => void
|
|
68
|
+
`})}),`
|
|
69
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
70
|
+
`,e.jsxs(n.ul,{children:[`
|
|
71
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"orderCode"})," - Order code"]}),`
|
|
72
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"tradeCode"})," - Trade code (optional)"]}),`
|
|
73
|
+
`]}),`
|
|
74
|
+
`,e.jsx(n.h3,{id:"usage-examples",children:"Usage Examples"}),`
|
|
75
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
const cart = [
|
|
79
|
+
{
|
|
80
|
+
sku: "TEST001",
|
|
81
|
+
offerPricePoint: "OPP-TEST001",
|
|
82
|
+
}
|
|
83
|
+
];
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
<CheckoutPage
|
|
87
|
+
cart={cart}
|
|
88
|
+
onCheckoutInit={() => {
|
|
89
|
+
console.log('Checkout initialized');
|
|
90
|
+
}}
|
|
91
|
+
onPaymentInfoComplete={(products, totalAmount) => {
|
|
92
|
+
console.log('Payment info complete');
|
|
93
|
+
console.log('Total amount:', totalAmount / 100);
|
|
94
|
+
products.forEach((product) => {
|
|
95
|
+
console.log('Product SKU:', product.sku);
|
|
96
|
+
console.log('Unit price:', product.priceInCents / 100, product.currency);
|
|
97
|
+
console.log('Quantity:', product.quantity);
|
|
98
|
+
console.log('Payment type:', product.paymentType);
|
|
99
|
+
});
|
|
100
|
+
}}
|
|
101
|
+
onOrderSubmit={(products, totalAmount) => {
|
|
102
|
+
console.log('Order submitted');
|
|
103
|
+
console.log('Total amount:', totalAmount / 100);
|
|
104
|
+
}}
|
|
105
|
+
onOrderSuccess={(orderCode, tradeCode) => {
|
|
106
|
+
console.log('Order successful', orderCode, tradeCode);
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
`})}),`
|
|
112
|
+
`,e.jsx(n.h3,{id:"key-types",children:"Key Types"}),`
|
|
113
|
+
`,e.jsx(n.h4,{id:"cartitem",children:"CartItem"}),`
|
|
114
|
+
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CartItem"})," is the basic cart item type passed to the ",e.jsx(n.code,{children:"CheckoutPage"})," component:"]}),`
|
|
115
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CartItem {
|
|
116
|
+
// Required fields
|
|
117
|
+
sku: string; // Product SKU
|
|
118
|
+
offerPricePoint: string; // Price Point ID
|
|
119
|
+
|
|
120
|
+
// Optional fields - allows any custom fields, which will be saved to order metadata
|
|
121
|
+
[key: string]: unknown;
|
|
122
|
+
}
|
|
123
|
+
`})}),`
|
|
124
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
125
|
+
`,e.jsxs(n.ul,{children:[`
|
|
126
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"sku"})," - Product SKU, required field"]}),`
|
|
127
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"offerPricePoint"})," - Price Point ID, required field"]}),`
|
|
128
|
+
`,e.jsxs(n.li,{children:["Other fields - You can pass any additional fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be retrieved through ",e.jsx(n.code,{children:"useOrderDetail"})]}),`
|
|
129
|
+
`]}),`
|
|
130
|
+
`,e.jsx(n.h4,{id:"checkoutcartitem",children:"CheckoutCartItem"}),`
|
|
131
|
+
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CheckoutCartItem"})," is the cart item type returned in callback functions, extending ",e.jsx(n.code,{children:"CartItem"})," and including price details:"]}),`
|
|
132
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CheckoutCartItem extends CartItem {
|
|
133
|
+
// Inherits all fields from CartItem (sku, offerPricePoint, etc.)
|
|
134
|
+
priceInCents: number; // Unit price in cents (e.g., 9999 represents $99.99)
|
|
135
|
+
currency: string; // Currency type (e.g., "USD", "EUR")
|
|
136
|
+
quantity: number; // Quantity
|
|
137
|
+
paymentType: "one-time" | "subscription"; // Payment type
|
|
138
|
+
}
|
|
139
|
+
`})}),`
|
|
140
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
141
|
+
`,e.jsxs(n.ul,{children:[`
|
|
142
|
+
`,e.jsxs(n.li,{children:["Inherits all fields from ",e.jsx(n.code,{children:"CartItem"})," (such as ",e.jsx(n.code,{children:"sku"}),", ",e.jsx(n.code,{children:"offerPricePoint"}),", etc.)"]}),`
|
|
143
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"priceInCents"})," - Unit price in cents"]}),`
|
|
144
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"currency"})," - Currency type"]}),`
|
|
145
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"quantity"})," - Quantity"]}),`
|
|
146
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"paymentType"})," - Payment type: ",e.jsx(n.code,{children:'"one-time"'})," for one-time payment, ",e.jsx(n.code,{children:'"subscription"'})," for subscription payment"]}),`
|
|
147
|
+
`]})]})}function T(t={}){const{wrapper:n}={...c(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{T as default};
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as c}from"./index-ChEI-nsM.js";import{M as s,C as o,a as d}from"./index-DoDFfets.js";import{C as l,D as r}from"./CheckoutPage.stories-B8Vyz9GJ.js";import"./index-DRjF_FHU.js";import"./iframe-Crv4raYy.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-3YTrU8Qh.js";import"./CheckoutPage-DgZ1RopD.js";import"./CustomerInfo-mKAI6gWW.js";import"./ValidateInput-CXYuXafK.js";import"./DeliveryAddress-DaRy4l-D.js";import"./PaymentMethods-Buladk2O.js";function i(t){const n={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...c(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:l,title:"Documentation/Usage Guide/CheckoutPage",name:"CheckoutPage (English)"}),`
|
|
2
|
+
`,e.jsx(n.h1,{id:"checkoutpage",children:"CheckoutPage"}),`
|
|
3
|
+
`,e.jsx(n.p,{children:"A complete checkout page component that integrates customer information, delivery address, payment methods, and order submission functionality."}),`
|
|
4
|
+
`,e.jsx(n.h3,{id:"basic-usage",children:"Basic Usage"}),`
|
|
5
|
+
`,e.jsx(o,{of:r}),`
|
|
6
|
+
`,e.jsx(n.h3,{id:"props",children:"Props"}),`
|
|
7
|
+
`,e.jsx(d,{of:r}),`
|
|
8
|
+
`,e.jsx(n.h4,{id:"cart",children:"cart"}),`
|
|
9
|
+
`,e.jsx(n.p,{children:"Array of cart items. Each item represents a product in the checkout."}),`
|
|
10
|
+
`,e.jsxs(n.p,{children:["Type: ",e.jsx(n.code,{children:"CartItem[]"}),". See ",e.jsx(n.a,{href:"#cartitem",children:"CartItem Type Definition"})," for details."]}),`
|
|
11
|
+
`,e.jsx(n.p,{children:"Each cart item contains the following fields:"}),`
|
|
12
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Required Fields:"})}),`
|
|
13
|
+
`,e.jsxs("table",{children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Field"}),e.jsx("th",{children:"Type"}),e.jsx("th",{children:"Required"}),e.jsx("th",{children:"Description"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"sku"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Product SKU"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"offerPricePoint"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Price Point ID"})]})]})]}),`
|
|
14
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Optional Fields:"})}),`
|
|
15
|
+
`,e.jsxs(n.p,{children:["In addition to the two required fields ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),", you can pass any other fields to each cart item. These additional fields will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be accessed later when retrieving order details through the ",e.jsx(n.code,{children:"useOrderDetail"})," hook."]}),`
|
|
16
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const cart = [
|
|
17
|
+
{
|
|
18
|
+
sku: "TEST001",
|
|
19
|
+
offerPricePoint: "OPP-TEST001",
|
|
20
|
+
// Any other fields are allowed
|
|
21
|
+
title: "Product Title",
|
|
22
|
+
price: 99.99,
|
|
23
|
+
image: "https://example.com/product.jpg",
|
|
24
|
+
category: "Electronics",
|
|
25
|
+
// ... more fields
|
|
26
|
+
}
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const { orderDetail } = useOrderDetail(orderCode)
|
|
30
|
+
console.log(orderDetail.metadata.products)
|
|
31
|
+
/** [
|
|
32
|
+
{
|
|
33
|
+
sku: "TEST001",
|
|
34
|
+
offerPricePoint: "OPP-TEST001",
|
|
35
|
+
title: "Product Title",
|
|
36
|
+
price: 99.99,
|
|
37
|
+
image: "https://example.com/product.jpg",
|
|
38
|
+
category: "Electronics",
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
**/
|
|
42
|
+
`})}),`
|
|
43
|
+
`,e.jsx(n.h4,{id:"oncheckoutinit",children:"onCheckoutInit"}),`
|
|
44
|
+
`,e.jsxs(n.p,{children:["Callback function when checkout initializes, triggered immediately after the ",e.jsx(n.code,{children:"CheckoutPage"})," component mounts, used to track the start of the checkout flow."]}),`
|
|
45
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onCheckoutInit?: () => void
|
|
46
|
+
`})}),`
|
|
47
|
+
`,e.jsx(n.h4,{id:"onpaymentinfocomplete",children:"onPaymentInfoComplete"}),`
|
|
48
|
+
`,e.jsx(n.p,{children:"Callback function when payment information is complete, triggered when the user completes the payment form and payment element validation passes."}),`
|
|
49
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onPaymentInfoComplete?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
50
|
+
`})}),`
|
|
51
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
52
|
+
`,e.jsxs(n.ul,{children:[`
|
|
53
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". Returns an array of cart items. See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
54
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total payment amount in cents (e.g., 9999 represents $99.99). For multiple items, this is the sum of all items"]}),`
|
|
55
|
+
`]}),`
|
|
56
|
+
`,e.jsx(n.h4,{id:"onordersubmit",children:"onOrderSubmit"}),`
|
|
57
|
+
`,e.jsx(n.p,{children:"Callback function when order is submitted, triggered after the user clicks the submit button and before order processing begins."}),`
|
|
58
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSubmit?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
59
|
+
`})}),`
|
|
60
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
61
|
+
`,e.jsxs(n.ul,{children:[`
|
|
62
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Submitted cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
63
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total amount at submission time in cents (e.g., 9999 represents $99.99)"]}),`
|
|
64
|
+
`]}),`
|
|
65
|
+
`,e.jsx(n.h4,{id:"onordersuccess",children:"onOrderSuccess"}),`
|
|
66
|
+
`,e.jsx(n.p,{children:"Callback function when order succeeds, triggered after the order is successfully created."}),`
|
|
67
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSuccess?: (orderCode: string, tradeCode?: string) => void
|
|
68
|
+
`})}),`
|
|
69
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
70
|
+
`,e.jsxs(n.ul,{children:[`
|
|
71
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"orderCode"})," - Order code"]}),`
|
|
72
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"tradeCode"})," - Trade code (optional)"]}),`
|
|
73
|
+
`]}),`
|
|
74
|
+
`,e.jsx(n.h3,{id:"usage-examples",children:"Usage Examples"}),`
|
|
75
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
const cart = [
|
|
79
|
+
{
|
|
80
|
+
sku: "TEST001",
|
|
81
|
+
offerPricePoint: "OPP-TEST001",
|
|
82
|
+
}
|
|
83
|
+
];
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
<CheckoutPage
|
|
87
|
+
cart={cart}
|
|
88
|
+
onCheckoutInit={() => {
|
|
89
|
+
console.log('Checkout initialized');
|
|
90
|
+
}}
|
|
91
|
+
onPaymentInfoComplete={(products, totalAmount) => {
|
|
92
|
+
console.log('Payment info complete');
|
|
93
|
+
console.log('Total amount:', totalAmount / 100);
|
|
94
|
+
products.forEach((product) => {
|
|
95
|
+
console.log('Product SKU:', product.sku);
|
|
96
|
+
console.log('Unit price:', product.priceInCents / 100, product.currency);
|
|
97
|
+
console.log('Quantity:', product.quantity);
|
|
98
|
+
console.log('Payment type:', product.paymentType);
|
|
99
|
+
});
|
|
100
|
+
}}
|
|
101
|
+
onOrderSubmit={(products, totalAmount) => {
|
|
102
|
+
console.log('Order submitted');
|
|
103
|
+
console.log('Total amount:', totalAmount / 100);
|
|
104
|
+
}}
|
|
105
|
+
onOrderSuccess={(orderCode, tradeCode) => {
|
|
106
|
+
console.log('Order successful', orderCode, tradeCode);
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
`})}),`
|
|
112
|
+
`,e.jsx(n.h3,{id:"key-types",children:"Key Types"}),`
|
|
113
|
+
`,e.jsx(n.h4,{id:"cartitem",children:"CartItem"}),`
|
|
114
|
+
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CartItem"})," is the basic cart item type passed to the ",e.jsx(n.code,{children:"CheckoutPage"})," component:"]}),`
|
|
115
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CartItem {
|
|
116
|
+
// Required fields
|
|
117
|
+
sku: string; // Product SKU
|
|
118
|
+
offerPricePoint: string; // Price Point ID
|
|
119
|
+
|
|
120
|
+
// Optional fields - allows any custom fields, which will be saved to order metadata
|
|
121
|
+
[key: string]: unknown;
|
|
122
|
+
}
|
|
123
|
+
`})}),`
|
|
124
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
125
|
+
`,e.jsxs(n.ul,{children:[`
|
|
126
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"sku"})," - Product SKU, required field"]}),`
|
|
127
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"offerPricePoint"})," - Price Point ID, required field"]}),`
|
|
128
|
+
`,e.jsxs(n.li,{children:["Other fields - You can pass any additional fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be retrieved through ",e.jsx(n.code,{children:"useOrderDetail"})]}),`
|
|
129
|
+
`]}),`
|
|
130
|
+
`,e.jsx(n.h4,{id:"checkoutcartitem",children:"CheckoutCartItem"}),`
|
|
131
|
+
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CheckoutCartItem"})," is the cart item type returned in callback functions, extending ",e.jsx(n.code,{children:"CartItem"})," and including price details:"]}),`
|
|
132
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CheckoutCartItem extends CartItem {
|
|
133
|
+
// Inherits all fields from CartItem (sku, offerPricePoint, etc.)
|
|
134
|
+
priceInCents: number; // Unit price in cents (e.g., 9999 represents $99.99)
|
|
135
|
+
currency: string; // Currency type (e.g., "USD", "EUR")
|
|
136
|
+
quantity: number; // Quantity
|
|
137
|
+
paymentType: "one-time" | "subscription"; // Payment type
|
|
138
|
+
}
|
|
139
|
+
`})}),`
|
|
140
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
141
|
+
`,e.jsxs(n.ul,{children:[`
|
|
142
|
+
`,e.jsxs(n.li,{children:["Inherits all fields from ",e.jsx(n.code,{children:"CartItem"})," (such as ",e.jsx(n.code,{children:"sku"}),", ",e.jsx(n.code,{children:"offerPricePoint"}),", etc.)"]}),`
|
|
143
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"priceInCents"})," - Unit price in cents"]}),`
|
|
144
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"currency"})," - Currency type"]}),`
|
|
145
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"quantity"})," - Quantity"]}),`
|
|
146
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"paymentType"})," - Payment type: ",e.jsx(n.code,{children:'"one-time"'})," for one-time payment, ",e.jsx(n.code,{children:'"subscription"'})," for subscription payment"]}),`
|
|
147
|
+
`]})]})}function T(t={}){const{wrapper:n}={...c(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{T as default};
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as c}from"./index-ChEI-nsM.js";import{M as s,C as o,a as d}from"./index-3vMs57rT.js";import{C as l,D as r}from"./CheckoutPage.stories-BRP4VrvR.js";import"./index-DRjF_FHU.js";import"./iframe-DWFwLXCc.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-BW2h13W8.js";import"./CheckoutPage-DSLcTghb.js";import"./CustomerInfo-DShSrjMR.js";import"./ValidateInput-CECRKp4c.js";import"./DeliveryAddress-DY5lFnTv.js";import"./PaymentMethods-DmV3o0ow.js";function i(t){const n={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...c(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:l,title:"Documentation/Usage Guide/CheckoutPage",name:"CheckoutPage (English)"}),`
|
|
2
|
+
`,e.jsx(n.h1,{id:"checkoutpage",children:"CheckoutPage"}),`
|
|
3
|
+
`,e.jsx(n.p,{children:"A complete checkout page component that integrates customer information, delivery address, payment methods, and order submission functionality."}),`
|
|
4
|
+
`,e.jsx(n.h3,{id:"basic-usage",children:"Basic Usage"}),`
|
|
5
|
+
`,e.jsx(o,{of:r}),`
|
|
6
|
+
`,e.jsx(n.h3,{id:"props",children:"Props"}),`
|
|
7
|
+
`,e.jsx(d,{of:r}),`
|
|
8
|
+
`,e.jsx(n.h4,{id:"cart",children:"cart"}),`
|
|
9
|
+
`,e.jsx(n.p,{children:"Array of cart items. Each item represents a product in the checkout."}),`
|
|
10
|
+
`,e.jsxs(n.p,{children:["Type: ",e.jsx(n.code,{children:"CartItem[]"}),". See ",e.jsx(n.a,{href:"#cartitem",children:"CartItem Type Definition"})," for details."]}),`
|
|
11
|
+
`,e.jsx(n.p,{children:"Each cart item contains the following fields:"}),`
|
|
12
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Required Fields:"})}),`
|
|
13
|
+
`,e.jsxs("table",{children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Field"}),e.jsx("th",{children:"Type"}),e.jsx("th",{children:"Required"}),e.jsx("th",{children:"Description"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"sku"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Product SKU"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"offerPricePoint"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Price Point ID"})]})]})]}),`
|
|
14
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Optional Fields:"})}),`
|
|
15
|
+
`,e.jsxs(n.p,{children:["In addition to the two required fields ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),", you can pass any other fields to each cart item. These additional fields will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be accessed later when retrieving order details through the ",e.jsx(n.code,{children:"useOrderDetail"})," hook."]}),`
|
|
16
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const cart = [
|
|
17
|
+
{
|
|
18
|
+
sku: "TEST001",
|
|
19
|
+
offerPricePoint: "OPP-TEST001",
|
|
20
|
+
// Any other fields are allowed
|
|
21
|
+
title: "Product Title",
|
|
22
|
+
price: 99.99,
|
|
23
|
+
image: "https://example.com/product.jpg",
|
|
24
|
+
category: "Electronics",
|
|
25
|
+
// ... more fields
|
|
26
|
+
}
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const { orderDetail } = useOrderDetail(orderCode)
|
|
30
|
+
console.log(orderDetail.metadata.products)
|
|
31
|
+
/** [
|
|
32
|
+
{
|
|
33
|
+
sku: "TEST001",
|
|
34
|
+
offerPricePoint: "OPP-TEST001",
|
|
35
|
+
title: "Product Title",
|
|
36
|
+
price: 99.99,
|
|
37
|
+
image: "https://example.com/product.jpg",
|
|
38
|
+
category: "Electronics",
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
**/
|
|
42
|
+
`})}),`
|
|
43
|
+
`,e.jsx(n.h4,{id:"oncheckoutinit",children:"onCheckoutInit"}),`
|
|
44
|
+
`,e.jsxs(n.p,{children:["Callback function when checkout initializes, triggered immediately after the ",e.jsx(n.code,{children:"CheckoutPage"})," component mounts, used to track the start of the checkout flow."]}),`
|
|
45
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onCheckoutInit?: () => void
|
|
46
|
+
`})}),`
|
|
47
|
+
`,e.jsx(n.h4,{id:"onpaymentinfocomplete",children:"onPaymentInfoComplete"}),`
|
|
48
|
+
`,e.jsx(n.p,{children:"Callback function when payment information is complete, triggered when the user completes the payment form and payment element validation passes."}),`
|
|
49
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onPaymentInfoComplete?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
50
|
+
`})}),`
|
|
51
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
52
|
+
`,e.jsxs(n.ul,{children:[`
|
|
53
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". Returns an array of cart items. See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
54
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total payment amount in cents (e.g., 9999 represents $99.99). For multiple items, this is the sum of all items"]}),`
|
|
55
|
+
`]}),`
|
|
56
|
+
`,e.jsx(n.h4,{id:"onordersubmit",children:"onOrderSubmit"}),`
|
|
57
|
+
`,e.jsx(n.p,{children:"Callback function when order is submitted, triggered after the user clicks the submit button and before order processing begins."}),`
|
|
58
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSubmit?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
59
|
+
`})}),`
|
|
60
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
61
|
+
`,e.jsxs(n.ul,{children:[`
|
|
62
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Submitted cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
63
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total amount at submission time in cents (e.g., 9999 represents $99.99)"]}),`
|
|
64
|
+
`]}),`
|
|
65
|
+
`,e.jsx(n.h4,{id:"onordersuccess",children:"onOrderSuccess"}),`
|
|
66
|
+
`,e.jsx(n.p,{children:"Callback function when order succeeds, triggered after the order is successfully created."}),`
|
|
67
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSuccess?: (orderCode: string, tradeCode?: string) => void
|
|
68
|
+
`})}),`
|
|
69
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
70
|
+
`,e.jsxs(n.ul,{children:[`
|
|
71
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"orderCode"})," - Order code"]}),`
|
|
72
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"tradeCode"})," - Trade code (optional)"]}),`
|
|
73
|
+
`]}),`
|
|
74
|
+
`,e.jsx(n.h3,{id:"usage-examples",children:"Usage Examples"}),`
|
|
75
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
const cart = [
|
|
79
|
+
{
|
|
80
|
+
sku: "TEST001",
|
|
81
|
+
offerPricePoint: "OPP-TEST001",
|
|
82
|
+
}
|
|
83
|
+
];
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
<CheckoutPage
|
|
87
|
+
cart={cart}
|
|
88
|
+
onCheckoutInit={() => {
|
|
89
|
+
console.log('Checkout initialized');
|
|
90
|
+
}}
|
|
91
|
+
onPaymentInfoComplete={(products, totalAmount) => {
|
|
92
|
+
console.log('Payment info complete');
|
|
93
|
+
console.log('Total amount:', totalAmount / 100);
|
|
94
|
+
products.forEach((product) => {
|
|
95
|
+
console.log('Product SKU:', product.sku);
|
|
96
|
+
console.log('Unit price:', product.priceInCents / 100, product.currency);
|
|
97
|
+
console.log('Quantity:', product.quantity);
|
|
98
|
+
console.log('Payment type:', product.paymentType);
|
|
99
|
+
});
|
|
100
|
+
}}
|
|
101
|
+
onOrderSubmit={(products, totalAmount) => {
|
|
102
|
+
console.log('Order submitted');
|
|
103
|
+
console.log('Total amount:', totalAmount / 100);
|
|
104
|
+
}}
|
|
105
|
+
onOrderSuccess={(orderCode, tradeCode) => {
|
|
106
|
+
console.log('Order successful', orderCode, tradeCode);
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
`})}),`
|
|
112
|
+
`,e.jsx(n.h3,{id:"key-types",children:"Key Types"}),`
|
|
113
|
+
`,e.jsx(n.h4,{id:"cartitem",children:"CartItem"}),`
|
|
114
|
+
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CartItem"})," is the basic cart item type passed to the ",e.jsx(n.code,{children:"CheckoutPage"})," component:"]}),`
|
|
115
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CartItem {
|
|
116
|
+
// Required fields
|
|
117
|
+
sku: string; // Product SKU
|
|
118
|
+
offerPricePoint: string; // Price Point ID
|
|
119
|
+
|
|
120
|
+
// Optional fields - allows any custom fields, which will be saved to order metadata
|
|
121
|
+
[key: string]: unknown;
|
|
122
|
+
}
|
|
123
|
+
`})}),`
|
|
124
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
125
|
+
`,e.jsxs(n.ul,{children:[`
|
|
126
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"sku"})," - Product SKU, required field"]}),`
|
|
127
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"offerPricePoint"})," - Price Point ID, required field"]}),`
|
|
128
|
+
`,e.jsxs(n.li,{children:["Other fields - You can pass any additional fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be retrieved through ",e.jsx(n.code,{children:"useOrderDetail"})]}),`
|
|
129
|
+
`]}),`
|
|
130
|
+
`,e.jsx(n.h4,{id:"checkoutcartitem",children:"CheckoutCartItem"}),`
|
|
131
|
+
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CheckoutCartItem"})," is the cart item type returned in callback functions, extending ",e.jsx(n.code,{children:"CartItem"})," and including price details:"]}),`
|
|
132
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CheckoutCartItem extends CartItem {
|
|
133
|
+
// Inherits all fields from CartItem (sku, offerPricePoint, etc.)
|
|
134
|
+
priceInCents: number; // Unit price in cents (e.g., 9999 represents $99.99)
|
|
135
|
+
currency: string; // Currency type (e.g., "USD", "EUR")
|
|
136
|
+
quantity: number; // Quantity
|
|
137
|
+
paymentType: "one-time" | "subscription"; // Payment type
|
|
138
|
+
}
|
|
139
|
+
`})}),`
|
|
140
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
141
|
+
`,e.jsxs(n.ul,{children:[`
|
|
142
|
+
`,e.jsxs(n.li,{children:["Inherits all fields from ",e.jsx(n.code,{children:"CartItem"})," (such as ",e.jsx(n.code,{children:"sku"}),", ",e.jsx(n.code,{children:"offerPricePoint"}),", etc.)"]}),`
|
|
143
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"priceInCents"})," - Unit price in cents"]}),`
|
|
144
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"currency"})," - Currency type"]}),`
|
|
145
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"quantity"})," - Quantity"]}),`
|
|
146
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"paymentType"})," - Payment type: ",e.jsx(n.code,{children:'"one-time"'})," for one-time payment, ",e.jsx(n.code,{children:'"subscription"'})," for subscription payment"]}),`
|
|
147
|
+
`]})]})}function T(t={}){const{wrapper:n}={...c(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{T as default};
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as c}from"./index-ChEI-nsM.js";import{M as s,C as o,a as d}from"./index-BlPVJQpb.js";import{C as l,D as r}from"./CheckoutPage.stories-BahbUp4O.js";import"./index-DRjF_FHU.js";import"./iframe-CueR_wS4.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-BXtGY5u3.js";import"./CheckoutPage-d8MZfjpI.js";import"./CustomerInfo-BwyY9803.js";import"./ValidateInput-LNzX4jJP.js";import"./DeliveryAddress-QAGxLlLf.js";import"./PaymentMethods-afz1CTO5.js";function i(t){const n={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...c(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:l,title:"Documentation/Usage Guide/CheckoutPage",name:"CheckoutPage (English)"}),`
|
|
2
|
+
`,e.jsx(n.h1,{id:"checkoutpage",children:"CheckoutPage"}),`
|
|
3
|
+
`,e.jsx(n.p,{children:"A complete checkout page component that integrates customer information, delivery address, payment methods, and order submission functionality."}),`
|
|
4
|
+
`,e.jsx(n.h3,{id:"basic-usage",children:"Basic Usage"}),`
|
|
5
|
+
`,e.jsx(o,{of:r}),`
|
|
6
|
+
`,e.jsx(n.h3,{id:"props",children:"Props"}),`
|
|
7
|
+
`,e.jsx(d,{of:r}),`
|
|
8
|
+
`,e.jsx(n.h4,{id:"cart",children:"cart"}),`
|
|
9
|
+
`,e.jsx(n.p,{children:"Array of cart items. Each item represents a product in the checkout."}),`
|
|
10
|
+
`,e.jsxs(n.p,{children:["Type: ",e.jsx(n.code,{children:"CartItem[]"}),". See ",e.jsx(n.a,{href:"#cartitem",children:"CartItem Type Definition"})," for details."]}),`
|
|
11
|
+
`,e.jsx(n.p,{children:"Each cart item contains the following fields:"}),`
|
|
12
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Required Fields:"})}),`
|
|
13
|
+
`,e.jsxs("table",{children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Field"}),e.jsx("th",{children:"Type"}),e.jsx("th",{children:"Required"}),e.jsx("th",{children:"Description"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"sku"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Product SKU"})]}),e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx("code",{children:"offerPricePoint"})}),e.jsx("td",{children:e.jsx("code",{children:"string"})}),e.jsx("td",{children:"✅"}),e.jsx("td",{children:"Price Point ID"})]})]})]}),`
|
|
14
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Optional Fields:"})}),`
|
|
15
|
+
`,e.jsxs(n.p,{children:["In addition to the two required fields ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),", you can pass any other fields to each cart item. These additional fields will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be accessed later when retrieving order details through the ",e.jsx(n.code,{children:"useOrderDetail"})," hook."]}),`
|
|
16
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const cart = [
|
|
17
|
+
{
|
|
18
|
+
sku: "TEST001",
|
|
19
|
+
offerPricePoint: "OPP-TEST001",
|
|
20
|
+
// Any other fields are allowed
|
|
21
|
+
title: "Product Title",
|
|
22
|
+
price: 99.99,
|
|
23
|
+
image: "https://example.com/product.jpg",
|
|
24
|
+
category: "Electronics",
|
|
25
|
+
// ... more fields
|
|
26
|
+
}
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const { orderDetail } = useOrderDetail(orderCode)
|
|
30
|
+
console.log(orderDetail.metadata.products)
|
|
31
|
+
/** [
|
|
32
|
+
{
|
|
33
|
+
sku: "TEST001",
|
|
34
|
+
offerPricePoint: "OPP-TEST001",
|
|
35
|
+
title: "Product Title",
|
|
36
|
+
price: 99.99,
|
|
37
|
+
image: "https://example.com/product.jpg",
|
|
38
|
+
category: "Electronics",
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
**/
|
|
42
|
+
`})}),`
|
|
43
|
+
`,e.jsx(n.h4,{id:"oncheckoutinit",children:"onCheckoutInit"}),`
|
|
44
|
+
`,e.jsxs(n.p,{children:["Callback function when checkout initializes, triggered immediately after the ",e.jsx(n.code,{children:"CheckoutPage"})," component mounts, used to track the start of the checkout flow."]}),`
|
|
45
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onCheckoutInit?: () => void
|
|
46
|
+
`})}),`
|
|
47
|
+
`,e.jsx(n.h4,{id:"onpaymentinfocomplete",children:"onPaymentInfoComplete"}),`
|
|
48
|
+
`,e.jsx(n.p,{children:"Callback function when payment information is complete, triggered when the user completes the payment form and payment element validation passes."}),`
|
|
49
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onPaymentInfoComplete?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
50
|
+
`})}),`
|
|
51
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
52
|
+
`,e.jsxs(n.ul,{children:[`
|
|
53
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". Returns an array of cart items. See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
54
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total payment amount in cents (e.g., 9999 represents $99.99). For multiple items, this is the sum of all items"]}),`
|
|
55
|
+
`]}),`
|
|
56
|
+
`,e.jsx(n.h4,{id:"onordersubmit",children:"onOrderSubmit"}),`
|
|
57
|
+
`,e.jsx(n.p,{children:"Callback function when order is submitted, triggered after the user clicks the submit button and before order processing begins."}),`
|
|
58
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSubmit?: (products: CheckoutCartItem[], totalAmount: number) => void
|
|
59
|
+
`})}),`
|
|
60
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
61
|
+
`,e.jsxs(n.ul,{children:[`
|
|
62
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"products"})," - Submitted cart items array, type ",e.jsx(n.code,{children:"CheckoutCartItem[]"}),". See ",e.jsx(n.a,{href:"#checkoutcartitem",children:"CheckoutCartItem Type Definition"})," for details"]}),`
|
|
63
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"totalAmount"})," - Total amount at submission time in cents (e.g., 9999 represents $99.99)"]}),`
|
|
64
|
+
`]}),`
|
|
65
|
+
`,e.jsx(n.h4,{id:"onordersuccess",children:"onOrderSuccess"}),`
|
|
66
|
+
`,e.jsx(n.p,{children:"Callback function when order succeeds, triggered after the order is successfully created."}),`
|
|
67
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`onOrderSuccess?: (orderCode: string, tradeCode?: string) => void
|
|
68
|
+
`})}),`
|
|
69
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Parameter Description:"})}),`
|
|
70
|
+
`,e.jsxs(n.ul,{children:[`
|
|
71
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"orderCode"})," - Order code"]}),`
|
|
72
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"tradeCode"})," - Trade code (optional)"]}),`
|
|
73
|
+
`]}),`
|
|
74
|
+
`,e.jsx(n.h3,{id:"usage-examples",children:"Usage Examples"}),`
|
|
75
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { CheckoutPage } from '@clickaroo/checkout-ui';
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
const cart = [
|
|
79
|
+
{
|
|
80
|
+
sku: "TEST001",
|
|
81
|
+
offerPricePoint: "OPP-TEST001",
|
|
82
|
+
}
|
|
83
|
+
];
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
<CheckoutPage
|
|
87
|
+
cart={cart}
|
|
88
|
+
onCheckoutInit={() => {
|
|
89
|
+
console.log('Checkout initialized');
|
|
90
|
+
}}
|
|
91
|
+
onPaymentInfoComplete={(products, totalAmount) => {
|
|
92
|
+
console.log('Payment info complete');
|
|
93
|
+
console.log('Total amount:', totalAmount / 100);
|
|
94
|
+
products.forEach((product) => {
|
|
95
|
+
console.log('Product SKU:', product.sku);
|
|
96
|
+
console.log('Unit price:', product.priceInCents / 100, product.currency);
|
|
97
|
+
console.log('Quantity:', product.quantity);
|
|
98
|
+
console.log('Payment type:', product.paymentType);
|
|
99
|
+
});
|
|
100
|
+
}}
|
|
101
|
+
onOrderSubmit={(products, totalAmount) => {
|
|
102
|
+
console.log('Order submitted');
|
|
103
|
+
console.log('Total amount:', totalAmount / 100);
|
|
104
|
+
}}
|
|
105
|
+
onOrderSuccess={(orderCode, tradeCode) => {
|
|
106
|
+
console.log('Order successful', orderCode, tradeCode);
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
`})}),`
|
|
112
|
+
`,e.jsx(n.h3,{id:"key-types",children:"Key Types"}),`
|
|
113
|
+
`,e.jsx(n.h4,{id:"cartitem",children:"CartItem"}),`
|
|
114
|
+
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CartItem"})," is the basic cart item type passed to the ",e.jsx(n.code,{children:"CheckoutPage"})," component:"]}),`
|
|
115
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CartItem {
|
|
116
|
+
// Required fields
|
|
117
|
+
sku: string; // Product SKU
|
|
118
|
+
offerPricePoint: string; // Price Point ID
|
|
119
|
+
|
|
120
|
+
// Optional fields - allows any custom fields, which will be saved to order metadata
|
|
121
|
+
[key: string]: unknown;
|
|
122
|
+
}
|
|
123
|
+
`})}),`
|
|
124
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
125
|
+
`,e.jsxs(n.ul,{children:[`
|
|
126
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"sku"})," - Product SKU, required field"]}),`
|
|
127
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"offerPricePoint"})," - Price Point ID, required field"]}),`
|
|
128
|
+
`,e.jsxs(n.li,{children:["Other fields - You can pass any additional fields (such as ",e.jsx(n.code,{children:"title"}),", ",e.jsx(n.code,{children:"price"}),", ",e.jsx(n.code,{children:"image"}),", etc.), which will be saved to the order's ",e.jsx(n.code,{children:"metadata"})," and can be retrieved through ",e.jsx(n.code,{children:"useOrderDetail"})]}),`
|
|
129
|
+
`]}),`
|
|
130
|
+
`,e.jsx(n.h4,{id:"checkoutcartitem",children:"CheckoutCartItem"}),`
|
|
131
|
+
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"CheckoutCartItem"})," is the cart item type returned in callback functions, extending ",e.jsx(n.code,{children:"CartItem"})," and including price details:"]}),`
|
|
132
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CheckoutCartItem extends CartItem {
|
|
133
|
+
// Inherits all fields from CartItem (sku, offerPricePoint, etc.)
|
|
134
|
+
priceInCents: number; // Unit price in cents (e.g., 9999 represents $99.99)
|
|
135
|
+
currency: string; // Currency type (e.g., "USD", "EUR")
|
|
136
|
+
quantity: number; // Quantity
|
|
137
|
+
paymentType: "one-time" | "subscription"; // Payment type
|
|
138
|
+
}
|
|
139
|
+
`})}),`
|
|
140
|
+
`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Field Description:"})}),`
|
|
141
|
+
`,e.jsxs(n.ul,{children:[`
|
|
142
|
+
`,e.jsxs(n.li,{children:["Inherits all fields from ",e.jsx(n.code,{children:"CartItem"})," (such as ",e.jsx(n.code,{children:"sku"}),", ",e.jsx(n.code,{children:"offerPricePoint"}),", etc.)"]}),`
|
|
143
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"priceInCents"})," - Unit price in cents"]}),`
|
|
144
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"currency"})," - Currency type"]}),`
|
|
145
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"quantity"})," - Quantity"]}),`
|
|
146
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"paymentType"})," - Payment type: ",e.jsx(n.code,{children:'"one-time"'})," for one-time payment, ",e.jsx(n.code,{children:'"subscription"'})," for subscription payment"]}),`
|
|
147
|
+
`]})]})}function T(t={}){const{wrapper:n}={...c(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{T as default};
|