Iniciar: pago simple

Se requieren 3 etapas para integrar un formulario de pago en el sitio web vendedor.

  • Inicialización del formulario incrustado.
  • Visualización del formulario incrustado
  • Verificación del estado de la transacción al final del pago.

El esquema siguiente detalla las interacciones entre los diferentes actores (formulario incrustado, servidor del comerciante, plataforma de pago) para cada una de estas etapas:

1. Inicializar el formulario

Antes de visualizar un nuevo formulario de pago en el sitio del comerciante, debe inicializar el formulario generando un token del formulario (o formToken) que resume todas las opciones ligadas al pago.

Para crear un formToken, debe llamar al Servicio Web REST Charge/CreatePayment desde su servidor:

Etapa Descripción
1 Llamado del Servicio Web REST Charge/CreatePayment desde los servidores del comerciante.
2 Recepción del resultado que contiene el formToken.

2. Mostrar el formulario

Para mostrar un formulario de pago, debe incluir nuestra biblioteca JavaScript en la página de pago del sitio web vendedor. El formToken se debe agregar al código de integración. La biblioteca JavaScript lo usará para mostrar el formulario tal como usted lo definió en la etapa anterior:

Etapa Descripción
3 Descarga de la biblioteca JavaScript. Solicitud realizada desde el navegador del comprador.
4 Recuperación de JavaScript, enseguida visualización de la página que contiene el formulario de pago.

Para un sitio que utiliza un framework JavaScript (Angular, React, Vue.js, ...), el concepto es ligeramente diferente: ver checkout en une page ou SPC (Single Page Checkout )

Una vez mostrado el formulario, el comprador puede introducir sus datos bancarios. Si el pago es rechazado, el comprador se mantiene en el sitio web vendedor. Si el pago es aceptado, la información de la transacción se envía a través del servidor del comerciante.

3. Verificar el estado de la transacción

Una vez aceptada la transacción o cuando se ha alcanzado el número de máximo de intentos, el cliente JavaScript realiza un POST del formulario de pago. Se desarrolla exactamente como si se tratara de un formulario HTML clásico. Usted recupera la información de pago en los parámetros POST enviados a su servidor.

Etapa Descripción
5 El comprador ha hecho clic en el botón "pagar": envío del formulario desde el navegador del comprador a nuestros servidores. Esta llamada es realizada automáticamente por nuestro cliente JavaScript.
6 Una vez que la transacción ha sido procesada, hacemos una llamada desde nuestros servidores a una URL que usted ha determinado. El objeto Transaction completo será enviado para permitirle actualizar su sistema de información antes del regreso navegador. Se trata de la IPN (Instant Payment Notification).
7 Nuestros servidores reenvían el resultado del pago al cliente JavaScript.
8 El cliente JavaScript publicará el formulario de pago en sus servidores.

Para los sitios dinámicos (que usan AngularJS, React o Vue.js), también es posible recuperar la información de pago en JavaScript: Aplicación webmonopágina

Tratar la IPN le permite actualizar su sistema de información de forma más segura y le garantiza no perder ningún pago si el comprador perdiera su conexión a Internet. Para más información, consulte el artículo dedicado a la IPN, aquí: Ipn: Presentación

¡Aquí vamos!

Después de esta introducción teórica, es momento de pasar a la práctica: Crear un formToken