Culqi | Documentación

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:

Checkout Culqi

3. Checkout - menú sliderTop

Checkout Culqi

4. Checkout - menú select

Checkout Culqi

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>

Paso 2. Configura el Custom Culqi Checkout para tokenizar la tarjeta

Configura los valores a mostrar en el formulario de Culqi Custom Checkout. Para encriptar el payload de los servicios del checkout configura las variables xculqirsaid y rsapublickey.

<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_d1P0Tu1n7Od4nZdp', // Este parámetro es requerido para realizar pagos con pagoEfectivo, billeteras y Cuotéalo
    xculqirsaid: 'Inserta aquí el id de tu llave pública RSA',
    rsapublickey: 'Inserta aquí tu llave pública RSA',
  }
</script>

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

Prende o apagar medios de pagos.

<script>
  const paymentMethods = {// las opciones se ordenan según se configuren
		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

Configuración de campos adicionales

Puedes agregar 2 campos adicionales antes de que cargue el checkout(solo disponible para el tipo de checkout modal). Defin el id, label, placeholder de tus campos.

<script>
  	const inputCustoms= {
      items: [
        {
          label: "DNI",
          // type: "number", // optional
          typeValidate: "DNI",
          placeholder: "Dni",
          // regex: "/^[a-zA-Z]+$/", // optional
          id: "dni", // lowercase, only letter
          minLength: 7,
          maxLength: 20,
          doubleSpan: false,
        },
        {
          label: "Sexo",
          type: "text", // optinal
          placeholder: "Género",
          // regex: "/^[Hola|Hello]+$/", // optional
          id: "gender", // lowercase, only letter
          minLength: 4,
          maxLength: 6,
          doubleSpan: false,
        },
      ],
	  }

  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
    inputCustoms,
  }
</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: "text", "number"
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"
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]+$/"

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,
	  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,
	  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",
			},
			//-------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" 
			},
			*/
		},
	};
</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"
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"

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"

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"

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>

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_d1P0Tu1n7Od4nZdp',
    xculqirsaid: 'Inserta aquí el id de tu llave pública RSA',
    rsapublickey: 'Inserta aquí tu llave pública RSA',
  }

  const paymentMethods = {// las opciones se ordenan según se configuren
		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>

Custom Culqi Checkout multipago versión 1.0

1. Checkout clásico v4 - menú sidebar

2. Checkout - menú sidebar

3. Checkout - menú sliderTop

4. Checkout - menú select

Usos del Culqi Custom Checkout

Integra Culqi Custom Checkout multipago en tu tienda virtual

Paso 1. Incluye el Culqi Custom Checkout en tu tienda

Paso 2. Configura el Custom Culqi Checkout para tokenizar la tarjeta

Envia el email de tu cliente

Paso 3. Personaliza el Custom Culqi Checkout (opcional)

Configuración de opciones del checkout

Configuración de campos adicionales

Configuración básica de UI

Configuración avanzada de UI

Parámetros genericos

Parámetros de configuración rápida con defaultStyle

Parámetros genericos - Reglas CSS

Parámetros Generales del Menú - Reglas CSS

Parámetros Menú Sidebar - Reglas CSS

Parámetros Menú SliderTop - Reglas CSS

Parámetros Menú Select - Reglas CSS

Paso 4. Mostrar el Custom Culqi Checkout

Paso 5. Enviar el ID del objeto token a tu backend

Ejemplo completo de integración con el Custom Culqi Checkout