0

estoy tratando de integrar wompi a mi sitio con angular, tengo un problema y es que si corro el codigo en en html normal me muestra el boton de wompi, pero si lo corro en mi proyecto con angular no me lo muestra, creo que algo en el renderizado de angular, el codigo es el siguiente


<form>
  <script
    src="https://checkout.wompi.co/widget.js"
    data-render="button"
    data-public-key="pub_test_X0zDA9xoKdePzhd8a0x9HAez7HgGO2fH"
    data-currency="COP"
    data-amount-in-cents="4950000"
    data-reference="4XMPGKWWPKWQ"
    data-signature:integrity="37c8407747e595535433ef8f6a811d853cd943046624a0ec04662b17bbf33bf5"
    >
  </script>
</form>

este es el que trae la pagina de wompi, no se porque en angular no me lo muestra, agradezco cualquier ayuda

2 respuestas 2

1

angular es un framework de JS y genera un compilado en Js al final que de manera dinámica renderiza las cosas que creaste en el (componentes, botones... ) el asunto es que la implementacion no es igual que la de un html comun y silvestre, debes uar la documentacion de Wompi como Api y conectarte a nivel de API:

https://docs.wompi.co/en/docs/colombia/js/

 //Colocar script en index.html de la app
 <script src="https://cdn.wompi.co/libs/js/v1.js" data-public- 
key="PUBLIC_KEY"></script>

   
  //inicializar la librería
  $wompi.initialize(function ( data, error ) {
    if ( error === null ) {
     var sessionId = data.sessionId
      // `sessionId` is a string, for example: "1289_1696830983722- 
      ab493d40c02e-278bab34-323va3"
     }
   })

luego creas las transacciones en Json y a todo le das el flujo de una WebApp con consumo API.

Se que hay maneras de hacer lo que pides, pero habría que saltarse el Framework y sus protocolos (como esto que es por seguridad https://angular.io/api/platform-browser/DomSanitizer#description).

Asi que si lo que buscas es agregar un botón que no es dinámico y que genera el mismo cobro siempre, deberías usar solo Html + Css y Js si lo requieres, ya que usar un Framework para algo estático es exagerar.

Tambien pensar en CMS (Wordpress - Prestashop... ) que ya traen plugins para integrar fácil.

0

Yo también estuve peleando en como hacer para integrarlo y esto fue la forma en que lo solucioné. En tu el template del componente agregas lo siguiente:

    <form id="wompiWidget"></form>

luego en tu ts importas Renderer2 desde angular/core:

    import { Component, OnInit, Renderer2 } from '@angular/core';

Lo inyectas en tu contstructor:

    constructor( ...private renderer: Renderer2) {}

Creas un método para insertar el script, este es un ejemplo:

      public insertScript(): void {
        const script = this.renderer.createElement('script');
        this.renderer.setAttribute(
          script,
          'src',
          'https://checkout.wompi.co/widget.js'
        );
        this.renderer.setAttribute(script, 'data-render', 'button');
        this.renderer.setAttribute(
          script,
          'data-public-key',
          'pub_test_X0zDA9xoKdePzhd8a0x9HAez7HgGO2fH'
        );
        this.renderer.setAttribute(script, 'data-currency', 'COP');
        this.renderer.setAttribute(script, 'data-amount-in-cents', '4950000');
        this.renderer.setAttribute(script, 'data-reference', '4XMPGKWWPKWQ');
        this.renderer.setAttribute(
          script,
          'data-signature:integrity',
          '37c8407747e595535433ef8f6a811d853cd943046624a0ec04662b17bbf33bf5'
        );
        const form = document.getElementById('wompiForm');
        this.renderer.appendChild(form, script);
      }

Ya luego utilizas el metodo anterior en el OnInit de tu componente o en donde desees:

 ngOnInit() {
    this.insertScript();
  }

Y listo ya podrás ver el widget de Wompi en tu componente Aquí te dejo el link de un sandbox aplicando lo que te dije: https://codesandbox.io/p/sandbox/xenodochial-farrell-rclhgz

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.