Adyen / Adyen/adyen-react-native

Add dropin presentation info to completion callbacks

Open
#692 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
71
Forks
45
Avg merge
2d 5h
Merged PRs (30d)
1

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the AdyenCheckout completion callbacks and the useAdyenCheckout hook described in the issue. Compare the proposed callback and hook flag against how AdyenDropIn presentation is currently exposed, then confirm which API maintainers want. Done means runtime presentation state is observable, defaults to false, and existing integrations remain backward compatible.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile, payments
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.