paytm JS Checkout 与 vue JS 前端集成

问题描述

vue 3 SPA 前端与 python flask rest api 后端一起运行。

paytm 提供了一个 javascript 片段来集成 https://developer.paytm.com/docs/js-checkout/

根据他们的文档，我必须使用 2 个脚本标签

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

和

<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> 

但由于 vue 不支持单个组件内的多个脚本标签 我在 index.html 中包含了第一个脚本，并在常规的 vue js 方法中定义了 onScriptLoad () 函数，该方法将在用户单击按钮时被调用。最后在该方法的最后调用 onScriptLoad() 函数。

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();
    },

但是当点击按钮时什么也没有发生，但我可以看到 onScriptLoad();在显示控制台日志消息时执行

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）