How to handle users editing the amount they want to pay

Question

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.

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}