前端 支付宝支付

前端 支付宝支付_第1张图片

 1、选择支付方式--支付宝 还是 微信

前端 支付宝支付_第2张图片

 

前端 支付宝支付_第3张图片

2、配置支付宝接口—参数是body里

前端 支付宝支付_第4张图片

前端 支付宝支付_第5张图片

 前端 支付宝支付_第6张图片

 

3、二维码对话框—data里设置弹框为false不可见,点击确认订单时 设置弹框为true可见

前端 支付宝支付_第7张图片

 前端 支付宝支付_第8张图片

 前端 支付宝支付_第9张图片

 

4、要知道 是否支付成功—使用短轮询(因为不知道用户什么时候 支付成功,所以用短轮询 一直查看)不断查看支付宝订单状态—写接口—参数是query里

前端 支付宝支付_第10张图片

 

4.1、写接口

前端 支付宝支付_第11张图片

 

4.2、接口引入

前端 支付宝支付_第12张图片

 

4.3、3.1查询订单状态,3.2在确认订单的方法里,写短轮询

前端 支付宝支付_第13张图片

 

4.4、根据状态数据,控制短轮询停止

前端 支付宝支付_第14张图片

5、页面代码:





6、接口代码:

import request from './request'



// 去结算

export function settlement(data){

    return request({

        url:'api/order/settlement',

        method:'post',

        data

    })

}



// 支付宝结算--post请求 对data

export function alipayOrder(data){

    return request({

        url:'api/pay/alipay/createOrder',

        method:'post',

        data

    })

}



// 查询支付宝的 支付订单状态--get请求 对params

export function queryAlipay(params){

    return request({

        url:'api/pay/alipay/queryOrder',

        method:'get',

        params

    })

}

你可能感兴趣的:(前端,java,javascript)