How to inherit Odoo's POS buttons

I'm trying to add some functions in the POS buttons, specifically the button that shows up like "Validate". To test if the guide in this link https://odoo-development.readthedocs.io/en/latest/dev/pos/gui.html works, I'm just adding a console.log like the following:

odoo.define('my_module.js_file', function (require) {
    "use strict";

    var screens = require('point_of_sale.screens');

    screens.PaymentScreenWidget.include({
    init: function(parent, options) {
        this._super(parent, options);
        //My console log message
        console.log('Hello world!')
        this.pos.on('updateDebtHistory', function(partner_ids){
            this.update_debt_history(partner_ids);
      }, this);
    },
  });

But the message only shows up once when the POS ends loading the data and not when I push the button. What am I doing wrong here?

Solution

To add your code to the Validate button you will need to modify the payment screen widget via the include method (You already did that).

If you inspect the button from the browser you will find that it has a class next which is used to bind an event handler to the click JavaScript event.

Example:

var screens = require('point_of_sale.screens');
var PaymentScreenWidget = screens.PaymentScreenWidget;

PaymentScreenWidget.include({

    validate_order: function(force_validation) {
        console.log('Hello world!');
        this._super(force_validation);
    },

});