Primeros pasos: pago simple

Hay 3 etapas para integrar un formulario de pago al sitio web del vendedor:

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

El siguiente esquema detalla las interacciones entre los diferentes actores (formulario incrustado, servidor del vendedor, 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 vendedor, debe inicializar el formulario generando un token de formulario (o formToken) que resume todas las opciones vinculadas al pago.

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

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

El formToken es válido por 15 minutos.

Consulte la lista de los casos de uso para ayudarle a inicializar su formulario.

2. Mostrar el formulario

Para mostrar el formulario de pago, debe incluir nuestra biblioteca de JavaScript en el encabezado de su página de pago.

Es obligatorio que la biblioteca principal se cargue rápidamente, mucho antes que las otras bibliotecas JS utilizadas en su página.

Es necesario añadir el formToken al código de integración. La biblioteca de JavaScript lo utilizará para mostrar el formulario a partir del formToken definido en el paso anterior:

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

Para los sitios que utilizan un framework JavaScript (Angular, React, Vue.js, ...), el concepto es ligeramente diferente: ver Checkout en una página o 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

Cuando la transacción es aceptada o se alcanza 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 obtiene 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 procesada la transacción, realizamos una llamada desde nuestros servidores a una URL previamente definida por usted. Se enviará el objeto Transaction completo para permitirle actualizar su sistema de información antes de regresar al navegador: es 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 se puede obtener la información de pago en JavaScript: Aplicación web de una sola página.

Procesar 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