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.
Para integrar el SDK de Checkout Transparente, es necesario que consideres los siguientes tags:
<script src="https...">: contiene el SDK que permitirá tokenizar la tarjeta.<form>: se desplegará el formulario de la tarjeta donde tu cliente ingresará los datos de su tarjeta
Es importante inicializar el SDK con tu API Key para que funcione la tokenización de la tarjeta. Para más información, da clic aquí.
Agrega un placeholder (marcador de posición) vacío div a tu checkout o formulario de pago para que el Checkout Transparente de Clip pueda montarse ahí.
El script insertará un iFrame en el div para recopilar de forma segura la información de la tarjeta.
En el siguiente ejemplo, proporcionamos el div “card-element” para que el script pueda inyectar el código del elemento card.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Accept a payment</title>
<meta name="description" content="Demo del Checkout Transparente" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://d1p3k3qn1rvfpv.cloudfront.net/js/clip-sdk.js"></script>
</head>
<body>
<!-- Mostrar formulario -->
<form id="payment-form">
<div id="card-element">
<!--clip-sdk.js inyecta el Card Element-->
</div>
<button id="submit">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay</span>
</button>
</form>
</body>
</html>