Button template-----------------------------------

?xml version="1.0" encoding="UTF-8"?>
templates id="template" xml:space="preserve">

    t t-inherit="point_of_sale.PaymentScreenWidget" t-inherit-mode="extension">
        
            t t-name="CustomButton">
            div class="button set-promoter">
                i class="fa fa-user" role="img" aria-label="Promoter" title="Promoter">
                /i>
                Promoter
            /div>
            /t>

        /xpath>
    /t>
/templates>
JS -------------------------------
odoo.define('custom-button.custom_button', function (require) {
"use strict";
var core = require('web.core');
var screens = require('point_of_sale.screens');
var gui = require('point_of_sale.gui');


//Custom Code
var CustomButton = screens.ActionButtonWidget.extend({
    template: 'CustomButton',

    button_click: function(){

    var self = this;
    self.custom_function();

    },

    custom_function: function(){
      console.log('Hi I am button click of CustomButton');
    }

});

screens.define_action_button({
    'name': 'custom_button',
    'widget': CustomButton,
});


});

Adding to assets --------------------------
?xml version="1.0" encoding="utf-8"?>
odoo>

    template id="assets" inherit_id="point_of_sale.assets">
        xpath expr="." position="inside">

            script type="text/javascript" src="/custom-button/static/src/js/custom.js">

        /xpath>
    /template>

/odoo>
Can't seem to link the function to the button
note: tags are intentionally written like that to avoid rendering