Adyen / Adyen/adyen-react-native
Control component after onSubmit is called
Nobody has claimed this yet.
- 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.
Yes. While using the Adyen Drop-in for React Native with the SEPA Direct Debit payment method, the onSubmit callback is triggered correctly after the user enters their name and IBAN and taps "Pay".
However, in our use case, we run custom validation logic in onSubmit — and depending on conditions, we may want to reject the submission, display a custom error message, and allow the user to correct their input and try again.
Currently, there's no supported way to:
Prevent the form from closing
Show a custom error message back on the SEPA form
Reset the form or return it to a clean state for re-entry
Control the loading state of the "Pay" button
Because the SDK auto-dismisses or locks the form once onSubmit completes, the user experience cannot be gracefully recovered from a validation failure.
Describe the solution you'd like
I would like to request:
Ability to return an error from onSubmit that causes the Drop-in to:
Stay on the SEPA screen
Show a custom error message (e.g., "IBAN failed internal validation")
Optionally clear or retain the existing form values
An API like:
dropInComponent.showValidationError(message: string)
dropInComponent.resetForm()
Or ability to return something like:
return {
action: 'reject',
errorMessage: 'Your IBAN is invalid',
resetForm: true, // or false to keep values
}
Optional: expose a way to manually control loading spinner state on the "Pay" button (to avoid flickers or double loading)
Describe alternatives you've considered
We tried showing a global error or alert, but the SEPA form is already locked or dismissed.
Reopening the Drop-in is not user-friendly and forces users to re-enter all details.
Building the SEPA form ourselves is not possible, as there’s no standalone UI component exposed for SEPA in the React Native SDK.
Additional context
We have shown the custom error in the toast style but not able to control the form or loading state of action button.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the SEPA Drop-in's onSubmit lifecycle and how it handles form dismissal, errors, reset behavior, and the Pay button loading state. Done means a documented API lets callers reject submission, keep the SEPA screen open, show a custom error, choose whether to retain values, and control loading without breaking retry behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile, payments
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100