Culqi | Documentación

CulqiJS versión 2

Si quieres brindar una experiencia personalizada de compra a tus clientes, debes usar CulqiJS.

Culqi.JS facilita la integración con Culqi en tu tienda web y móvil. Además, te permite personalizar todo el formulario de Culqi.

Usos del CulqiJS

Cargo único: Puedes usar el CulqiJS para tokenizar los datos de la tarjeta, enviar su ID a tu backend y realizar un cargo único.
Cargo One-click: Usa CulqiJS para tokenizar los datos de la tarjeta, enviar su ID a tu backend, registrar un cliente y generar una tarjeta(card) para poder realizar cargos recurrentes One-click.
Registrar suscripciones: Usa CulqiJS para tokenizar los datos de la tarjeta, enviar su ID a tu backend, registrar a un cliente, generar una tarjeta(card) y una suscripción en base a un plan.

Integra CulqiJS en tu tienda virtual

Con CulqiJS puedes personalizar todo el formulario de pago para tokenizar los datos de tarjeta, para integrarlo debes seguir los siguientes pasos:

Desarrolla tu checkout personalizado con CulqiJS
Configurar CulqiJS para tokenizar la tarjeta.
Enviar el ID del objeto token a tu backend.

Paso 1. Desarrolla tu checkout personalizado con Culqi.JS

Crea tu formulario de captura de datos de la tarjeta. En este paso, el cliente ingresa la información de su tarjeta para que CulqiJS pueda crear el objeto token usando la función Culqi.createToken().

<form>
  <div>
    <label>
      <span>Correo Electrónico</span>
      <input type="text" size="50" data-culqi="card[email]" id="card[email]">
    </label>
  </div>
  <div>
    <label>
      <span>Número de tarjeta</span>
      <input type="text" size="20" data-culqi="card[number]" id="card[number]">
    </label>
  </div>
  <div>
    <label>
      <span>CVV</span>
      <input type="text" size="4" data-culqi="card[cvv]" id="card[cvv]">
    </label>
  </div>
  <div>
    <label>
      <span>Fecha expiración (MM/YYYY)</span>
      <input size="2" data-culqi="card[exp_month]" id="card[exp_month]">
      <span>/</span>
      <input size="4" data-culqi="card[exp_year]" id="card[exp_year]">
    </label>
  </div>
</form>
<button id="btn_pagar">Pagar</button>

Paso 2. Configurar Culqi Checkout para tokenizar la tarjeta

Incluye CulqiJS 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/v2"></script>
  <script>
    Culqi.publicKey = 'Aquí inserta tu llave pública';
    Culqi.init();
  </script>
</body>

Luego usa la función Culqi.createToken() para generar el token.

<script>
  const btn_pagar = document.getElementById('btn_pagar');

  btn_pagar.addEventListener('click', function (e) {
      // Crea el objeto Token con el Culqi JS
      Culqi.createToken();
      e.preventDefault();
  })
</script>

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

Luego de haber generado el token este estará disponible en la función culqi().

<script>
function culqi() {
      if (Culqi.token) {// Objeto Token creado exitosamente!
        let token = Culqi.token.id;
        alert('Se ha creado un token:' + token);
      } else {// Hubo algún problema!
        alert(Culqi.error.user_message);
      }
    };
</script>