Tracking Checkout Event Callbacks in Frontend

To provide a good user experience, your frontend application must respond when the user completes a purchase or closes the checkout popup.

1. Subscribing to Checkout Callbacks

Pass an eventCallback function inside the Paddle checkout settings payload.

import { getPaddle } from "../lib/paddleClient";

async function openCheckoutWithCallbacks(priceId: string) {
  const paddle = await getPaddle();
  
  if (!paddle) return;

  paddle.Checkout.open({
    items: [{ priceId, quantity: 1 }],
    settings: {
      eventCallback: (event) => {
        const type = event.name;
        
        switch (type) {
          case "checkout.completed":
            console.log("Purchase complete! Transaction payload details:", event.data);
            alert("Thank you for your purchase!");
            break;
          case "checkout.closed":
            console.log("Visitor dismissed checkout popup.");
            break;
          case "checkout.warning":
            console.warn("Payment validation warning:", event.data);
            break;
        }
      },
    },
  });
}

2. Key Event Lifecycle Phases

• checkout.loaded: Triggers when the checkout iframe completes loading in the client overlay.
• checkout.paymentSelected: Triggers when the customer selects a payment method (such as PayPal or credit card).
• checkout.completed: Triggers when payment processing succeeds. Returns transaction information (IDs, prices, quantities).
• checkout.closed: Triggers when the user closes the overlay card without completing a payment.