Redirect

En lugar de mostrar el formulario directamente en tu página, puedes redirigir a los usuarios a una página externa para completar el proceso de pago. El SDK web facilita la generación de la URL de redireccionamiento y el envío de los datos necesarios.

Objetivo

Aprenderás a:

• Crear el objeto de configuración
• Inicializar el formulario de pago.
• Mostrar el Checkout.

1. Creando el objeto configuración

A continuación se muestra un ejemplo de configuración del formulario de redireccionamiento.

const iziConfig = {
  action: 'pay',
  merchantCode: '{MERCHANT_CODE}',
  transactionId: '{TRANSACTION_ID}',
  order: {
    orderNumber: '{ORDER_NUMBER}',
    currency: 'PEN',
    amount: '149.00',
    processType: 'AT',
    merchantBuyerId: '{MERCHANT_CODE}',
    dateTimeTransaction: '{DATETIME_TRANSACTION}'
  },
  billing: {
    firstName: 'Lucho',
    lastName: 'Torres',
    email: 'luchotorres@izipay.pe',
    phoneNumber: '989897960',
    street: 'Av. Jorge Chávez 275',
    city: 'Lima',
    state: 'Lima',
    country: 'PE',
    postalCode: '15000',
    documentType: 'DNI',
    document: '12345678'
  },
  shipping: {
    firstName: 'Juan',
    lastName: 'Pérez',
    email: 'juanperez@gmail.com',
    phoneNumber: '989897960',
    street: 'Av. Jorge Chávez 275',
    city: 'Lima',
    state: 'Lima',
    country: 'PE',
    postalCode: '15000',
    documentType: 'DNI',
    document: '12345679'
  },
  render: {
      typeForm: 'redirect',
      redirectUrls: {
        onSuccess: '{URL_SUCCESS}',
        onError: '{URL_ERROR}',
        onCancel: '{URL_CANCEL}'
      }
  }
};

Nota

Puedes configurar los atributos correspondientes para personalizar su apariencia y comportamiento aquí.

2. Instanciando la clase

const checkout = new Izipay({config: iziConfig});

3. Mostrando el checkout

try {
  checkout &&
    checkout.LoadForm({
      authorization: '{TOKEN_SESSION}',
      keyRSA: '{KEY_RSA}',
    });
} catch (error) {
  console.log(error.message, error.Errors, error.date);
};

info

• En esta modalidad, la respuesta será enviada al comercio mediante un POST a la url enviada en el parámetro onSuccess|onError|onCancel. Los datos se enviarán en formato application/x-www-form-urlencoded.

• Asegurate de tener una página que pueda recibir este tipo de datos, puedes utilizar tecnologías como PHP, ASP o algún tipo de lenguajes del lado del servidor.

• En esta modalidad no aplica el parámetro callbackResponse.

A continuación, se explica cómo recibir y procesar estos datos en diferentes lenguajes y frameworks:

Express

Para recibir datos en formato application/x-www-form-urlencoded en Express, debes usar el middleware express.urlencoded(). Esto parseará automáticamente los datos y los convertirá en un objeto JSON en req.body.

const express = require('express');
const app = express();

// Middleware para parsear application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));

app.post('/webhook', (req, res) => {
    console.log(req.body); // Los datos estarán en req.body
    const { firstName, transactionId } = req.body;
    console.log('Nombre:', firstName);
    console.log('ID de transacción:', transactionId);
    res.send('Datos recibidos');
});

app.listen(3000, () => {
    console.log('Servidor escuchando en el puerto 3000');
});

PHP

En PHP, los datos enviados en formato application/x-www-form-urlencoded se reciben automáticamente en la superglobal $_POST. Puedes acceder a los campos directamente por su nombre.

<?php
// Ejemplo de recepción de datos en PHP
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $firstName = $_POST['firstName'];
    $transactionId = $_POST['transactionId'];

    echo "Nombre: $firstName, ID de transacción: $transactionId";
} else {
    echo "Método no permitido";
}
?>

.NET (C#)

En .NET, puedes usar [FromForm] para recibir datos en formato application/x-www-form-urlencoded.

using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("[controller]")]
public class WebhookController : ControllerBase
{
    [HttpPost]
    public IActionResult HandleWebhook(
        [FromForm] string firstName,
        [FromForm] string transactionId)
    {
        Console.WriteLine($"Nombre: {firstName}, ID de transacción: {transactionId}");
        return Ok("Datos recibidos");
    }
}

Java (Spring Boot)

En Spring Boot, puedes usar la anotación @RequestParam para recibir datos en formato application/x-www-form-urlencoded.

import org.springframework.web.bind.annotation.*;

@RestController
public class WebhookController {

    @PostMapping("/webhook")
    public String handleWebhook(
        @RequestParam String firstName,
        @RequestParam String transactionId) {

        System.out.println("Nombre: " + firstName);
        System.out.println("ID de transacción: " + transactionId);
        return "Datos recibidos";
    }
}

Python (Flask)

En Flask, puedes usar request.form para acceder a los datos enviados en formato application/x-www-form-urlencoded.

from flask import Flask, request

app = Flask(__name__)

@app.route('/webhook', methods=['POST'])
def handle_webhook():
    first_name = request.form['firstName']
    transaction_id = request.form['transactionId']
    print(f"Nombre: {first_name}, ID de transacción: {transaction_id}")
    return 'Datos recibidos'

if __name__ == '__main__':
    app.run(port=3000)

Otros

Si estás utilizando otro lenguaje o framework, consulta la documentación oficial para recibir datos en formato application/x-www-form-urlencoded.

Demo

A continuación, te invitamos a explorar nuestra demo interactiva.

Editor en vivo

const config = { render: { typeForm: 'redirect' } } render ( <Izipay config={config} /> )

  const config = {
    render: {
      typeForm: 'redirect'
    }
  }

  render (
    <Izipay
      config={config}
    />
  )

Resultado

Loading...