Webpay Plus - Creación de transacción

En esta etapa, se procederá a la creación de una transacción con el fin de obtener un identificador único. Esto nos permitirá redirigir al Tarjetahabiente hacia el formulario de pago de Transbank en el siguiente paso.

Todas las transacciones en este proyecto de ejemplo son realizadas en ambiente de integración.

Paso 1: Petición

1. Comienza por importar la librería WebpayPlus en tu proyecto.2. Luego, crea una transacción utilizando las funciones proporcionadas mediante el SDK.

const WebpayPlus = require('transbank-sdk').WebpayPlus; // ES5
import { WebpayPlus } from 'transbank-sdk'; // ES6

// Es necesario ejecutar dentro de una función async para utilizar await
const createResponse = await (new WebpayPlus.Transaction()).create(
  buyOrder, 
  sessionId, 
  amount, 
  returnUrl
);

Paso 2: RespuestaUna vez que hayas creado la transacción, aquí encontrarás los datos de respuesta generados por el proceso.

{
  'token': '01abbd79ef3b6c23912ce039d47c21164f876909323e0b367ec308a7bd4d742e',
  'url': 'https://webpay3gint.transbank.cl/webpayserver/initTransaction'
}

Paso 3: Creación del formularioUtiliza estos datos de respuesta para redireccionar al usuario al formulario de pago al Tarjetahabiente. Este formulario será la interfaz a través de la cual el usuario realizará su transacción.

<form action="https://webpay3gint.transbank.cl/webpayserver/initTransaction" method="POST">
  <input type="hidden" name="token_ws" value="01abbd79ef3b6c23912ce039d47c21164f876909323e0b367ec308a7bd4d742e"/>
  <input type="submit" value="Pagar"/>
</form>

Ejemplo

Para llevar a cabo una transacción de compra en nuestro sistema, primero debemos crear la transacción. Utilizaremos los siguientes datos para configurar la transacción:

Orden de compra (buyOrder)

O-3231

ID de sesión (sessionid)

S-41261

Monto (amount)

1308

URL de retorno (returnUrl)

http://proyecto-ejemplo-node.transbankdevelopers.cl/webpay-plus/commit

Por último, con la respuesta del servicio que confirma la creación de la transacción, procedemos a crear el formulario de pago. Para fines de este ejemplo, haremos visible el campo "token_ws", el cual es esencial para completar el proceso de pago de manera exitosa.Antes de continuar al formulario de Webpay, asegúrate de contar con los datos de las tarjetas de prueba que están en la documentación.

Formulario de redirección

Token

Escríbenos por slack

Únete a nuestra comunidad de integradores. Nuestro equipo está ahí para ayudarte

Envíanos un mensaje

Necesitas resolver algún tipo de incidencia, contáctanos a través de correo electrónico

Contenido en esta página

Petición
Respuesta
Creación del formulario
Ejemplo