Advanced

In advanced customization mode, you have more control over the appearance and style of the elements of the payment form. payment form. In addition to buttons, information fields, transition elements and borders, you can modify other aspects such as fonts, font sizes, alignment and more. modify other aspects such as fonts, font sizes, alignment and more. This customization mode gives you the flexibility to flexibility to adapt the payment form to the visual identity of your brand or website more precisely. By using the customTheme attribute on the appearance object, you can define custom values for each element that you want to customize, allowing you to create you want to customize, allowing you to create a payment experience that is completely consistent with your brand. Remember that the values of the customTheme attribute must be in hexadecimal or RGB format to define the desired colors.

Creating the configuration object

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

To create and apply the advanced theme, it is necessary to set the isModeAdvance attribute to true.

Demo

Next, we invite you to explore our interactive demo.

Live editor

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}
    />
  )

Result

Loading...