diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 6394967..324a3db 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -6,6 +6,7 @@ import { BusquedaProductosComponent } from './components/busqueda-productos/busq
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
+import { PagoComponent } from './components/pago/pago.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
@@ -17,7 +18,8 @@ const routes: Routes = [
     children: [
       { path: 'inicio', component: InicioComponent },
       { path: 'busqueda-productos', component: BusquedaProductosComponent },
-      { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }
+      { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
+      { path: 'pago', component: PagoComponent }
     ]
   },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2b70697..65aaa96 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { MasterComponent } from './components/master/master.component';
 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
+import { PagoComponent } from './components/pago/pago.component';
 //#endregion
 
 @NgModule({
@@ -36,7 +37,8 @@ import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.com
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
-    AmbImagenesComponent
+    AmbImagenesComponent,
+    PagoComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/pago/pago.component.html b/src/app/components/pago/pago.component.html
new file mode 100644
index 0000000..91c4f56
--- /dev/null
+++ b/src/app/components/pago/pago.component.html
@@ -0,0 +1,36 @@
+<div class="row">
+
+  <div class="col-12">
+
+    <!-- NOMBRE DE SECCION -->
+    <div class="row m-0">
+      <div class="col-12 p-0">
+        <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
+      </div>
+    </div>
+
+    <div class="row m-3 d-flex align-items-center">
+      <div class="col-4">
+        <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
+      </div>
+      <div class="col-8">
+        <h2>Seleccione medio de pago</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>
+
+  <div 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>
+</div>
diff --git a/src/app/components/pago/pago.component.scss b/src/app/components/pago/pago.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/pago/pago.component.spec.ts b/src/app/components/pago/pago.component.spec.ts
new file mode 100644
index 0000000..4565dc8
--- /dev/null
+++ b/src/app/components/pago/pago.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagoComponent } from './pago.component';
+
+describe('PagoComponent', () => {
+  let component: PagoComponent;
+  let fixture: ComponentFixture<PagoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PagoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PagoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/pago/pago.component.ts b/src/app/components/pago/pago.component.ts
new file mode 100644
index 0000000..7c192fc
--- /dev/null
+++ b/src/app/components/pago/pago.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { appSettings } from 'src/etc/AppSettings';
+
+@Component({
+  selector: 'app-pago',
+  templateUrl: './pago.component.html',
+  styleUrls: ['./pago.component.scss']
+})
+export class PagoComponent implements OnInit {
+
+  private apiUrl: string = appSettings.apiUrl;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}