Checkout

The Checkout component provides a complete purchase flow with customer info, payment (Stripe), and confirmation.

What you get

• Customer, billing, and shipping info

• Gift and marketing preferences

• Promo codes and gift cards

• Order summary and totals

• Hosted checkout or drawer checkout

Default: drawer checkout

Checkout opens automatically from the cart drawer. No setup required.

Hosted checkout (inject)

const client = await Elements('YOUR_API_KEY', { env: 'production' });
await client.injectCheckoutElement({
  containerId: 'checkout',
  checkoutId: 'optional_checkout_id',
  hideHeader: false
});

Hosted checkout (URL param)

Hosted checkout uses two things together:

1. data-checkout-url on the main script (so the cart can redirect to your hosted checkout page).

2. data-checkout-param on the hosted page (so it can read the checkout ID from the URL).

Hosted page example:

<script
  defer
  data-liquid-commerce-elements
  data-token="YOUR_API_KEY"
  data-env="production"
  data-checkout-param="lce_checkout"
  type="text/javascript"
  src="https://assets-elements.liquidcommerce.us/all/elements.js"
></script>

<div data-lce-checkout></div>

Main script example (cart redirects here):

<script
  defer
  data-liquid-commerce-elements
  data-token="YOUR_API_KEY"
  data-env="production"
  data-checkout-url="https://yoursite.com/checkout?lce_checkout={token}"
  data-checkout-param="lce_checkout"
  type="text/javascript"
  src="https://assets-elements.liquidcommerce.us/all/elements.js"
></script>

Hosted checkout UI controls

Use these attributes on the hosted checkout page to customize the UI:

• hide-header on the checkout container Hides the SDK header so you can render your own.

<div data-lce-checkout hide-header></div>

• data-lce-exit-checkout on any element Lets you build your own “Exit checkout” button or link.

<button data-lce-exit-checkout>Exit checkout</button>

Checkout-only build

If a page only needs hosted checkout, use the checkout-only script. It supports the same hosted-checkout attributes but ships ~50% less JavaScript for faster load time.

<script
  defer
  data-liquid-commerce-elements
  data-token="YOUR_API_KEY"
  data-env="production"
  type="text/javascript"
  src="https://assets-elements.liquidcommerce.us/checkout/elements.js"
></script>

Checkout actions

window.elements.actions.checkout.openCheckout();
window.elements.actions.checkout.closeCheckout();
window.elements.actions.checkout.toggleCheckout();
window.elements.actions.checkout.exitCheckout();

await window.elements.actions.checkout.addProduct([
  { identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 }
], true);

await window.elements.actions.checkout.applyPromoCode('WELCOME10');
await window.elements.actions.checkout.removePromoCode();

await window.elements.actions.checkout.applyGiftCard('GIFT-1234-5678');
await window.elements.actions.checkout.removeGiftCard('GIFT-1234-5678');

await window.elements.actions.checkout.toggleIsGift(true);
await window.elements.actions.checkout.toggleBillingSameAsShipping(false);
await window.elements.actions.checkout.toggleMarketingPreferences('canEmail', true);

window.elements.actions.checkout.updateCustomerInfo({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]'
});

window.elements.actions.checkout.updateBillingInfo({
  firstName: 'John',
  lastName: 'Doe',
  addressOne: '789 Elm St',
  city: 'Chicago',
  state: 'IL',
  zipCode: '60601'
});

Checkout events (examples)

window.addEventListener('lce:actions.checkout_submit_completed', (event) => {
  const { orderId, total } = event.detail.data;
});