pago con mercado pago

Eric Fernandez
1 parent 57d67af9e7
Showing 5 changed files with 66 additions and 11 deletions Show diff stats
src/app/app-routing.module.ts
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
src/app/components/pago/pago.component.html
src/app/components/pago/pago.component.ts
src/app/services/producto.service.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' },
@@ -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>
 <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>
 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 &#39;src/etc/AppSettings&#39;;
 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');
+      })
+  }
+
 }
@@ -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
+    });
+  }
+
 }
...	...	@@ -14,14 +14,14 @@ const routes: Routes = [
14	14	{ path: 'home', component: HomeComponent },
15	15	{ path: 'abm-imagenes', component: AmbImagenesComponent },
16	16	{ path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
	17	+ { path: 'pago', component: PagoComponent },
17	18	{ path: 'cancelar-compra', component: CancelarCompraComponent },
18	19	{
19	20	path: '',
20	21	component: MasterComponent,
21	22	children: [
22	23	{ path: 'inicio', component: InicioComponent },
23		- { path: 'busqueda-productos', component: BusquedaProductosComponent },
24		- { path: 'pago', component: PagoComponent }
	24	+ { path: 'busqueda-productos', component: BusquedaProductosComponent }
25	25	]
26	26	},
27	27	{ path: '**', redirectTo: '/home', pathMatch: 'full' },
...	...	@@ -89,7 +89,7 @@
89	89	<span class="pr-2">Volver</span>
90	90	<i class="fa fa-undo text-warning"></i>
91	91	</button>
92		- <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
	92	+ <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
93	93	<span class="font-weight-bold pr-2">Finalizar y Pagar</span>
94	94	<i class="fa fa-check text-success"></i>
95	95	</button>
1	1	<div class="row">
2	2
	3	+ <app-header></app-header>
	4	+
3	5	<div class="col-12">
4	6
5	7	<!-- NOMBRE DE SECCION -->
...	...	@@ -14,23 +16,53 @@
14	16	<h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1>
15	17	</div>
16	18	<div class="col-8">
17		- <h2>Seleccione medio de pago</h2>
	19	+ <h2 *ngIf="!verQR">Seleccione medio de pago</h2>
	20	+ <h2 *ngIf="verQR">Escane QR</h2>
18	21	</div>
19	22	</div>
20	23
21	24	</div>
22	25
23		- <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
24		- <h3>Pago con tarjeta de débito/crédito</h3>
25		- <div class="card-body">
26		- <img src="{{apiUrl}}/imagenes/posnet.jpg">
27		- </div>
	26	+ <div *ngIf="!verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto">
	27	+ <input type="radio">
	28	+ <label>Mercado Pago</label>
28	29	</div>
29	30
30		- <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
	31	+ <div *ngIf="verQR" class="col-6 card bg-white border-0 shadow rounded mb-auto">
31	32	<h3>Pago con QR mercado pago</h3>
32	33	<div class="card-body">
33	34	<img src="{{apiUrl}}/imagenes/qrmp.jpg" alt="">
34	35	</div>
35	36	</div>
	37	+
	38	+ <!-- OPCIONES ABAJO DERECHA -->
	39	+ <div class="row m-0 fixed-bottom" >
	40	+ <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
	41	+ <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
	42	+ <div class="card-body row m-0">
	43	+ <div class="col-12 p-3">
	44	+ <button
	45	+ type="button"
	46	+ class="btn btn-block btn-light shadow btn-sm shadow"
	47	+ (click)="volverPreviousPage()">
	48	+ <span class="pr-2">Volver</span>
	49	+ <i class="fa fa-undo text-warning"></i>
	50	+ </button>
	51	+ <button *ngIf="!verQR" (click)="pagar()" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
	52	+ <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
	53	+ <i class="fa fa-check text-success"></i>
	54	+ </button>
	55	+ <button *ngIf="!verQR"
	56	+ type="button"
	57	+ class="btn btn-block btn-light shadow btn-sm shadow"
	58	+ [routerLink]="['/cancelar-compra']">
	59	+ <span class="pr-2">Cancelar</span>
	60	+ <i class="fa fa-times text-danger"></i>
	61	+ </button>
	62	+ </div>
	63	+ </div>
	64	+ </div>
	65	+ </div>
	66	+ </div>
	67	+
36	68	</div>
1	1	import { Component, OnInit } from '@angular/core';
2	2	import { appSettings } from 'src/etc/AppSettings';
	3	+import { ProductoService } from 'src/app/services/producto.service';
	4	+import { RouterLink } from '@angular/router';
3	5
4	6	@Component({
5	7	selector: 'app-pago',
...	...	@@ -9,10 +11,25 @@ import { appSettings } from 'src/etc/AppSettings';
9	11	export class PagoComponent implements OnInit {
10	12
11	13	private apiUrl: string = appSettings.apiUrl;
	14	+ private verQR: boolean = false;
12	15
13		- constructor() { }
	16	+ constructor(private productoService: ProductoService) { }
14	17
15	18	ngOnInit() {
16	19	}
17	20
	21	+ pagar() {
	22	+
	23	+ this.verQR = true;
	24	+ alert('Procesando Pago');
	25	+
	26	+ this.productoService.pagar()
	27	+ .subscribe(() => {
	28	+ alert('Compra finalizada');
	29	+ }, err => {
	30	+ console.log(err);
	31	+ alert('algo salió mal');
	32	+ })
	33	+ }
	34	+
18	35	}
...	...	@@ -47,4 +47,10 @@ export class ProductoService {
47	47	return this.http.get(`${appSettings.apiUrl}/categorias`);
48	48	}
49	49
	50	+ pagar() {
	51	+ return this.http.post(`${appSettings.apiUrl}/comprobante/guardar`, {
	52	+ productos: this.productos
	53	+ });
	54	+ }
	55	+
50	56	}