diff --git a/addons/account/static/src/css/account_bank_and_cash.css b/addons/account/static/src/css/account_bank_and_cash.css
index 5c5723079f2..1d2a4fba74f 100644
--- a/addons/account/static/src/css/account_bank_and_cash.css
+++ b/addons/account/static/src/css/account_bank_and_cash.css
@@ -26,6 +26,6 @@
   margin-right: 4px;
 }
 
-.oe_payment_label{
+.o_payment_label{
   padding-right: 20px;
 }
\ No newline at end of file
diff --git a/addons/account/static/src/js/account_payment_field.js b/addons/account/static/src/js/account_payment_field.js
new file mode 100644
index 00000000000..fb038f3e642
--- /dev/null
+++ b/addons/account/static/src/js/account_payment_field.js
@@ -0,0 +1,146 @@
+odoo.define('account.payment', function (require) {
+"use strict";
+
+var AbstractField = require('web.AbstractField');
+var core = require('web.core');
+var field_registry = require('web.field_registry');
+var field_utils = require('web.field_utils');
+
+var QWeb = core.qweb;
+
+
+var ShowPaymentLineWidget = AbstractField.extend({
+    events: _.extend({
+        'click .outstanding_credit_assign': '_onOutstandingCreditAssign',
+    }, AbstractField.prototype.events),
+    supportedFieldTypes: ['char'],
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     * @returns {boolean}
+     */
+    isSet: function() {
+        return true;
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @override
+     */
+    _render: function() {
+        var self = this;
+        var info = JSON.parse(this.value);
+        if (!info) {
+            this.$el.html('');
+            return;
+        }
+        _.each(info.content, function (k, v){
+            k.index = v;
+            k.amount = field_utils.format.float(k.amount, {digits: k.digits});
+            if (k.date){
+                k.date = field_utils.format.date(field_utils.parse.date(k.date, {isUTC: true}));
+            }
+        });
+        this.$el.html(QWeb.render('ShowPaymentInfo', {
+            lines: info.content,
+            outstanding: info.outstanding,
+            title: info.title
+        }));
+        _.each(this.$('.js_payment_info'), function (k, v){
+            var content = info.content[v];
+            var options = {
+                content: function () {
+                    var $content = $(QWeb.render('PaymentPopOver', {
+                        name: content.name,
+                        journal_name: content.journal_name,
+                        date: content.date,
+                        amount: content.amount,
+                        currency: content.currency,
+                        position: content.position,
+                        payment_id: content.payment_id,
+                        move_id: content.move_id,
+                        ref: content.ref,
+                    }));
+                    $content.filter('.js_unreconcile_payment').on('click', self._onRemoveMoveReconcile.bind(self));
+                    $content.filter('.js_open_payment').on('click', self._onOpenPayment.bind(self));
+                    return $content;
+                },
+                html: true,
+                placement: 'left',
+                title: 'Payment Information',
+                trigger: 'focus',
+                delay: { "show": 0, "hide": 100 },
+            };
+            $(k).popover(options);
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @override
+     * @param {MouseEvent} event
+     */
+    _onOpenPayment: function (event) {
+        var moveId = parseInt($(event.target).attr('move-id'));
+        if (moveId !== undefined && !isNaN(moveId)){
+            //Open form view of account.move with id = move_id
+            this.do_action({
+                type: 'ir.actions.act_window',
+                res_model: 'account.move',
+                res_id: moveId,
+                views: [[false, 'form']],
+                target: 'current'
+            });
+        }
+    },
+    /**
+     * @private
+     * @override
+     * @param {MouseEvent} event
+     */
+    _onOutstandingCreditAssign: function (event) {
+        var self = this;
+        var id = $(event.target).data('id') || false;
+        this._rpc({
+                model: 'account.invoice',
+                method: 'assign_outstanding_credit',
+                args: [JSON.parse(this.value).invoice_id, id],
+            }).then(function () {
+                self.trigger_up('reload');
+            });
+    },
+    /**
+     * @private
+     * @override
+     * @param {MouseEvent} event
+     */
+    _onRemoveMoveReconcile: function (event) {
+        var self = this;
+        var paymentId = parseInt($(event.target).attr('payment-id'));
+        if (paymentId !== undefined && !isNaN(paymentId)){
+            this._rpc({
+                model: 'account.move.line',
+                method: 'remove_move_reconcile',
+                args: [paymentId, {'invoice_id': this.res_id}]
+            }).then(function () {
+                self.trigger_up('reload');
+            });
+        }
+    },
+});
+
+field_registry.add('payment', ShowPaymentLineWidget);
+
+});
diff --git a/addons/account/static/src/js/account_payment_widget.js b/addons/account/static/src/js/account_payment_widget.js
deleted file mode 100644
index 07194b4d38b..00000000000
--- a/addons/account/static/src/js/account_payment_widget.js
+++ /dev/null
@@ -1,102 +0,0 @@
-odoo.define('account.payment', function (require) {
-"use strict";
-
-var AbstractField = require('web.AbstractField');
-var core = require('web.core');
-var field_registry = require('web.field_registry');
-var field_utils = require('web.field_utils');
-
-var QWeb = core.qweb;
-
-
-var ShowPaymentLineWidget = AbstractField.extend({
-    render: function() {
-        var self = this;
-        var info = JSON.parse(this.value);
-        var invoice_id = info.invoice_id;
-        if (info !== false) {
-            _.each(info.content, function(k,v){
-                k.index = v;
-                k.amount = field_utils.format.float(k.amount, {digits: k.digits});
-                if (k.date){
-                    k.date = field_utils.format.date(k.date);
-                }
-            });
-            this.$el.html(QWeb.render('ShowPaymentInfo', {
-                'lines': info.content,
-                'outstanding': info.outstanding,
-                'title': info.title
-            }));
-            this.$('.outstanding_credit_assign').click(function(){
-                var id = $(this).data('id') || false;
-                self.trigger_up('perform_model_rpc', {
-                    model: 'account.invoice',
-                    method: 'assign_outstanding_credit',
-                    args: [invoice_id, id],
-                    on_success: function () {
-                        self.trigger_up('reload');
-                    }
-                });
-            });
-            _.each(this.$('.js_payment_info'), function(k, v){
-                var options = {
-                    'content': QWeb.render('PaymentPopOver', {
-                            'name': info.content[v].name,
-                            'journal_name': info.content[v].journal_name,
-                            'date': info.content[v].date,
-                            'amount': info.content[v].amount,
-                            'currency': info.content[v].currency,
-                            'position': info.content[v].position,
-                            'payment_id': info.content[v].payment_id,
-                            'move_id': info.content[v].move_id,
-                            'ref': info.content[v].ref,
-                            }),
-                    'html': true,
-                    'placement': 'left',
-                    'title': 'Payment Information',
-                    'trigger': 'focus',
-                    'delay': { "show": 0, "hide": 100 },
-                };
-                $(k).popover(options);
-                $(k).on('shown.bs.popover', function(){
-                    $(this).parent().find('.js_unreconcile_payment').click(function(){
-                        var payment_id = parseInt($(this).attr('payment-id'));
-                        if (payment_id !== undefined && !isNaN(payment_id)){
-                            self.trigger_up('perform_model_rpc', {
-                                model: 'account.move.line',
-                                method: 'remove_move_reconcile',
-                                args: [payment_id, {'invoice_id': self.res_id}],
-                                on_success: function () {
-                                    self.trigger_up('reload');
-                                }
-                            });
-                        }
-                    });
-                    $(this).parent().find('.js_open_payment').click(function(){
-                        var move_id = parseInt($(this).attr('move-id'));
-                        if (move_id !== undefined && !isNaN(move_id)){
-                            //Open form view of account.move with id = move_id
-                            self.do_action({
-                                type: 'ir.actions.act_window',
-                                res_model: 'account.move',
-                                res_id: move_id,
-                                views: [[false, 'form']],
-                                target: 'current'
-                            });
-                        }
-                    });
-                });
-            });
-        }
-        else {
-            this.$el.html('');
-        }
-    },
-    has_no_value: function() {
-        return false;
-    }
-});
-
-field_registry.add('payment', ShowPaymentLineWidget);
-
-});
diff --git a/addons/account/static/src/xml/account_payment.xml b/addons/account/static/src/xml/account_payment.xml
index 2f08e6882fe..61b2e50b5bc 100644
--- a/addons/account/static/src/xml/account_payment.xml
+++ b/addons/account/static/src/xml/account_payment.xml
@@ -25,7 +25,7 @@
                             <a role="button" tabindex="0" class="js_payment_info fa fa-info-circle" t-att-index="line.index" style="margin-right:5px;"></a>
                         </td>
                         <td>
-                            <i class="oe_form_field text-right oe_payment_label">Paid on <t t-esc="line.date"></t></i>
+                            <i class="o_form_field text-right o_payment_label">Paid on <t t-esc="line.date"></t></i>
                         </td>
                     </t>
                         <td style="text-align:right;">
diff --git a/addons/account/static/tests/account_payment_field_tests.js b/addons/account/static/tests/account_payment_field_tests.js
new file mode 100644
index 00000000000..b0b6aff3052
--- /dev/null
+++ b/addons/account/static/tests/account_payment_field_tests.js
@@ -0,0 +1,84 @@
+odoo.define('account.reconciliation_field_tests', function (require) {
+"use strict";
+
+var FormView = require('web.FormView');
+var testUtils = require('web.test_utils');
+
+var createView = testUtils.createView;
+
+QUnit.module('account', {
+    beforeEach: function () {
+        this.data = {
+            'account.invoice': {
+                fields: {
+                    payments_widget: {string: "payments_widget data", type: "char"},
+                    outstanding_credits_debits_widget: {string: "outstanding_credits_debits_widget data", type: "char"},
+                },
+                records: [{
+                    id: 1,
+                    payments_widget: '{"content": [{"digits": [69, 2], "currency": "$", "amount": 555.0, "name": "Customer Payment: INV/2017/0004", "date": "2017-04-25", "position": "before", "ref": "BNK1/2017/0003 (INV/2017/0004)", "payment_id": 22, "move_id": 10, "journal_name": "Bank"}], "outstanding": false, "title": "Less Payment"}',
+                    outstanding_credits_debits_widget: '{"content": [{"digits": [69, 2], "currency": "$", "amount": 100.0, "journal_name": "INV/2017/0004", "position": "before", "id": 20}], "invoice_id": 4, "outstanding": true, "title": "Outstanding credits"}',
+                }]
+            },
+        };
+    }
+}, function () {
+    QUnit.module('Reconciliation');
+
+    QUnit.test('Reconciliation form field', function (assert) {
+        assert.expect(5);
+
+        var form = createView({
+            View: FormView,
+            model: 'account.invoice',
+            data: this.data,
+            arch: '<form>'+
+                '<field name="outstanding_credits_debits_widget" widget="payment"/>'+
+                '<field name="payments_widget" widget="payment"/>'+
+            '</form>',
+            res_id: 1,
+            mockRPC: function (route, args) {
+                if (args.method === 'remove_move_reconcile') {
+                    assert.deepEqual(args.args, [22,{"invoice_id":1}], "should call remove_move_reconcile {warning: required focus}");
+                    return $.when();
+                }
+                if (args.method === 'assign_outstanding_credit') {
+                    assert.deepEqual(args.args, [4, 20], "should call assign_outstanding_credit {warning: required focus}");
+                    return $.when();
+                }
+                return this._super.apply(this, arguments);
+            },
+            intercepts: {
+                do_action: function (event) {
+                    assert.deepEqual(event.data.action, {
+                            'type': 'ir.actions.act_window',
+                            'res_model': 'account.move',
+                            'res_id': 10,
+                            'views': [[false, 'form']],
+                            'target': 'current'
+                        },
+                        "should open the form view");
+                },
+            },
+        });
+
+        assert.strictEqual(form.$('.o_form_field[name="payments_widget"]').text().replace(/[\s\n\r]+/g, ' '),
+            " Paid on 04/25/2017 $ 555.00 ",
+            "should display payment information");
+
+        form.$('.o_form_field[name="outstanding_credits_debits_widget"] .outstanding_credit_assign').trigger('click');
+
+        assert.strictEqual(form.$('.o_form_field[name="outstanding_credits_debits_widget"]').text().replace(/[\s\n\r]+/g, ' '),
+            " Outstanding credits Add INV/2017/0004 $ 100.00 ",
+            "should display outstanding information");
+
+        form.$('.o_form_field[name="payments_widget"] .js_payment_info').trigger('focus');
+        form.$('.popover .js_open_payment').trigger('click');
+
+        form.$('.o_form_field[name="payments_widget"] .js_payment_info').trigger('focus');
+        form.$('.popover .js_unreconcile_payment').trigger('click');
+
+        form.destroy();
+    });
+});
+});
diff --git a/addons/account/views/account.xml b/addons/account/views/account.xml
index 4481d863979..5e9f70ccbb1 100644
--- a/addons/account/views/account.xml
+++ b/addons/account/views/account.xml
@@ -12,13 +12,14 @@
             <script type="text/javascript" src="/account/static/src/js/reconciliation/reconciliation_renderer.js"></script>
 
             <!-- <script type="text/javascript" src="/account/static/src/js/tour_bank_statement_reconciliation.js"></script> -->
-            <script type="text/javascript" src="/account/static/src/js/account_payment_widget.js"></script>
+            <script type="text/javascript" src="/account/static/src/js/account_payment_field.js"></script>
         </xpath>
     </template>
 
     <template id="qunit_suite" name="account_reconciliation tests" inherit_id="web.qunit_suite">
         <xpath expr="//script[contains(@src, '/web/static/tests/views/kanban_tests.js')]" position="after">
             <script type="text/javascript" src="/account/static/tests/reconciliation_tests.js"></script>
+            <script type="text/javascript" src="/account/static/tests/account_payment_field_tests.js"></script>
         </xpath>
     </template>
 </odoo>