H5 端 聚合支付 前端对接支付-前端获取后端返回的form 表单以及submit提交表单，自动跳转(香港支付宝, 银行卡支付, 微信支付等等)

聚合支付通常是通过提交表单方式来调起支付接口，所以我们需要将返回的 form 表单到页面中进行提交。可以按照以下步骤实现

后端返回的form格式(可能会有差别)

<form id='requestForm' name='requestForm' action='https://demo.mobiletech.com.hk/MPayMobi/MerchantPay.jsp' method='post'><input type='hidden' name='version' value='5.0' /><input type='hidden' name='salt' value='yAUo9Fiv7V47D894' /><input type='hidden' name='accounttype' value='' /><input type='hidden' name='amt' value='2' /><input type='hidden' name='currency' value='HKD' /><input type='hidden' name='customerid' value='' /><input type='hidden' name='customizeddata' value='' /><input type='hidden' name='datetime' value='20230531150249' /><input type='hidden' name='extrafield1' value='' /><input type='hidden' name='extrafield2' value='' /><input type='hidden' name='extrafield3' value='' /><input type='hidden' name='locale' value='zh_TW' /><input type='hidden' name='merchant_tid' value='001' /><input type='hidden' name='merchantid' value='1100856' /><input type='hidden' name='notifyurl' value='https://demo.mpay.com.hk/mpay/notify.jsp' /><input type='hidden' name='ordernum' value='D2023053157579998' /><input type='hidden' name='paymethod' value='23' /><input type='hidden' name='recurenddate' value='' /><input type='hidden' name='recurinterval' value='' /><input type='hidden' name='recurstartdate' value='' /><input type='hidden' name='recurunit' value='' /><input type='hidden' name='returnurl' value='https://demo.mpay.com.hk/return.jsp' /><input type='hidden' name='storeid' value='1' /><input type='hidden' name='tokenid' value='' /><input type='hidden' name='hash' value='340662e817baa44d92222e6b230e7b225ed9ab9e3d0d8bdd5b5fbcf6cc20f84a' /><input type='submit' value='确定' style='display:none;'></form>

<script>document.forms['requestForm'].submit();</script>

前端需要做的就是

1.创建一个 div 容器，并用 v-html 属性将返回的 form 表单*容器中

2. 请求接口获取支付表单数据  赋值给formString 

const formString = ref('') // 支付 form

// 请求接口获取支付表单数据  赋值给formString 
payStore.getZPayAction(ZPAYDATA, (formData: string) => {
      try {
        formString.value = formData
      } catch (error) {
        formString.value = JSON.parse(formData)
      }
    })

3. 监听 formString，在变化时自动提交表单:

watch(
  () => formString.value,
  (newFormElementString: string) => {
    console.log(newFormElementString, '监听到有数据了')
    nextTick(() => {
      const payForm = document.getElementById('requestForm') as HTMLFormElement
      payForm && payForm.submit()
    })
  }
)

这里使用了 nextTick 异步获取 表单 dom 进行submit

  

const payForm = document.getElementById("这里的id是后端返回的form表单的id")

 

 调用后就可以跳转支付啦

 注意事项:
·在获取并插入表单时，需要确保表单的 id 等属性正确、唯一
在提交表单之前需要进行校验和处理，并确保表单数据与后端接口要求的一致。
由于自动提交表单可能会被浏览器拦截，所以需要确保已经得到用户允许并将表单提交