Proceso de pago con Widget

Proceso de pago con Widget

Consideraciones

Al utilizar el widget de pago de Greenpay, es importante tener en cuenta lo siguiente:
  1. Es necesario disponer de una cuenta de sandbox o de producción. Para obtener esta cuenta, visite la sección Sobre cuenta de pruebas o sandbox.
  2. El widget de pago es un elemento web que puede integrarse en aplicaciones desarrolladas en lenguajes como AngularJS, React y JavaScript.
  3. Antes de utilizar esta funcionalidad, es necesario haber creado una orden de pago. Para más información puede visitar el artículo  Crear una orden de pago.
  4. Recomendado: Implementar un webhook para recibir las respuestas en un backend. Para esto puede visitar el artículo 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. Puede agregar este archivo a su sitio web utilizando la siguiente 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, automáticamente carga el monto de la orden de compra con su respectiva moneda.


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 realice una transacción. La respuesta de éxito o rechazo de la transacción será recibida por esta función.

3. Mostrar el widget

Para mostrar el widget, primero se debe crear una orden de pago. Luego, se debe agregar el siguiente elemento HTML a la página web donde se desea mostrar el widget
  1. Mostrar el widget incrustado en la página web.
  1. <div id="gpSecuurity" gpsession="{{order session}}" gptoken="{{order token}}" environment="sandbox"></div>
  1. Mostrar el widget en modal.
  1. <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 proporcionamos un ejemplo completo donde se observa el widget tanto en modal como incrustado. Para ver este ejemplo, visitar: 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 dos entornos: Sandbox: https://sandbox-checkoutform.greenpay.me/ Producción: https://checkout-form.greenpay.me/ Se ...

    • Crear orden de pago

      Consideraciones La orden de pago se genera para indicar al API de pago que se realizará una transacción, basándose en los datos proporcionados en la orden. Para esto, se debe considerar lo siguiente: Utilizar el servicio en los endpoints: En sandbox: ...

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

    • Crear orden de pago V2

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

    • Proceso de tokenización con formulario

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