diff --git a/addons/website_payment/static/src/js/payment_form.js b/addons/website_payment/static/src/js/payment_form.js
index 6f25a7bc915b3..4a2aec0b0cbe4 100644
--- a/addons/website_payment/static/src/js/payment_form.js
+++ b/addons/website_payment/static/src/js/payment_form.js
@@ -8,6 +8,8 @@ import PaymentForm from '@payment/js/payment_form';
 PaymentForm.include({
     events: Object.assign({}, PaymentForm.prototype.events || {}, {
         'change input[name="o_donation_amount"]': '_updateAmount',
+        'focus input[name="amount"]': '_updateAmount',
+        'focus input[name="o_donation_amount"]': '_updateAmount',
     }),
 
     // #=== WIDGET LIFECYCLE ===#
@@ -30,8 +32,18 @@ PaymentForm.include({
      * @return {void}
      */
     _updateAmount(ev) {
-        if (ev.target.value > 0) {
+        if (ev.target.value >= 0) {
             this.paymentContext.amount = ev.target.value;
+            if (ev.target.name === "o_donation_amount" && ev.target.type === "number") {
+                this.el.querySelector("#other_amount").value = ev.target.value;
+            }
+            if (ev.target.id === "other_amount" || (ev.target.name === "o_donation_amount" && ev.target.type === "number")) {
+                this.el.querySelectorAll('input[name="o_donation_amount"][type="radio"]').forEach((radioEl) => {
+                    radioEl.checked = false;
+                });
+            } else if (ev.target.name === "o_donation_amount") {
+                this.el.querySelector("#other_amount").checked = false;
+            }
         }
     },