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