Hi,

I think you are trying to print pos receipt before validating pos order.

(Action button widget is used for adding buttons above numbpad and actionpad widget. You are trying to add payment screen itself in the place of actionpad button.)

Please correct your code like below:

xml file:

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-extend="PaymentScreenWidget">
        <t t-jquery="t[t-if='widget.pos.config.module_account']" t-operation="after">
            <div class='button js_custom_print'>
                <i class='fa fa-print' /> Custom Print
            </div>
        </t>
    </t>

    <t t-name="PrintReceiptScreenWidget" t-extend="ReceiptScreenWidget">
        <t t-jquery="div.top-content" t-operation="inner">
            <span class='button back'>
                <i class='fa fa-angle-double-left'></i>
                Back
            </span>
        </t>
    </t>
</templates>

js file:

odoo.define('POS.pos', function (require) {
'use strict';

var models = require('point_of_sale.models');
var core = require('web.core');
var screens = require('point_of_sale.screens');
var Widget = require('web.Widget');
var gui = require('point_of_sale.gui');
var ajax = require('web.ajax');

var qweb = core.qweb;

screens.PaymentScreenWidget.include({
    renderElement: function() {
        var self = this;
        this._super();
        this.$('.js_custom_print').click(function(){
            self.click_custom_print();
        });
    },
    click_custom_print: function(){
        this.gui.show_screen('print_receipt');
    }
});

var PrintReceiptScreenWidget = screens.ReceiptScreenWidget.extend({
    template: 'PrintReceiptScreenWidget',
    click_back: function(){
        this.gui.show_screen('payment');
    },

});
gui.define_screen({name:'print_receipt', widget: PrintReceiptScreenWidget});

});

Thanks