Introducción

Personaliza el Formulario de Pago según tu modelo de negocio para ofrecer la mejor experiencia de compra posible a tus compradores.

Colores

• El SDK web te permite personalizar los colores del formulario de pago para que se ajusten a la paleta de colores de tu sitio web. Puedes establecer los colores principales, de fondo, de botones y otros elementos visuales.

Fuentes

• Si deseas utilizar fuentes específicas para el formulario de pago, el SDK web te permite definir la fuente o las fuentes que prefieras.

Tamaños

• Puedes ajustar el tamaño y la disposición del formulario de pago para que se adapten al diseño de tu página web. El SDK web proporciona opciones para configurar la altura, el ancho y el diseño general del formulario (solo en embebido).

Temas

• Cambia el color de los elementos del Formulario agregando el atributo theme al objeto appearance.

• Ten en cuenta que el valor del atributo debe ser un string y además uno de los valores permitidos mostrados a continuación:

• Temas disponibles:

red | lightred | green | purple | black | blue | lightgreen

Por ejemplo:

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: '1747759374068000'
    },
    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'
    },
    appearance: {
      theme: 'purple'
    }
  }
};

Demo

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

Editor en vivo

const config = { appearance: { theme: 'purple' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      theme: 'purple'
    }
  }

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

Resultado

Loading...

Creando nuevos temas

info

Puedes crear nuevos temas básicos o avanzados en donde podrás personalizar:

• Botones
• Campos de información
• Elementos de transición como spinners y barras de progreso
• Bordes.
• Sombras y más.
• Puedes cambiar el color de estos elementos agregando el atributo customTheme al objeto appearance.