Botón de pago externo

¿Quieres usar tu propio botón de “Pagar” y tener control total sobre su estilo y posición? ¡Ahora es posible! Con nuestra opción de personalización, puedes ocultar el botón por defecto del formulario y manejar el evento de pago desde tu propio botón externo.

¿Por qué es importante usar un botón personalizado?

• Flexibilidad en el diseño: Esta opción permite que el botón de pago se integre perfectamente con el look & feel de tu sitio, manteniendo la coherencia visual de tu marca.

• Mayor control sobre el flujo: Puedes decidir cuándo ejecutar el pago, qué validaciones aplicar antes del envío y cómo presentar el botón a tu usuario.

• Optimización en móviles: Algunos comercios desean controlar el espacio visible en pantallas pequeñas. Usar un botón externo permite un diseño más limpio.

Importante

La funcionalidad solo está disponible para la modalidad de integración y aplica para los siguientes métodos de pago:

• Tarjeta
• Yape
• Plin

No aplica para:

• QR
• Click to Pay
• Apple Pay

Objetivo

Aprenderás a:

• Configurar el objeto iziConfig para ocultar el botón por defecto.
• Usar el evento checkout.form.events.submit() para disparar el proceso de pago desde tu propio botón.

1. Creando el objeto de configuración

Ejemplo de configuración para ocultar el botón por defecto del formulario:

const iziConfig = {
  config: {
    transactionId: '{TRANSACTION_ID}',
    action: 'pay',
    merchantCode: '{MERCHANT_CODE}',
    order: {
      orderNumber: '{ORDER_NUMBER}',
      currency: 'PEN',
      amount: '149.00',
      processType: 'AT',
      merchantBuyerId: '{MERCHANT_CODE}',
      dateTimeTransaction: '{DATETIME_TRANSACTION}'
    },
    billing: {
      firstName: 'Lucho',
      lastName: 'Torres',
      email: 'luchotorres@gmail.com',
      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:'embedded',
      container:'{CONTAINER}',
      showButtonProcessForm: false
    }
  }
};

2. Instanciando la clase

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

3. Usando el botón personalizado

Crea tu propio botón HTML y llama al evento submit() del SDK para ejecutar el pago:

<button id="boton-comercio">Pagar ahora</button>

let btnPayNow = document.querySelector('#boton-comercio');

btnPayNow.addEventListener('click', async (event) => {
  event.preventDefault();
  checkout.form.events.submit();
});

tip

Recuerda que este evento solo tiene efecto si el método de pago seleccionado es Tarjeta, Yape o Plin. Si se ejecuta con QR, Apple Pay o Click to Pay, el SDK no realizará ninguna acción.

Demo

Tu botón personalizado se convierte en el nuevo gatillo para realizar el pago. Ideal para experiencias de pago completamente adaptadas a tu sitio.

Editor en vivo

const config = { render: { typeForm:'embedded', container:'#your-iframe-payment', showButtonProcessForm: false } } render ( <> <Izipay config={config} /> <button id="boton-comercio"> Pagar ahora </button> </> )

  const config = {
    render: {
      typeForm:'embedded',
      container:'#your-iframe-payment',
      showButtonProcessForm: false
    }
  }

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

      <button id="boton-comercio">
        Pagar ahora
      </button>
    </>
  )

Resultado

Loading...