Para configurar el SDK de Checkout Transparente deberás usar clip-sdk.js. Es necesario que utilices siempre el SDK alojado en Clip, así contarás con los últimos cambios y no tendrás inconveniente al momento de tokenizar la tarjeta de tu cliente. No incluyas el script en un paquete ni lo alojes tú mismo.
Flujo
Sigue los siguientes pasos para integrar el SDK de Checkout Transparente:
- Importa el SDK (clip-sdk.js)
- Configura el formulario y obtén el Card Token ID
- Autentícate con tu API Key e inicializa el SDK de Clip
- Despliega el formulario y obtén el token de la tarjeta (Card Token ID)
- Realiza el cargo con la API de Payments utilizando el token de la tarjeta (Card Token ID)
Importar el SDK de Clip
En un tag<script src="https...">: importa el SDK de Clip que te permitirá tokenizar la tarjeta, de esta forma:
<!-- Importa el SDK de Clip -->
<script src="https://sdk.clip.mx/js/clip-sdk.js"></script>
Configurar el formulario y obtén el Card Token ID
En un <form>: se desplegará el formulario de la tarjeta donde tu cliente ingresará los datos de su tarjeta. Dentro del form se necesita crear un nodo cualquiera con un id especifico donde se montará posteriormente el sdk, ejemplo: <div id="checkout" ></div>. El script insertará un iFrame en el div para recopilar de forma segura la información de la tarjeta:
<!-- Formulario para obtener el token de la tarjeta -->
<form id="payment-form">
<div id="checkout"></div>
<button id="submit">Get Card Token ID</button>
<p id="cardTokenId"></p>
</form>
<br><br>
Autenticación
Guarda tu API Key de esta forma:
// Para inicializar el SDK de Clip se necesita de la llave pública
const API_KEY = "tu-api-key"; //Aquí va tu API Key, no es necesario agregar nada más
Inicializar SDK
Una vez que hayas guardado tu API Key, debes inicializar clip-sdk.js como se muestra a continuación:
// Inicializa el SDK de Clip con la API Key proporcionada
const clip = new ClipSDK(API_KEY);
Es importante inicializar el SDK con tu API Key para que funcione la tokenización de la tarjeta.
Desplegar el formulario de captura de tarjeta
Para desplegar el formulario usado para capturar el número de la tarjeta, crea un elemento Clip "Card" y móntalo en el placeholder (marcador de posición) <div id="checkout"> en tu formulario de pago. Esto creará un iframe con un formulario dinámico embebido, el cuál mostrará un formulario para ingresar los datos de la tarjeta. Podrás personalizarlo con dos colores: light y dark:
// Los idiomas disponibles son: 'en' para Inglés, 'es' para Español,
//y el valor por defecto es el idioma del navegador.
// Crea un elemento tarjeta con el SDK de Clip
const card = clip.element.create("Card", {
locale: "es",
});
card.mount("checkout");
Obtener el Card Token ID
Para tokenizar la información de la tarjeta, deberás escuchar el evento de envío del formulario (submit) y usar el método cardToken(), el cuál te permitirá obtener un Card Token ID usando la API de Card Token. Adicionalmente puedes realizar el manejo de errores que se puedan suscitar durante la tokenización de la tarjeta:
// Maneja el evento de envío del formulario
document.querySelector("#payment-form").addEventListener("submit", async (event) => {
event.preventDefault();
let cardToken = null;
try {
// Obtén el token de la tarjeta
cardToken = await card.cardToken();
} catch (error) {
// Maneja errores durante la tokenización de la tarjeta
switch (error.code) {
case "CL2200":
case "CL2290":
alert("Error: " + error.message);
throw error;
break;
case "AI1300":
console.log("Error: ", error.message);
break;
default:
break;
}
}
Una vez que obtienes el Card Token ID, mantenlo en un parámetro ya que será utilizado posteriormente en la API de Payments para completar el pago.
El Card Token ID tiene una vigencia de 15 mins y es de un solo uso.
// Guarda el Card Token ID de la tarjeta en una constante
const cardTokenID = cardToken.id;
console.log("Card Token ID:", cardTokenID);
});
Integrándolo todo
En el siguiente ejemplo se muestran todos los pasos anteriores en un solo código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="global.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:[email protected]&display=swap"
rel="stylesheet"
/>
<title>Transparent Checkout SDK</title>
<!-- Importa el SDK de Clip -->
<script src="https://sdk.clip.mx/js/clip-sdk.js"></script>
</head>
<body>
<h1>Transparent Checkout SDK</h1>
<!-- Formulario para obtener el token de la tarjeta -->
<form id="payment-form">
<div id="checkout"></div>
<button id="submit">Get Card Token ID</button>
<p id="cardTokenId"></p>
</form>
<br><br>
<!-- Autenticación -->
<script>
const API_KEY = "tu-api-key"; //Aquí va tu API Key, no es necesario agregar nada más
// Inicializa el SDK de Clip con la API Key proporcionada
const clip = new ClipSDK(API_KEY);
// Verifica si la API Key ha sido ingresada correctamente
if (API_KEY == "XXXXXXXXXX") {
alert("Favor de ingresar tu API Key (https://dashboard.developer.clip.mx/applications)");
}
// Crea un elemento tarjeta con el SDK de Clip
const card = clip.element.create("Card", {
theme: "light",
locale: "es",
});
card.mount("checkout");
// Maneja el evento de envío del formulario
document.querySelector("#payment-form").addEventListener("submit", async (event) => {
event.preventDefault();
try {
// Obtén el token de la tarjeta
const cardToken = await card.cardToken();
// Guarda el Card Token ID de la tarjeta en una constante
const cardTokenID = cardToken.id;
console.log("Card Token ID:", cardTokenID);
} catch (error) {
// Maneja errores durante la tokenización de la tarjeta
switch (error.code) {
case "CL2200":
case "CL2290":
alert("Error: " + error.message);
throw error;
break;
case "AI1300":
console.log("Error: ", error.message);
break;
default:
break;
}
}
});
</script>
</body>
</html>