@liquidcommerce/elements-sdk 2.6.0-beta.12 → 2.6.0-beta.121

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.
Files changed (294) hide show
  1. package/README.md +100 -2518
  2. package/dist/index.checkout.esm.js +20445 -0
  3. package/dist/index.esm.js +28574 -20597
  4. package/dist/ssr-stub.checkout.esm.js +17 -0
  5. package/dist/ssr-stub.esm.js +277 -0
  6. package/dist/types/auto-initialize/checkout.d.ts +2 -0
  7. package/dist/types/auto-initialize/shared-utils.d.ts +51 -0
  8. package/dist/types/{elements-base-client.d.ts → clients/base.d.ts} +16 -2
  9. package/dist/types/clients/builder.d.ts +3 -0
  10. package/dist/types/clients/checkout.d.ts +6 -0
  11. package/dist/types/clients/helpers.d.ts +8 -0
  12. package/dist/types/clients/main.d.ts +3 -0
  13. package/dist/types/constants/core.constant.d.ts +13 -18
  14. package/dist/types/constants/index.d.ts +1 -0
  15. package/dist/types/constants/prop65.constant.d.ts +8 -0
  16. package/dist/types/core/a11y/announcer.service.d.ts +16 -0
  17. package/dist/types/core/a11y/focus-manager.service.d.ts +21 -0
  18. package/dist/types/core/a11y/focusable.d.ts +5 -0
  19. package/dist/types/core/a11y/glyph-button.d.ts +8 -0
  20. package/dist/types/core/a11y/index.d.ts +6 -0
  21. package/dist/types/core/a11y/required.d.ts +1 -0
  22. package/dist/types/core/a11y/single-select.d.ts +20 -0
  23. package/dist/types/core/api/api-client.service.d.ts +23 -18
  24. package/dist/types/core/api/api-result.d.ts +19 -0
  25. package/dist/types/core/api/auth-client.service.d.ts +37 -13
  26. package/dist/types/core/api/http-client.service.d.ts +0 -8
  27. package/dist/types/core/base-component.service.d.ts +4 -1
  28. package/dist/types/core/client/actions/base-action.service.d.ts +22 -0
  29. package/dist/types/core/client/actions/client-address-action.service.d.ts +18 -0
  30. package/dist/types/core/client/actions/client-cart-action.service.d.ts +38 -0
  31. package/dist/types/core/client/actions/client-checkout-action.service.d.ts +75 -0
  32. package/dist/types/core/client/actions/client-product-action.service.d.ts +15 -0
  33. package/dist/types/core/client/client-action.service.d.ts +6 -74
  34. package/dist/types/core/client/client-config.service.d.ts +10 -5
  35. package/dist/types/core/debug-panel/debug-panel.styles.d.ts +1 -1
  36. package/dist/types/core/google-tag-manager.service.d.ts +10 -1
  37. package/dist/types/core/logger/logger.service.d.ts +1 -1
  38. package/dist/types/core/pubsub/interfaces/address.interface.d.ts +3 -0
  39. package/dist/types/core/pubsub/interfaces/cart.interface.d.ts +6 -1
  40. package/dist/types/core/pubsub/interfaces/checkout.interface.d.ts +45 -49
  41. package/dist/types/core/pubsub/interfaces/core.interface.d.ts +15 -7
  42. package/dist/types/core/pubsub/pubsub.service.d.ts +1 -2
  43. package/dist/types/core/singleton-manager.service.d.ts +12 -8
  44. package/dist/types/core/store/interfaces/cart.interface.d.ts +2 -3
  45. package/dist/types/core/store/interfaces/checkout.interface.d.ts +36 -107
  46. package/dist/types/core/store/interfaces/core.interface.d.ts +12 -2
  47. package/dist/types/core/store/interfaces/metadata.interface.d.ts +11 -0
  48. package/dist/types/core/store/interfaces/product-list.interface.d.ts +30 -0
  49. package/dist/types/core/store/interfaces/product.interface.d.ts +1 -0
  50. package/dist/types/core/store/store.constant.d.ts +5 -0
  51. package/dist/types/core/store/store.service.d.ts +1 -0
  52. package/dist/types/core/telemetry/telemetry.service.d.ts +1 -0
  53. package/dist/types/enums/core.enum.d.ts +47 -2
  54. package/dist/types/enums/index.d.ts +0 -1
  55. package/dist/types/index.checkout.d.ts +9 -0
  56. package/dist/types/index.checkout.umd.d.ts +4 -0
  57. package/dist/types/index.d.ts +8 -3
  58. package/dist/types/interfaces/api/cart.interface.d.ts +12 -7
  59. package/dist/types/interfaces/api/checkout.interface.d.ts +271 -0
  60. package/dist/types/interfaces/api/index.d.ts +5 -0
  61. package/dist/types/interfaces/api/product-list.interface.d.ts +15 -6
  62. package/dist/types/interfaces/api/product.interface.d.ts +10 -4
  63. package/dist/types/interfaces/client.interface.d.ts +74 -0
  64. package/dist/types/interfaces/component.interface.d.ts +7 -0
  65. package/dist/types/interfaces/config.interface.d.ts +44 -0
  66. package/dist/types/interfaces/configs/address.interface.d.ts +1 -1
  67. package/dist/types/interfaces/configs/cart.interface.d.ts +2 -1
  68. package/dist/types/interfaces/configs/checkout.interface.d.ts +3 -1
  69. package/dist/types/interfaces/configs/global.interface.d.ts +9 -3
  70. package/dist/types/interfaces/configs/index.d.ts +1 -0
  71. package/dist/types/interfaces/configs/product-list.interface.d.ts +49 -0
  72. package/dist/types/interfaces/configs/product.interface.d.ts +7 -1
  73. package/dist/types/interfaces/injection.interface.d.ts +56 -0
  74. package/dist/types/modules/address/address-display.component.d.ts +3 -1
  75. package/dist/types/modules/address/address-input.component.d.ts +10 -1
  76. package/dist/types/modules/address/address.command.d.ts +2 -1
  77. package/dist/types/modules/address/styles/register-styles.d.ts +1 -0
  78. package/dist/types/modules/cart/cart.commands.d.ts +9 -5
  79. package/dist/types/modules/cart/components/cart-body.component.d.ts +1 -0
  80. package/dist/types/modules/cart/components/cart-fulfillment.component.d.ts +1 -1
  81. package/dist/types/modules/cart/components/cart-item-quantity-price.component.d.ts +5 -0
  82. package/dist/types/modules/cart/components/cart-item.component.d.ts +6 -0
  83. package/dist/types/modules/cart/styles/register-styles.d.ts +1 -0
  84. package/dist/types/modules/checkout/checkout.commands.d.ts +95 -12
  85. package/dist/types/modules/checkout/checkout.component.d.ts +7 -1
  86. package/dist/types/modules/checkout/components/checkout-billing.component.d.ts +5 -2
  87. package/dist/types/modules/checkout/components/checkout-buyer.component.d.ts +1 -0
  88. package/dist/types/modules/checkout/components/checkout-completed.component.d.ts +5 -0
  89. package/dist/types/modules/checkout/components/checkout-deliver-to.component.d.ts +1 -0
  90. package/dist/types/modules/checkout/components/checkout-delivery-method.component.d.ts +22 -0
  91. package/dist/types/modules/checkout/components/checkout-express-checkout.component.d.ts +61 -0
  92. package/dist/types/modules/checkout/components/checkout-express-completion.component.d.ts +21 -0
  93. package/dist/types/modules/checkout/components/checkout-header.component.d.ts +1 -0
  94. package/dist/types/modules/checkout/components/checkout-item-quantity.component.d.ts +4 -0
  95. package/dist/types/modules/checkout/components/checkout-items.component.d.ts +4 -3
  96. package/dist/types/modules/checkout/components/checkout-order-summary.component.d.ts +3 -0
  97. package/dist/types/modules/checkout/components/checkout-payment.component.d.ts +6 -1
  98. package/dist/types/modules/checkout/components/checkout-place-order-button.component.d.ts +1 -5
  99. package/dist/types/modules/checkout/components/checkout-presale-countdown.component.d.ts +15 -1
  100. package/dist/types/modules/checkout/components/checkout-presale-expired.component.d.ts +7 -1
  101. package/dist/types/modules/checkout/components/checkout-prop65-warning.component.d.ts +8 -0
  102. package/dist/types/modules/checkout/components/checkout-send-as-gift.component.d.ts +3 -0
  103. package/dist/types/modules/checkout/components/checkout-stripe-form.component.d.ts +7 -2
  104. package/dist/types/modules/checkout/components/checkout-tips.component.d.ts +4 -2
  105. package/dist/types/modules/checkout/components/index.d.ts +4 -0
  106. package/dist/types/modules/checkout/components/promo-pc-gc.component.d.ts +0 -2
  107. package/dist/types/modules/checkout/components/required-fields-legend.d.ts +1 -0
  108. package/dist/types/modules/checkout/constant.d.ts +15 -0
  109. package/dist/types/modules/checkout/customer-prefill.d.ts +5 -0
  110. package/dist/types/modules/checkout/express-wallet.d.ts +12 -0
  111. package/dist/types/modules/checkout/payment-session-error.d.ts +4 -0
  112. package/dist/types/modules/checkout/styles/delivery-method.style.d.ts +1 -0
  113. package/dist/types/modules/checkout/styles/express-checkout.style.d.ts +1 -0
  114. package/dist/types/modules/checkout/styles/express-completion.style.d.ts +1 -0
  115. package/dist/types/modules/checkout/styles/register-styles.d.ts +1 -0
  116. package/dist/types/modules/product/components/components.d.ts +26 -2
  117. package/dist/types/modules/product/components/index.d.ts +1 -0
  118. package/dist/types/modules/product/components/product-add-to-cart-section.component.d.ts +8 -1
  119. package/dist/types/modules/product/components/product-delivery-estimate.component.d.ts +11 -0
  120. package/dist/types/modules/product/components/product-description.component.d.ts +1 -0
  121. package/dist/types/modules/product/components/product-drawer.component.d.ts +6 -0
  122. package/dist/types/modules/product/components/product-image-carousel.component.d.ts +5 -0
  123. package/dist/types/modules/product/components/product-options.component.d.ts +2 -1
  124. package/dist/types/modules/product/components/product-prop65-warning.d.ts +1 -0
  125. package/dist/types/modules/product/components/product-retailers-carousel.component.d.ts +6 -0
  126. package/dist/types/modules/product/components/product-retailers-popup-list.component.d.ts +12 -2
  127. package/dist/types/modules/product/components/product-retailers-popup.component.d.ts +1 -0
  128. package/dist/types/modules/product/components/product-retailers.component.d.ts +1 -0
  129. package/dist/types/modules/product/product.commands.d.ts +5 -5
  130. package/dist/types/modules/product/product.component.d.ts +3 -0
  131. package/dist/types/modules/product/styles/prop65-warning.style.d.ts +1 -0
  132. package/dist/types/modules/product/styles/register-styles.d.ts +1 -0
  133. package/dist/types/modules/product-list/components/card-components/index.d.ts +6 -0
  134. package/dist/types/modules/product-list/components/card-components/product-badge.d.ts +9 -0
  135. package/dist/types/modules/product-list/components/card-components/product-button.d.ts +11 -0
  136. package/dist/types/modules/product-list/components/card-components/product-fulfillment-text.d.ts +2 -0
  137. package/dist/types/modules/product-list/components/card-components/product-price-and-personalization.d.ts +14 -0
  138. package/dist/types/modules/product-list/components/card-components/product-quantity-selector.d.ts +11 -0
  139. package/dist/types/modules/product-list/components/card-components/product-sizes-list.d.ts +14 -0
  140. package/dist/types/modules/product-list/components/filter-components/index.d.ts +7 -0
  141. package/dist/types/modules/product-list/components/filter-components/product-list-apply-filter-button.d.ts +1 -0
  142. package/dist/types/modules/product-list/components/{product-list-filters-subcomponents/product-list-checkbox-filter.components.d.ts → filter-components/product-list-checkbox-filter.d.ts} +1 -0
  143. package/dist/types/modules/product-list/components/filter-components/product-list-chip.d.ts +5 -0
  144. package/dist/types/modules/product-list/components/filter-components/product-list-filters-chips.d.ts +13 -0
  145. package/dist/types/modules/product-list/components/filter-components/product-list-fulfillment-filter.d.ts +15 -0
  146. package/dist/types/modules/product-list/components/{product-list-filters-subcomponents/product-list-price-filter.components.d.ts → filter-components/product-list-price-filter.d.ts} +2 -1
  147. package/dist/types/modules/product-list/components/filter-components/product-list-toggle-filters.d.ts +7 -0
  148. package/dist/types/modules/product-list/components/index.d.ts +6 -2
  149. package/dist/types/modules/product-list/components/product-list-card-loading.component.d.ts +3 -1
  150. package/dist/types/modules/product-list/components/product-list-card.component.d.ts +39 -31
  151. package/dist/types/modules/product-list/components/product-list-engraving.component.d.ts +12 -0
  152. package/dist/types/modules/product-list/components/product-list-filters.component.d.ts +58 -36
  153. package/dist/types/modules/product-list/components/product-list-product-engraving-lines.component.d.ts +22 -0
  154. package/dist/types/modules/product-list/components/product-list-product-pre-cart.component.d.ts +54 -0
  155. package/dist/types/modules/product-list/components/product-list-search.component.d.ts +25 -0
  156. package/dist/types/modules/product-list/product-list-filter.registry.d.ts +42 -0
  157. package/dist/types/modules/product-list/product-list-filter.utils.d.ts +7 -0
  158. package/dist/types/modules/product-list/product-list-order.utils.d.ts +3 -0
  159. package/dist/types/modules/product-list/product-list-query-params.utils.d.ts +3 -0
  160. package/dist/types/modules/product-list/product-list.commands.d.ts +22 -7
  161. package/dist/types/modules/product-list/product-list.component.d.ts +23 -47
  162. package/dist/types/modules/product-list/product-list.constants.d.ts +38 -0
  163. package/dist/types/modules/product-list/product-list.interface.d.ts +17 -28
  164. package/dist/types/modules/product-list/styles/product-list-card.style.d.ts +1 -0
  165. package/dist/types/modules/product-list/styles/product-list-filters.style.d.ts +1 -0
  166. package/dist/types/modules/product-list/styles/register-styles.d.ts +1 -0
  167. package/dist/types/modules/theme-provider/constants/component-groupings.d.ts +1 -0
  168. package/dist/types/modules/theme-provider/constants/css-variable-mappings.d.ts +1 -1
  169. package/dist/types/modules/theme-provider/services/style-registry.service.d.ts +16 -0
  170. package/dist/types/modules/theme-provider/services/stylesheet-generator.service.d.ts +0 -1
  171. package/dist/types/modules/theme-provider/styles/register-styles.d.ts +1 -0
  172. package/dist/types/modules/theme-provider/theme-provider.service.d.ts +2 -2
  173. package/dist/types/modules/ui-components/alert/alert.component.d.ts +10 -10
  174. package/dist/types/modules/ui-components/buttons/buttons-open-cart.component.d.ts +5 -0
  175. package/dist/types/modules/ui-components/drawer/drawer.component.d.ts +15 -0
  176. package/dist/types/modules/ui-components/engraving/engraving-form.component.d.ts +9 -1
  177. package/dist/types/modules/ui-components/engraving/engraving-view.component.d.ts +7 -1
  178. package/dist/types/modules/ui-components/input/index.d.ts +0 -1
  179. package/dist/types/modules/ui-components/input/input.component.d.ts +15 -2
  180. package/dist/types/modules/ui-components/lce-element/lce-element.component.d.ts +2 -1
  181. package/dist/types/modules/ui-components/promo-code-ticker/promo-code-ticker.component.d.ts +1 -1
  182. package/dist/types/modules/ui-components/ui.commands.d.ts +7 -1
  183. package/dist/types/ssr/stub.checkout.d.ts +6 -0
  184. package/dist/types/ssr/stub.d.ts +10 -0
  185. package/dist/types/static/icon/arrow-right.icon.d.ts +1 -1
  186. package/dist/types/static/icon/bag.icon.d.ts +1 -1
  187. package/dist/types/static/icon/check.icon.d.ts +2 -0
  188. package/dist/types/static/icon/checkbox.icon.d.ts +1 -1
  189. package/dist/types/static/icon/chevron-down.icon.d.ts +1 -1
  190. package/dist/types/static/icon/chevron-left.icon.d.ts +1 -1
  191. package/dist/types/static/icon/chevron-up.icon.d.ts +1 -1
  192. package/dist/types/static/icon/close.icon.d.ts +1 -1
  193. package/dist/types/static/icon/error-info.icon.d.ts +1 -1
  194. package/dist/types/static/icon/filter.icon.d.ts +1 -1
  195. package/dist/types/static/icon/icon.a11y.d.ts +1 -0
  196. package/dist/types/static/icon/icon.types.d.ts +1 -0
  197. package/dist/types/static/icon/index.d.ts +2 -0
  198. package/dist/types/static/icon/info.icon.d.ts +1 -1
  199. package/dist/types/static/icon/loading-spinner.icon.d.ts +1 -1
  200. package/dist/types/static/icon/search.icon.d.ts +1 -1
  201. package/dist/types/static/icon/success.icon.d.ts +1 -1
  202. package/dist/types/static/icon/trash.icon.d.ts +1 -1
  203. package/dist/types/static/icon/warning.icon.d.ts +1 -1
  204. package/dist/types/utils/dom-compat.d.ts +2 -0
  205. package/dist/types/utils/format.d.ts +9 -14
  206. package/dist/types/utils/image-bg-removal.d.ts +3 -0
  207. package/dist/types/utils/product-selection.d.ts +16 -0
  208. package/dist/types/utils/product.d.ts +21 -0
  209. package/dist/types/utils/timezone.d.ts +6 -0
  210. package/docs/v1/README.md +213 -0
  211. package/docs/v1/api/actions/address-actions.md +286 -0
  212. package/docs/v1/api/actions/cart-actions.md +364 -0
  213. package/docs/v1/api/actions/checkout-actions.md +586 -0
  214. package/docs/v1/api/actions/product-actions.md +204 -0
  215. package/docs/v1/api/client.md +664 -0
  216. package/docs/v1/api/configuration.md +583 -0
  217. package/docs/v1/api/injection-methods.md +331 -0
  218. package/docs/v1/api/typescript-types.md +501 -0
  219. package/docs/v1/api/ui-helpers.md +200 -0
  220. package/docs/v1/examples/advanced-patterns.md +199 -0
  221. package/docs/v1/examples/checkout-flow.md +90 -0
  222. package/docs/v1/examples/custom-theming.md +76 -0
  223. package/docs/v1/examples/multi-product-page.md +90 -0
  224. package/docs/v1/examples/simple-product-page.md +89 -0
  225. package/docs/v1/getting-started/concepts.md +521 -0
  226. package/docs/v1/getting-started/installation.md +351 -0
  227. package/docs/v1/getting-started/quick-start.md +410 -0
  228. package/docs/v1/guides/accessibility.md +288 -0
  229. package/docs/v1/guides/address-component.md +435 -0
  230. package/docs/v1/guides/best-practices.md +365 -0
  231. package/docs/v1/guides/cart-component.md +800 -0
  232. package/docs/v1/guides/checkout-component.md +817 -0
  233. package/docs/v1/guides/events.md +1004 -0
  234. package/docs/v1/guides/product-component.md +761 -0
  235. package/docs/v1/guides/product-list-component.md +730 -0
  236. package/docs/v1/guides/theming.md +243 -0
  237. package/docs/v1/integration/angular.md +39 -0
  238. package/docs/v1/integration/laravel.md +41 -0
  239. package/docs/v1/integration/nextjs.md +69 -0
  240. package/docs/v1/integration/proxy-setup.md +106 -0
  241. package/docs/v1/integration/react.md +64 -0
  242. package/docs/v1/integration/vanilla-js.md +84 -0
  243. package/docs/v1/integration/vue.md +58 -0
  244. package/docs/v1/reference/analytics.md +133 -0
  245. package/docs/v1/reference/browser-support.md +47 -0
  246. package/docs/v1/reference/error-handling.md +83 -0
  247. package/docs/v1/reference/performance.md +52 -0
  248. package/docs/v1/reference/telemetry.md +85 -0
  249. package/docs/v1/reference/troubleshooting.md +135 -0
  250. package/package.json +75 -45
  251. package/dist/types/elements-builder-client.d.ts +0 -2
  252. package/dist/types/elements-client-helper.d.ts +0 -4
  253. package/dist/types/elements-client.d.ts +0 -2
  254. package/dist/types/enums/cloud.enum.d.ts +0 -97
  255. package/dist/types/interfaces/cloud/checkout.interface.d.ts +0 -218
  256. package/dist/types/interfaces/cloud/core.interface.d.ts +0 -22
  257. package/dist/types/interfaces/cloud/index.d.ts +0 -3
  258. package/dist/types/interfaces/cloud/retailer.interface.d.ts +0 -67
  259. package/dist/types/interfaces/cloud/user.interface.d.ts +0 -100
  260. package/dist/types/interfaces/core.interface.d.ts +0 -111
  261. package/dist/types/modules/checkout/components/checkout.type.d.ts +0 -4
  262. package/dist/types/modules/product-list/components/product-list-filters-subcomponents/index.d.ts +0 -6
  263. package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-apply-filter-button.component.d.ts +0 -1
  264. package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-delivery-options-filter.components.d.ts +0 -16
  265. package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-search.component.d.ts +0 -16
  266. package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-toggle-filters.components.d.ts +0 -18
  267. package/dist/types/modules/theme-provider/styles/address/index.d.ts +0 -1
  268. package/dist/types/modules/theme-provider/styles/cart/index.d.ts +0 -1
  269. package/dist/types/modules/theme-provider/styles/checkout/index.d.ts +0 -1
  270. package/dist/types/modules/theme-provider/styles/product/index.d.ts +0 -3
  271. package/dist/types/modules/theme-provider/styles/product-list/index.d.ts +0 -1
  272. package/dist/types/modules/theme-provider/styles/ui/index.d.ts +0 -3
  273. package/dist/types/modules/ui-components/input/birthdate-input.component.d.ts +0 -53
  274. package/dist/types/utils/helper.d.ts +0 -28
  275. package/docs/ACTIONS.md +0 -1300
  276. package/docs/BROWSER_SUPPORT.md +0 -279
  277. package/docs/CONFIGURATION.md +0 -853
  278. package/docs/DOCUMENTATION_INDEX.md +0 -311
  279. package/docs/EVENTS.md +0 -798
  280. package/docs/PROXY.md +0 -228
  281. package/docs/THEMING.md +0 -592
  282. package/docs/TROUBLESHOOTING.md +0 -793
  283. package/umd/elements.js +0 -1
  284. /package/dist/types/{auto-initialize.d.ts → auto-initialize/main.d.ts} +0 -0
  285. /package/dist/types/modules/{theme-provider/styles/address → address/styles}/address.style.d.ts +0 -0
  286. /package/dist/types/modules/{theme-provider/styles/cart → cart/styles}/cart.style.d.ts +0 -0
  287. /package/dist/types/modules/{theme-provider/styles/checkout → checkout/styles}/checkout.style.d.ts +0 -0
  288. /package/dist/types/modules/{theme-provider/styles/product → product/styles}/image-carousel.style.d.ts +0 -0
  289. /package/dist/types/modules/{theme-provider/styles/product → product/styles}/product.style.d.ts +0 -0
  290. /package/dist/types/modules/{theme-provider/styles/product → product/styles}/retailers.style.d.ts +0 -0
  291. /package/dist/types/modules/{theme-provider/styles/product-list → product-list/styles}/product-list.style.d.ts +0 -0
  292. /package/dist/types/modules/{theme-provider/styles/ui → ui-components/styles}/drawer.style.d.ts +0 -0
  293. /package/dist/types/modules/{theme-provider/styles/ui → ui-components/styles}/loading.style.d.ts +0 -0
  294. /package/dist/types/modules/{theme-provider/styles/ui → ui-components/styles}/promo-code-ticker.style.d.ts +0 -0
@@ -0,0 +1,817 @@
1
+ # Checkout Component
2
+
3
+ The Checkout component provides a complete purchase flow including customer information collection, payment processing, and order confirmation.
4
+
5
+ ## Overview
6
+
7
+ The Checkout component handles:
8
+ - Customer information (email, phone, address)
9
+ - Gift recipient details (optional)
10
+ - Payment processing (Stripe integration)
11
+ - Billing address
12
+ - Promo codes and gift cards
13
+ - Order summary and totals
14
+ - Marketing preferences
15
+ - Tip options
16
+ - Order confirmation
17
+
18
+ ## Basic Usage
19
+
20
+ ### Checkout Drawer (Default)
21
+
22
+ The checkout drawer opens automatically when users click "Checkout" from the cart. No additional setup required.
23
+
24
+ ### Hosted Checkout Page
25
+
26
+ For a full-page checkout experience, inject checkout into a dedicated container:
27
+
28
+ ```javascript
29
+ const client = await Elements('YOUR_API_KEY', { env: 'production' });
30
+
31
+ await client.injectCheckoutElement({
32
+ containerId: 'checkout-container',
33
+ checkoutId: 'optional_checkout_id', // Optional: load specific checkout
34
+ hideHeader: false // Optional: hide checkout header
35
+ });
36
+ ```
37
+
38
+ #### With URL Parameter
39
+
40
+ Configure checkout to load from URL parameter:
41
+
42
+ ```html
43
+ <script
44
+ defer
45
+ data-liquid-commerce-elements
46
+ data-token="YOUR_API_KEY"
47
+ data-env="production"
48
+ data-checkout-param="lce_checkout"
49
+ type="text/javascript"
50
+ src="https://elements.reservebar-worker.workers.dev/all/elements.js"
51
+ ></script>
52
+
53
+ <div data-lce-checkout></div>
54
+ ```
55
+
56
+ Visit `https://yoursite.com/checkout?lce_checkout=checkout_abc123` to load that checkout.
57
+
58
+ ### Redirect to Custom Checkout Page
59
+
60
+ Configure the cart to redirect to your checkout page instead of opening the drawer:
61
+
62
+ ```javascript
63
+ const client = await Elements('YOUR_API_KEY', {
64
+ env: 'production',
65
+ checkout: {
66
+ pageUrl: 'https://yoursite.com/checkout?lce_checkout={token}'
67
+ }
68
+ });
69
+ ```
70
+
71
+ Or with data attributes:
72
+
73
+ ```html
74
+ <script
75
+ defer
76
+ data-liquid-commerce-elements
77
+ data-token="YOUR_API_KEY"
78
+ data-env="production"
79
+ data-checkout-url="https://yoursite.com/checkout?lce_checkout={token}"
80
+ type="text/javascript"
81
+ src="https://elements.reservebar-worker.workers.dev/all/elements.js"
82
+ ></script>
83
+ ```
84
+
85
+ The `{token}` placeholder is replaced with the checkout token.
86
+
87
+ ## Checkout Actions
88
+
89
+ ### Open Checkout
90
+
91
+ ```javascript
92
+ window.LiquidCommerce.elements.actions.checkout.openCheckout();
93
+ ```
94
+
95
+ ### Close Checkout
96
+
97
+ ```javascript
98
+ window.LiquidCommerce.elements.actions.checkout.closeCheckout();
99
+ ```
100
+
101
+ ### Toggle Checkout
102
+
103
+ ```javascript
104
+ window.LiquidCommerce.elements.actions.checkout.toggleCheckout();
105
+ ```
106
+
107
+ ### Exit Checkout
108
+
109
+ Navigate away from checkout (requires `exitUrl` configuration):
110
+
111
+ ```javascript
112
+ window.LiquidCommerce.elements.actions.checkout.exitCheckout();
113
+ ```
114
+
115
+ Configure exit URL:
116
+
117
+ ```javascript
118
+ customTheme: {
119
+ checkout: {
120
+ layout: {
121
+ exitUrl: 'https://yoursite.com/shop'
122
+ }
123
+ }
124
+ }
125
+ ```
126
+
127
+ ### Add Product to Checkout
128
+
129
+ Skip the cart and go directly to checkout:
130
+
131
+ ```javascript
132
+ await window.LiquidCommerce.elements.actions.checkout.addProduct([
133
+ {
134
+ identifier: '00619947000020',
135
+ fulfillmentType: 'shipping',
136
+ quantity: 1
137
+ }
138
+ ], true); // true = open checkout after adding
139
+ ```
140
+
141
+ ### Apply Promo Code
142
+
143
+ ```javascript
144
+ await window.LiquidCommerce.elements.actions.checkout.applyPromoCode('WELCOME10');
145
+ ```
146
+
147
+ ### Remove Promo Code
148
+
149
+ ```javascript
150
+ await window.LiquidCommerce.elements.actions.checkout.removePromoCode();
151
+ ```
152
+
153
+ ### Apply Gift Card
154
+
155
+ ```javascript
156
+ await window.LiquidCommerce.elements.actions.checkout.applyGiftCard('GIFT-1234-5678');
157
+ ```
158
+
159
+ ### Remove Gift Card
160
+
161
+ ```javascript
162
+ await window.LiquidCommerce.elements.actions.checkout.removeGiftCard('GIFT-1234-5678');
163
+ ```
164
+
165
+ ### Toggle Gift Mode
166
+
167
+ Enable/disable "Send as Gift" mode:
168
+
169
+ ```javascript
170
+ // Enable gift mode
171
+ await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(true);
172
+
173
+ // Disable gift mode
174
+ await window.LiquidCommerce.elements.actions.checkout.toggleIsGift(false);
175
+
176
+ // Toggle current state
177
+ await window.LiquidCommerce.elements.actions.checkout.toggleIsGift();
178
+ ```
179
+
180
+ ### Toggle Billing Same As Shipping
181
+
182
+ ```javascript
183
+ // Use shipping address for billing
184
+ await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(true);
185
+
186
+ // Use different billing address
187
+ await window.LiquidCommerce.elements.actions.checkout.toggleBillingSameAsShipping(false);
188
+ ```
189
+
190
+ ### Toggle Marketing Preferences
191
+
192
+ ```javascript
193
+ // Opt into email marketing
194
+ await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);
195
+
196
+ // Opt into SMS marketing
197
+ await window.LiquidCommerce.elements.actions.checkout.toggleMarketingPreferences('canSms', true);
198
+ ```
199
+
200
+ ### Update Customer Information
201
+
202
+ Pre-fill customer information:
203
+
204
+ ```javascript
205
+ window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
206
+ firstName: 'John',
207
+ lastName: 'Doe',
208
+ email: 'john@example.com',
209
+ phone: '+15551234567',
210
+ birthDate: '1990-01-15',
211
+ addressTwo: 'Apt 4',
212
+ company: 'Acme Corp'
213
+ });
214
+ ```
215
+
216
+ **Available fields:**
217
+ - `firstName`, `lastName`
218
+ - `email`, `phone`
219
+ - `birthDate`, `addressTwo`
220
+ - `company`
221
+
222
+ ### Update Gift Information
223
+
224
+ Pre-fill gift recipient information:
225
+
226
+ ```javascript
227
+ window.LiquidCommerce.elements.actions.checkout.updateGiftInfo({
228
+ firstName: 'Jane',
229
+ lastName: 'Smith',
230
+ email: 'jane@example.com',
231
+ phone: '+15559876543',
232
+ message: 'Happy Birthday!',
233
+ addressTwo: 'Suite 5B'
234
+ });
235
+ ```
236
+
237
+ **Available fields:**
238
+ - `firstName`, `lastName`
239
+ - `email`, `phone`
240
+ - `message`
241
+ - `addressTwo`
242
+
243
+ ### Update Billing Information
244
+
245
+ Pre-fill billing address:
246
+
247
+ ```javascript
248
+ window.LiquidCommerce.elements.actions.checkout.updateBillingInfo({
249
+ firstName: 'John',
250
+ lastName: 'Doe',
251
+ email: 'john@example.com',
252
+ phone: '+15551234567',
253
+ addressOne: '789 Elm St',
254
+ addressTwo: 'Floor 2',
255
+ city: 'Chicago',
256
+ state: 'IL',
257
+ zipCode: '60601'
258
+ });
259
+ ```
260
+
261
+ **Available fields:**
262
+ - `firstName`, `lastName`
263
+ - `email`, `phone`, `company`
264
+ - `addressOne`, `addressTwo`
265
+ - `city`, `state`, `zipCode`
266
+
267
+ ### Get Checkout Details
268
+
269
+ ```javascript
270
+ const checkoutData = window.LiquidCommerce.elements.actions.checkout.getDetails();
271
+
272
+ console.log(checkoutData);
273
+ // {
274
+ // token: 'abc123xyz',
275
+ // cartId: 'cart_abc123',
276
+ // items: { 'cart_item_id': { ... } },
277
+ // amounts: {
278
+ // subtotal: 9998,
279
+ // tax: 800,
280
+ // shipping: 500,
281
+ // tip: 200,
282
+ // total: 11498
283
+ // },
284
+ // isGift: false,
285
+ // ...
286
+ // }
287
+ ```
288
+
289
+ ## Events
290
+
291
+ ### Checkout Lifecycle
292
+
293
+ ```javascript
294
+ window.addEventListener('lce:actions.checkout_loaded', (event) => {
295
+ console.log('Checkout loaded');
296
+ });
297
+
298
+ window.addEventListener('lce:actions.checkout_opened', (event) => {
299
+ console.log('Checkout opened');
300
+ });
301
+
302
+ window.addEventListener('lce:actions.checkout_closed', (event) => {
303
+ console.log('Checkout closed');
304
+ });
305
+
306
+ window.addEventListener('lce:actions.checkout_failed', (event) => {
307
+ console.error('Checkout failed:', event.detail.data.message);
308
+ });
309
+ ```
310
+
311
+ ### Customer Information
312
+
313
+ ```javascript
314
+ window.addEventListener('lce:actions.checkout_customer_information_updated', (event) => {
315
+ const { cartId } = event.detail.data;
316
+ console.log('Customer info updated for cart:', cartId);
317
+ });
318
+ ```
319
+
320
+ ### Gift Information
321
+
322
+ ```javascript
323
+ window.addEventListener('lce:actions.checkout_is_gift_toggled', (event) => {
324
+ const { isActive } = event.detail.data;
325
+ console.log('Gift mode:', isActive ? 'enabled' : 'disabled');
326
+ });
327
+
328
+ window.addEventListener('lce:actions.checkout_gift_information_updated', (event) => {
329
+ console.log('Gift recipient updated');
330
+ });
331
+ ```
332
+
333
+ ### Billing Information
334
+
335
+ ```javascript
336
+ window.addEventListener('lce:actions.checkout_billing_same_as_shipping_toggled', (event) => {
337
+ const { isActive } = event.detail.data;
338
+ console.log('Billing same as shipping:', isActive);
339
+ });
340
+
341
+ window.addEventListener('lce:actions.checkout_billing_information_updated', (event) => {
342
+ console.log('Billing address updated');
343
+ });
344
+ ```
345
+
346
+ ### Marketing Preferences
347
+
348
+ ```javascript
349
+ window.addEventListener('lce:actions.checkout_marketing_preferences_toggled', (event) => {
350
+ const { fieldName, isActive } = event.detail.data;
351
+ console.log(`Marketing ${fieldName}:`, isActive);
352
+ });
353
+ ```
354
+
355
+ ### Items Management
356
+
357
+ ```javascript
358
+ window.addEventListener('lce:actions.checkout_item_removed', (event) => {
359
+ const { cartItemId } = event.detail.data;
360
+ console.log('Item removed:', cartItemId);
361
+ });
362
+
363
+ window.addEventListener('lce:actions.checkout_item_quantity_increase', (event) => {
364
+ const { cartItemId, quantity } = event.detail.data;
365
+ console.log(`Item ${cartItemId} quantity: ${quantity}`);
366
+ });
367
+
368
+ window.addEventListener('lce:actions.checkout_item_quantity_decrease', (event) => {
369
+ const { cartItemId, quantity } = event.detail.data;
370
+ console.log(`Item ${cartItemId} quantity: ${quantity}`);
371
+ });
372
+ ```
373
+
374
+ ### Delivery Method
375
+
376
+ Fires when the shopper switches a single-item checkout between same-day delivery and shipping.
377
+
378
+ ```javascript
379
+ window.addEventListener('lce:actions.checkout_delivery_method_updated', (event) => {
380
+ const { fulfillmentType, previousFulfillmentType } = event.detail.data;
381
+ console.log(`Delivery method: ${previousFulfillmentType} to ${fulfillmentType}`);
382
+ });
383
+ ```
384
+
385
+ ### Tips
386
+
387
+ ```javascript
388
+ window.addEventListener('lce:actions.checkout_tip_updated', (event) => {
389
+ const { deliveryTips } = event.detail.data;
390
+ const total = deliveryTips.reduce((sum, t) => sum + t.tip, 0);
391
+ console.log('Tip amount:', total / 100);
392
+ });
393
+ ```
394
+
395
+ ### Payment & Submission
396
+
397
+ ```javascript
398
+ window.addEventListener('lce:actions.checkout_submit_started', (event) => {
399
+ console.log('Processing payment...');
400
+ // Show loading state
401
+ });
402
+
403
+ window.addEventListener('lce:actions.checkout_submit_completed', (event) => {
404
+ const { orderNumber } = event.detail.data;
405
+ console.log('Order completed:', orderNumber);
406
+ // Redirect to confirmation page
407
+ });
408
+
409
+ window.addEventListener('lce:actions.checkout_submit_failed', (event) => {
410
+ const { message } = event.detail.data;
411
+ console.error('Payment failed:', message);
412
+ // Show error message
413
+ });
414
+ ```
415
+
416
+ ### Express Checkout
417
+
418
+ ```javascript
419
+ // Wallet availability settled or changed (always fires at least once per block)
420
+ window.addEventListener('lce:actions.checkout_express_checkout_availability', (event) => {
421
+ const { data } = event.detail;
422
+ console.log(data.available ? `Wallets: ${data.wallets.join(', ')}` : 'No wallets available');
423
+ });
424
+ ```
425
+
426
+ ### Promo Codes
427
+
428
+ ```javascript
429
+ window.addEventListener('lce:actions.checkout_promo_code_applied', (event) => {
430
+ const { discount, newTotal } = event.detail.data;
431
+ console.log(`Promo applied: $${discount / 100} off`);
432
+ });
433
+
434
+ window.addEventListener('lce:actions.checkout_promo_code_removed', (event) => {
435
+ console.log('Promo code removed');
436
+ });
437
+
438
+ window.addEventListener('lce:actions.checkout_promo_code_failed', (event) => {
439
+ const { error } = event.detail.data;
440
+ console.error('Promo code failed:', error);
441
+ });
442
+ ```
443
+
444
+ ### Gift Cards
445
+
446
+ ```javascript
447
+ window.addEventListener('lce:actions.checkout_gift_card_applied', (event) => {
448
+ const { newTotal } = event.detail.data;
449
+ console.log('Gift card applied, new total:', newTotal / 100);
450
+ });
451
+
452
+ window.addEventListener('lce:actions.checkout_gift_card_removed', (event) => {
453
+ console.log('Gift card removed');
454
+ });
455
+
456
+ window.addEventListener('lce:actions.checkout_gift_card_failed', (event) => {
457
+ const { error } = event.detail.data;
458
+ console.error('Gift card failed:', error);
459
+ });
460
+ ```
461
+
462
+ ### Product Add to Checkout
463
+
464
+ ```javascript
465
+ window.addEventListener('lce:actions.checkout_product_add_success', (event) => {
466
+ const { itemsAdded, identifiers } = event.detail.data;
467
+ console.log(`Added ${itemsAdded} items to checkout`);
468
+ });
469
+
470
+ window.addEventListener('lce:actions.checkout_product_add_failed', (event) => {
471
+ const { error } = event.detail.data;
472
+ console.error('Failed to add to checkout:', error);
473
+ });
474
+ ```
475
+
476
+ ## California Proposition 65 Warning
477
+
478
+ When the shipping address is in California, the order summary shows a panel directly above the
479
+ place-order button reading **Adult signature (21+) required at delivery.** followed by
480
+ **CA WARNING · California Proposition 65 information for these products**, so the warning is
481
+ presented before the purchase completes. The text links to the OEHHA alcohol page,
482
+ [www.P65Warnings.ca.gov/alcohol](https://www.p65warnings.ca.gov/alcohol), in a new tab. The full
483
+ 27 CCR § 25607.4 text is on the product element.
484
+
485
+ The panel appears in the drawer checkout, the hosted checkout and the checkout-only build. The
486
+ whole panel, adult-signature notice included, is shown only for a California shipping address; it
487
+ appears or disappears when the address changes, and nothing renders in its place otherwise. Neither can be turned off or reworded by configuration. Its colours follow `global.layout.poweredByMode` — the same
488
+ light/dark switch the Stripe payment form uses — as a fixed pair so the copy is always legible:
489
+ `light` is `#18181B` on `#F5F3EE`, `dark` is `#F5F3EE` on `#2A2824`. The font and corner radius come
490
+ from your theme. If your checkout is dark, set `poweredByMode: 'dark'`.
491
+
492
+ ## Customization
493
+
494
+ ### Theme Configuration
495
+
496
+ ```javascript
497
+ const client = await Elements('YOUR_API_KEY', {
498
+ env: 'production',
499
+ customTheme: {
500
+ checkout: {
501
+ theme: {
502
+ backgroundColor: '#ffffff'
503
+ },
504
+ layout: {
505
+ allowGiftCards: true,
506
+ exitUrl: 'https://yoursite.com/shop',
507
+ continueShoppingUrl: 'https://yoursite.com/shop',
508
+ drawerHeaderText: 'Checkout',
509
+ placeOrderButtonText: 'Complete Purchase'
510
+ }
511
+ }
512
+ }
513
+ });
514
+ ```
515
+
516
+ ## Payment Integration
517
+
518
+ The SDK uses Stripe for payment processing. Payment form is embedded and handles:
519
+ - Credit/debit cards
520
+ - PCI compliance
521
+ - 3D Secure authentication
522
+
523
+ No additional Stripe integration code needed - it's built-in.
524
+
525
+ ### Express checkout (Apple Pay and Google Pay)
526
+
527
+ Apple Pay and Google Pay are offered as express checkout buttons at the top of the checkout, above
528
+ the gift toggle. Tapping one collects the shopper's contact and billing details from the wallet and
529
+ places the order without them completing the checkout forms.
530
+
531
+ Express checkout is offered to every shopper whose platform can show a wallet. Each wallet is
532
+ requested with Stripe's `always` policy, so the button renders wherever the device supports it rather
533
+ than only where Stripe judges it good for conversion. The block hides itself entirely — heading,
534
+ buttons and divider — in four cases: the device or browser offers no wallet, the order is a
535
+ gift, a payment method is already bound to the checkout, or Stripe.js fails to load. Subscribe to
536
+ [`lce:actions.checkout_express_checkout_availability`](./events.md) to know which state you are in.
537
+
538
+ Two things are required outside the SDK:
539
+
540
+ - **The page must be served over HTTPS.** Stripe requires this in development as well as production;
541
+ the wallet buttons do not render on a plain-HTTP page.
542
+ - **Every domain that serves the buttons must be registered with Stripe** for the account issuing the
543
+ publishable key, in both sandbox and live mode. Stripe requires this for Apple Pay and Google Pay
544
+ alike, and it covers subdomains: `shop.example.com` is registered separately from `example.com`.
545
+ Registering in live mode registers the sandbox too. This applies per partner domain.
546
+
547
+ Approving the wallet sheet hands the order to the **express completion view**, which replaces the
548
+ checkout form the moment the sheet closes. The view saves the shopper's name, email and phone from
549
+ the wallet as the checkout's customer and binds the approved payment method; the wallet's billing
550
+ address goes to Stripe with that payment method, and the order's own billing address stays the one
551
+ the checkout already holds. Then it asks for the one thing no wallet returns — the shopper's **date
552
+ of birth** — with the same 21+ validation as the form, and places the order from its **Complete
553
+ order** button. A date the shopper already typed into the form is used instead, and the view goes
554
+ straight to placing the order. When the partner has turned off **Require date of birth** in the
555
+ builder (`checkout.layout.requireBirthDate: false`), the view skips the step and places the order as
556
+ soon as the payment method is bound. A shopper can step **back to checkout** from the view; the
557
+ payment method stays bound, and the form asks for the date of birth itself when one is required.
558
+
559
+ If the wallet sheet itself fails — a declined authorisation, or a total that changed while it was
560
+ open — the sheet reports the reason and nothing is handed on. Anything that fails after the sheet
561
+ has closed is reported on the view, with a retry. The order is placed only for the checkout and the
562
+ total the sheet was opened for: the server verifies both against the wallet's intent at completion,
563
+ so a total that moved in between is refused there as well and the shopper approves again.
564
+
565
+ The wallet tap is also refused, with nothing charged, when a cart is below a retailer's minimum
566
+ purchase amount — the same condition that keeps the Place Order button disabled. Presale checkouts
567
+ are exempt from it, as they are there.
568
+
569
+ Express checkout is not offered on a gift order: a gift needs the recipient's name, email, phone and
570
+ message, and no wallet returns any of them. Turning on "Send as a gift" hides the block, and turning
571
+ it back off restores it.
572
+
573
+ The buttons are not confined to the checkout element. Inject them anywhere on the page with
574
+ `injectExpressCheckoutElement()` on the full client, or `injectExpressCheckout()` on the
575
+ checkout-only client.
576
+
577
+ ## Checkout Flow
578
+
579
+ ### Standard Flow
580
+
581
+ 1. Customer opens checkout (from cart or direct)
582
+ 2. Reviews order summary
583
+ 3. Enters shipping information
584
+ 4. Enters payment information
585
+ 5. Optionally enters billing address
586
+ 6. Reviews total (with promo codes, gift cards, tips)
587
+ 7. Places order
588
+ 8. Sees order confirmation
589
+
590
+ ### Gift Flow
591
+
592
+ 1. Customer enables "Send as Gift"
593
+ 2. Enters their billing/payment information
594
+ 3. Enters recipient's shipping information
595
+ 4. Adds gift message (optional)
596
+ 5. Places order
597
+ 6. Confirmation shows gift delivery details
598
+
599
+ ## Presale Products
600
+
601
+ Checkouts with presale items show:
602
+ - Countdown timer for presale expiration
603
+ - Expected delivery date
604
+ - Special handling for presale orders
605
+
606
+ When presale expires:
607
+ - Shows expiration notice
608
+ - Disables checkout submission
609
+
610
+ ## Best Practices
611
+
612
+ ### Pre-fill Known Information
613
+
614
+ If you have customer data, pre-fill it:
615
+
616
+ ```javascript
617
+ // After user logs in
618
+ if (userIsLoggedIn) {
619
+ window.addEventListener('lce:actions.checkout_opened', () => {
620
+ window.LiquidCommerce.elements.actions.checkout.updateCustomerInfo({
621
+ firstName: currentUser.firstName,
622
+ lastName: currentUser.lastName,
623
+ email: currentUser.email,
624
+ phone: currentUser.phone
625
+ });
626
+ });
627
+ }
628
+ ```
629
+
630
+ ### Track Conversion Funnel
631
+
632
+ ```javascript
633
+ const checkoutFunnel = {
634
+ loaded: false,
635
+ infoEntered: false,
636
+ paymentEntered: false,
637
+ submitted: false
638
+ };
639
+
640
+ window.addEventListener('lce:actions.checkout_loaded', () => {
641
+ checkoutFunnel.loaded = true;
642
+ gtag('event', 'begin_checkout');
643
+ });
644
+
645
+ window.addEventListener('lce:actions.checkout_customer_information_updated', () => {
646
+ if (!checkoutFunnel.infoEntered) {
647
+ checkoutFunnel.infoEntered = true;
648
+ gtag('event', 'checkout_progress', { step: 'customer_info' });
649
+ }
650
+ });
651
+
652
+ window.addEventListener('lce:actions.checkout_submit_completed', (event) => {
653
+ gtag('event', 'purchase', {
654
+ transaction_id: event.detail.data.orderNumber,
655
+ value: event.detail.data.orderTotal / 100,
656
+ currency: 'USD'
657
+ });
658
+ });
659
+ ```
660
+
661
+ ### Handle Submission States
662
+
663
+ ```javascript
664
+ window.addEventListener('lce:actions.checkout_submit_started', () => {
665
+ // Disable navigation
666
+ window.onbeforeunload = () => 'Payment in progress...';
667
+
668
+ // Show loading overlay
669
+ showGlobalLoadingOverlay('Processing your order...');
670
+ });
671
+
672
+ window.addEventListener('lce:actions.checkout_submit_completed', () => {
673
+ // Re-enable navigation
674
+ window.onbeforeunload = null;
675
+
676
+ // Redirect to confirmation
677
+ window.location.href = '/order-confirmation';
678
+ });
679
+
680
+ window.addEventListener('lce:actions.checkout_submit_failed', () => {
681
+ // Re-enable navigation
682
+ window.onbeforeunload = null;
683
+
684
+ // Hide loading
685
+ hideGlobalLoadingOverlay();
686
+ });
687
+ ```
688
+
689
+ ## Configuration Options
690
+
691
+ ### Enable/Disable Features
692
+
693
+ ```javascript
694
+ checkout: {
695
+ layout: {
696
+ allowGiftCards: true, // Show gift card input
697
+ requireBirthDate: true, // Require a date of birth to place an order
698
+ emailOptIn: {
699
+ show: true, // Show email opt-in checkbox
700
+ checked: false, // Default unchecked
701
+ text: 'Subscribe to our newsletter'
702
+ },
703
+ smsOptIn: {
704
+ show: false, // Hide SMS opt-in checkbox
705
+ checked: false, // Default unchecked
706
+ text: 'Receive SMS updates'
707
+ }
708
+ }
709
+ }
710
+ ```
711
+
712
+ ### Button Text
713
+
714
+ ```javascript
715
+ checkout: {
716
+ layout: {
717
+ placeOrderButtonText: 'Complete Purchase'
718
+ }
719
+ }
720
+ ```
721
+
722
+ ## Troubleshooting
723
+
724
+ ### Checkout Not Opening
725
+
726
+ 1. Verify cart has items: `window.LiquidCommerce.elements.actions.cart.getDetails()`
727
+ 2. Check for JavaScript errors in console
728
+ 3. Ensure SDK is initialized: `window.LiquidCommerce.elements`
729
+ 4. Try manually: `window.LiquidCommerce.elements.actions.checkout.openCheckout()`
730
+
731
+ ### Payment Form Not Loading
732
+
733
+ 1. Check internet connection (Stripe requires network)
734
+ 2. Verify Stripe is not blocked by ad blockers
735
+ 3. Check browser console for Stripe errors
736
+ 4. Ensure your API key is valid
737
+
738
+ ### Customer Info Not Pre-filling
739
+
740
+ 1. Verify you're calling `updateCustomerInfo()` after checkout loads
741
+ 2. Check field names match exactly (case-sensitive)
742
+ 3. Ensure values are strings, not other types
743
+ 4. Listen for checkout_opened event before updating
744
+
745
+ ### Order Submission Failing
746
+
747
+ 1. Check all required fields are filled
748
+ 2. Verify payment information is valid
749
+ 3. Look for validation errors in UI
750
+ 4. Check console for detailed error messages
751
+ 5. Ensure products are still available
752
+
753
+ ## See Also
754
+
755
+ - [Cart Component](./cart-component.md) - Shopping cart functionality
756
+ - [Actions API](../api/actions/checkout-actions.md) - Checkout actions reference
757
+ - [Events](./events.md) - All available events
758
+ - [Theming](./theming.md) - Customize appearance
759
+
760
+ ### Preparing complete account delivery details
761
+
762
+ After `lce:actions.checkout_loaded`, call
763
+ `await elements.actions.checkout.updateCustomerInfo(fields, { saveIfValid: true })`
764
+ to validate and prepare complete account details, then show their editable summary.
765
+ Supply names, email, a US phone number, and a real `birthDate` in `MM/DD/YYYY` format
766
+ (age 21+, year 1930 or later). The `birthDate` may be blank when the partner does not require a
767
+ date of birth (`checkout.layout.requireBirthDate: false`); a supplied one is still validated.
768
+ A shipping street must already be selected.
769
+ Omitted apartment and delivery instructions retain their existing checkout values.
770
+ Partial or invalid details stay in the form; backend validation failures reject the
771
+ promise, show the checkout error, and keep details editable. The host should handle that rejection.
772
+
773
+ The option skips gifts, saved forms, in-flight saves, and customer forms the shopper
774
+ has edited during the current checkout. It does not overwrite those forms. Edits or
775
+ address/checkout changes during preparation prevent a stale response from closing
776
+ the form. Without the option, this action only prefills fields, as before.
777
+
778
+ Apple Pay and Google Pay selection displays **Continue with Apple Pay** or
779
+ **Continue with Google Pay**. This opens the wallet to save a payment method; the
780
+ shopper still reviews and places the order afterward. It is not express checkout.
781
+
782
+ After wallet cancellation, the same Continue action remains available. If authorization
783
+ succeeded but saving the method failed, **Retry saving Apple Pay/Google Pay** reuses
784
+ the existing authorization rather than opening the wallet again.
785
+
786
+ ### Saved account marketing preferences
787
+
788
+ ```ts
789
+ setSavedMarketingPreferences(preferences: { canEmail?: boolean; canSms?: boolean }): Promise<void>
790
+ clearSavedMarketingPreferences(): void
791
+ ```
792
+
793
+ Call `actions.checkout.setSavedMarketingPreferences()` with known recorded account
794
+ choices, including `false`, before checkout loads. Only boolean values are used;
795
+ missing/null/unrecognized values remain unknown. The first checkout prepare uses
796
+ saved values instead of tenant defaults. Each channel's prompt is hidden only
797
+ after the server confirms that saved choice. Unknown channels retain their normal
798
+ checkout prompts. The actions are available in both full and checkout-only clients.
799
+
800
+ Calling the setter during an active checkout prepares untouched channels and
801
+ preserves shopper checkbox edits. Backend failure rejects the promise, displays
802
+ an error, and leaves prompts available; the host should catch the rejection.
803
+ The same call can retry. Applying values does not call a subscription service.
804
+ It supplies the account's recorded choices to this checkout.
805
+
806
+ Saved choices persist across cart resets in the same SDK session. Call
807
+ `clearSavedMarketingPreferences()` on sign-out, account change, and host cleanup.
808
+ Clearing reveals the prompts and restores configured guest defaults. It invalidates
809
+ stale responses while draining outstanding preference requests; checkout completion
810
+ prepares the current choices before submitting the checkout token. A load already
811
+ in progress still finishes and reconciles the current account's values. Bind a new
812
+ account only to its own checkout; the host remains responsible for account/cart
813
+ ownership and for reloading checkout when identity changes.
814
+
815
+ Order completion waits for queued preference work. It cannot race a late saved
816
+ opt-out or proceed with an unconfirmed saved choice. If applying a known choice
817
+ fails, the shopper can retry or explicitly choose the visible channel preference.