> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fortepayments.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment Events

> Client-side events emitted by the Forte Payments widget. Use these to update your UI after a payment completes or the widget is closed.

The Forte Payments widget emits client-side `CustomEvent`s that you can listen to on your page. Use these to trigger post-payment UX — such as showing a success message, refreshing inventory, or dismissing a modal — without polling.

<Note>
  Client-side events are available in **widget mode only**. They are not emitted in redirect mode. For authoritative payment confirmation in both modes, use [webhooks](/payments/webhooks).
</Note>

***

## Event Types

<AccordionGroup>
  <Accordion title="FortePaymentsBuyVdaSuccess" icon="circle-check">
    Emitted when the user exits the widget from the **success screen** after completing a VDG purchase — whether they press "Done" or click the close button.

    **When to act:** This is a UI signal that the user has seen the success confirmation. For authoritative delivery confirmation — especially before delivering a Virtual Digital Good — wait for the `payment_approved` [webhook](/payments/webhooks).
  </Accordion>

  <Accordion title="FortePaymentsWidgetClosed" icon="person-to-door">
    Emitted when the user closes the widget from **any screen that is not the success screen** — including mid-flow abandonment, after a payment decline, or after session expiry.

    Use this event to handle clean-up UX, such as re-showing a "Buy" button or dismissing a modal.
  </Accordion>
</AccordionGroup>

***

## Event Listener Snippet

Add event listeners **before** the script that loads the Forte widget.

```javascript theme={null}
window.addEventListener('FortePaymentsBuyVdaSuccess', function(event) {
  console.log('Payment intent ID:', event.detail.paymentIntentId);
  // e.g. show success toast, refresh inventory UI
});

window.addEventListener('FortePaymentsWidgetClosed', function(event) {
  console.log('Widget closed. Intent ID:', event.detail.paymentIntentId);
  // e.g. re-show the Buy button, dismiss modal
});
```

Each event's `detail` object includes the `paymentIntentId` associated with the session.

***

## Authoritative Payment Confirmation

Client-side events confirm that the user closed the widget — not that the payment has settled. For authoritative confirmation before delivering a Virtual Digital Good, always rely on the server-side `payment_approved` webhook.

<Card title="Webhooks" icon="bell" href="/payments/webhooks">
  Set up server-side webhook subscriptions for payment status events
</Card>
