diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5e11c11..e469634 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -37,12 +37,12 @@ const routes: Routes = [
         path: 'pago-tarjeta',
         loadChildren: () => import('./modules/pago-tarjeta/pago-tarjeta.module').then(m => m.PagoTarjetaModule)
       },
-      {
-        path: 'mensaje-final',
-        loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule)
-      },
     ]
   },
+  {
+    path: 'mensaje-final',
+    loadChildren: () => import('./modules/mensaje-final/mensaje-final.module').then(m => m.MensajeFinalModule)
+  },
   { path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 
diff --git a/src/app/modules/forma-pago/forma-pago.component.html b/src/app/modules/forma-pago/forma-pago.component.html
index 196cd8c..dcdf9a9 100644
--- a/src/app/modules/forma-pago/forma-pago.component.html
+++ b/src/app/modules/forma-pago/forma-pago.component.html
@@ -50,7 +50,7 @@
       <div class="col-auto px-0 h-auto align-self-start">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
-          [routerLink]="['/pago-tarjeta']">
+          (click)="medioPago(4)">
           <div class="row mx-0 bg-primary badge-pill">
             <div class="col-auto p-0">
               <img
diff --git a/src/app/modules/forma-pago/forma-pago.component.ts b/src/app/modules/forma-pago/forma-pago.component.ts
index 8d8e93e..fb1926f 100644
--- a/src/app/modules/forma-pago/forma-pago.component.ts
+++ b/src/app/modules/forma-pago/forma-pago.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-forma-pago',
@@ -7,9 +9,24 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FormaPagoComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private articuloService: ArticuloService,
+    private router: Router,
+  ) { }
 
   ngOnInit() {
   }
 
+  medioPago(medioPago: number) {
+    this.articuloService.medioPago = medioPago;
+    switch (medioPago) {
+      case 4:
+        this.router.navigate(['pago-tarjeta']);
+        break;
+      case 9:
+        this.router.navigate(['pago-electronico']);
+        break;
+    }
+  }
+
 }
diff --git a/src/app/modules/mensaje-final/mensaje-final.component.html b/src/app/modules/mensaje-final/mensaje-final.component.html
index b8bb57a..9a88991 100644
--- a/src/app/modules/mensaje-final/mensaje-final.component.html
+++ b/src/app/modules/mensaje-final/mensaje-final.component.html
@@ -25,7 +25,7 @@
           class="img-in-top px-4 bg-white"
           src="assets/img/ticket.svg">
         <p class="h6 mb-2"><small>PRESENTÁ EL TICKET EN CAJA Y AGUARDÁ TU PEDIDO</small></p>
-        <p class="h2 text-primary">Número de pedido {{023}}</p>
+        <p class="h2 text-primary">Número de pedido {{articuloService.idComanda}}</p>
       </div>
     </div>
     <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
@@ -49,5 +49,20 @@
         </p>
       </div>
     </div>
+    <div class="row justify-content-center">
+      <div class="col-auto">
+        <div
+          class="d-inline-block py-1 btn-effect bg-primary badge-pill text-white"
+          (click)="goToSplash()">
+          <span class="px-4">FINALIZAR</span>
+          <img
+            draggable="false"
+            ondragstart="return false;"
+            (contextmenu)="false"
+            class="icon-30"
+            src="assets/img/ir.svg">
+        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/app/modules/mensaje-final/mensaje-final.component.ts b/src/app/modules/mensaje-final/mensaje-final.component.ts
index e977129..f531e36 100644
--- a/src/app/modules/mensaje-final/mensaje-final.component.ts
+++ b/src/app/modules/mensaje-final/mensaje-final.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-mensaje-final',
@@ -7,9 +9,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MensajeFinalComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    public articuloService: ArticuloService,
+    private router: Router,
+  ) { }
 
   ngOnInit() {
+    setTimeout(() => {
+      this.goToSplash();
+    }, 10000)
+  }
+
+  goToSplash() {
+    this.articuloService.cleanShoppingCar();
+    this.router.navigate(['']);
   }
 
 }
diff --git a/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts b/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
index 22eea8d..4c78640 100644
--- a/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
+++ b/src/app/modules/pago-tarjeta/pago-tarjeta.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-pago-tarjeta',
@@ -7,9 +9,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PagoTarjetaComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private articuloService: ArticuloService,
+    private router: Router,
+  ) { }
 
   ngOnInit() {
+    let dataPago = {
+      pedidoAnombreDe: ''
+    }
+    this.articuloService.pay(dataPago)
+      .subscribe((res: any) => {
+        this.articuloService.idComanda = res.data;
+        this.router.navigate(['mensaje-final']);
+      }, err => console.error(err));
   }
 
 }
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index c570ce9..c9d4254 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -119,8 +119,11 @@ export class SeleccionArticulosComponent implements OnInit {
   }
 
   elegirArticulo(articulo: IArticulo) {
-    articulo.cantidad = 1;
-    this.articuloService.setArticulo(articulo);
+    this.articuloService.getById(articulo.id)
+      .subscribe((res: IArticulo) => {
+        res.cantidad = 1;
+        this.articuloService.setArticulo(res);
+      }, err => console.error(err));
   }
 
   increaseShow() {
diff --git a/src/app/services/articulo/articulo.service.ts b/src/app/services/articulo/articulo.service.ts
index c8be819..234b8d7 100644
--- a/src/app/services/articulo/articulo.service.ts
+++ b/src/app/services/articulo/articulo.service.ts
@@ -13,6 +13,8 @@ export class ArticuloService {
   mostrar: string;
   esPromoPersonalizada: boolean = false;
   urlDeboSuite = APP_SETTINGS.apiDeboSuite;
+  medioPago: number;
+  idComanda: number;
 
   constructor(
     private http: HttpClient,
@@ -46,14 +48,14 @@ export class ArticuloService {
     return new Observable((observer) => {
       this.clienteService.getById(-1)
         .subscribe(cliente => {
-          let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));
+          let puntoVenta = 9998;
           this.markArticuloInPromoAsRemoved();
-          this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, {
+          this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
             productos: this.carrito,
             cliente: cliente,
             origen: 'autoservicio',
             codigoVendedor: 5,
-            puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
+            puntoVenta: this.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
             pedidoAnombreDe: dataPago.pedidoAnombreDe,
             numeroPlanilla: '11111',
           })