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 user intent, trigger analytics, or run custom logic before redirecting to checkout.
Event Details
Event name
lcu:checkout:clicked
This event is dispatched whenever a customer clicks:
The regular Checkout button, or
An express payment button (Shop Pay, Google Pay, PayPal, etc.)
How to Listen for the Event
Add an event listener to the document to capture checkout interactions anywhere on the page:
document.addEventListener('lcu:checkout:clicked', (event) => { console.log(event.detail); });All relevant information is available on event.detail.
Event Payload (event.detail)
Regular Checkout Button
Dispatched when the standard checkout button is clicked.
{ type: 'checkout_button', cart: { /* Shopify cart object */ }, timestamp: '2026-01-19T12:34:56.789Z' }Properties
type– Identifies the interaction as a regular checkout clickcart– The current Shopify cart objecttimestamp– ISO 8601 timestamp of when the click occurred
Express Payment Buttons
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' }Additional properties
provider– The express payment provider that was clicked
Supported Express Payment Providers
The following providers are currently supported:
shop_paygoogle_paypaypalamazon_payapple_pay
Example Usage
You can use the event payload to differentiate between checkout types and 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); });Common Use Cases
Tracking checkout and express payment clicks for analytics
Triggering custom events before redirecting to checkout
Debugging payment button behavior
Differentiating conversion funnels by payment method