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

const iziConfig = {
 config: {
   ...,
   render: {
      typeForm: 'redirect',
      redirectUrls: {
        onSuccess: 'https://tu-dominio/success',
        onError: 'https://tu-dominio/error',
        onCancel: 'https://tu-dominio/carrito',
      },
   },
   ...
 }
};

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: 'TU_TOKEN_SESSION',
      keyRSA: 'TU_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}, 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...