paytm JS Checkout 与 vue JS 前端的集成答案

【问题标题】：paytm JS Checkout integration with vue JS front endpaytm JS Checkout 与 vue JS 前端的集成
【发布时间】：2021-07-08 05:15:16
【问题描述】：

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

paytm 提供了一个 javascript sn-p 来集成 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();在显示控制台日志消息时执行

【问题讨论】：

标签： javascript vue.js vuejs3 paytm

【解决方案1】：

我在这样的标头方法中使用了脚本，

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" }],
    };
  }

【讨论】：