Skip to content

Add dropin presentation info to completion callbacks #692

@mtroskot

Description

@mtroskot

Is your feature request related to a problem? Please describe.
When using AdyenDropIn, there's no way to know if the dropin UI was actually presented to the user. This makes it impossible to track payment flow analytics, debug issues, or optimize UX based on whether users saw the payment method selection screen.

Describe the solution you'd like

Add dropin presentation information through one of these approaches:

Option 1: New callback

<AdyenCheckout 
  onComplete={onComplete}
  onError={onError}
  onDropinPresented={() => {
    // Track that dropin UI was shown
  }}
/>

Option 2: Flag in useAdyenCheckout hook

const { start, dropinPresented } = useAdyenCheckout();

// dropinPresented becomes true when dropin UI is displayed
useEffect(() => {
  if (dropinPresented) {
    // Track dropin presentation
  }
}, [dropinPresented]);

Either approach would allow tracking whether the dropin UI was actually presented during the payment flow, enabling better analytics and debugging capabilities.

Describe alternatives you've considered

  • Manual state tracking (error-prone)
  • Custom event listeners (adds complexity)
  • Configuration inference (doesn't reflect runtime behavior)

Additional context
Needed for payment flow analytics, A/B testing, and customer support in our MOTO payment implementation. Should be backward compatible with default false value.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions