User Account Data & Events

The User Account drop-in uses the event bus to emit and listen to events for communication between drop-ins and external integrations.

Version: 3.2.0

Events reference

Event	Direction	Description
account/customerPaymentTokens	Listens	Optional display list of stored payment tokens for the PaymentMethods UI (injection only); consumed eagerly when present. Does not participate in removal.
companyContext/changed	Listens	Fired by Company Context (companyContext) when a change occurs.

Event details

The following sections provide detailed information about each event, including its direction, event payload, and usage examples.

account/customerPaymentTokens (listens)

The PaymentMethods container and usePaymentMethods hook subscribe to this event. If a payload is already available on the event bus, the hook uses it instead of calling the GraphQL getCustomerPaymentTokens query. This allows you to inject a list into the UI from another drop-in (for example, Payment Services) or from tests.

Subscribe with an eager listener so any payload emitted before subscription is still received and applied (following the same pattern as cart data events).

Event payload

Shape	Description
Array of token rows	Each item matches the StoredPaymentMethodDisplay shape: publicHash, cardBrand, lastFourDigits, optional expired, optional variant.
null	Explicit empty list (same convention as cart cart/data).

Removal (not on the event bus)

Removing a stored method is not handled through this event. When a shopper selects Remove in the PaymentMethods UI, they first confirm in a removal modal. The drop-in then calls the GraphQL deletePaymentToken mutation and updates the in-memory list—regardless of whether the rows were initially sourced from the event or from getCustomerPaymentTokens. The event bus is not used for deletion. If another part of the page needs to stay in sync after removal, you can optionally emit an updated account/customerPaymentTokens payload.

TypeScript declaration

The User Account drop-in still extends @adobe-commerce/event-bus with this channel, making emit and on type-safe for list injection. This payload type is not used for deletion—there is no “delete via the bus” event. Removal is handled exclusively through deletePaymentToken.

import type { StoredPaymentMethodDisplay } from '../data/models/stored-payment-method';

declare module '@adobe-commerce/event-bus' {
  interface Events {
    /** PaymentMethods list injection only; `null` means an empty list (same idea as cart `cart/data`). Not used for removal—use GraphQL `deletePaymentToken`. */
    'account/customerPaymentTokens': StoredPaymentMethodDisplay[] | null;
  }
}

This declaration is only for typing list injection; it does not introduce a bus-based delete API. Use the same StoredPaymentMethodDisplay shape as the return items from getCustomerPaymentTokens. JavaScript storefronts can ignore the .d.ts file as runtime behavior remains the same.

Example

import { events } from '@dropins/tools/event-bus.js';

events.on(
  'account/customerPaymentTokens',
  (payload) => {
    console.log('Stored payment tokens:', payload);
  },
  { eager: true }
);

companyContext/changed (listens)

Fired by Company Context (companyContext) when a change occurs.

Event payload

Example

import { events } from '@dropins/tools/event-bus.js';

events.on('companyContext/changed', (payload) => {
  console.log('companyContext/changed event received:', payload);
  // Add your custom logic here
});