Disponemos de un componente propio para mostrar los métodos de pago disponibles, y navegar a las pasarelas de pago correspondiente.

El componente se llama fwjsPay, y tendremos que importarlo así:

import fwjsPay from '@/app/shared/components/fwjsPay.vue';

Props

Recibe tres props, que son obligatorias:

• metodosPago: será un array de objetos con el siguiente formato:

  { nombre: '...', descripcion: '...', url: '...', nombreParametroExito: '...', nombreParametroError: '...' }

  De estos campos, descripcion es el único opcional. Si está presente, será el texto que se muestre para ese método de pago, si no se utilizará el del campo nombre. En función del campo nombre se mostrará una imagen u otra (tenemos imágenes específicas para 'bizum' y 'tarjeta', para el resto se utiliza una imagen genérica). Además, si el método de pago es imprimir el recibo para pagarlo en el banco, deberemos utilizar el nombre 'pdf' para que en vez de navegar se imprima el recibo.
  
  En el campo url pasaremos el enlace a la pasarela de pago correspondiente, o en el caso de que sea un pdf para imprimir, la url de dicho pdf.
  
  Los campos nombreParametroExito y nombreParametroError contienen los nombres de los parámetros que se añadirán a la url, que serán los que contendrán las urls de vuelta de pasarela de firma en caso de éxito o de error.
  
  

• urlExito: url a la que se volverá desde la pasarela de firmas cuando se haya realizado el pago correctamente.
• urlError: url a la que se volverá desde la pasarela de firmas cuando se haya producido un error o se haya cancelado el pago.

De este modo, la url a la que se navegará se compondrá así: {metodoPago.url}?{nombreParametroExito}={urlExito}&{nombreParametroError}={urlError}

Eventos

El componente emite un único evento:

• close: indica que se cierra el componente. Tendremos una variable booleana con la que indicar si queremos mostrar el previsualizador o no; lo mostraremos con v-if, y capturaremos este evento para poner la variable a false.

Ejemplo de uso

Un ejemplo de uso podría ser este:

    <fwjsPay
      v-if="showPay"
      :metodosPago="metodosPago"
      :urlExito="urlExito"
      :urlError="urlError"
      @close="showPay = false"
    />

Siendo showPay una variable booleana definida en el data() de nuestro componente, así como metodosPago, urlExito y urlError, que son respectivamente el array con todos los métodos de pago y las urls a las que volver en caso de éxito o error. Como vemos, capturamos el evento close para poner showPay a false y que así deje de mostrarse.