支付宝支付具体流程

下载支付宝相关包

pip install python-alipay-sdk -i https://pypi.tuna.tsinghua.edu.cn/simple/

后端

支付流程

import random
from datetime import datetime
from flask import Blueprint, jsonify, request
from flask_restful import Resource, Api, reqparse
from model.model import GoodModel, OrderModel
from model import db

class OrderPayView(Resource):
    def post(self):
        # 1.导包
        from alipay import AliPay

        with open("./keys/alipay_public_key.txt", "r", encoding="utf-8") as f:
            alipay_public_key = f.read()
            f.close()

        with open("./keys/app_private_key.txt", "r", encoding="utf-8") as f:
            app_private_key = f.read()
            f.close()

        # 2，实例化阿里的sdk
        alipay = AliPay(
            appid="2021000120614629",  # appid 从open.alipay.com 获取
            app_private_key_string=app_private_key,  # 使用密钥生成工具生成
            alipay_public_key_string=alipay_public_key,  # 使用我们自己生成的公钥，与支付宝官方换来的支付宝的公钥
            debug=True  # 调试模式打开
        )

        req = reqparse.RequestParser()
        req.add_argument("num")
        args = req.parse_args()
        out_trade_no = OrderModel.query.filter(OrderModel.num == args["num"]).first()

        num = datetime.strftime(datetime.now(), "%Y%m%d%H%M%S") + str(random.randint(1000, 9999))
        # 3.调用sdk下面的方法
        url = alipay.api_alipay_trade_page_pay(  # 此方法是用来网页支付的
            subject="开通vip",  # 订单标题
            out_trade_no=num,  # 自己平台的订单号
            total_amount=str(out_trade_no.good.price),  # 支付金额，字符串形式，精确到两位小数
            return_url="http://127.0.0.1:5000/user/order/pay/notify",  # 同步回调地址
            notify_url="https://www.baidu.com/",  # 异步回调地址  上线后再说
        )

        # 支付地址
        url = "https://openapi.alipaydev.com/gateway.do?" + url
        print(url)
        return jsonify({
            "code": 200,
            "msg": "ok",
            "url": url
        })

支付宝回调地址

class PayNotifyView(Resource):
    def get(self):
        """接收同步地址回调"""
        # request.args.get() 拿完整的地址栏
        # to_dict() 转化为字典形式
        args = request.args.to_dict()
        print(args)


api.add_resource(OrderPayView, "/order/pay")
api.add_resource(PayNotifyView, "/order/pay/notify")

前端

<template>
  <div>
      <div v-for="(item, i) in order_lst" :key="i">
        <div>订单编号：{{ item.num }}</div>
        <div>名字：{{ item.good }}</div>
        <div>价格：{{ item.price }}</div>
        <el-button type="primary" @click="pay(item.num)">结算</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Good1024",
  data() {
    return {
      lst: [],
      order_lst: [],
    };
  },
  
  mounted() {
    this.getInfo();
  },

  methods: {
    getInfo() {
      this.$axios
        .get("/user/order")
        .then((res) => {
          console.log(res);
          this.order_lst = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
 
    pay(num) {
      this.$axios
        .post("/user/order/pay", {
          num: num,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            alert(res.data.msg);
          } else {
            alert(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped></style>