Conekta Developer's Hub

Bienvenido al Conekta Developer's Hub. Aquí encontrarás la más robusta documentación del API Conekta y todos los tutoriales que te ayudarán a comenzar a recibir pagos de la manera más rápida, sencilla y segura.

Personalización de estilos en Checkout

Temas de colores

Puedes cambiar los colores de los componentes para adecuarlo a tu sitio. Para realizarlo, es necesario pasar el tema elegido de la siguiente forma al inicializar el iframe.

<script type="text/javascript">
window.ConektaCheckoutComponents.Integration({
    targetIFrame: "#conektaIframeContainer",
    checkoutRequestId: "7be30b07-1ab4-4b74-8c97-a048d0faa784",
    publicKey: "key_XXXXXXXXXX",
    paymentMethods: ["Cash"],
    options: {
         theme: 'default'
    }
})
</script>

Los temas disponibles son los siguientes:

var options = {
  theme: 'blue' // 'dark' | 'default' | 'green' | 'red'
}

Temas de colores

También es posible sobrescribir los colores del tema elegido.

var customTheme = {
    options: {
     theme: 'default',
     styles: {
      colors: {
       primary: "#f8961e"
      }
     }
    }
}

Tipo de botón

Puedes cambiar los botones de los componentes para adecuarlo a tu sitio. Para realizarlo, es necesario pasar el tipo de botón de la siguiente forma al inicializar el iframe.

<script type="text/javascript">
window.ConektaCheckoutComponents.Integration({
    targetIFrame: "#conektaIframeContainer",
    checkoutRequestId: "7be30b07-1ab4-4b74-8c97-a048d0faa784",
    publicKey: "key_XXXXXXXXXX",
    paymentMethods: ["Cash"],
    options: {
         theme: 'default',
         styles: {
            buttonType: 'basic'
         }
    }
})
</script>

Los tipos de botones disponibles son los siguientes:

var options = {
    styles: {
        buttonType: 'basic' // 'basic' | 'rounded' | 'sharp'
    }
}

Tipo de botón

Tipo de Inputs

Puedes cambiar los inputs del checkout para adecuarlo a tu sitio. Para realizarlo, es necesario pasar el tipo de input de la siguiente forma al inicializar el iframe.

<script type="text/javascript">
window.ConektaCheckoutComponents.Integration({
    targetIFrame: "#conektaIframeContainer",
    checkoutRequestId: "7be30b07-1ab4-4b74-8c97-a048d0faa784",
    publicKey: "key_XXXXXXXXXX",
    paymentMethods: ["Cash"],
    options: {
         theme: 'default',
         styles: {
            inputType: 'basic'
         }
    }
})
</script>

Los tipos de inputs disponibles son los siguientes:

var options = {
    styles: {
        inputType: 'basic' // 'basic' | 'rounded' | 'line'
    }
}

Tipo de Inputs

Tamaño de letra

Puedes cambiar el tamaño de letra del checkout para adecuarlo a tu sitio. Para realizarlo, es necesario pasar el tamaño de letra de la siguiente forma al inicializar el iframe.

<script type="text/javascript">
window.ConektaCheckoutComponents.Integration({
    targetIFrame: "#conektaIframeContainer",
    checkoutRequestId: "7be30b07-1ab4-4b74-8c97-a048d0faa784",
    publicKey: "key_XXXXXXXXXX",
    paymentMethods: ["Cash"],
    options: {
         theme: 'default',
         styles: {
            fontSize: 'baseline'
         }
    }
})
</script>

Los tamaños de letra disponibles son los siguientes:

var options = {
    styles: {
        fontSize: 'baseline' // 'baseline' | 'compact'
    }
}

Tamaño de letra