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 598pxque importarlo así:

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

Props

Recibe tres props, urlExito y urlError son obligatorias, y debe estar presente una de las otras dos, metodosPago o recibo:

• 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.
  
  

• recibo: identificador (numeroReferencia) del recibo que se quiere pagar. Si se utiliza este campo en vez de metodosPago, se consultará a la api de recibos para obtener los métodos de pago disponibles para dicho recibo.
• 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 componente o no; lo mostraremos con v-if, y capturaremos este evento para poner la variable a false.
• errorMetodosPago: indica que se ha producido un error al obtener los métodos de pago. El componente padre puede indicar la respuesta que desee, pero, como en el evento close, como mínimo habrá que hacer que no se muestre el componente, poniendo la variable a false.
• emptyMetodosPago: igual que el caso anterior, pero con la diferencia de que en este caso la respuesta de la api de recibos ha sido correcta, pero no incluye ningún método de pago disponible.

Ejemplo de uso

Un ejemplo de uso podría ser este:

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

<fwjsPay
    v-if="showPay"
    :recibo=idRecibo
    :urlExito="urlExito"
    :urlError="urlError"
    @close="showPay = false"
    @errorMetodosPago="showPay = false" 
    @emptyMetodosPago="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.