36，对接支付宝沙箱交易状态支付后

Order.vue

<template><div class="order container"><header><i class="iconfont icon-fanhui" @click="$router.back()"></i><span>提交订单</span><i class="iconfont icon-kefu"></i></header><section><div class="path"><h3 class="path-title">收货信息</h3><div class="path-content" @click="goPath"><div><span>{{ path.name }}</span><span>{{ path.tel }}</span></div><div><span>{{ path.province }}</span><span>{{ path.city }}</span><span>{{ path.county }}</span><span>{{ path.addressDetail }}</span></div></div></div><div class="payment"><div class="payment-title">支付方式：</div><van-radio-group v-model="radioPayment"><van-radio name="wx">微信支付</van-radio><van-radio name="ali">支付宝支付</van-radio></van-radio-group></div><div class="goods"><ul><li v-for="(item, index) in goodsList" :key="index"><div><img :src="item.goods_imgUrl" alt="" /></div><div class="goods-content"><h4>{{ item.goods_name }}</h4><div class="goods-total"><span>¥{{ item.goods_price }}</span><span>x{{ item.goods_num }}</span></div></div></li></ul></div></section><footer><div class="order-total"><span>共</span><b>{{ total.num }}</b><span>件,</span><span>总金额：</span><em>¥{{ total.price }}</em></div><div class="order-topay" @click="goPayment">提交订单</div></footer></div>
</template>
<script>
import { Toast } from "vant";
import http from "@/common/api/request.js";
import { mapState, mapGetters, mapMutations } from "vuex";
import bus from "@/common/bus.js";
import qs from "qs";
export default {data() {return {radioPayment: "wx",path: {},item: [],total: {price: 0,num: 0,},};},computed: {...mapState({order_id: (state) => state.order.order_id,selectList: (state) => state.cart.selectList,}),...mapGetters(["defaultPath"]),},created() {this.goodsList = JSON.parse(this.$route.query.goodsList);this.selectAddress();},activated() {bus.$on("selectPath",function (data) {this.path = JSON.parse(data);}.bind(this));//选中的商品id号this.item = JSON.parse(this.$route.query.detail);this.goodsList = JSON.parse(this.$route.query.goodsList);this.selectOrder();},methods: {...mapMutations(["initData", "initOrder"]),//查询地址selectAddress() {http.$axios({url: "/api/selectAddress",method: "post",headers: {token: true,},}).then((res) => {this.initData(res.data);//有默认收货地址if (this.defaultPath.length) {this.path = this.defaultPath[0];} else {this.path = res.data[0];}});},//查询订单selectOrder() {http.$axios({url: "/api/selectOrder",method: "post",headers: {token: true,},data: {orderId: this.order_id,},}).then((res) => {this.initOrder(res.data);this.total = {price: res.data[0].goods_price,num: res.data[0].goods_num,};});},//选择收货地址goPath() {this.$router.push({path: "/path",query: {type: "select",},});},//提交订单goPayment() {//判断是否选择了收货地址if (!this.path) return Toast("请填写收货地址");//发送请求==》1.修改订单状态2.删除购物车的数据http.$axios({url: "/api/submitOrder",method: "post",headers: {token: true,},data: {orderId: this.order_id,shopArr: this.selectList,},}).then((res) => {let newArr = [];this.goodsList.forEach((v) => {newArr.push(v.goods_name);});//支付传递的参数let dataOrder = {orderId: this.order_id,name: newArr.join(""),price: this.total.price,};if (res.success) {//去支付http.$axios({url: "/api/payment",method: "post",headers: {token: true,"Content-Type": "application/x-www-form-urlencoded",},//qs是增加安全性的序列化data: qs.stringify(dataOrder),}).then((res) => {if (res.success) {//打开支付宝支付的页面window.location.href = res.paymentUrl;}});}});},},
};
</script><style lang='less' scoped>
header {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 1.173333rem;color: #fff;background-color: #b0352f;i {padding: 0 0.4rem;font-size: 0.586666rem;}span {font-weight: 300;font-size: 0.48rem;}
}
section {background-color: #f7f7f7;.path-title {padding: 0.4rem;font-size: 0.48rem;}.path-content {padding: 0.16rem 0.4rem;font-size: 0.373333rem;background-color: #ffffff;span {padding-right: 0.16rem;}}.payment {padding: 0.16rem 0.4rem;margin-top: 0.4rem;font-size: 0.426666rem;background-color: #ffffff;.van-radio-group {display: flex;padding: 0.16rem 0;.van-radio {padding-right: 0.266666rem;}}}.goods {padding: 0.16rem 0.4rem;margin-top: 0.4rem;font-size: 0.426666rem;background-color: #ffffff;ul {width: 100%;li {display: flex;width: 100%;img {width: 1.973333rem;height: 1.973333rem;}.goods-content {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-left: 0.4rem;.goods-total {display: flex;justify-content: space-between;}}}}}
}
footer {display: flex;align-items: center;justify-content: space-between;width: 100%;height: 1.2rem;border-top: 1px solid #ccc;.order-total {font-size: 0.426666rem;span {padding: 0 0.16rem;}b {color: #b0352f;}em {font-size: 0.48rem;color: #b0352f;}}.order-topay {width: 3.2rem;line-height: 1.2rem;color: #fff;font-size: 0.426666rem;text-align: center;background-color: #b0352f;}
}
</style>

对接支付宝沙箱(进行支付)nodejs

api链接：https://github.com/alipay/alipay-sdk-nodejs-all

api链接：https://www.yuque.com/chenqiu/alipay-node-sdk/config-sdk

***测试支付，一定要用无痕浏览

后台 db---alipay.js

//引入sdk
const AlipaySdk = require('alipay-sdk').default;
const alipaySdk = new AlipaySdk({//AppIdappId: '202100011768788888514',//签名算法signType:'RSA2',//支付宝网关gateway:'https://openapi.alipaydev.com/gateway.do',//支付宝公钥alipayPublicKey:'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAkel1HVjCXwxoRRHg449wOcFaeLHI7AgZCQZzRx0VPymq1wdunJrRfOxAedbO+JCWi09o9BTy1zHhBsJ2A8dzyhhycOGJDS2gwWrZSrBHyLwqqRJJ7KVNyA1fKydHO7Bi0tJ1pL28jWiSANfklvw9b9kdaAuGAeswRkKHQ7YQeoOM1SVWJygJnKJEyhy5LE06hGUE0VjSBUgepUS/crYuCFi9UvIobqca38y0aqc+bI0I6TvJQ9wqUWpUoV9YNR8jhgOpU7aDuTEEFCvSpaLy0xNwSVTmWeu82MjOaGLNQmrVV4ymOozYgRfdpOcA1QrqyYlEBx9osiYsEAMevnx2bdhwIDAQAB',//应用私钥privateKey: 'MIIEowIBAAKCAQEAhk5HSR/+Yd1qtd/x16+7lYYpS7hkvH978Hr8Vo4p9sFGTr3iCAlHZ9ceEuIJZG6mAzJWTo0Nc0tJV889bAhYYgijiAvO5ImvVVtM3WJb//ST9zz3+PuOAezVbPnSuSHsVwsUuXNvPkJRlkKQffiNVHd2YM07nYAwZMt3iTop5R5KaSOlz0TFtOJKBsEsyIDl1Tuhlg33wUCcLm8em9gvu3hApubFBuQq6B/oEhlWPi7Xi0NIYDeKKIQuoaHBXK1E2aI67g2pBKHRbuzv6NuSRzMMhFecNRZAIVweVBqplSKhuSINbUm7p84lgmzTMZXtxpf2ub6mvbPvhnEmdpWNRQIDAQABAoIBAAU5yoBH5Gf+a4atyurEHi7cQZpBzB2MIS9MbpAe2O6tPWjCgG/T55WUdtjNf/gQH3lu7Lq3HLCVwG46AbKO977aXEYEPAixHO27hbz2fnkmuJmu9IrsLmHbt9zPUEabOd3GOiHw5m+I1E1B21bTZDfike01cL+3fJhWQovJdu85+iNWCfLAxcu/Ao55kKOGYdvKv+GGorDRPhlOzh09geqvss6rQE9j00JFqFuIPcA2Unxq5yszB1LGUVOPCYw5eznDDcBLx0N8UgUfpjASRdjJNL+1eezr0v6//J4HZ4VQmzJ2WMu+MmOyUHzYnoYb49Kh79RpSL8BdE/o8Vxb7mR7dwkCgYEAwDwFTgrIB8ouWXsNVkmf7SjUYHUlkYQHnf2o57/2d2pIw50vdhUnZKTmdKhaHh4zVoPLAoad9HWwwkdUQiTpfJD7nAglW4Tsw0kHu0vK2lYp3gjvoMVf1VQwM36r3tCnMyv6Yt3dNU/qXfEbbwJCGIowQdU3hidBfdatgOl8PAsCgYEAstsgS6sbiCiIQfRoznJefpGlrTSXZC0Rsn2DCULsNiwI1uzKHfFx0ZZ9Y04ICKpiWNyu1W43ZB4CGExYZP21xr4oK7jF0UTpIKXzEV63aow4M6mcmJfFVriweuy2BOM/eMhJYn1IXXe0Dl8Uj4B37X70I7JPx4DWTp6RYAnM3e8CgYBg315E/8Xhtw84ZHxKGXwQRV0Q5rfx5rj38xYlA2Wus87LVPDP7sUVQMwpyZTwTIPOe0fYlAIRaSWUIeHiGzvWXDGPZcN9pTSzDKBq0Dz/XiBnFdW8DPrIRE6uBI2UEU3Qyb66B9grv4P5p0EN5fNs7mZ3Jn1+i1XDlmWE6ySCFQKBgQCfulH9QbI0xv3o6P0wYbNCFZCAPpd1P0quvKhpfPq25lx+lLlsRFQBeQRBy04hbwilk3AP635MSwBT8tp+VpYgB3KYmUsQuRn5rjqFKLFk1hTbDn5rSB9Uc1woa32in8/vbe8bpgcacey7aO5TucdgsiAWQQg+gzDgxXvO6PGswQKBgBjP5vXcaz+WVzbY3mBi0B7Cd3G15wKQGpZRDy55WX/BCqlKnG41LJqeADxOPJKbZxHRxOYztR4742nzpNIEPddALV1uN/tNtb3MhpuH8QVvaDlfSqbNKaqaP/jY18QfMbS9q9dTCjoDcSUPzbSorq/4L6TV3pogOnQqqzV5kUkL'
});module.exports = alipaySdk;

后台接口

index.js

//引入支付宝配置文件
const alipaySdk = require("../db/alipay.js");
const AlipayFormData = require("alipay-sdk/lib/form").default;
//引入axiso
const axios = require("axios");

//发起支付
router.post("/api/payment", function (req, res, next) {//订单号let orderId = req.body.orderId;//商品总价let price = req.body.price;//购买商品的名称let name = req.body.name;//开始对接支付宝APIconst formData = new AlipayFormData();// 调用 setMethod 并传入 get，会返回可以跳转到支付页面的 urlformData.setMethod("get");//支付时信息formData.addField("bizContent", {outTradeNo: orderId, //订单号productCode: "FAST_INSTANT_TRADE_PAY", //写死的totalAmount: price, //价格subject: name, //商品名称});//支付成功或者失败跳转的链接formData.addField("returnUrl", "http://localhost:8080/payment");//返回promiseconst result = alipaySdk.exec("alipay.trade.page.pay",{},{ formData: formData });//对接支付宝成功，支付宝方返回的数据result.then((resp) => {res.send({data: {code: 200,success: true,msg: "支付中",paymentUrl: resp,},});});
});

Payment.vue

<template><div><div v-if='payStatus'>恭喜您支付成功~</div><div v-else>支付失败</div></div>
</template><script>
import http from '@/common/api/request.js'
import qs from 'qs'
export default{data () {return {payStatus : false}},created(){this.getData();},methods:{getData(){let datas = {out_trade_no:this.$route.query.out_trade_no,trade_no:this.$route.query.trade_no}http.$axios({url:'/api/successPayment',method:"post",headers:{token:true},data:qs.stringify(datas)}).then(res=>{if( res.code == 2 ){this.payStatus = true;}})}}
}
</script><style>
</style>

后台接口

//支付状态
router.post("/api/successPayment", function (req, res, next) {//tokenlet token = req.headers.token;let tokenObj = jwt.decode(token);//订单号let out_trade_no = req.body.out_trade_no;let trade_no = req.body.trade_no;//支付宝配置const formData = new AlipayFormData();// 调用 setMethod 并传入 get，会返回可以跳转到支付页面的 urlformData.setMethod("get");//支付时信息formData.addField("bizContent", {out_trade_no,trade_no,});//返回promiseconst result = alipaySdk.exec("alipay.trade.query",{},{ formData: formData });//后端请求支付宝result.then((resData) => {axios({method: "GET",url: resData,}).then((data) => {let responseCode = data.data.alipay_trade_query_response;if (responseCode.code == "10000") {switch (responseCode.trade_status) {case "WAIT_BUYER_PAY":res.send({data: {code: 0,data: {msg: "支付宝有交易记录，没付款",},},});break;case "TRADE_CLOSED":res.send({data: {code: 1,data: {msg: "交易关闭",},},});break;case "TRADE_FINISHED":connection.query(`select * from user where tel = ${tokenObj.tel}`,function (error, results) {//用户idlet uId = results[0].id;connection.query(`select * from store_order where uId = ${uId} and order_id = ${out_trade_no}`,function (err, result) {let id = result[0].id;//订单的状态修改掉2==》3connection.query(`update store_order set order_status = replace(order_status,'2','3') where id = ${id}`,function () {res.send({data: {code: 2,data: {msg: "交易完成",},},});});});});break;case "TRADE_SUCCESS":connection.query(`select * from user where tel = ${tokenObj.tel}`,function (error, results) {//用户idlet uId = results[0].id;connection.query(`select * from store_order where uId = ${uId} and order_id = ${out_trade_no}`,function (err, result) {let id = result[0].id;//订单的状态修改掉2==》3connection.query(`update store_order set order_status = replace(order_status,'2','3') where id = ${id}`,function () {res.send({data: {code: 2,data: {msg: "交易完成",},},});});});});break;}} else if (responseCode.code == "40004") {res.send({data: {code: 4,msg: "交易不存在",},});}}).catch((err) => {res.send({data: {code: 500,msg: "交易失败",err,},});});});
});

36，对接支付宝沙箱交易状态支付后相关推荐

node.js对接支付宝沙箱，看这篇足够
前言:node对接支付宝沙箱的心得,express,koa2都能使用. 支付宝沙箱位置在:支付宝开放平台控制台>开发工具推荐>沙箱引入alipay-sdk npm install ali ...
网页版支付宝沙箱开发支付成功同步回调session丢失问题与解决办法
网页版支付宝沙箱开发支付成功同步回调session丢失问题与解决办法唉,本人小白大学生,自己独自一人做了个网上商城项目昨天刚刚用了半天时间解决支付宝异步回调session丢失问题,今天就继续为沙箱 ...
支付宝沙箱模拟支付，退款等
支付宝沙箱模拟支付,退款,关闭订单,查询订单等一.准备从里面注册申请就可以. 沙箱网址:https://open.alipay.com/platform/appDaily.htm 生成密钥网址:h ...
Vue对接支付宝沙箱环境
文章目录前言一.支付宝沙箱环境是什么? 二.安装所需要的环境 1.引入环境以及工具 2.安装Express框架 3.对接支付宝沙箱环境总结前言此文章仅供学习参考,这里我们对接的环境是Vue. ...
JAVA对接支付宝，实现支付功能
网站对接支付宝支付沙盒开通支付宝给我们提供了支付宝支付沙盒供测试注册沙盒可以自行百度开通这里不过多介绍对接支付宝主要流程我们在我们订单支付时给支付宝发送一个创建订单请求在创建订单时创 ...
支付宝沙箱环境支付（当面付教程）
1 配置沙箱环境 1.1 入驻开放平台 1.进入蚂蚁金服开放平台登录界面,入口:link,使用支付宝扫码支付. 2.登录成功后,选择自由开发者->开始入驻. 3.完善信息. 4.同意协议 5.开 ...
支付宝沙箱模拟支付过程
支付宝沙箱模拟商品支付代码实现在许多网购商品项目中,不难会遇到用户支付的场景,但若要自己开发一个运用在支付场景的支付包,实属有些困难,但是也不乏一些大厂自己集成的环境.支付宝有一个供开发者测试使用的 ...
java对接支付宝小程序支付
今天晚上12点部署生产项目,又是个不眠夜. 之前整的好多东西都忘光了,还是记录下来吧. 跟对接支付宝支付差不多,地址:小程序支付能力介绍 | 小程序开通流程: 1.先要去支付宝开放平台,创建小程序. ...
支付宝周期扣款(支付后签约)业务功能总结(php+golang)
文档周期扣款支付后签约场景文档:https://opendocs.alipay.com/open/041bxs 业务流程 1.处理签约成功回调,添加到订阅表 2.定时任务自行请求订阅表,把达到扣款日 ...

36，对接支付宝沙箱交易状态支付后

36，对接支付宝沙箱交易状态支付后相关推荐

最新文章

热门文章

36，对接支付宝沙箱 交易状态 支付后

36，对接支付宝沙箱 交易状态 支付后相关推荐

最新文章

热门文章

36，对接支付宝沙箱交易状态支付后

36，对接支付宝沙箱交易状态支付后相关推荐