diff --git a/api/client/payer.php b/api/client/payer.php
index bb8948a..aa4b70b 100644
--- a/api/client/payer.php
+++ b/api/client/payer.php
@@ -65,6 +65,6 @@ $requete->close();
 $idTransaction = transaction(TRANSACTION_PAIEMENT, $_POST["idCarte"], $montant, $quantite);
 
 
-retour("ok", ["idTransaction" => $idTransaction, "soldeAncien" => $soldeAncien, "soldeNouveau" => $soldeNouveau]);
+retour("ok", ["idTransaction" => $idTransaction, "montant" => $montant, "soldeAncien" => $soldeAncien, "soldeNouveau" => $soldeNouveau]);
 
 ?>
diff --git a/index.html b/index.html
index 8a3996d..617787e 100644
--- a/index.html
+++ b/index.html
@@ -118,7 +118,7 @@
                             <input type="number" name="solde" v-model="solde">
                             <label for="solde">Solde initial (€)</label>
                         </div>
-                        <button :disabled="!solde || (!PEUT_NFC && !idCarte)">Créer</button>
+                        <button type="submit" :disabled="!solde || (!PEUT_NFC && !idCarte)">Créer</button>
                     </form>
                 </div>
                 <div id="rechargement">
@@ -134,12 +134,12 @@
                             <input type="number" name="credit" v-model="credit">
                             <label for="credit">Crédit (€)</label>
                         </div>
-                        <button :disabled="!credit || (!PEUT_NFC && !idCarte)">Créer</button>
+                        <button type="submit" :disabled="!credit || (!PEUT_NFC && !idCarte)">Recharger</button>
                     </form>
                 </div>
                 <div id="paiement">
                     <h4>Vendre à un client</h4>
-                    <form @submit="payer">
+                    <form>
                         <div class="input-field" v-if="!PEUT_NFC">
                             <i class="material-icons prefix">credit_card</i>
                             <input type="text" name="idCarte" length="8" v-model="idCarte">
@@ -150,7 +150,7 @@
                         </div>
                         <div id="grilleBieres">
                             <div>
-                                <div v-for="i in [1, 2, 3, 4, 5, 6]"><button :disabled="!PEUT_NFC && !idCarte">{{ i }}</button></div>
+                                <div v-for="i in [1, 2, 3, 4, 5, 6]"><button type="button" @click="payer(i)" :disabled="prix || (!PEUT_NFC && !idCarte)">{{ i }}</button></div>
                             </div>
                         </div>
                         <div class="row">
@@ -161,7 +161,7 @@
                             <input type="number" name="prix" v-model="prix">
                             <label for="prix">Prix (€)</label>
                         </div>
-                        <button :disabled="!prix || (!PEUT_NFC && !idCarte)">Payer</button>
+                        <button type="submit" @click="payer" :disabled="!prix || (!PEUT_NFC && !idCarte)">Payer</button>
                     </form>
                 </div>
                 <div id="vidange">
@@ -172,7 +172,7 @@
                             <input type="text" name="idCarte" length="8" v-model="idCarte">
                             <label for="idCarte">Identifiant de la carte</label>
                         </div>
-                        <button :disabled="!PEUT_NFC && !idCarte">Vider</button>
+                        <button type="submit" :disabled="!PEUT_NFC && !idCarte">Vider</button>
                     </form>
                 </div>
             </div>
diff --git a/js/init.js b/js/init.js
index fbc1bda..8630daa 100644
--- a/js/init.js
+++ b/js/init.js
@@ -56,7 +56,6 @@ var app = new Vue({
         },
         // Fonctionnement
         connecter: function() {
-            console.log(57)
             var that = this;
             this.apiBrute("utilisateur/connexion", {login: this.login , mdp: this.mdp} , function(retour, donnees) {
                 that.mdp = ''
@@ -70,10 +69,6 @@ var app = new Vue({
                         that.page = 'operations'
                        break;
 
-                    case "identifiants_invalides":
-                        that.toast("Identifiants invalides")
-                        break;
-
                     default:
                         that.erreur(retour, donnees);
                         break;
@@ -89,8 +84,18 @@ var app = new Vue({
                         that.toast("Client " + that.idCarte + " crée avec un solde de " + that.solde + " €")
                         break;
 
-                    case "solde_negatif":
-                        that.toast("Solde négatif")
+                    default:
+                        that.erreur(retour, donnees);
+                        break;
+                }
+            });
+        },
+        recharger: function() {
+            var that = this
+            this.api("client/recharger", {idCarte: this.idCarte, montant: this.credit}, function(retour, donnees) {
+                switch(retour) {
+                    case "ok":
+                        that.toast("Client " + that.idCarte + " rechargé : " + donnees.soldeAncien + " + " + that.credit + " → " + donnees.soldeNouveau + " €")
                         break;
 
                     default:
@@ -98,7 +103,41 @@ var app = new Vue({
                         break;
                 }
             });
-        }
+        },
+        payer: function(quantite) {
+            var that = this
+            var options = {idCarte: this.idCarte}
+            if (typeof(quantite) == 'number') {
+                options.quantite = quantite
+            } else {
+                options.montant = that.prix
+            }
+            this.api("client/payer", options, function(retour, donnees) {
+                switch(retour) {
+                    case "ok":
+                        that.toast("Client " + that.idCarte + " débité : " + donnees.soldeAncien + " - " + donnees.montant + " → " + donnees.soldeNouveau + " €")
+                        break;
+
+                    default:
+                        that.erreur(retour, donnees);
+                        break;
+                }
+            });
+        },
+        vidanger: function() {
+            var that = this
+            this.api("client/vidange", {idCarte: this.idCarte}, function(retour, donnees) {
+                switch(retour) {
+                    case "ok":
+                        that.toast("Client " + that.idCarte + " vidé : " + donnees.soldeAncien + " → 0 €")
+                        break;
+
+                    default:
+                        that.erreur(retour, donnees);
+                        break;
+                }
+            });
+        },
     },
     computed: {
         timer: function() {
--
libgit2 0.21.2