Home / Questions / 410855
Accepted
Alberto Ortega
Asked: 2021-11-30 08:25:33 +0800 CST 2021-11-30 08:25:33 +0800 CST

How can I load the conekta script before my vue component is created?

  • 772

I have a component that displays the card payment option.

I am trying to load the conekta script only when it is needed. When the component that occupies the connect script is rendered, in the created hook I load the script.

created() {
    if (document.getElementById("conekta")) return; // was already loaded
    var scriptTag = document.createElement("script");
    scriptTag.src = "https://cdn.conekta.io/js/latest/conekta.js";
    scriptTag.id = "conekta";
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
},

What I don't like about this is that it generates errors that the Conekta object does not exist enter image description here

I thought about downloading the cdn and uploading it as a static file using functions like require or import but this would cause me problems if conekta updated their cdn script.

also try to listen to the ready or load event of the script but it doesn't work either

function loadScript() {
  if (document.getElementById("conekta")) return; // was already loaded
  var scriptTag = document.createElement("script");
  scriptTag.src = "https://cdn.conekta.io/js/latest/conekta.js";
  scriptTag.id = "conekta";
  document.getElementsByTagName("head")[0].appendChild(scriptTag);

  document.getElementById("conekta").addEventListener("load", function(){
  
     component = { my component };
  });
 
  export default component;
}
loadScript();
javascript

1 Answers

  1. Best Answer

    I share with you an example I made to load Conekta in a Vue component.

    <template>
  <div id="app" v-show="isLoaded">Conekta cargado</div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return { isLoaded: false };
  },
  methods: {
    loadConekta: function () {
      const script = document.createElement("script");
      script.src = "https://cdn.conekta.io/js/latest/conekta.js";
      script.id = "conekta-script";

      const self = this;
      script.onload = function () {
        if (!window.Conekta) return void console.error("Conekta is not set");
        self.isLoaded = true;
      };

      script.async = true;
      document.body.appendChild(script);
    },
  },
  created() {
    if (!this.isLoaded)
       this.loadConekta();
  },
  mounted() {
    if (this.isLoaded)
       window.Conekta.setPublicKey("");
  },
};
</script>
    • 2