Integración de OpenPay en Laravel y Vue js
Hola devs, estamos de regreso y tenemos bastantes cosas por compartir con ustedes, así que estén atentos a nuestras redes sociales.
Hoy queremos hablarte de OpenPay y de como integrarlo a tus proyectos de Laravel y Vue js.
OpenPay es un gateway para procesar pagos, no solo online si no que también OpenPay acepta pagos en efectivo con tiendas asociadas, transferencias interbancarias, pagos por teléfono y pagos vía mail.
Algo que cabe destacar de OpenPay es la implementación del sistema antifraude el cual genera un device_session_id único por dispositivo en el cual se realice una transacción a la API de OpenPay.
Crear cuenta en OpenPay
Vamos a crear una cuenta para realizar pruebas en OpenPay, llenamos el formulario de registro en el siguiente enlace register
En el dashboard que nos ofrece OpenPay encontraremos el ID del comercio, la llave privada, la llave pública y la URL.
Instalar OpenPay en Laravel
Partiremos con la idea de que tienes conocimientos mínimos de Laravel (Crear routes, controllers, views, models, etc).
Instalaremos el package que nos ofrece OpenPay para PHP, mismo que nos facilitara la conexión a la API de OpenPay.
Después de instalar el sdk de OpenPay en nuestro proyecto, vamos a agregar una ruta y un controlador para generar un cargo con tarjeta. Agregaremos la ruta en routes/api.php.
Route::post('/charge', 'OpenPayController@store');
Controlador OpenPayController en el cual se procesara el pago con OpenPay.
Agregar OpenPay.js en Vue js
Para esta parte utilizaremos Vuetify el cual es un framework basado en componentes de material design pero para Vue js.
Vamos a crear nuestra aplicación con Vue CLI 3.
vue create vue-openpay
Ahora al proyecto agregamos Vuetify con el siguiente comando.
vue add vuetify
Con lo anterior ya tendremos configurado Vuetify en nuestro proyecto. Ejecuta en tu proyecto npm run serve y verás la magia de este increíble framework.
Agregamos los siguientes scripts en public/index.html
Finalmente agregamos un formulario con los campos requeridos para procesar el cargo.
Cambiamos el nombre del componente HelloWorld.vue por FormPaymentComponent.vue y hacemos los ajustes en el componente App.vue. Los archivos App.vue y FormPaymentComponent.vue quedán de la siguiente manera.
Generar token para procesar el pago.
Para la generación del token vamos a ser uso de la librería OpenPay.js, por lo cual es necesario cargar el ID del comercio y la Llave pública. En el método mounted del componente FormPaymentComponent vamos a crear una instancia de OpenPay.js pasando los parámetros que la librería nos solicita.
El token se genera cuando se hace click en el botón “Pagar” lo cual provoca que inicie el método pay.
Se utiliza la instancia OpenPay para hacer uso del método que nos permite crear un token a partir de los datos de la tarjeta de crédito o debito. Este metodo recibe tres parametros: Un json con los datos de la tarjeta,una función para la respuesta y una función para errores.
Por ultimo mandamos la petición a nuestra API en la cual procesamos el cargo.
Resultado
Si todo sale bien en la respuesta del request podras visualizar el ID del cargo que nos devuelve OpenPay.
Para hacer pruebas utiliza los valores de tarjetas que nos ofrece OpenPay, acá el link. Pruebas
Si te gusto está contribución ayúdanos a compartir con tus amigos o colegas.
Saludos!
Repositorio de la API construida con Laravel
Repositorio de la aplicación construida en Vue js con Vuetify