Soporte a desarrolladores

Foro

Ask a Question
Back to All

¿Alguna solución para checkout embebido en Angular?

5 months ago by Gilberto Rodriguez de la Cruz

El checkout redirigido funciona perfectamente, pero necesito integrarlo sin salir del sitio web. La solución embebida que se sugiere en la documentación funciona con sitios "multipage" pero en SPA no parece tener una solución ya que todo el DOM se pinta dinámicamente con JavaScript y simplemente el script no se ejecuta.

Solucion proporcionada por la documentación.

<button class="clipCheckoutButton" ></button>

<script 
  id="checkoutClipPlugin" 
  payment_request_id="cce6e811-131e-43a2-963e-10a112773047" 
  type="module" src="https://sdk.clip.mx/js/v1/checkout.js">
</script>

Intento de cargar el script al cargar el componente.

requestPayment(){
        let script = document.createElement('script') as HTMLScriptElement;
        script.id = 'checkoutClipPlugin';
        script.setAttribute('payment_request_id', 'cce6e811-131e-43a2-963e-10a112773047')
        script.type = 'module';
        script.src = 'https://sdk.clip.mx/js/v1/checkout.js';
  
        const btnPayContent = document.getElementById('btnPayContent') as HTMLDivElement;
        btnPayContent.appendChild(script);
    }