Cómo integrar el Checkout Embebido

🚧

Importante

  • Para poder utilizar el Checkout Embebido, necesitas tener un token de autenticación y una cuenta de Clip.
  • Para poder integrar el Checkout Embebido, es recomendable ser desarrollador fullstack.

El Checkout Embebido hace llamadas a la API de Checkout para generar links de pago. Para poder integrar el Checkout Embebido en tu sistema, sigue estos pasos:

  1. Integra el endpoint crear un link de pago de la API de Checkout a tu servidor.
  2. Especifica las URLs de redirección dentro del objeto redirection_url de la llamada a la API de Checkout.
  3. Para recibir notificaciones, agrega la URL en donde recibirás notificaciones al parámetro webhook_url de la llamada a la API. Si quieres aprender más, consulta nuestra guía del Checkout Webhook.
  4. Genera un link de pago con la API de Checkout y guarda el payment_request_id del objeto de respuesta.
  5. Agrega el siguiente código HTML a tu ecommerce y añade el payment_request_id del paso anterior al código en la sección correspondiente.

<!-- Boton de pago -->
<button class="clipCheckoutButton" ></button>

<script> 
  id="checkoutClipPlugin" 
  payment_request_id="6fa400ce-7e46-4d5c-82db-c26d8dec0930"
        
  <!--SDK de Clip.js-->
  type="module" src="https://sdk.clip.mx/js/v1/checkout.js">
  
</script>


Flujo del checkout embebido. Después de generar un nuevo link de pago con la API de checkout, añade el payment_request_id al campo correspondiente del iframe del checkout embebido

Vista previa del flujo de Checkout Embebido. Los parámetros redirection_url y webhook_url (señalados con flechas rojas) deben de ser configurados (pasos 2 y 3) antes de crear tu solicitud de pago. El payment_request_id de la respuesta exitosa (sobresaltado) (paso 4) debe ser integrado en el código HTML del Checkout Embebido (paso 5).




📘

¿Necesitas Ayuda?

Consulta las preguntas frecuentes y guías de solución de problemas de nuestro centro de soporte a desarrolladores .

Si lo que buscas no está documentado, contáctanos por alguno de los siguientes medios:

  • Activa el botón de Ayuda y llena el formulario. No olvides proporcionar un correo electrónico y tus dudas para que podamos asistirte de manera eficiente.
  • Publica tu pregunta en nuestro Foro. Publicar en el foro puede ayudar a otros desarrolladores que están experimentando el mismo problema.
  • Envía un correo electrónico a la dirección [email protected].

O comunícate con nuestra área de Customer Happiness:

  • Llámanos al 55 6393-2323, Clip es el único con atención personalizada 24/7 los 365 días del año.
  • Envíanos un mensaje por WhatsApp al 55 6393-2323.
  • Escríbenos al correo [email protected].