I am currently working on a payment form. It's absolutely required that our users are allowed to edit the amount they want to pay.

Currently, the way I am handling this is to have an editable 'amount to pay' field. It will be prefilled with their current balance.

If a user edit this amount, what is the best way to warn them that they might be overpaying or underpaying their balance?

Main options I've considered:

  • Do nothing, and let them continue. If they edited the amount, they are aware.
  • Throw a modal that confirms they want to pay a different amount than balance owed
  • Throw a toaster/javascript warning that they will probably see, and let them continue.

If users overpay:

  • Their payment will be applied to this balance, other balances they might have, or refunded. We can't know straight away if they have other balances.

If users underpay:

  • As long as they are before their due date, they are fine. If they underpay, then still have a balance by due date, they get a fee - same as if they just didn't pay.
  • 1
    What are the consequences if they overpay? What about if they underpay? Is there a larger balance that the user owes, and the amount they're paying is just one payment, as is common with loans? Oct 10, 2018 at 15:44
  • Added some clarifications in my post. Yes, you can think of it similar to a loan. Users might have several 'balances' at once ( they can't be combined).
    – S. G. A.
    Oct 10, 2018 at 15:57

1 Answer 1


Show users the consequence of their input, and tell them it's effects on what they're about to do.

Since you can't control the exact amount they'll enter, explain to them the consequences of their actions before the submit the payment.

In this example, I put a warning block between the button and the total, which gives tells them what will happen if they submit.

A possible default for the total

I didnt show it here, but to discourage (but not forbid!) editing of the payment amount, you could put a small edit pencil next to the number.

Clicking that will turn it into the input field I have in the mockup.


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.