前端支付对接，支付宝支付、微信支付

支付宝

后端返回的是表单字符串，需要将表单插入到dom树

拿到的表单字符串简化如下

    <form id="alipaysubmit" name="alipaysubmit" action="https://openapi.alipay.com/gateway.do?charset=UTF-8" method="POST">
      <input type="hidden" name="biz_content" value="{&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;xxx}">
      <input type="hidden" name="app_id" value="xxx">
      <input type="hidden" name="version" value="1.0">
      <input type="hidden" name="format" value="json">
      <input type="hidden" name="sign_type" value="RSA2">
      <input type="hidden" name="method" value="alipay.trade.page.pay">
      <input type="hidden" name="timestamp" value="xxx">
      <input type="hidden" name="alipay_sdk" value="alipay-sdk-php-20161101">
      <input type="hidden" name="notify_url" value="xxx">
      <input type="hidden" name="return_url" value="xxx">
      <input type="hidden" name="charset" value="UTF-8">
      <input type="hidden" name="sign" value="xxx">
      <input type="submit" value="ok" style="display:none;">
    </form>
    <script>document.forms['alipaysubmit'].submit();</script>

获取到表单字符串之后的处理

方式一

const divForm = document.getElementsByTagName('divform') // HTMLCollection []
if (divForm.length) { // 已有就移除
  document.body.removeChild(divForm[0])
}
const div = document.createElement('divform')
div.innerHTML = response  // response是后端返回的表单字符串
document.body.appendChild(div)
document.forms[document.forms.length - 1].setAttribute('target', '_blank') // 新开页面，需要在当前页唤起支付宝可去掉这一行
document.forms[document.forms.length - 1].submit()

需要注意的是线上大多数获取表单都是document.forms[0] 去获取，这样获取到的是当前页面第一个表单，如果当前页不止一个表单可能导致失败，appendChild会将节点插入到父节点的最后，因此去获取最后一个表单较为保险--->document.forms[document.forms.length - 1],或者使用下面的方式

 方式二

  const divForm = document.getElementById('divForm')
  if(divForm){
    document.body.removeChild(divForm)
  }
  const div = document.createElement('div')
  div.id = 'divForm' // 设置id
  div.innerHTML = response
  document.body.appendChild(div)
  // 利用id去获取表单
  document.getElementById('divForm').children[0].setAttribute('target','_blank')
  document.getElementById('divForm').children[0].submit()

微信

设置响应类型为blob，利用URL.createObjectURL(object)获取到url，将其赋值给image标签src属性即可将支付二维码显示出来

  <el-dialog
    title="扫描支付"
    :visible.sync="wechatPay"
    width="600px"
    :before-close="handleClose"
  >
    <div v-loading="!codeimg">
      <div class="leftimg">
        <img src="@/assets/images/wechatPay.png" alt="">
        <img class="codeimg" :src="codeimg" alt="">
        <div class="info">
          <img src="@/assets/images/sao.png" alt="">
          <p>
            {{ '使用微信二维码扫一扫' }}<br>{{ '扫描二维码支付' }}
          </p>
        </div>
      </div>
      <div class="rightimg">
        <img src="@/assets/images/phone.png" alt="">
      </div>
    </div>
  </el-dialog>

一开始是去新建Blob对象，但是图片还是显示不出来

const blob = new Blob([response],{ type:'image/png' })
this.wechatPay = true
this.codeimg = window.URL.createObjectURL(blob)

后续考虑直接设置响应类型为blob,最终显示成功

// 微信支付
export async function wxbuy (data) {
  return await request({
    url: 'xxxx',
    method: 'post',
    responseType: 'blob', // 设置响应类型为blob
    data: {
      ...data
    }
  })
}

this.wechatPay = true // 显示二维码的弹窗
this.codeimg = window.URL.createObjectURL(response) // response是后端返回的二维码