Ir al contenido
KUTI

Personalización

Tu logo, color, tipografía y forma de botones en el checkout. Configúralo una vez en el panel o pásalo por KUTI.js.

Hay dos formas de que el checkout se vea como tu marca. Puedes usar una sola o las dos a la vez.

Desde el panel (recomendado)

En app.kuti.pe → Ajustes → Marca subes tu logo y eliges el estilo. No hace falta código: se aplica solo en todo lo que ve quien paga.

  • Logo: PNG, JPG o WebP de hasta 1 MB (mejor horizontal y con fondo transparente).
  • Color principal: botón de pago, pestañas, enlaces y la animación de pago completado.
  • Fondo: blanco, gris suave, un tono de tu color o un degradado.
  • Tipografía: Inter, Poppins, Montserrat, Nunito o Lora.
  • Botones: cuadrados, redondeados o tipo píldora (también campos y pestañas).
La marca del panel se usa en el checkout hospedado (pay.kuti.pe/c/…), en los links de pago (pay.kuti.pe/l/…), en el correo del cobro y en KUTI.js aunque no mandes appearance.

Con KUTI.js (appearance)

Si una tienda necesita algo distinto a lo del panel, pásale appearance a Kuti.open. Va al iframe de pay.kuti.pe como parámetros de la URL y vale para modal e inline.

CampoTipoQué cambia
primaryColorstring (hex)Botones, pestañas y enlaces. Ej. "#2563eb".
logostring (URL)Imagen del header. Tiene que ser URL absoluta (https).
font"inter" | "poppins" | "montserrat" | "nunito" | "lora"Tipografía del checkout.
buttonShape"square" | "rounded" | "pill"Forma de botones, campos y pestañas.
El logo debe ser una URL https completa. El checkout vive en pay.kuti.pe; una ruta relativa de tu tienda no carga. Valores de font o buttonShape que no estén en la lista se ignoran.

Si usas los dos

appearance gana, campo por campo. Lo que no mandes se toma del panel; si tampoco está en el panel, se usa el estilo de KUTI.

Mandas en appearanceSe ve
primaryColor y logoTu color y tu logo de appearance; tipografía y botones del panel.
Solo primaryColorEse color; logo, tipografía y botones del panel.
NadaTodo lo del panel (o KUTI si no configuraste marca).
El fondo de la página no aplica dentro del modal ni del modo inline: ahí el fondo lo pone tu tienda.

Modal

Modal + appearancejs
window.Kuti.open({
  checkoutUrl,
  appearance: {
    primaryColor: "#2563eb",
    logo: "https://cdn.mitienda.pe/brand/logo-120x32.png",
    font: "poppins",
    buttonShape: "pill",
  },
  onSuccess: ({ paymentIntentId }) => {
    location.href = "/gracias?kuti_payment_id=" + encodeURIComponent(paymentIntentId);
  },
});

Inline

Inline + appearancejs
window.Kuti.open({
  checkoutUrl,
  containerId: "kuti-checkout",
  appearance: {
    primaryColor: "#2563eb",
    buttonShape: "square",
  },
  onSuccess: ({ paymentIntentId }) => {
    location.href = "/gracias?kuti_payment_id=" + encodeURIComponent(paymentIntentId);
  },
});

En el ejemplo de Next.js ya viene un appearance de muestra en modal e inline:

Next.jsDemo

Modal e inline con color, logo, tipografía y forma de botones.

Ver paquete

Siguiente