Listening for checkout and express payment clicks

Listen for the lcu:checkout:clicked DOM event to run code when a customer clicks Checkout or an express payment button.

You can listen for both standard checkout clicks and express payment button clicks using a single custom DOM event. This makes it easy to track customer intent, trigger analytics, or run your own logic before the customer is redirected to checkout.

Event details

The app dispatches a CustomEvent on document with the name:

lcu:checkout:clicked

This event fires whenever a customer clicks:

The regular Checkout button, or
An express payment button (Shop Pay, Google Pay, PayPal, and others)

All relevant information is attached to event.detail.

How to listen for the event

Add an event listener to document to capture checkout interactions anywhere on the page:

document.addEventListener('lcu:checkout:clicked', (event) => {
  console.log(event.detail);
});

The event bubbles on document, so you can attach a single listener and capture every checkout and express payment click on the page — no matter where the button is rendered.

Event payload

The shape of event.detail depends on which button was clicked.

Dispatched when an express payment button is clicked, such as Shop Pay or Google Pay.

{
  type: 'express_payment',
  provider: 'shop_pay', // google_pay | paypal | amazon_pay | apple_pay
  cart: { /* Shopify cart object */ },
  timestamp: '2026-01-19T12:34:56.789Z'
}

Properties

type — Always 'express_payment' for express payment clicks.
provider — The express payment provider that was clicked.
cart — The current Shopify cart object.
timestamp — ISO 8601 timestamp of when the click occurred.

Dispatched when the standard checkout button is clicked.

{
  type: 'checkout_button',
  cart: { /* Shopify cart object */ },
  timestamp: '2026-01-19T12:34:56.789Z'
}

Properties

type — Always 'checkout_button' for regular checkout clicks.
cart — The current Shopify cart object.
timestamp — ISO 8601 timestamp of when the click occurred.

Supported express payment providers

The provider field is set to one of the following values:

shop_pay
google_pay
paypal
amazon_pay
apple_pay

Example usage

Use the type field to tell checkout and express payment clicks apart, then read the rest of the payload to respond accordingly:

document.addEventListener('lcu:checkout:clicked', (event) => {
  const { type, provider, cart, timestamp } = event.detail;

  if (type === 'checkout_button') {
    console.log('Checkout button clicked');
  } else if (type === 'express_payment') {
    console.log(`${provider} button clicked`);
  }

  console.log('Cart total:', cart.total_price / 100);
  console.log('Item count:', cart.item_count);
  console.log('Clicked at:', timestamp);
});

The listener runs synchronously when the button is clicked. The customer continues to checkout immediately, so keep your handler lightweight and avoid blocking work or assuming the redirect can be delayed.

Common use cases

Tracking checkout and express payment clicks for analytics.
Triggering custom events before the customer is redirected to checkout.
Debugging payment button behavior.
Differentiating conversion funnels by payment method.