diff --git a/kfet/static/kfet/src/kpsul/managers/account_manager.js b/kfet/static/kfet/src/kpsul/managers/account_manager.js
index 3ee556a3..bae3b2ff 100644
--- a/kfet/static/kfet/src/kpsul/managers/account_manager.js
+++ b/kfet/static/kfet/src/kpsul/managers/account_manager.js
@@ -1,11 +1,13 @@
 class AccountManager {
     // Classe pour gérer la partie "compte" de K-Psul
     // Devrait être la seule interface entre le JS de K-Psul et la logique des comptes.
-    constructor() {
+    constructor(kpsul) {
         // jQuery elements
         this._$input = $("#id_trigramme");
         this._$container = $("#account");
-        this._$article_select = $("#article_autocomplete")
+
+        // Parent class
+        this.kpsul = kpsul
 
         // Subordinated classes
         this.account = new Account({ "trigramme": "" });
@@ -15,6 +17,10 @@ class AccountManager {
         this._init_events();
     }
 
+    get is_empty() {
+        return !this.account.is_valid()
+    }
+
     get data() {
         return this.account.toJSON();
     }
@@ -51,6 +57,10 @@ class AccountManager {
         this.update();
     }
 
+    focus() {
+        this._$input.focus()
+    }
+
     update() {
         var trigramme = this._$input.val().format_trigramme();
         this.account.set({ "trigramme": trigramme })
@@ -67,9 +77,9 @@ class AccountManager {
     _on_success() {
         // On utilise l'objet global window pour accéder aux fonctions nécessaires
         this.account.render();
-        this._$article_select.focus();
-        window.updateBasketAmount();
-        window.updateBasketRel();
+        this.kpsul._$article_select.focus();
+        this.kpsul.updateBasketAmount();
+        this.kpsul.updateBasketRel();
     }
 
     reset(hard_reset = false) {
diff --git a/kfet/static/kfet/src/kpsul/managers/checkout_manager.js b/kfet/static/kfet/src/kpsul/managers/checkout_manager.js
new file mode 100644
index 00000000..18f8f3fc
--- /dev/null
+++ b/kfet/static/kfet/src/kpsul/managers/checkout_manager.js
@@ -0,0 +1,47 @@
+class CheckoutManager {
+    constructor(kpsul) {
+        // jQuery elements
+        this._$input = $("#id_checkout_select");
+        this._$container = $("#checkout");
+
+        // Parent class
+        this.kpsul = kpsul
+
+        // Subordinated classes
+        this.checkout = new Checkout();
+
+        // Initialization
+        this._init_events();
+    }
+
+    _init_events() {
+        // L'input change ; on met à jour la caisse
+        this._$input.on("input", () => this.update())
+    }
+
+    update() {
+        var id = this._$input.val();
+        this.checkout.set("id", id);
+        this.checkout.fetch_all({
+            "success": this._on_success.bind(this),
+        })
+    }
+
+    ws_update(ws_data) {
+        for (const entry of ws_data) {
+            if (entry.id == this.checkout.id)
+                this.checkout.set("balance", entry.balance);
+        }
+
+        this.checkout.render()
+    }
+
+    _on_success() {
+        this.checkout.render()
+
+        if (this.kpsul.account_manager.is_empty)
+            this.kpsul.focus("account");
+        else
+            this.kpsul.focus("articles");
+    }
+}
\ No newline at end of file
diff --git a/kfet/static/kfet/src/kpsul/models/account.js b/kfet/static/kfet/src/kpsul/models/account.js
index 8f5d7e6c..f6a88ea3 100644
--- a/kfet/static/kfet/src/kpsul/models/account.js
+++ b/kfet/static/kfet/src/kpsul/models/account.js
@@ -1,15 +1,15 @@
 var Account = Backbone.Model.extend({
 
     defaults: {
-        'id': 0,
-        'name': '',
-        'email': '',
-        'is_cof': '',
-        'promo': '',
-        'balance': '',
-        'is_frozen': false,
-        'departement': '',
-        'nickname': '',
+        "id": 0,
+        "name": "",
+        "email": "",
+        "is_cof": "",
+        "promo": "",
+        "balance": "",
+        "is_frozen": false,
+        "departement": "",
+        "nickname": "",
     },
 
     url: function () {
@@ -18,13 +18,12 @@ var Account = Backbone.Model.extend({
 
     reset: function () {
         // Réinitialise les attributs du modèle à leurs défaults, sauf le trigramme qui est bind à l'input.
-        // On n'utilise pas .clear() car on ne veut pas clear le trigramme.
         this.set(this.defaults)
     },
 
     parse: function (resp, options) {
-        if (_.has(resp, 'balance')) {
-            return _.extend(resp, { 'balance': parseFloat(resp.balance) });
+        if (_.has(resp, "balance")) {
+            return _.extend(resp, { "balance": parseFloat(resp.balance) });
         } else {
             return resp;
         }
@@ -32,9 +31,13 @@ var Account = Backbone.Model.extend({
 
     view: function () {
         var view_class;
+<<<<<<< HEAD
         if (this.is_empty_account()) {
+=======
+        if (!this.is_valid()) {
+>>>>>>> New checkout model and manager
             view_class = EmptyAccountView
-        } else if (this.get("trigramme") == 'LIQ') {
+        } else if (this.get("trigramme") == "LIQ") {
             view_class = LIQView
         } else {
             view_class = AccountView
@@ -46,15 +49,20 @@ var Account = Backbone.Model.extend({
         this.view().render();
     },
 
+<<<<<<< HEAD
     is_empty_account: function () {
         return (this.id == 0)
+=======
+    is_valid: function () {
+        return (this.id != 0)
+>>>>>>> New checkout model and manager
     },
 })
 
 var AccountView = Backbone.View.extend({
 
-    el: '#account',
-    buttons: '.buttons',
+    el: "#account",
+    buttons: ".buttons",
     id_field: "#id_on_acc",
 
     props: _.keys(Account.prototype.defaults),
@@ -70,7 +78,7 @@ var AccountView = Backbone.View.extend({
     },
 
     get_is_cof: function () {
-        return this.model.get("is_cof") ? 'COF' : 'Non-COF';
+        return this.model.get("is_cof") ? "COF" : "Non-COF";
     },
 
     get_balance: function () {
@@ -85,9 +93,9 @@ var AccountView = Backbone.View.extend({
         } else if (this.model.get("balance") < 0) {
             return 'neg';
         } else if (this.model.get("balance") <= 5) {
-            return 'low';
+            return "low";
         } else {
-            return 'ok';
+            return "ok";
         }
     },
 
@@ -115,24 +123,24 @@ var LIQView = AccountView.extend({
     },
 
     attr_data_balance: function () {
-        return 'ok';
+        return "ok";
     }
 })
 
 var EmptyAccountView = AccountView.extend({
     get: function () {
-        return '';
+        return "";
     },
 
     attr_data_balance: function () {
-        return '';
+        return "";
     },
 
     get_buttons: function () {
         /* Léger changement de fonctionnement :
         on affiche *toujours* le bouton de recherche si
         le compte est invalide */
-        var buttons = '<button class="btn btn-primary search" title="Rechercher"><span class="glyphicon glyphicon-search"></span></button>';
+        var buttons = `<button class="btn btn-primary search" title="Rechercher"><span class="glyphicon glyphicon-search"></span></button>`;
         var trigramme = this.model.get("trigramme")
         if (trigramme.is_valid_trigramme()) {
             trigramme = encodeURIComponent(trigramme);
diff --git a/kfet/static/kfet/src/kpsul/models/checkout.js b/kfet/static/kfet/src/kpsul/models/checkout.js
new file mode 100644
index 00000000..f9431b04
--- /dev/null
+++ b/kfet/static/kfet/src/kpsul/models/checkout.js
@@ -0,0 +1,118 @@
+var Statement = Backbone.Model.extend({
+    defaults: {
+        "id": 0,
+        "at": "",
+        "balance": 0,
+        "by": "",
+        "checkout_id": 0,
+    },
+
+    parse: function (resp) {
+        return _.extend(resp, { "balance": parseFloat(resp.balance) });
+    },
+
+    is_valid: function () {
+        return this.id != 0;
+    },
+});
+
+var Checkout = Backbone.Model.extend({
+
+    defaults: {
+        "id": 0,
+        "balance": 0,
+        "last_statement": new Statement()
+    },
+
+    url: function () {
+        return django_urls["kfet.kpsul.checkout_data"](this.id);
+    },
+
+    fetch_all: function (options) {
+        var that = this;
+
+        var success = options.success
+        options.success = function (model, resp, options) {
+            ls = that.get("last_statement");
+            ls.set(ls.parse(resp.last_statement));
+            success.call(options.context, model, resp, options);
+        }
+        return this.fetch(options)
+    },
+
+    is_valid: function () {
+        return this.id != 0;
+    },
+
+    parse: function (resp, options) {
+        return _(resp).pick(_.keys(_.omit(this.defaults, "last_statement")))
+    },
+
+    render: function () {
+        if (this.is_valid()) {
+            checkout_view = new CheckoutView({ "model": this });
+            statement_view = new StatementView({ "model": this.get("last_statement") });
+            checkout_view.render();
+            statement_view.render();
+        } else {
+            checkout_view = new EmptyCheckoutView({ "model": this });
+            checkout_view.render();
+        }
+    },
+
+    reset: function () {
+        this.set(this.defaults)
+    },
+
+});
+
+var CheckoutView = Backbone.View.extend({
+    el: "#checkout",
+    buttons: ".buttons",
+    id_field: "#id_checkout",
+
+    props: _.keys(Checkout.prototype.defaults),
+
+    render: function () {
+        for (let prop of this.props) {
+            selector = "#checkout-" + prop;
+            this.$(selector).text(this.model.get(prop));
+        }
+
+        this.$(this.buttons).html(this.get_buttons());
+        $(this.id_field).val(this.model.id);
+    },
+
+    get_buttons: function () {
+        var url_ls_create = django_urls["kfet.checkoutstatement.create"](this.model.id)
+        var url_update = django_urls["kfet.checkout.update"](this.model.id)
+
+        buttons = `<a class="btn btn-primary" href="${url_ls_create}" title="Effectuer un relevé" target="_blank"><span class="glyphicon glyphicon-euro"></span></a>`;
+        buttons += `<a class="btn btn-primary" href="${url_update}" title="Modifier" target="_blank"><span class="glyphicon glyphicon-cog"></span></a>`;
+
+        return buttons
+    }
+})
+
+var EmptyCheckoutView = CheckoutView.extend({
+    get_buttons: function () {
+        return "";
+    },
+})
+
+var StatementView = Backbone.View.extend({
+    el: "#last_statement",
+
+    render: function () {
+        var at = moment.tz(this.model.get("at"), "UTC");
+        var by = this.model.get("by")
+        var balance = this.model.get("balance")
+
+        at = at.tz('Europe/Paris').format('DD/MM/YY à HH:mm');
+        title = "<b>Dernier relevé : </b>"
+        content = `<span id="last_statement_text">${balance}€ le ${at} par ${by}</span>`
+
+        this.$el.html(title + "<br>" + content)
+    }
+})
+