后端返回表单至前端提交支付

后端返回支付表单form至前端，前端加载form表单并提交，发起支付。
像支付宝支付，安全性较高的便是返回form表单，让前端提交支付；其次，安全性低一些的，也可以修改返回支付链接，前端直接点击支付链接跳转支付界面。

如果支付链接只支持移动端支付，PC端需要转支付链接为二维码返回，这样，扫码支付即可。

针对前端提交form表单支付的场景：
一种是支付方直接返回form表单，前端嵌入即可拉起支付，如支付宝；
另一种是支付方只返回form表单的参数，需要后端或者前端自己把值赋到form表单，建议后端拼接出类似支付宝那样的表单返回到前端，如汇潮支付。

form表单模板

<form action="https://gwapi.yemadai.com/pay/sslpayment" method="POST" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="AdviceURL"
        value="https://9d15-39-155-233-74.ap.ngrok.io/api/v1/pay/huiChao/paySuccessCallBack" />
    <input type="hidden" name="Amount" value="1" />
    <input type="hidden" name="BillNo" value="2543453543" />
    <input type="hidden" name="MerNo" value="53540" />
    <input type="hidden" name="OrderTime" value="20220816192135" />
    <input type="hidden" name="ReturnURL" value="http://59.110.154.31/personPage" />
    <input type="hidden" name="SignInfo"
        value="dQHWELD1C9zMBOLyKRq80Jsl4wuV4xCjU7vZvzfKZILElHJEM49TRajNkiSLqpyz7QyA2FUlqpn5gJH3e8nk26gxo+q5XMtdoSzwipwPBw8o5FkwMWD8UXlWJZu4ypn6jfJvBRBm80utHfntJHg8gV/Yk+RHpQPPwz2jWj3sceg=" />
    <input type="hidden" name="payType" value="B2CDebit" />
    <input type="submit" value="立即支付" style="display:none">
</form>
<script>document.forms[0].submit();</script>

后端拼接form表单

form模板

/** form表单模板 */
private String FORM_DATA =
        "<form action=\"https://gwapi.yemadai.com/pay/sslpayment\" method=\"POST\" enctype=\"application/x-www-form-urlencoded\">\n"
                + "        <input type=\"hidden\" name=\"AdviceURL\" value=\"%s\" />\n"
                + "        <input type=\"hidden\" name=\"Amount\" value=\"%s\" />\n"
                + "        <input type=\"hidden\" name=\"BillNo\" value=\"%s\" />\n"
                + "        <input type=\"hidden\" name=\"MerNo\" value=\"%s\" />\n"
                + "        <input type=\"hidden\" name=\"OrderTime\" value=\"%s\" />\n"
                + "        <input type=\"hidden\" name=\"ReturnURL\" value=\"%s\" />\n"
                + "        <input type=\"hidden\" name=\"SignInfo\"\n"
                + "            value=\"%s\" />\n"
                + "        <input type=\"hidden\" name=\"payType\" value=\"%s\" />\n"
                + "        <input type=\"submit\" value=\"立即支付\" style=\"display:none\">\n"
                + "    </form>\n"
                + "    <script>document.forms[0].submit();</script>";

格式化方法

/**
 * 拼接前端提交表单
 *
 * @param payRequestDto
 * @return
 */
public String generatePayForm(PayRequestDto payRequestDto) {

    // 字符串格式化
    String formData = huiChaoConfig.getFORM_DATA();
    formData =
            String.format(
                    formData,
                    payRequestDto.getNotifyUrl(),
                    payRequestDto.getAmount(),
                    payRequestDto.getBillNo(),
                    payRequestDto.getMerNo(),
                    payRequestDto.getOrderTime(),
                    payRequestDto.getReturnUrl(),
                    payRequestDto.getSignInfo(),
                    payRequestDto.getPayType());

    return formData;
}

前端发起支付

// 支付代码封装
paymentCodePackage(res) {
    if (res.code === 1000) {
        // 汇潮支付
        if(res.data.payType === 3){
          let formData = res.data.qrcodeURL
          const div = document.createElement('div')
          div.innerHTML = formData
          document.body.appendChild(div)
          document.forms[0].submit()
          return
        }
    }
}