Adyen / Adyen/adyen-react-native

Control component after onSubmit is called

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

Nobody has claimed this yet.

enhancement v3
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.

Image

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.