@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.
- package/README.md +100 -2518
- package/dist/index.checkout.esm.js +20445 -0
- package/dist/index.esm.js +28574 -20597
- package/dist/ssr-stub.checkout.esm.js +17 -0
- package/dist/ssr-stub.esm.js +277 -0
- package/dist/types/auto-initialize/checkout.d.ts +2 -0
- package/dist/types/auto-initialize/shared-utils.d.ts +51 -0
- package/dist/types/{elements-base-client.d.ts → clients/base.d.ts} +16 -2
- package/dist/types/clients/builder.d.ts +3 -0
- package/dist/types/clients/checkout.d.ts +6 -0
- package/dist/types/clients/helpers.d.ts +8 -0
- package/dist/types/clients/main.d.ts +3 -0
- package/dist/types/constants/core.constant.d.ts +13 -18
- package/dist/types/constants/index.d.ts +1 -0
- package/dist/types/constants/prop65.constant.d.ts +8 -0
- package/dist/types/core/a11y/announcer.service.d.ts +16 -0
- package/dist/types/core/a11y/focus-manager.service.d.ts +21 -0
- package/dist/types/core/a11y/focusable.d.ts +5 -0
- package/dist/types/core/a11y/glyph-button.d.ts +8 -0
- package/dist/types/core/a11y/index.d.ts +6 -0
- package/dist/types/core/a11y/required.d.ts +1 -0
- package/dist/types/core/a11y/single-select.d.ts +20 -0
- package/dist/types/core/api/api-client.service.d.ts +23 -18
- package/dist/types/core/api/api-result.d.ts +19 -0
- package/dist/types/core/api/auth-client.service.d.ts +37 -13
- package/dist/types/core/api/http-client.service.d.ts +0 -8
- package/dist/types/core/base-component.service.d.ts +4 -1
- package/dist/types/core/client/actions/base-action.service.d.ts +22 -0
- package/dist/types/core/client/actions/client-address-action.service.d.ts +18 -0
- package/dist/types/core/client/actions/client-cart-action.service.d.ts +38 -0
- package/dist/types/core/client/actions/client-checkout-action.service.d.ts +75 -0
- package/dist/types/core/client/actions/client-product-action.service.d.ts +15 -0
- package/dist/types/core/client/client-action.service.d.ts +6 -74
- package/dist/types/core/client/client-config.service.d.ts +10 -5
- package/dist/types/core/debug-panel/debug-panel.styles.d.ts +1 -1
- package/dist/types/core/google-tag-manager.service.d.ts +10 -1
- package/dist/types/core/logger/logger.service.d.ts +1 -1
- package/dist/types/core/pubsub/interfaces/address.interface.d.ts +3 -0
- package/dist/types/core/pubsub/interfaces/cart.interface.d.ts +6 -1
- package/dist/types/core/pubsub/interfaces/checkout.interface.d.ts +45 -49
- package/dist/types/core/pubsub/interfaces/core.interface.d.ts +15 -7
- package/dist/types/core/pubsub/pubsub.service.d.ts +1 -2
- package/dist/types/core/singleton-manager.service.d.ts +12 -8
- package/dist/types/core/store/interfaces/cart.interface.d.ts +2 -3
- package/dist/types/core/store/interfaces/checkout.interface.d.ts +36 -107
- package/dist/types/core/store/interfaces/core.interface.d.ts +12 -2
- package/dist/types/core/store/interfaces/metadata.interface.d.ts +11 -0
- package/dist/types/core/store/interfaces/product-list.interface.d.ts +30 -0
- package/dist/types/core/store/interfaces/product.interface.d.ts +1 -0
- package/dist/types/core/store/store.constant.d.ts +5 -0
- package/dist/types/core/store/store.service.d.ts +1 -0
- package/dist/types/core/telemetry/telemetry.service.d.ts +1 -0
- package/dist/types/enums/core.enum.d.ts +47 -2
- package/dist/types/enums/index.d.ts +0 -1
- package/dist/types/index.checkout.d.ts +9 -0
- package/dist/types/index.checkout.umd.d.ts +4 -0
- package/dist/types/index.d.ts +8 -3
- package/dist/types/interfaces/api/cart.interface.d.ts +12 -7
- package/dist/types/interfaces/api/checkout.interface.d.ts +271 -0
- package/dist/types/interfaces/api/index.d.ts +5 -0
- package/dist/types/interfaces/api/product-list.interface.d.ts +15 -6
- package/dist/types/interfaces/api/product.interface.d.ts +10 -4
- package/dist/types/interfaces/client.interface.d.ts +74 -0
- package/dist/types/interfaces/component.interface.d.ts +7 -0
- package/dist/types/interfaces/config.interface.d.ts +44 -0
- package/dist/types/interfaces/configs/address.interface.d.ts +1 -1
- package/dist/types/interfaces/configs/cart.interface.d.ts +2 -1
- package/dist/types/interfaces/configs/checkout.interface.d.ts +3 -1
- package/dist/types/interfaces/configs/global.interface.d.ts +9 -3
- package/dist/types/interfaces/configs/index.d.ts +1 -0
- package/dist/types/interfaces/configs/product-list.interface.d.ts +49 -0
- package/dist/types/interfaces/configs/product.interface.d.ts +7 -1
- package/dist/types/interfaces/injection.interface.d.ts +56 -0
- package/dist/types/modules/address/address-display.component.d.ts +3 -1
- package/dist/types/modules/address/address-input.component.d.ts +10 -1
- package/dist/types/modules/address/address.command.d.ts +2 -1
- package/dist/types/modules/address/styles/register-styles.d.ts +1 -0
- package/dist/types/modules/cart/cart.commands.d.ts +9 -5
- package/dist/types/modules/cart/components/cart-body.component.d.ts +1 -0
- package/dist/types/modules/cart/components/cart-fulfillment.component.d.ts +1 -1
- package/dist/types/modules/cart/components/cart-item-quantity-price.component.d.ts +5 -0
- package/dist/types/modules/cart/components/cart-item.component.d.ts +6 -0
- package/dist/types/modules/cart/styles/register-styles.d.ts +1 -0
- package/dist/types/modules/checkout/checkout.commands.d.ts +95 -12
- package/dist/types/modules/checkout/checkout.component.d.ts +7 -1
- package/dist/types/modules/checkout/components/checkout-billing.component.d.ts +5 -2
- package/dist/types/modules/checkout/components/checkout-buyer.component.d.ts +1 -0
- package/dist/types/modules/checkout/components/checkout-completed.component.d.ts +5 -0
- package/dist/types/modules/checkout/components/checkout-deliver-to.component.d.ts +1 -0
- package/dist/types/modules/checkout/components/checkout-delivery-method.component.d.ts +22 -0
- package/dist/types/modules/checkout/components/checkout-express-checkout.component.d.ts +61 -0
- package/dist/types/modules/checkout/components/checkout-express-completion.component.d.ts +21 -0
- package/dist/types/modules/checkout/components/checkout-header.component.d.ts +1 -0
- package/dist/types/modules/checkout/components/checkout-item-quantity.component.d.ts +4 -0
- package/dist/types/modules/checkout/components/checkout-items.component.d.ts +4 -3
- package/dist/types/modules/checkout/components/checkout-order-summary.component.d.ts +3 -0
- package/dist/types/modules/checkout/components/checkout-payment.component.d.ts +6 -1
- package/dist/types/modules/checkout/components/checkout-place-order-button.component.d.ts +1 -5
- package/dist/types/modules/checkout/components/checkout-presale-countdown.component.d.ts +15 -1
- package/dist/types/modules/checkout/components/checkout-presale-expired.component.d.ts +7 -1
- package/dist/types/modules/checkout/components/checkout-prop65-warning.component.d.ts +8 -0
- package/dist/types/modules/checkout/components/checkout-send-as-gift.component.d.ts +3 -0
- package/dist/types/modules/checkout/components/checkout-stripe-form.component.d.ts +7 -2
- package/dist/types/modules/checkout/components/checkout-tips.component.d.ts +4 -2
- package/dist/types/modules/checkout/components/index.d.ts +4 -0
- package/dist/types/modules/checkout/components/promo-pc-gc.component.d.ts +0 -2
- package/dist/types/modules/checkout/components/required-fields-legend.d.ts +1 -0
- package/dist/types/modules/checkout/constant.d.ts +15 -0
- package/dist/types/modules/checkout/customer-prefill.d.ts +5 -0
- package/dist/types/modules/checkout/express-wallet.d.ts +12 -0
- package/dist/types/modules/checkout/payment-session-error.d.ts +4 -0
- package/dist/types/modules/checkout/styles/delivery-method.style.d.ts +1 -0
- package/dist/types/modules/checkout/styles/express-checkout.style.d.ts +1 -0
- package/dist/types/modules/checkout/styles/express-completion.style.d.ts +1 -0
- package/dist/types/modules/checkout/styles/register-styles.d.ts +1 -0
- package/dist/types/modules/product/components/components.d.ts +26 -2
- package/dist/types/modules/product/components/index.d.ts +1 -0
- package/dist/types/modules/product/components/product-add-to-cart-section.component.d.ts +8 -1
- package/dist/types/modules/product/components/product-delivery-estimate.component.d.ts +11 -0
- package/dist/types/modules/product/components/product-description.component.d.ts +1 -0
- package/dist/types/modules/product/components/product-drawer.component.d.ts +6 -0
- package/dist/types/modules/product/components/product-image-carousel.component.d.ts +5 -0
- package/dist/types/modules/product/components/product-options.component.d.ts +2 -1
- package/dist/types/modules/product/components/product-prop65-warning.d.ts +1 -0
- package/dist/types/modules/product/components/product-retailers-carousel.component.d.ts +6 -0
- package/dist/types/modules/product/components/product-retailers-popup-list.component.d.ts +12 -2
- package/dist/types/modules/product/components/product-retailers-popup.component.d.ts +1 -0
- package/dist/types/modules/product/components/product-retailers.component.d.ts +1 -0
- package/dist/types/modules/product/product.commands.d.ts +5 -5
- package/dist/types/modules/product/product.component.d.ts +3 -0
- package/dist/types/modules/product/styles/prop65-warning.style.d.ts +1 -0
- package/dist/types/modules/product/styles/register-styles.d.ts +1 -0
- package/dist/types/modules/product-list/components/card-components/index.d.ts +6 -0
- package/dist/types/modules/product-list/components/card-components/product-badge.d.ts +9 -0
- package/dist/types/modules/product-list/components/card-components/product-button.d.ts +11 -0
- package/dist/types/modules/product-list/components/card-components/product-fulfillment-text.d.ts +2 -0
- package/dist/types/modules/product-list/components/card-components/product-price-and-personalization.d.ts +14 -0
- package/dist/types/modules/product-list/components/card-components/product-quantity-selector.d.ts +11 -0
- package/dist/types/modules/product-list/components/card-components/product-sizes-list.d.ts +14 -0
- package/dist/types/modules/product-list/components/filter-components/index.d.ts +7 -0
- package/dist/types/modules/product-list/components/filter-components/product-list-apply-filter-button.d.ts +1 -0
- 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
- package/dist/types/modules/product-list/components/filter-components/product-list-chip.d.ts +5 -0
- package/dist/types/modules/product-list/components/filter-components/product-list-filters-chips.d.ts +13 -0
- package/dist/types/modules/product-list/components/filter-components/product-list-fulfillment-filter.d.ts +15 -0
- 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
- package/dist/types/modules/product-list/components/filter-components/product-list-toggle-filters.d.ts +7 -0
- package/dist/types/modules/product-list/components/index.d.ts +6 -2
- package/dist/types/modules/product-list/components/product-list-card-loading.component.d.ts +3 -1
- package/dist/types/modules/product-list/components/product-list-card.component.d.ts +39 -31
- package/dist/types/modules/product-list/components/product-list-engraving.component.d.ts +12 -0
- package/dist/types/modules/product-list/components/product-list-filters.component.d.ts +58 -36
- package/dist/types/modules/product-list/components/product-list-product-engraving-lines.component.d.ts +22 -0
- package/dist/types/modules/product-list/components/product-list-product-pre-cart.component.d.ts +54 -0
- package/dist/types/modules/product-list/components/product-list-search.component.d.ts +25 -0
- package/dist/types/modules/product-list/product-list-filter.registry.d.ts +42 -0
- package/dist/types/modules/product-list/product-list-filter.utils.d.ts +7 -0
- package/dist/types/modules/product-list/product-list-order.utils.d.ts +3 -0
- package/dist/types/modules/product-list/product-list-query-params.utils.d.ts +3 -0
- package/dist/types/modules/product-list/product-list.commands.d.ts +22 -7
- package/dist/types/modules/product-list/product-list.component.d.ts +23 -47
- package/dist/types/modules/product-list/product-list.constants.d.ts +38 -0
- package/dist/types/modules/product-list/product-list.interface.d.ts +17 -28
- package/dist/types/modules/product-list/styles/product-list-card.style.d.ts +1 -0
- package/dist/types/modules/product-list/styles/product-list-filters.style.d.ts +1 -0
- package/dist/types/modules/product-list/styles/register-styles.d.ts +1 -0
- package/dist/types/modules/theme-provider/constants/component-groupings.d.ts +1 -0
- package/dist/types/modules/theme-provider/constants/css-variable-mappings.d.ts +1 -1
- package/dist/types/modules/theme-provider/services/style-registry.service.d.ts +16 -0
- package/dist/types/modules/theme-provider/services/stylesheet-generator.service.d.ts +0 -1
- package/dist/types/modules/theme-provider/styles/register-styles.d.ts +1 -0
- package/dist/types/modules/theme-provider/theme-provider.service.d.ts +2 -2
- package/dist/types/modules/ui-components/alert/alert.component.d.ts +10 -10
- package/dist/types/modules/ui-components/buttons/buttons-open-cart.component.d.ts +5 -0
- package/dist/types/modules/ui-components/drawer/drawer.component.d.ts +15 -0
- package/dist/types/modules/ui-components/engraving/engraving-form.component.d.ts +9 -1
- package/dist/types/modules/ui-components/engraving/engraving-view.component.d.ts +7 -1
- package/dist/types/modules/ui-components/input/index.d.ts +0 -1
- package/dist/types/modules/ui-components/input/input.component.d.ts +15 -2
- package/dist/types/modules/ui-components/lce-element/lce-element.component.d.ts +2 -1
- package/dist/types/modules/ui-components/promo-code-ticker/promo-code-ticker.component.d.ts +1 -1
- package/dist/types/modules/ui-components/ui.commands.d.ts +7 -1
- package/dist/types/ssr/stub.checkout.d.ts +6 -0
- package/dist/types/ssr/stub.d.ts +10 -0
- package/dist/types/static/icon/arrow-right.icon.d.ts +1 -1
- package/dist/types/static/icon/bag.icon.d.ts +1 -1
- package/dist/types/static/icon/check.icon.d.ts +2 -0
- package/dist/types/static/icon/checkbox.icon.d.ts +1 -1
- package/dist/types/static/icon/chevron-down.icon.d.ts +1 -1
- package/dist/types/static/icon/chevron-left.icon.d.ts +1 -1
- package/dist/types/static/icon/chevron-up.icon.d.ts +1 -1
- package/dist/types/static/icon/close.icon.d.ts +1 -1
- package/dist/types/static/icon/error-info.icon.d.ts +1 -1
- package/dist/types/static/icon/filter.icon.d.ts +1 -1
- package/dist/types/static/icon/icon.a11y.d.ts +1 -0
- package/dist/types/static/icon/icon.types.d.ts +1 -0
- package/dist/types/static/icon/index.d.ts +2 -0
- package/dist/types/static/icon/info.icon.d.ts +1 -1
- package/dist/types/static/icon/loading-spinner.icon.d.ts +1 -1
- package/dist/types/static/icon/search.icon.d.ts +1 -1
- package/dist/types/static/icon/success.icon.d.ts +1 -1
- package/dist/types/static/icon/trash.icon.d.ts +1 -1
- package/dist/types/static/icon/warning.icon.d.ts +1 -1
- package/dist/types/utils/dom-compat.d.ts +2 -0
- package/dist/types/utils/format.d.ts +9 -14
- package/dist/types/utils/image-bg-removal.d.ts +3 -0
- package/dist/types/utils/product-selection.d.ts +16 -0
- package/dist/types/utils/product.d.ts +21 -0
- package/dist/types/utils/timezone.d.ts +6 -0
- package/docs/v1/README.md +213 -0
- package/docs/v1/api/actions/address-actions.md +286 -0
- package/docs/v1/api/actions/cart-actions.md +364 -0
- package/docs/v1/api/actions/checkout-actions.md +586 -0
- package/docs/v1/api/actions/product-actions.md +204 -0
- package/docs/v1/api/client.md +664 -0
- package/docs/v1/api/configuration.md +583 -0
- package/docs/v1/api/injection-methods.md +331 -0
- package/docs/v1/api/typescript-types.md +501 -0
- package/docs/v1/api/ui-helpers.md +200 -0
- package/docs/v1/examples/advanced-patterns.md +199 -0
- package/docs/v1/examples/checkout-flow.md +90 -0
- package/docs/v1/examples/custom-theming.md +76 -0
- package/docs/v1/examples/multi-product-page.md +90 -0
- package/docs/v1/examples/simple-product-page.md +89 -0
- package/docs/v1/getting-started/concepts.md +521 -0
- package/docs/v1/getting-started/installation.md +351 -0
- package/docs/v1/getting-started/quick-start.md +410 -0
- package/docs/v1/guides/accessibility.md +288 -0
- package/docs/v1/guides/address-component.md +435 -0
- package/docs/v1/guides/best-practices.md +365 -0
- package/docs/v1/guides/cart-component.md +800 -0
- package/docs/v1/guides/checkout-component.md +817 -0
- package/docs/v1/guides/events.md +1004 -0
- package/docs/v1/guides/product-component.md +761 -0
- package/docs/v1/guides/product-list-component.md +730 -0
- package/docs/v1/guides/theming.md +243 -0
- package/docs/v1/integration/angular.md +39 -0
- package/docs/v1/integration/laravel.md +41 -0
- package/docs/v1/integration/nextjs.md +69 -0
- package/docs/v1/integration/proxy-setup.md +106 -0
- package/docs/v1/integration/react.md +64 -0
- package/docs/v1/integration/vanilla-js.md +84 -0
- package/docs/v1/integration/vue.md +58 -0
- package/docs/v1/reference/analytics.md +133 -0
- package/docs/v1/reference/browser-support.md +47 -0
- package/docs/v1/reference/error-handling.md +83 -0
- package/docs/v1/reference/performance.md +52 -0
- package/docs/v1/reference/telemetry.md +85 -0
- package/docs/v1/reference/troubleshooting.md +135 -0
- package/package.json +75 -45
- package/dist/types/elements-builder-client.d.ts +0 -2
- package/dist/types/elements-client-helper.d.ts +0 -4
- package/dist/types/elements-client.d.ts +0 -2
- package/dist/types/enums/cloud.enum.d.ts +0 -97
- package/dist/types/interfaces/cloud/checkout.interface.d.ts +0 -218
- package/dist/types/interfaces/cloud/core.interface.d.ts +0 -22
- package/dist/types/interfaces/cloud/index.d.ts +0 -3
- package/dist/types/interfaces/cloud/retailer.interface.d.ts +0 -67
- package/dist/types/interfaces/cloud/user.interface.d.ts +0 -100
- package/dist/types/interfaces/core.interface.d.ts +0 -111
- package/dist/types/modules/checkout/components/checkout.type.d.ts +0 -4
- package/dist/types/modules/product-list/components/product-list-filters-subcomponents/index.d.ts +0 -6
- package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-apply-filter-button.component.d.ts +0 -1
- package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-delivery-options-filter.components.d.ts +0 -16
- package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-search.component.d.ts +0 -16
- package/dist/types/modules/product-list/components/product-list-filters-subcomponents/product-list-toggle-filters.components.d.ts +0 -18
- package/dist/types/modules/theme-provider/styles/address/index.d.ts +0 -1
- package/dist/types/modules/theme-provider/styles/cart/index.d.ts +0 -1
- package/dist/types/modules/theme-provider/styles/checkout/index.d.ts +0 -1
- package/dist/types/modules/theme-provider/styles/product/index.d.ts +0 -3
- package/dist/types/modules/theme-provider/styles/product-list/index.d.ts +0 -1
- package/dist/types/modules/theme-provider/styles/ui/index.d.ts +0 -3
- package/dist/types/modules/ui-components/input/birthdate-input.component.d.ts +0 -53
- package/dist/types/utils/helper.d.ts +0 -28
- package/docs/ACTIONS.md +0 -1300
- package/docs/BROWSER_SUPPORT.md +0 -279
- package/docs/CONFIGURATION.md +0 -853
- package/docs/DOCUMENTATION_INDEX.md +0 -311
- package/docs/EVENTS.md +0 -798
- package/docs/PROXY.md +0 -228
- package/docs/THEMING.md +0 -592
- package/docs/TROUBLESHOOTING.md +0 -793
- package/umd/elements.js +0 -1
- /package/dist/types/{auto-initialize.d.ts → auto-initialize/main.d.ts} +0 -0
- /package/dist/types/modules/{theme-provider/styles/address → address/styles}/address.style.d.ts +0 -0
- /package/dist/types/modules/{theme-provider/styles/cart → cart/styles}/cart.style.d.ts +0 -0
- /package/dist/types/modules/{theme-provider/styles/checkout → checkout/styles}/checkout.style.d.ts +0 -0
- /package/dist/types/modules/{theme-provider/styles/product → product/styles}/image-carousel.style.d.ts +0 -0
- /package/dist/types/modules/{theme-provider/styles/product → product/styles}/product.style.d.ts +0 -0
- /package/dist/types/modules/{theme-provider/styles/product → product/styles}/retailers.style.d.ts +0 -0
- /package/dist/types/modules/{theme-provider/styles/product-list → product-list/styles}/product-list.style.d.ts +0 -0
- /package/dist/types/modules/{theme-provider/styles/ui → ui-components/styles}/drawer.style.d.ts +0 -0
- /package/dist/types/modules/{theme-provider/styles/ui → ui-components/styles}/loading.style.d.ts +0 -0
- /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.
|