vue 串接 ecpay 綠界時遇到的雷－黑田

我在串接綠界的時候，遇到了這樣的雷。我先說，我不是很專業的前端，這個方法也是土炮解法，如果有人有更好的方法，歡迎來交流。 Ecpay的php套件回傳了一個html字串。假設它呈現到網頁上，他就會自動把form的內容做submit。然後自動跳轉到付款頁面。 php的套件怎麼帶我就不多說，key word是AutoSubmitFormWithCmvService 我的vue從axios拿回來的字串如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form id="ecpay-form" method="POST" target="_self"
        action="https://payment-stage.ecpay.com.tw/Cashier/AioCheckOut/V5">
        <input type="hidden" name="CheckMacValue" value="1231231231dsnejkqweknqjwe">
        <input type="hidden" name="ChoosePayment" value="ALL">
        <input type="hidden" name="ClientBackURL" value="https://example">
    </form>
    <script type="text/javascript">
        document.getElementById("ecpay-form"). submit();
    </script>
</body>

</html>

這是經過排版的，原本的字串完全沒有換行縮排。拿回來的時候沒辦法渲染，用getElementById也沒辦法拿到form。那怎麼辦呢？我先在template 中加入這個元素

 <div id="orderForm"> </div>

我的axios程式碼如下：

axios.post(process.env.VUE_APP_BACKEND_URI + '/api/url', this.payload)
        .then((response) => {
          let ret = response.data.replace('<script type="text/javascript">document.getElementById("ecpay-form").submit();</scr', '')
          ret = ret.replace('ipt></body></html>', '')
          ret = ret.replace('<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>', '')
          const orderForm = document.getElementById('orderForm')
          orderForm.innerHTML = ret
          document.getElementById('ecpay-form').submit()
        }, (error) => {
          console.log(error)
        })