Avanzado

En el modo de personalización avanzada, tienes un mayor control sobre la apariencia y el estilo de los elementos del formulario de pago. Además de los botones, los campos de información, los elementos de transición y los bordes, puedes modificar otros aspectos como fuentes, tamaños de letra, alineación y más. Este modo de personalización te brinda la flexibilidad de adaptar el formulario de pago a la identidad visual de tu marca o sitio web de manera más precisa. Al utilizar el atributo customTheme en el objeto appearance, puedes definir valores personalizados para cada elemento que deseas personalizar, permitiéndote crear una experiencia de pago completamente coherente con tu marca. Recuerda que los valores del atributo customTheme deben estar en formato hexadecimal o RGB para definir los colores deseados.

Creando el objeto de configuración

const iziConfig = {
 config: {
   ...,
   appearance: {
    customTheme: {
      name: "customNameTheme",
      colors: {
        backgroundColor: '#AD83B2',
        textColor: '#2980B9',
        primary: {
          background: "#0CE4F5",
          color: '#7B7CC5'
        },
        button: {
          primary: {
            color: "#E8FAC3",
            background: "#3dd464",
            mainColor: '#A20480',
            activeColor: '#AC8777'
          }
        },
        select: {
          primary: {
            color: "#FC99FE",
            borderColor: "#0509EF",
            arrow: {
              down: "#900C3F",
              up: "#3dd464"
            },
            boxShadow: "#f9dede 0px 0px 0px 2px !important",
          }
        },
        text: {
          color: "#F57D0C",
        },
        input: {
          color: "#0355AD",
          borderColor: "#807211",
          boxShadow: "#DAF7A6 0px 0px 0px 2px !important",
        },
      },
      font: "calibri",
      isModeAdvance: true,
    }
    },
   ...
 }
};

info

Para crear y aplicar el tema avanzado, es necesario enviar el atributo isModeAdvance en true.

Demo

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

Editor en vivo

const config = { appearance: { customTheme: { name: 'customNameTheme', colors: { backgroundColor: '#d9f0f5', textColor: '#f14136', primary: { background: '#23278b', color: '#560ede', }, button: { primary: { color: '#233d5b', background: 'rgba(213,94,240,0.36)', mainColor: '#d7d7d8', activeColor: '#e30dc3', }, }, select: { primary: { color: '#034182', borderColor: '#ef4005', arrow: { down: '#bc1355', up: '#3dd464', }, boxShadow: '#f9dede 0px 0px 0px 2px !important', }, }, text: { color: '#b11307', }, input: { color: '#0355AD', borderColor: '#ab165e', boxShadow: '#DAF7A6 0px 0px 0px 2px !important', }, }, font: 'calibri', isModeAdvance: true, }, }, render: { typeForm: 'pop-up' } } render ( <Izipay config={config} /> )

  const config = {
    appearance: {
      customTheme: {
        name: 'customNameTheme',
        colors: {
          backgroundColor: '#d9f0f5',
          textColor: '#f14136',
          primary: {
            background: '#23278b',
            color: '#560ede',
          },
          button: {
            primary: {
              color: '#233d5b',
              background: 'rgba(213,94,240,0.36)',
              mainColor: '#d7d7d8',
              activeColor: '#e30dc3',
            },
          },
          select: {
            primary: {
              color: '#034182',
              borderColor: '#ef4005',
              arrow: {
                down: '#bc1355',
                up: '#3dd464',
              },
              boxShadow: '#f9dede 0px 0px 0px 2px !important',
            },
          },
          text: {
            color: '#b11307',
          },
          input: {
            color: '#0355AD',
            borderColor: '#ab165e',
            boxShadow: '#DAF7A6 0px 0px 0px 2px !important',
          },
        },
        font: 'calibri',
        isModeAdvance: true,
      },
    },
    render: {
      typeForm: 'pop-up'
    }
  }

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

Resultado

Loading...