zoukankan      html  css  js  c++  java
  • 支付宝支付前端对接流程

    移动端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>
    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
           });
       });
    
    常用网站: SegmentFault | GitHub | 掘金社区
  • 相关阅读:
    Vue-CLI项目-axios模块前后端交互(类似ajax提交)
    Vue-CLI项目中路由传参
    HTML标签嵌套规则
    POJ1050 To the Max
    POJ2488 A Knight's Journey
    POJ1083 Moving Tables
    洛谷P1265 公路修建
    POJ2236 Wireless Network
    洛谷P1991 无线通讯网
    POJ1018 Communication System
  • 原文地址:https://www.cnblogs.com/yesyes/p/15724410.html
Copyright © 2011-2022 走看看