支付寶支付前端對接流程

移動端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
       });
   });