paytm JS Checkout integration with vue JS front end

Question

vue 3 SPA front end running with a python flask rest api back end.

paytm provides a javascript snippet to integrate https://developer.paytm.com/docs/js-checkout/

As per their documentation I have to use 2 script tags

<script type="application/html" crossorigin="anonymous" src="{HOST}/merchantpgpui/checkoutjs/merchants/{MID}.js" onload="onScriptLoad();"> </script>

and

<script>
  function onScriptLoad(){
      var config = {
        "root": "",
        "flow": "DEFAULT",
        "data": {
        "orderId": "", /* update order id */
        "token": "", /* update token value */
        "tokenType": "TXN_TOKEN",
        "amount": "" /* update amount */
        },
        "handler": {
          "notifyMerchant": function(eventName,data){
            console.log("notifyMerchant handler function called");
            console.log("eventName => ",eventName);
            console.log("data => ",data);
          } 
        }
      };

      if(window.Paytm && window.Paytm.CheckoutJS){
          window.Paytm.CheckoutJS.onLoad(function excecuteAfterCompleteLoad() {
              // initialze configuration using init method 
              window.Paytm.CheckoutJS.init(config).then(function onSuccess() {
                  // after successfully updating configuration, invoke JS Checkout
                  window.Paytm.CheckoutJS.invoke();
              }).catch(function onError(error){
                  console.log("error => ",error);
              });
          });
      } 
  }
</script> 

But as vue wont support multiple script tags inside a single component I have included the first script in the index.html and defined function onScriptLoad () inside a regular vue js method which will be called while user clicks a button. Finally at the end of that method function onScriptLoad() is called.

makePaymentPayTm() {
      console.log("paytm payment function called");
      var that = this;
      function onScriptLoad() {
        var config = {
          root: "",
          flow: "DEFAULT",
          data: {
            orderId: that.paytm.orderId,
            token: that.paytm.token,
            tokenType: "TXN_TOKEN",
            amount: that.paytm.amount,
          },
          handler: {
            notifyMerchant: function(eventName, data) {
              console.log("notifyMerchant handler function called");
              console.log("eventName => ", eventName);
              console.log("data => ", data);
            },
          },
        };

        if (window.Paytm && window.Paytm.CheckoutJS) {
          window.Paytm.CheckoutJS.onLoad(function excecuteAfterCompleteLoad() {
            // initialze configuration using init method
            window.Paytm.CheckoutJS.init(config)
              .then(function onSuccess() {
                // after successfully updating configuration, invoke JS Checkout
                window.Paytm.CheckoutJS.invoke();
              })
              .catch(function onError(error) {
                console.log("error => ", error);
              });
          });
        }
      }
      onScriptLoad();
    },

But when the button is clicked nothing happens, but I could see that onScriptLoad(); is excuted as the console log message is showing

Answer 1

I used script in header method like this,

head() {
    return {
      script: true
        ? [{ src: "https://checkout.razorpay.com/v1/checkout.js" }]
        : [{ src: "https://checkout.razorpay.com/v1/razorpay.js" }],
      // script: [{ src: "https://checkout.razorpay.com/v1/checkout.js" }],
    };
  }