支付宝支付前端对接流程

移动端h5支付

以vue项目为例，首先在index.html中引入最新的sdk

  <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>

点击h5页面中的按钮，调用服务端的接口，服务端返回formData数据。前后端都可以使用本地IP的形似调试，如果后端没有问题，就会正常拉起支付。

<template>
  <div>
    <div>
      <van-button @click="handlePay">支付</van-button>
      <div ref="pay" v-html="html"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
  
handlePay() {
      axios
        .post("http://192.168.31.52:8013/pay/payment", {
          amountType: "1", // 1-意向金;2-预付款;3-尾款;4-押金;5-全款
          orderNo: "10202112221124479757",
          payAmount: "0.01",
          payType: "1", // 1-支付宝;2-微信;3线下支付
        })
        .then(({ data }) => {
          this.html = data.data.replace(/<script.*>.*<\/script>/ims, " ")
          this.$nextTick(() => {
            const btn = document.forms[0]
            btn.submit()
          })
        });
}
}
</script>

app中调用支付

后端返回加密后的orderStr，然后调用sdk提供的方法，直接拉起支付，后端返回数据如下。

  ap.tradePay({
       orderStr: data.data
   }, function(res) {
       ap.alert({
          content: res
       });
   });