Proceso de pago con Widget

Proceso de pago con Widget

Consideraciones

Para utilizar el widget de pago de Greenpay, se debe considerar los siguiente:
  1. Se debe contar con una cuenta de sandbox o producción, para obtener una cuenta de sandbox visite Sobre cuenta de pruebas o sandbox.
  2. El widget de pago, es un elemento web que puede ser integrado en aplicaciones desarrolladas en lenguajes de desarrollo como AngularJS, React y Javascript.
  3. 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.
  4. Recomendado: Implementar un webhook para recibir las respuestas en un backend, para esto puede revisar el articulo Respuestas de pago en webhook.

Pasos para el uso del widget

1. Incluir los archivo del widget

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.4.1/gpwidget.min.js. Este elemento carga un formulario de captura de datos de la tarjeta para realizar un pago con nuestro servicio, además, carga el monto de la orden de compra con su respectiva moneda de manera automática.

2. Incluir un archivo o script para el Greenpay Response

Se debe incluir un archivo o script que contenga la función greenPayResponse(id, response) la cual será invocada por el widget cada vez que se realiza una transacción. A esta función llega la respuesta de exito o rechazo de la transacción.

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.    <head>
  5.       <title>React App</title>
  6.    </head>
  7.    <body>
  8.    </body>
  9.    <--- Widget Main file --->
  10.    <script src="https://widget.greenpay.me/1.4.1/gpwidget.min.js"></script>
  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>

3. Mostrar el widget

Para mostrar el widget se debe crear una orden de pago y agregar el elemento HTML a la página web donde se mostrará, este elemento se describe a continuación:
  1. Mostrar el widget incrustado en la página web.
    <div id="gpSecuurity" gpsession="{{order session}}" gptoken="{{order token}}" environment="sandbox"></div>
  2. Mostrar el widget en modal.
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">GreenPay Payment</h4>
    </div>
    <div class="modal-body" id="AreaPagoGreenPay">
    <!-- <div gpsession="" gptoken="" environment="production or sandbox"></div> -->
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>
Los valores que se deben colocar al cargar el widget son:
  1. gpsession: session obtenida al crear la orden de pago.
  2. gptoken: token obtenido al crear la orden de pago
  3. environment: Puede tener los valores sandbox que corresponde al ambiente de pruebas o production para el ambiente de productivo.
En Codepen tenemos un ejemplo completo donde puede observar el widget tanto en modal como incrustado, para esto revisarlo visite  Ejemplo codepen widget. 

4. Obtener las respuestas en un webhook.

Como se menciona en la sección de consideraciones del widget, es recomendado 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 ...