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 = {
  transactionId: '{TRANSACTION_ID}',
  action: 'pay',
  merchantCode: '{MERCHANT_CODE}',
  order: {
    orderNumber: '{ORDER_NUMBER}',
    currency: 'PEN',
    amount: '149.00',
    processType: 'AT',
    merchantBuyerId: '{MERCHANT_BUYER_ID}',
    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: '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: '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}
    />
  )

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.