Esta nueva versión del custom checkout brinda flexibilidad para que el comercio pueda realizar adecuaciones en su front ad hoc como el css, font, img. La integración es sencilla y rápida.
Custom Culqi Checkout multipago versión 1.0
El método más simple para capturar los datos de tarjeta.
Culqi Custom Checkout multipago es la manera más simple de empezar la integración con Culqi. Está diseñado para que tus clientes tengan la mejor experiencia de compra rápida y segura en tu tienda virtual. Es un formulario embebido que facilita la integración de Culqi en tu tienda web y móvil (soporta tablets y smartphones) en la cual tienes la opción de poder personalizar el tipo y tamaño de letras, agregar CSS para lograr una personalización de acuerdo a tu marca.
Tu checkout puede lucir de 4 formas:
1. Checkout clásico v4 - menú sidebar
2. Checkout - menú sidebar
3. Checkout - menú sliderTop
4. Checkout - menú select
Sin embargo podrás personalizarlo eligiendo:
- Los medios de pago que aceptará tu tienda virtual: Tarjetas de débito y crédito, Yape, Cuotéalo BCP y PagoEfectivo (billeteras móviles, banca móvil, agentes y bodegas)
- La tipografía de tu marca.
- Los colores de tu marca, puedes agregar reglas CSS personalizar el background, border de los input, color de los label y más.
- El tipo de menú de opciones de pagos (Menú left sidebar, menú select, menú sliderTop).
- El tipo de presentación (popup o embebido).
- Las secciones del checkout que desees ocultar.
Usos del Culqi Custom Checkout
- Cargo único: Puedes usar el Culqi Checkout para tokenizar los datos de la tarjeta o número de teléfono, luego enviar el token id a tu backend para realizar un cargo único.
- Cargo one-click: Puedes usar el Culqi Checkout para tokenizar los datos de la tarjeta, luego enviar el token ID a tu backend, registrar un cliente, generar una tarjeta (card) y realizar cargos recurrentes One-click.
- Registrar suscripciones: Puedes usar el Culqi Checkout para tokenizar los datos de la tarjeta, luego enviar el token ID a tu backend, registrar un cliente, generar una tarjeta (card) y generar una suscripción en base a un plan.
- Órdenes de pago: Puedes usar el Culqi Checkout para realizar cobros por PagoEfectivo (banca móvil e internet, agentes y bodegas), billeteras móviles y Cuotéalo.
Integra Culqi Custom Checkout multipago en tu tienda virtual
Para integrarlo debes seguir los siguientes pasos:
Paso 1. Incluye el Culqi Custom Checkout en tu tienda
Incluye el siguiente script en tu tienda virtual. Puedes incluirlo antes del cierre de la etiqueta “body”:
<body>
<script src="https://js.culqi.com/checkout-js"></script>
</body> Recuerda que para obtener tu llave pública, debes ingresar a la sección “Desarrollo” y luego a “API Keys” en tu CulqiPanel.
Paso 2. Configura el Custom Culqi Checkout para tokenizar la tarjeta
Configura los valores a mostrar en el formulario de Culqi Custom Checkout.
El campo Currency es obligatorio y los demás son opcionales.
<script>
const settings = {
title: "Culqi store 2",
currency: "PEN", // Este parámetro es requerido para realizar pagos yape
amount: 8000, // Este parámetro es requerido para realizar pagos yape(80.00)
order: "ord_live_xxxxxxxxxxx" // Este parámetro es requerido para realizar pagos con pagoEfectivo, billeteras y Cuotéalo
};
</script>Recuerda que, si el parámetro order se encuentra vacío, solamente mostrará pago con tarjetas. Si deseas habilitar los demás medios de pagos, se debe generar un order ID previamente.
Envia el email de tu cliente
Evita que el cliente vuelva a ingresar su email, para esto debes enviarlo como parámetro.
<script>
const client = {
email: "test2@demo.com"
};
</script>Paso 3. Personaliza el Custom Culqi Checkout (opcional)
Personaliza el idioma, medios de pago, cuotas y UI de tu checkout usando los parámetros de configuración definidos en options.
Configuración de opciones del checkout
Habilita o deshabilita medios de pagos.
<script>
// las opciones se ordenan según se configuren
const paymentMethods = {
tarjeta: true,
yape: true,
billetera: true,
bancaMovil: true,
agente: true,
cuotealo: true
};
const options = {
lang: "auto",
installments: true, // Habilitar o deshabilitar el campo de cuotas
modal: true,
container: "#culqi-container", // Opcional - Div donde quieres cargar el checkout
paymentMethods: paymentMethods,
paymentMethodsSort: Object.keys(paymentMethods) // las opciones se ordenan según se configuren en paymentMethods
};
</script>| Parámetro | Descripción |
|---|---|
| lang string | Idioma del checkout. Ejemplo: "auto","en","es" |
| modal boolean | Indica si el checkout es modal incrustrado o no. Ejemplo: "true", "false" |
| installments boolean | Indica si se activa o no la opción de pago en cuotas. Ejemplo: "true", "false" |
| container string | Contenedor donde se va alojar el checkout. Ejemplo: "El id de un div html" |
| paymentMethods Object | Prende o apagar los medios de pagos |
| paymentMethodsSort Object | Establece el orden en que deben mostrarse los métodos de pago en tu checkout |
Recuerda que el código de aprobación de Yape es un código de 6 dígitos que se obtiene del aplicativo Yape del cliente. Este código es necesario para crear el objeto token.
Configuración de campos adicionales
Puedes agregar 3 campos adicionales antes de que cargue el checkout(se recomienda para el tipo de checkout modal) y 3 campos adiconales dentro del formulario de tarjeta(tipo de checkout modal o embebido).
Define el id, label, placeholder de tus campos.
<script>
const customFields = {
customInput: [
{
label: "DNI",
// type: "number", // optional
typeValidate: "DNI",
placeholder: "Dni",
// regex: "/^[a-zA-Z]+$/", // optional
id: "dni", // lowercase, only letter
minLength: 7,
maxLength: 20,
doubleSpan: true
},
{
type: "checkbox", // optional
id: "solio",
doubleSpan: true,
required: false,
label: "Deseo recibir ofertas de la tienda? puedes ver las ofertas {link1} y {link2}",
links: {
link1: {
text: "aquí",
url: "https://www.google.com"
},
link2: {
text: "aquí",
url: "https://www.google.com"
}
}
},
{
type: "paragraph",
text: "Mira {link1} para más {link2}.",
align: "center",
links: {
link1: {
text: "aquí",
url: "https://www.google.com"
},
link2: {
text: "información",
url: "https://www.youtube.com"
}
}
}
],
card: [
{
type: "checkbox",
id: "confirmar",
required: false,
doubleSpan: true,
label: "Deseo recibir ofertas de la tienda? puedes ver las ofertas {link1}",
links: {
link1: {
text: "aquí",
url: "https://www.google.com"
},
link2: {
text: "aquí",
url: "https://www.google.com"
}
}
},
{
label: "DNI",
// type: "number", // optional
typeValidate: "DNI",
placeholder: "Dni",
// regex: "/^[a-zA-Z]+$/", // optional
id: "dni", // lowercase, only letter
minLength: 7,
maxLength: 20,
doubleSpan: true
},
{
type: "paragraph",
text: "Mira {ejemplo1} para más información. Pero si quieres saber más, mira {link2}.",
align: "left",
links: {
ejemplo1: {
text: "aquí",
url: "https://www.google.com"
},
link2: {
text: "aquí",
url: "https://www.google.com"
}
}
}
]
};
const options = {
lang: "auto",
installments: true, // Habilitar o deshabilitar el campo de cuotas
modal: true,
container: "#culqi-container", // Opcional - Div donde quieres cargar el checkout
paymentMethods: paymentMethods,
paymentMethodsSort: Object.keys(paymentMethods), // las opciones se ordenan según se configuren en paymentMethods
customFields
};
</script>| Parámetro | Descripción |
|---|---|
| id string | Identificador del input. Ejemplo: "dni" |
| label string | Label del input. Ejemplo: "Dni" |
| type string | Tipo de input(opcional). Ejemplo: "number","text", "checkbox","paragraph" |
| required string | Indica si el campo es requerido(aplica colo para los type input y checkbox). Ejemplo: "true" |
| placeholder string | Placeholder del input. Ejemplo: "Ingrese su Dni" |
| typeValidate string | Validación de formato predefinida(opcional). Solo se permiten lo valores DNI, PHONE, RUC. Ejemplo:"DNI" |
| align number | Alineación del paragraph. Ejemplo: "left","right","center" |
| minLength number | Longitud mínima del input. Ejemplo: "5" |
| maxLength number | Longitud máxima del input. Ejemplo: "15" |
| doubleSpan boolean | Permite que el input ocupe el ancho de checkout. Ejemplo: "true" |
| regex string | Permite defnir el tipo de patrón que debe tener el input(opcional). Ejemplo: "/^[a-zA-Z]+$/" |
| links Json | Permite defnir los hipervínculos que puede tener el label del checkout o el text del paragraph. Ejemplo: "links: { link1: { text: "mi texto", url: "https://www.google.com" }}" |
Configuración básica de UI
Si sólo deseas tener una personalización basica del checkout, debes configurar lo siguiente:
<script>
const appearance = {
theme: "default",
hiddenCulqiLogo: false,
hiddenBannerContent: false,
hiddenBanner: false,
hiddenToolBarAmount: false,
hiddenEmail: false,
menuType: "sidebar", // sidebar / sliderTop / select
buttonCardPayText: "Pagar tal monto", //
logo: null, // 'http://www.childrensociety.ms/wp-content/uploads/2019/11/MCS-Logo-2019-no-text.jpg',
defaultStyle: {
bannerColor: "blue", // hexadecimal
buttonBackground: "yellow", // hexadecimal
menuColor: "pink", // hexadecimal
linksColor: "green", // hexadecimal
buttonTextColor: "blue", // hexadecimal
priceColor: "red"
}
};
</script>Configuración avanzada de UI
Si deseas personalizar totalmente tu checkout para que se ajuste a al diseño de tu comercio, debes configurar lo siguiente:
<script>
const appearance = {
theme: "default",
hiddenCulqiLogo: false,
hiddenBannerContent: false,
hiddenBanner: false,
hiddenToolBarAmount: false,
hiddenEmail: false,
menuType: "sidebar", // default/sidebar / sliderTop / select
buttonCardPayText: "Pagar tal monto", // hexadecimal
logo: "http://www.childrensociety.ms/wp-content/uploads/2019/11/MCS-Logo-2019-no-text.jpg",
defaultStyle: {
bannerColor: "blue", // hexadecimal
buttonBackground: "yellow", // hexadecimal
menuColor: "pink", // hexadecimal
linksColor: "green", // hexadecimal
buttonTextColor: "blue", // hexadecimal
priceColor: "red"
},
variables: {
fontFamily: "monospace",
fontWeightNormal: "500",
borderRadius: "8px",
colorBackground: "#0A2540",
colorPrimary: "#EFC078",
colorPrimaryText: "#1A1B25",
colorText: "white",
colorTextSecondary: "white",
colorTextPlaceholder: "#727F96",
colorIconTab: "white",
colorLogo: "dark",
soyUnaVariable: "blue"
},
rules: {
".Culqi-Main-Container": {
background: "red",
fontFamily: "var(--fontFamily)"
},
".Culqi-ToolBanner": {
background: "blue",
fontFamily: "var(--fontFamily)",
color: "white"
},
// cambia el color del texto y del ícono
".Culqi-Toolbar-Price": {
color: "red",
fontFamily: "var(--fontFamily)"
},
// cambia el color solo del ícono
".Culqi-Toolbar-Price .Culqi-Icon": {
color: "blue"
},
".Culqi-Main-Method": {
background: "orange",
padding: "10px 20px",
color: "blue"
},
// aplica color al texto del link y al Icon del link
".Culqi-Text-Link": {
color: "red"
},
// Solo aplica color al Icon del link
".Culqi-Text-Link .Culqi-Icon": {
color: "blue"
},
// Message, color aplica para text e ícono
".Culqi-message": {
color: "blue"
},
// cambia el color solo del ícono
".Culqi-message .Culqi-Icon": {
color: "red"
},
".Culqi-message-warning": {
background: "white",
color: "orange"
},
".Culqi-message-info": {
background: "white",
color: "black"
},
".Culqi-message-error": {
background: "black",
color: "yellow"
},
".Culqi-message-error .Culqi-Icon": {
color: "yellow"
},
// aplica a los labels
".Culqi-Label": {
color: "var(--soyUnaVariable)",
marginBottom: "20px"
},
".Culqi-Input": {
border: "1px solid red",
color: "var(--soyUnaVariable)"
},
".Culqi-Input:focus": {
border: "2px solid black"
},
".Culqi-Input.input-valid": {
border: "1px solid pink",
background: "black",
color: "var(--colorText)"
},
".Culqi-Input-Icon-Spinner": {
color: "red"
},
".Culqi-Input-Select": {
border: "1px solid red",
color: "blue"
},
// aplica para al hacer hover en los options del select
".Culqi-Input-Select-Options-Hover": {
color: "red",
background: "black"
},
// aplica para el seleccionado al ser activado
".Culqi-Input-Select-Selected": {
color: "green"
},
".Culqi-Input-Select.active": {
// utíl cuando le das click al control
border: "1px solid red",
background: "pink"
},
// aplica al listado de cuotas
".Culqi-Input-Select-Options": {
background: "gray"
},
// aplica a los botones
".Culqi-Button": {
background: "red"
},
//--------Menu GENERALES----------------
// el color se aplica para el texto y el ícono del menú
".Culqi-Menu": {
color: "blue"
//background: "white",
},
// el color se aplica para el ícono del menú
".Culqi-Menu .Culqi-Icon": {
color: "green"
},
//------- END Menu GENERALES----------------
//--------- MENU SELECT-------------
// aplica cuando el select esta seleccionado
".Culqi-Menu-Selected": {
//background: "orange",
color: "#D621A5"
//border: "1px solid white",
},
".Culqi-Menu-Selected .Culqi-Icon": {
//background: "orange",
color: "red"
//border: "1px solid white",
},
// aplica cuando para las opciones del select menú
".Culqi-Menu-Options": {
background: "orange"
},
// aplica para las opciones del select menú cuando se hace hover
".Culqi-Menu-Options-Hover": {
background: "green",
color: "red"
},
// aplica para los ICONOS de las opciones del select menú cuando se hace hover
".Culqi-Menu-Options-Hover .Culqi-Icon": {
color: "blue"
}
//--------- END SELECT-------------
//----------------- MENU SLIDERTOP Y SIDEBAR----------------------
/*
".Culqi-Menu-Item": {
background: "black",
color: "red",
},
// cambia el color para el item menu, tanto texto e ícono seleccionado (no aplica en el select menu)
".Culqi-Menu-Item.active": {
color: "white",
//border: "1px solid white",
},
// cambia el color para el ICONO del item menu seleccionado (no aplica en el select menu)
".Culqi-Menu-Item.active .Culqi-Icon": {
color: "blue",
},
// MODIFICA EL TEXTO DEL MENÚ(no aplica al menú select)
".Culqi-Menu-Item-Text": { // reemplaza a la clase .Culqi-Menu-Item
"font-size": "12px",
color: "green",
},
// cambia el color de los ICONOS ARROW DE sliderTop
".Culqi-Menu .Culqi-Icon-Arrow": {
color: "blue",
},
// CAMBIA EL COLOR DE LA BARRA LATERAL DE SIDEBAR
".Culqi-Menu-Item.active .Culqi-Bar": {
background: "blue"
},
*/
}
};
</script>Parámetros genericos
A continuación se especifican los parámetros necesarios generales del checkout.
| Parámetro | Descripción |
|---|---|
| theme string | Indica el thema que se va usar en el checkout. Ejemplo: "default" |
| hiddenLogoCulqi boolean | Indica si se oculta o no el logo del Culqi. Ejemplo: "true" |
| hiddenBannerContent string | Indica si se oculta o no el contenido del banner(logo). Ejemplo: "true" |
| hiddenBanner string | Indica si se oculta o no el banner(cabecera el checkout). Ejemplo: "true" |
| hiddenToolBarAmount string | Indica si se oculta o no el monto. Ejemplo: "true" |
| hiddenEmail string | Indica si se oculta o no el campo de email. Ejemplo: "true" |
| menuType string | Indica el tipo de menú(sidebar, sliderTop, select). Ejemplo: "sidebar" |
| buttonCardPayText string | Indica el texto del botón de pago de tarjetas. Ejemplo: "Pagar" |
| logo string | Indica la URL del logo que se desea configurar. Ejemplo: "https://culqi.com/LogoCulqi.png" |
Parámetros de configuración rápida con defaultStyle
A continuación se especifican los parámetros necesarios para una configuración rápida del checkout(defaultStyle).
| Parámetro | Descripción |
|---|---|
| bannerColor string | Indica el color del banner. Ejemplo: "#9BB613" |
| buttonBackground string | Indica el color del botón pagar. Ejemplo: "#9BB613" |
| menuColor string | Indica el color de las letras del menú cuando se activan las opciones. Ejemplo: "#9BB613" |
| linksColor string | Indica el color de las letras de los links. Ejemplo: "#9BB613" |
| buttonTextColor string | Indica el color de los textos. Ejemplo: "#9BB613" |
| priceColor string | Indica el color del texto del precio. Ejemplo: "#9BB613" |
Recuerda que la configuración rápida sólo aplicando cuando no usas las reglas CSS.
Parámetros genericos - Reglas CSS
A continuación se especifican las clases que permiten personalizar el checkout.
| Clase CSS | Descripción |
|---|---|
| .Culqi-Main-Container CSS class | Indica los parámetros CSS del contendor principal. Ejemplo: "background": "pink" |
| .Culqi-ToolBanner CSS class | Indica los parámetros CSS del banner. Ejemplo: "background": "orange" |
| .Culqi-Toolbar-Price CSS class | Indica los parámetros CSS del banner del precio. Ejemplo: "background": "orange" |
| .Culqi-Toolbar-Price .Culqi-Icon CSS class | Indica los parámetros CSS del ícono del precio Ejemplo: "color": "orange" |
| .Culqi-Main-Method CSS class | Indica los parámetros CSS del contendor del formulario de pago. Ejemplo: "background": "orange" |
| .Culqi-Text-Link CSS class | Indica los parámetros genericos CSS de los link del checkout. Ejemplo: "color": "orange" |
| .Culqi-Text-Link .Culqi-Icon CSS class | Indica los parámetros genericos CSS de los íconos de los link del checkout. Ejemplo: "color": "orange" |
| .Culqi-message CSS class | Indica los parámetros genericos CSS de los mensajes. Ejemplo: "color": "orange" |
| .Culqi-message .Culqi-Icon CSS class | Indica los parámetros genericos CSS de los íconos de los mensajes. Ejemplo: "color": "orange" |
| .Culqi-message-error CSS class | Indica los parámetros CSS del mensaje de error. Ejemplo: "background": "red" |
| .Culqi-message-error .Culqi-Icon CSS class | Indica los parámetros CSS del ícono del mensaje de error. Ejemplo: "color": "red" |
| .Culqi-message-warning CSS class | Indica los parámetros CSS del mensaje tipo warning. Ejemplo: "background": "red" |
| .Culqi-message-warning .Culqi-Icon CSS class | Indica los parámetros CSS del ícono del mensaje tipo warning. Ejemplo: "color": "pink" |
| .Culqi-message-info CSS class | Indica los parámetros CSS del mensaje informativo. Ejemplo: "background": "red" |
| .Culqi-message-info .Culqi-Icon CSS class | Indica los parámetros CSS del ícono del mensaje informativo. Ejemplo: "color": "pink" |
| .Culqi-Label CSS class | Indica los parámetros CSS de los label de los input. Ejemplo: "color": "green" |
| .Culqi-Input CSS class | Indica los parámetros CSS de los input. Ejemplo: "border": "1px solid red" |
| .Culqi-Input-Icon-Spinner CSS class | Indica los parámetros CSS del spinner de validación de input de tarjeta. Ejemplo: "border": "1px solid red" |
| .Culqi-Input:focus CSS class | Indica los parámetros CSS de input cuando tiene el focus. Ejemplo: "border": "1px solid green" |
| .Culqi-Input.input-valid CSS class | Indica los parámetros CSS de un input que pasó una validación exitosa de formato. Ejemplo: "background": "black" |
| .Culqi-Input.input-invalid CSS class | Indica los parámetros CSS de un input que no pasó una validación exitosa de formato. Ejemplo: "background": "black" |
| .Culqi-Input-Select CSS class | Indica los parámetros CSS del select de cuotas. Ejemplo: "border": "1px solid red" |
| .Culqi-Input-Select-Options-Hover CSS class | Indica los parámetros CSS del hover del select de cuotas. Ejemplo: "color": "red" |
| .Culqi-Input-Select-Selected CSS class | Indica los parámetros CSS del item seleccionado del select de cuotas. Ejemplo: "border": "1px solid red" |
| .Culqi-Input-Select.active CSS class | Indica los parámetros CSS cuando se realiza un click en el select de cuotas. Ejemplo: "border": "1px solid red" |
| .Culqi-Input-Select-Options CSS class | Indica los parámetros CSS de la lista de items del select de cuotas. Ejemplo: "background": "gray" |
| .Culqi-Button CSS class | Indica los parámetros CSS del botón de pago. Ejemplo: "background": "red" |
| .Culqi-Button:disabled, .Culqi-Button[disabled] CSS class | Indica los parámetros CSS del botón de pago cuando está deshabilitado. Ejemplo: "opacity": "0.1" |
Parámetros Generales del Menú - Reglas CSS
A continuación se especifican las clases generales que permiten personalizar el menú de opciones de pagos.
| Clase CSS | Descripción |
|---|---|
| .Culqi-Menu CSS class | Indica los parámetros CSS del menú de opciones de pago para los tipo de menú sidebar, sliderTop, select. Ejemplo: "color": "white" |
| .Culqi-Menu .Culqi-Icon CSS class | Indica los parámetros CSS de los íconos del menú de opciones de pago para los tipo de menú sidebar, sliderTop, select. Ejemplo: "color": "white" |
| .Culqi-Menu-item.active CSS class | Indica los parámetros CSS del texto del item activo del tipo de menú sidebar o sliderTop. Ejemplo: "color": "white" |
| .Culqi-Menu-item.active .Culqi-Icon CSS class | Indica los parámetros CSS del ícono del item activo del tipo de menú sidebar o sliderTop. Ejemplo: "color": "white" |
Parámetros Menú Sidebar - Reglas CSS
A continuación se especifican las clases que permiten personalizar el menú sidebar.
| Clase CSS | Descripción |
|---|---|
| .Culqi-Menu-item CSS class | Indica los parámetros CSS de los items del tipo de menú sidebar o sliderTop. Ejemplo: "color": "blue" |
| .Culqi-Menu-item .Culqi-Icon CSS class | Indica los parámetros CSS de los ícono del item menú sidebar o slidertop. Ejemplo: "color": "white" |
| .Culqi-Menu-item.active CSS class | Indica los parámetros CSS del texto del item activo del tipo de menú sidebar o sliderTop. Ejemplo: "color": "white" |
| .Culqi-Menu-item.active .Culqi-Icon CSS class | Indica los parámetros CSS del ícono del item activo del tipo de menú sidebar o sliderTop. Ejemplo: "color": "white" |
Parámetros Menú SliderTop - Reglas CSS
A continuación se especifican las clases que permiten personalizar el menú sliderTop.
| Clase CSS | Descripción |
|---|---|
| .Culqi-Menu-item CSS class | Indica los parámetros CSS de los items del tipo de menú sidebar o sliderTop. Ejemplo: "color": "blue" |
| .Culqi-Menu-item .Culqi-Icon CSS class | Indica los parámetros CSS de los ícono del item menú sidebar o slidertop. Ejemplo: "color": "white" |
| .Culqi-Menu-item.active CSS class | Indica los parámetros CSS del texto del item activo del tipo de menú sidebar o sliderTop. Ejemplo: "color": "white" |
| .Culqi-Menu-item.active .Culqi-Icon CSS class | Indica los parámetros CSS del ícono del item activo del tipo de menú sidebar o sliderTop. Ejemplo: "color": "white" |
Parámetros Menú Select - Reglas CSS
A continuación se especifican las clases que permiten personalizar el menú select.
| Clase CSS | Descripción |
|---|---|
| .Culqi-Menu-Selected CSS class | Indica los parámetros CSS del item seleccionado en el tipo de menú select. Ejemplo: "background": "white" |
| .Culqi-Menu-Selected .Culqi-Icon CSS class | Indica los parámetros CSS del ícono del item seleccionado en el tipo de menú select. Ejemplo: "color": "white" |
| .Culqi-Menu-Options CSS class | Indica los parámetros CSS de las opciones del tipo de menú select. Ejemplo: "color": "white" |
| .Culqi-Menu-Options-Hover CSS class | Indica los parámetros CSS cuando se realiza hover sobre un item de las opciones del tipo de menú select. Ejemplo: "background": "white" |
| .Culqi-Menu-Options-Hover .Culqi-Icon CSS class | Indica los parámetros CSS del ícono cuando se realiza hover sobre un item de las opciones del tipo de menú select. Ejemplo: "color": "white" |
Recuerda que las reglas CSS prevalecen por encima de los defaultStyle.
Paso 4. Mostrar el Custom Culqi Checkout
Configura tu llave pública y crea una instancia de CulqiCheckout(), luego procede a abrir tu checkout usando la función “Culqi.open()” podemos mostrar el formulario de Culqi Checkout. En este paso el cliente ingresa la información de su tarjeta y el formulario lo convertirá en un token.
<script>
const config = {
settings,
client,
options,
appearance
};
const publicKey = "Aquí inserta tu llave pública";
const Culqi = new CulqiCheckout(publicKey, config);
const btn_pagar = document.getElementById("btn_pagar");
btn_pagar.addEventListener("click", function (e) {
Culqi.open();
e.preventDefault();
});
</script>Paso 5. Enviar el ID del objeto token a tu backend
Luego de haberse generado el token, este estará disponible en la función handleCulqiAction(). Debes enviar a tu backend como mínimo el ID del token(token.id) para ser procesado y crear un cargo único, cargo One-click o una suscripción.
<script>
const handleCulqiAction = () => {
if (Culqi.token) {
const token = Culqi.token.id;
Culqi.close();
console.log("Se ha creado un Token: ", token);
//En esta linea de codigo debemos enviar el "Culqi.token.id"
//hacia tu servidor con Ajax
} else if (Culqi.order) {
// ¡Objeto Order creado exitosamente!
Culqi.close();
const order = Culqi.order;
console.log("Se ha creado el objeto Order: ", order);
} else {
// Mostramos JSON de objeto error en consola
console.log("Error : ", Culqi.error);
}
};
Culqi.culqi = handleCulqiAction;
</script>Concluida la integración del checkout, consume nuestra API de cargos. para terminar el flujo de pagos.
Ejemplo completo de integración con el Custom Culqi Checkout
A continuación mostramos el código completo de integración con el Culqi Checkout
<script>
const settings = {
title: "Culqi store 2",
currency: "PEN",
amount: 8000,
order: "ord_live_xxxxxxxxxxx",
xculqirsaid: "Inserta aquí el id de tu llave pública RSA",
rsapublickey: "Inserta aquí tu llave pública RSA"
};
// las opciones se ordenan según se configuren
const paymentMethods = {
tarjeta: true,
yape: true,
billetera: true,
bancaMovil: true,
agente: true,
cuotealo: true
};
const options = {
lang: "auto",
installments: true,
modal: true,
container: "#culqi-container", // Opcional
paymentMethods: paymentMethods,
paymentMethodsSort: Object.keys(paymentMethods) // las opciones se ordenan según se configuren en paymentMethods
};
const client = {
email: "test2@demo.com"
};
const appearance = {
theme: "default",
hiddenCulqiLogo: false,
hiddenBannerContent: false,
hiddenBanner: false,
hiddenToolBarAmount: false,
menuType: "sidebar", // default/sidebar / sliderTop / select
buttonCardPayText: "Pagar tal monto", // hexadecimal
logo: "http://www.childrensociety.ms/wp-content/uploads/2019/11/MCS-Logo-2019-no-text.jpg",
defaultStyle: {
bannerColor: "blue", // hexadecimal
buttonBackground: "yellow", // hexadecimal
menuColor: "pink", // hexadecimal
linksColor: "green", // hexadecimal
buttonTextColor: "blue", // hexadecimal
priceColor: "red"
},
variables: {
fontFamily: "monospace",
fontWeightNormal: "500",
borderRadius: "8px",
colorBackground: "#0A2540",
colorPrimary: "#EFC078",
colorPrimaryText: "#1A1B25",
colorText: "white",
colorTextSecondary: "white",
colorTextPlaceholder: "#727F96",
colorIconTab: "white",
colorLogo: "dark",
soyUnaVariable: "blue"
},
rules: {
".Culqi-Main-Container": {
background: "red",
fontFamily: "var(--fontFamily)"
},
".Culqi-ToolBanner": {
background: "blue",
fontFamily: "var(--fontFamily)",
color: "white"
},
// cambia el color del texto y del ícono
".Culqi-Toolbar-Price": {
color: "red",
fontFamily: "var(--fontFamily)"
},
// cambia el color solo del ícono
".Culqi-Toolbar-Price .Culqi-Icon": {
color: "blue"
},
".Culqi-Main-Method": {
background: "orange",
padding: "10px 20px",
color: "blue"
},
// aplica color al texto del link y al Icon del link
".Culqi-Text-Link": {
color: "red"
},
// Solo aplica color al Icon del link
".Culqi-Text-Link .Culqi-Icon": {
color: "blue"
},
// Message, color aplica para text e ícono
".Culqi-message": {
color: "blue"
},
// cambia el color solo del ícono
".Culqi-message .Culqi-Icon": {
color: "red"
},
".Culqi-message-warning": {
background: "white",
color: "orange"
},
".Culqi-message-info": {
background: "white",
color: "black"
},
".Culqi-message-error": {
background: "black",
color: "yellow"
},
".Culqi-message-error .Culqi-Icon": {
color: "yellow"
},
// aplica a los labels
".Culqi-Label": {
color: "var(--soyUnaVariable)",
marginBottom: "20px"
},
".Culqi-Input": {
border: "1px solid red",
color: "var(--soyUnaVariable)"
},
".Culqi-Input:focus": {
border: "2px solid black"
},
".Culqi-Input.input-valid": {
border: "1px solid pink",
background: "black",
color: "var(--colorText)"
},
".Culqi-Input-Icon-Spinner": {
color: "red"
},
".Culqi-Input-Select": {
border: "1px solid red",
color: "blue"
},
// aplica para al hacer hover en los options del select
".Culqi-Input-Select-Options-Hover": {
color: "red",
background: "black"
},
// aplica para el seleccionado al ser activado
".Culqi-Input-Select-Selected": {
color: "green"
},
".Culqi-Input-Select.active": {
// aplica cuando le das click al control
border: "1px solid red",
background: "pink"
},
// aplica al listado de cuotas
".Culqi-Input-Select-Options": {
background: "gray"
},
// aplica a los botones
".Culqi-Button": {
background: "red"
},
//--------Menu GENERALES----------------
// el color se aplica para el texto y el ícono del menú
".Culqi-Menu": {
color: "blue"
//background: "white",
},
// el color se aplica para el ícono del menú
".Culqi-Menu .Culqi-Icon": {
color: "green"
},
//-------FIN Menu GENERALES----------------
//--------- MENU SELECT-------------
// aplica cuando el select esta seleccionado
".Culqi-Menu-Selected": {
//background: "orange",
color: "#D621A5"
//border: "1px solid white",
},
".Culqi-Menu-Selected .Culqi-Icon": {
//background: "orange",
color: "red"
//border: "1px solid white",
},
// aplica cuando para las opciones del select menú
".Culqi-Menu-Options": {
background: "orange"
},
// aplica para las opciones del select menú cuando se hace hover
".Culqi-Menu-Options-Hover": {
background: "green",
color: "red"
},
// aplica para los ICONOS de las opciones del select menú cuando se hace hover
".Culqi-Menu-Options-Hover .Culqi-Icon": {
color: "blue"
}
//--------- FIN SELECT-------------
//----------------- MENU SLIDERTOP Y SIDEBAR----------------------
/*
".Culqi-Menu-Item": {
background: "black",
color: "red",
},
// cambia el color para el item menu, tanto texto e ícono seleccionado (no aplica en el select menu)
".Culqi-Menu-Item.active": {
color: "white",
//border: "1px solid white",
},
// cambia el color para el ICONO del item menu seleccionado (no aplica en el select menu)
".Culqi-Menu-Item.active .Culqi-Icon": {
color: "blue",
},
// MODIFICA EL TEXTO DEL MENÚ(no aplica al menú select)
".Culqi-Menu-Item-Text": { // reemplaza a la clase .Culqi-Menu-Item
"font-size": "12px",
color: "green",
},
// cambia el color de los ICONOS ARROW DE sliderTop
".Culqi-Menu .Culqi-Icon-Arrow": {
color: "blue",
},
// CAMBIA EL COLOR DE LA BARRA LATERAL DE SIDEBAR
".Culqi-Menu-Item.active .Culqi-Bar": {
background: "blue"
},
*/
}
};
const handleCulqiAction = () => {
if (Culqi.token) {
const token = Culqi.token.id;
console.log("Se ha creado un Token: ", token);
} else if (Culqi.order) {
const order = Culqi.order;
console.log("Se ha creado el objeto Order: ", order);
} else {
console.log("Errorrr : ", Culqi.error);
}
};
const config = {
settings,
client,
options,
appearance
};
const Culqi = new CulqiCheckout(publicKey, config);
Culqi.culqi = handleCulqiAction;
btn.addEventListener("click", () => {
Culqi.open();
});
</script>