diff --git a/src/js/controller.js b/src/js/controller.js
index eca0635..0f13a97 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -1,9 +1,9 @@
 angular.module('focaModalFormaPago')
     .controller('focaModalFormaPagoController', [
         '$timeout', '$filter', '$scope', '$uibModal',
-        '$uibModalInstance', 'focaModalFormaPagoService',
+        '$uibModalInstance', 'focaModalFormaPagoService', 'parametros',
         function ($timeout, $filter, $scope, $uibModal,
-            $uibModalInstance, focaModalFormaPagoService) {
+            $uibModalInstance, focaModalFormaPagoService, parametros) {
 
             //#region Variables
             $scope.botones = [];
@@ -71,7 +71,9 @@ angular.module('focaModalFormaPago')
                         templateUrl: templateUrl,
                         controller: controller,
                         resolve: {
-                            filters: function () { return null; },
+                            parametros: function () { return {
+                                importe: parametros.importe
+                            }; },
                         },
                         size: 'lg',
                     }
@@ -86,7 +88,12 @@ angular.module('focaModalFormaPago')
     )
     .controller('focaModalTarjetasController', [
         '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalTarjetasService',
-        function ($timeout, $filter, $scope, $uibModalInstance, focaModalTarjetasService) {
+        'parametros',
+        function ($timeout, $filter, $scope, $uibModalInstance, focaModalTarjetasService,
+            parametros)
+        {
+
+            $scope.parametros = parametros;
 
             //#region Variables
             $scope.botonesTarjetas = [];
@@ -97,10 +104,25 @@ angular.module('focaModalFormaPago')
             init();
 
             function init() {
-                $scope.botonesTarjetas = focaModalTarjetasService.getBotonera();
+
+                focaModalTarjetasService.getTarjetas().then(function(res) {
+
+                    res.data.forEach(function (boton) {
+                        $scope.botonesTarjetas.push({
+                            id: boton.ID,
+                            label: 'tarjeta',
+                            nombre: boton.NOM,
+                            image: boton.nombreImagen,
+                            imageDefault: 'tarjetaDefault.svg'
+                        });
+                    });
+
+                });
+
             }
 
-            $scope.seleccionarTarjeta = function () {
+            $scope.seleccionarTarjeta = function (tarjeta) {
+                $scope.tarjeta = tarjeta;
                 animateForm();
             };
 
@@ -109,7 +131,12 @@ angular.module('focaModalFormaPago')
             };
 
             $scope.aceptarFormaDePago = function () {
-                $uibModalInstance.close('data de tarjeta');
+                $uibModalInstance.close({
+                    tarjeta: $scope.tarjeta,
+                    terminal: $scope.terminal,
+                    numeroCupon: $scope.numeroCupon,
+                    cuotas: $scope.cuotas
+                });
             };
 
             function animateForm() {
diff --git a/src/js/service.js b/src/js/service.js
index 03d61a7..d3c5be1 100644
--- a/src/js/service.js
+++ b/src/js/service.js
@@ -34,54 +34,55 @@ angular.module('focaModalFormaPago')
     }])
     .factory('focaModalTarjetasService', ['$http', 'API_ENDPOINT', function ($http, API_ENDPOINT) {
         return {
-            getBotonera: function () {
-                return [
-                    {
-                        label: 'tarjeta',
-                        image: 'visa.svg',
-                        active: false,
-                    },
-                    {
-                        label: 'tarjeta',
-                        image: 'mastercard.svg',
-                        active: false,
-                    },
-                    {
-                        label: 'tarjeta',
-                        image: 'maestro.svg',
-                        active: false,
-                    },
-                    {
-                        label: 'tarjeta',
-                        image: 'americanExpress.svg',
-                        active: false,
-                    },
-                    {
-                        label: 'tarjeta',
-                        image: 'naranja.png',
-                        active: false,
-                    },
-                    {
-                        label: 'tarjeta',
-                        image: 'cabal.svg',
-                        active: false,
-                    },
-                    {
-                        label: 'tarjeta',
-                        image: 'argencard.svg',
-                        active: false,
-                    },
-                    {
-                        label: 'tarjeta',
-                        image: 'nativa.png',
-                        active: false,
-                    },
-                    {
-                        label: 'tarjeta',
-                        image: 'cencosud.png',
-                        active: false,
-                    },
-                ];
+            getTarjetas: function () {
+                return $http.get(API_ENDPOINT.URL + '/tarjetas');
+                // return [
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'visa.svg',
+                //         active: false,
+                //     },
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'mastercard.svg',
+                //         active: false,
+                //     },
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'maestro.svg',
+                //         active: false,
+                //     },
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'americanExpress.svg',
+                //         active: false,
+                //     },
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'naranja.png',
+                //         active: false,
+                //     },
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'cabal.svg',
+                //         active: false,
+                //     },
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'argencard.svg',
+                //         active: false,
+                //     },
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'nativa.png',
+                //         active: false,
+                //     },
+                //     {
+                //         label: 'tarjeta',
+                //         image: 'cencosud.png',
+                //         active: false,
+                //     },
+                // ];
             }
         };
     }]);
diff --git a/src/views/modal-tarjetas.html b/src/views/modal-tarjetas.html
index a978619..a07c78a 100644
--- a/src/views/modal-tarjetas.html
+++ b/src/views/modal-tarjetas.html
@@ -23,16 +23,16 @@
                 <form>
                     <div class="row pb-3">
                         <div class="col-3 col-sm-2 pr-1">
-                            <input class="form-control form-control-sm">
+                            <strong ng-bind="tarjeta.id"></strong>
                         </div>
                         <div class="col-9 col-sm-4 pl-2">
-                            <input class="form-control form-control-sm">
+                            <strong ng-bind="tarjeta.nombre"></strong>
                         </div>
                     </div>
                     <div class="row pb-3">
                         <div class="col">
                             <span>Importe</span>
-                            <strong>$1560.45</strong>
+                            <strong ng-bind="parametros.importe | currency: '$'"></strong>
                         </div>
                     </div>
                     <div class="row pb-3">
@@ -42,6 +42,7 @@
                         <div class="col col-sm-4 pl-1">
                             <input
                                 class="form-control form-control-sm"
+                                ng-model="terminal"
                                 type="number"
                                 ng-disabled="readonly">
                         </div>
@@ -53,6 +54,7 @@
                         <div class="col col-sm-3 pl-1">
                             <input
                                 class="form-control form-control-sm"
+                                ng-model="numeroCupon"
                                 type="number"
                                 ng-disabled="readonly">
                         </div>
@@ -65,11 +67,12 @@
                             <input
                                 class="form-control form-control-sm"
                                 type="number"
+                                ng-model="cuotas"
                                 ng-disabled="readonly">
                         </div>
                     </div>
                 </form>
-            </div>            
+            </div>
         </div>
     </div>
 </div>