diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e56cc21..cee94e8 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,14 +14,14 @@ const routes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: 'abm-imagenes', component: AmbImagenesComponent },
   { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
+  { path: 'pago', component: PagoComponent },
   { path: 'cancelar-compra', component: CancelarCompraComponent },
   {
     path: '',
     component: MasterComponent,
     children: [
       { path: 'inicio', component: InicioComponent },
-      { path: 'busqueda-productos', component: BusquedaProductosComponent },
-      { path: 'pago', component: PagoComponent }
+      { path: 'busqueda-productos', component: BusquedaProductosComponent }
     ]
   },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
diff --git a/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html b/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
index 0ca15ac..23a2a9a 100644
--- a/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
+++ b/src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
@@ -89,7 +89,7 @@
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
-                  <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
+                  <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
                     <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
                     <i class="fa fa-check text-success"></i>
                   </button>
diff --git a/src/app/components/pago/pago.component.html b/src/app/components/pago/pago.component.html
index 2b22e06..753a83e 100644
--- a/src/app/components/pago/pago.component.html
+++ b/src/app/components/pago/pago.component.html
@@ -1,5 +1,7 @@
 <div class="row">
 
+  <app-header></app-header>
+
   <div class="col-12">
 
     <!-- NOMBRE DE SECCION -->
@@ -14,23 +16,53 @@
         <h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1>
       </div>
       <div class="col-8">
-        <h2>Seleccione medio de pago</h2>
+        <h2 *ngIf="!verQR">Seleccione medio de pago</h2>
+        <h2 *ngIf="verQR">Escane QR</h2>
       </div>
     </div>
 
   </div>
 
-  <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
-    <h3>Pago con tarjeta de débito/crédito</h3>
-    <div class="card-body">
-      <img src="{{apiUrl}}/imagenes/posnet.jpg">
-    </div>
+  <div *ngIf="!verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto">
+    <input type="radio">
+    <label>Mercado Pago</label>
   </div>
 
-  <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
+  <div *ngIf="verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto">
     <h3>Pago con QR mercado pago</h3>
     <div class="card-body">
       <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt="">
     </div>
   </div>
+
+  <!-- OPCIONES ABAJO DERECHA -->
+  <div class="row m-0 fixed-bottom" >
+    <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
+      <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
+        <div class="card-body row m-0">
+          <div class="col-12 p-3">
+            <button
+              type="button"
+              class="btn btn-block btn-light shadow btn-sm shadow"
+              (click)="volverPreviousPage()">
+              <span class="pr-2">Volver</span>
+              <i class="fa fa-undo text-warning"></i>
+            </button>
+            <button *ngIf="!verQR" (click)="pagar()" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
+              <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
+              <i class="fa fa-check text-success"></i>
+            </button>
+            <button *ngIf="!verQR"
+              type="button"
+              class="btn btn-block btn-light shadow btn-sm shadow"
+              [routerLink]="['/cancelar-compra']">
+              <span class="pr-2">Cancelar</span>
+              <i class="fa fa-times text-danger"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </div>
diff --git a/src/app/components/pago/pago.component.ts b/src/app/components/pago/pago.component.ts
index 7c192fc..0c11823 100644
--- a/src/app/components/pago/pago.component.ts
+++ b/src/app/components/pago/pago.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { appSettings } from 'src/etc/AppSettings';
+import { ProductoService } from 'src/app/services/producto.service';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-pago',
@@ -9,10 +11,25 @@ import { appSettings } from 'src/etc/AppSettings';
 export class PagoComponent implements OnInit {
 
   private apiUrl: string = appSettings.apiUrl;
+  private verQR: boolean = false;
 
-  constructor() { }
+  constructor(private productoService: ProductoService) { }
 
   ngOnInit() {
   }
 
+  pagar() {
+
+    this.verQR = true;
+    alert('Procesando Pago');
+
+    this.productoService.pagar()
+      .subscribe(() => {
+        alert('Compra finalizada');
+      }, err => {
+        console.log(err);
+        alert('algo salió mal');
+      })
+  }
+
 }
diff --git a/src/app/services/producto.service.ts b/src/app/services/producto.service.ts
index f72c7ab..fd6cccb 100644
--- a/src/app/services/producto.service.ts
+++ b/src/app/services/producto.service.ts
@@ -47,4 +47,10 @@ export class ProductoService {
     return this.http.get(`${appSettings.apiUrl}/categorias`);
   }
 
+  pagar() {
+    return this.http.post(`${appSettings.apiUrl}/comprobante/guardar`, {
+      productos: this.productos
+    });
+  }
+
 }