Proceso de pago con Widget

Proceso de pago con Widget

En esta sección se muestra una guía paso a paso de cómo integrarse al servicio de pagos por medio del widget. Para utilizar esta funcionalidad es necesario haber creado una orden de pago, para crear la orden pago puede revisar el articulo "Crear una orden de pago" .
El widget de pago, es un elemento web que puede ser integrado en aplicaciones desarrolladas en lenguajes de desarrollo como AngularJS, React y Javascript.

Este elemento carga un formulario de captura de datos de la tarjeta para realizar un pago con nuestro servicio, este elemento carga el siguiente formulario:


El monto y la moneda son cargados de forma dinámica de acuerdo a la orden de pago creada en el servicio “Crear una orden de pago“

Requerimientos

  1. Tener credenciales del API para sandbox
  2. Tener configurado un webhook para recibir las respuestas de pago

¿Cómo integrarlo?

1 - Incluir los archivos al proyecto

Se debe incluir el archivo “gpwidget.min.js“ el cual se encarga de mostrar el widget. Este archivo se puede agregar a su sitio web mediante el url https://widget.greenpay.me/1.3.2/gpwidget.min.js .
Además debe importar un archivo que contenga la función greenPayResponse(id, response), la cual será invocada por el widget cada vez que se realiza una transacción.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>React App</title>
  5.   </head>
  6.   <body>
  7.   </body>
  8.   <--- Widget Main file --->
  9.   <script src="https://widget.greenpay.me/1.3.2/gpwidget.min.js"></script>
  10.   
  11.   <--- Create the greenPayResponse to receive the payment data --->
  12.   <script>
  13.     function greenPayResponse(id, res){
  14.         //Add your logic
  15.         if(res.status === 200){
  16.             //Response is OK, someting payed
  17.             console.log("payed", JSON.stringify(res))
  18.         }
  19.         else{
  20.             //An ERROR ocurred
  21.             console.log("error", JSON.stringify(res))
  22.         }
  23.     }
  24.   </script>
  25. </html>

2 - Mostrar el widget 

Para que el widget se pueda mostrar es requerido haber creado una orden de pago, y agregar el siguiente elemento HTML a la página web donde se mostrará.
A - Mostrarlo incrustado en la página web

<div id="gpSecuurity" gpsession="order session" gptoken="order token" environment="sandbox"></div> 

B - Mostrarlo de forma modal

  1.  <div class="modal fade" id="myModal" role="dialog">
  2.     <div class="modal-dialog">

  3.         <!-- Modal content-->
  4.         <div class="modal-content">
  5.             <div class="modal-header">
  6.                 <button type="button" class="close" data-dismiss="modal">&times;</button>
  7.                 <h4 class="modal-title">GreenPay Payment</h4>
  8.             </div>
  9.             <div class="modal-body" id="AreaPagoGreenPay">
  10.                 <!-- <div gpsession="" gptoken="" environment="production or sandbox"></div> -->
  11.             </div>
  12.             <div class="modal-footer">
  13.                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  14.             </div>
  15.         </div>

  16.     </div>
  17. </div>
En nuestro ejemplo podrás observar cómo mostrar el widget en ambas formas. 

3 - ¿Cómo recibo la respuesta de pago en mi aplicación?

Como se menciona en los requerimientos de este componente, es requerido tener un webhook habilitado. Por favor revisar el artículo “Recibir la respuesta en el webhook“ .
    • Related Articles

    • Proceso de pago con webform

      Consideraciones Para utilizar el formulario de pago de Greenpay, se debe considerar los siguiente: El formulario está disponible en: Sandbox: https://sandbox-checkoutform.greenpay.me/ Producción: https://checkout-form.greenpay.me/ Tener ...
    • Crear orden de pago

      Consideraciones Una orden de pago se crea para indicar al API de pago que se efectuará una transacción por el motivo de los datos indicados en la orden. Para esto se debe tener las siguientes consideraciones: Utilizar el servicio en los endpoints: En ...
    • Invocar API de pago

      Consideraciones Para invocar el api de pagos se debe considerar lo siguiente Utilizar el servicio en los endpoints:  Sandbox: https://sandbox-checkout.greenpay.me/kount Producción: https://checkout.greenpay.me/kount Tener una session y token de una ...
    • Proceso de tokenización con formulario

      Consideraciones Para utilizar el formulario de tokenización de tarjetas se debe considerar los siguiente: El formulario está disponible en: Sandbox: http://sandbox-tokenizeform.greenpay.me/ Producción: https://tokenizeform.greenpay.me/ Tener ...
    • Proceso de tokenización

      Consideraciones Para utilizar el servicio de tokenización se debe tomar en cuenta los siguiente: Utilizar el servicio en los endpoints:  Sandbox: https://sandbox-checkout.greenpay.me/tokenize Producción: https://checkout.greenpay.me/tokenize Tener ...