Culqi | Documentación

Culqi Checkout multipago versión 4

El método más simple para capturar los datos de tarjeta.

Culqi 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).

Tu checkout lucirá así:

Checkout Culqi

Sin embargo podrás personalizarlo eligiendo:

Los medios de pago que aceptará tu tienda virtual (pagos con tarjetas, yape, PagoEfectivo, billeteras móviles y Cuotéalo).
El nombre de tu comercio en el encabezado.
Los colores de tu marca.
El logo del comercio.

Usos del Culqi 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), 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 Coutéalo.

Integra Culqi Checkout multipago en tu tienda virtual

Para integrarlo debes seguir los siguientes pasos:

Paso 1. Incluye el Culqi Checkout en tu tienda

Incluye el siguiente script en tu tienda virtual y configura tu llave pública. Puedes incluirlo antes del cierre de la etiqueta “body”:

<body>
  <script src="https://checkout.culqi.com/js/v4"></script>
  <script>
    Culqi.publicKey = 'Aquí inserta tu llave pública';
  </script>
</body>

Paso 2. Configura el Culqi Checkout para tokenizar la tarjeta

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

<script>
  Culqi.settings({
    title: 'Culqi Store',
    currency: 'PEN',  // Este parámetro es requerido para realizar pagos yape
    amount: 1000,  // Este parámetro es requerido para realizar pagos yape
    order: 'ord_live_0CjjdWhFpEAZlxlz', // 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>

Paso 3. Personaliza el Culqi Checkout (opcional)

Personaliza el idioma, medios de pago, cuotas y UI de tu checkout usando los parámetros de configuración de culqi.options.

Configuración básica

Prende o apagar medios de pagos.

<script>
  Culqi.options({
    lang: "auto",
    installments: false, // Habilitar o deshabilitar el campo de cuotas
    paymentMethods: {
      tarjeta: true,
      yape: true,
      bancaMovil: true,
      agente: true,
      billetera: true,
      cuotealo: true,
    },
    style: {
          logo: "https://static.culqi.com/v2/v2/static/img/logo.png",
    }
  });
</script>

Parámetro	Descripción
lang string	Idioma del checkout. Ejemplo: "auto","en","es"
installments boolean	Indica si se activa o no la opción de pago en cuotas. Ejemplo: "true", "false"
paymentMethods Object	prende o apagar los medios de pagos

Configuración de UI

Cambia la interfaz del checkout para que se ajuste a tu comercio.

<script>
  Culqi.options({
      style: {
        logo: 'https://culqi.com/LogoCulqi.png',
        bannerColor: '', // hexadecimal
        buttonBackground: '', // hexadecimal
        menuColor: '', // hexadecimal
        linksColor: '', // hexadecimal
        buttonText: '', // texto que tomará el botón
        buttonTextColor: '', // hexadecimal
        priceColor: '' // hexadecimal
      }
  });
</script>

Parámetro	Descripción
Logo string	Indica la URL del logo que se desea configurar. Ejemplo: "https://culqi.com/LogoCulqi.png"
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"
buttonText string	Indica el texto del botón de pago. Ejemplo: "Donar","Pagar"
buttonTextColor string	Indica el color de los textos. Ejemplo: "#9BB613"
priceColor string	Indica el color del texto del precio. Ejemplo: "#9BB613"

Paso 4. Mostrar el Culqi 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 btn_pagar = document.getElementById('btn_pagar');

  btn_pagar.addEventListener('click', function (e) {
      // Abre el formulario con la configuración en Culqi.settings y CulqiOptions
      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 culqi(). 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>
  function culqi() {
    if (Culqi.token) {  // ¡Objeto Token creado exitosamente!
      const token = Culqi.token.id;
      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!
      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);
    }
  };
</script>