0.支付流程

1. 重點總結

1）用戶進入“我的訂單”頁面，點擊“去支付”；
觸發后端js中的函數，發出ajsx異步請求，調用后端相應接口order_pay(order_id)，目的是構建讓用戶跳轉的支付連接地址，并推送給用戶進行付款操作；因為請求方式是PUT,因此需要在參數中加入X-CSRFToken；

2）在后端進行邏輯處理，構建出跳轉的支付鏈接地址pay_url（并指出用戶完成支付后返回的地址return_url）。

支付鏈接地址經過js回調函數處理，將此pay_url返回給前端頁面，此時自動打開手機支付寶app，用戶對相應的訂單進行支付操作，

支付完成后，跳轉return_url相對應的前端頁面paycomplete.html，如下圖所示。

3）用戶在支付完成后，需要修改數據庫中訂單的相關信息，比如說訂單的狀態status，以及支付寶的交易號trade_no，此時前端頁面中的js向后端發送ajsx異步請求，向后端相應接口save_order_payment_result（）發出邏輯處理。

js中alipayData = document.location.search.substr(1)，切割URL中的參數信息，并以form格式將參數信息推送給后端接口，后端接收數據；

為安全起見，借助工具校驗參數的合法性，確定參數是支付寶真實發出的；

最后修改數據庫的訂單狀態信息。
此時，點擊前文中支付成功界面中的“回到我的訂單”，會發現訂單狀態已經從“去支付”變為“發表評論”。

2.后端代碼

pay.py詳細代碼如下：

# coding:utf-8from . import api
from ihome.utils.commons import login_required
from ihome.models import Order
from flask import g, current_app, jsonify, request
from ihome.utils.response_code import RET
from alipay import AliPay
from ihome import constants, db
import os@api.route("/orders/<int:order_id>/payment", methods=["POST"])
@login_required
def order_pay(order_id):"""發起支付寶支付"""user_id = g.user_id# 判斷訂單狀態try:order = Order.query.filter(Order.id == order_id, Order.user_id == user_id, Order.status == "WAIT_PAYMENT").first()except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="數據庫異常")if order is None:return jsonify(errno=RET.NODATA, errmsg="訂單數據有誤")# 創建支付寶sdk的工具對象alipay_client = AliPay(appid="2016081600258081",app_notify_url=None,  # 默認回調urlapp_private_key_path=os.path.join(os.path.dirname(__file__), "keys/app_private_key.pem"),  # 私鑰alipay_public_key_path=os.path.join(os.path.dirname(__file__), "keys/alipay_public_key.pem"),  # 支付寶的公鑰，驗證支付寶回傳消息使用，不是你自己的公鑰,sign_type="RSA2",  # RSA 或者 RSA2debug=True  # 默認False)# 手機網站支付，需要跳轉到https://openapi.alipaydev.com/gateway.do? + order_stringorder_string = alipay_client.api_alipay_trade_wap_pay(out_trade_no=order.id,  # 訂單編號total_amount=str(order.amount/100.0),   # 總金額subject=u"愛家租房 %s" % order.id,  # 訂單標題return_url="http://127.0.0.1:5000/payComplete.html",  # 返回的連接地址notify_url=None  # 可選, 不填則使用默認notify url)# 構建讓用戶跳轉的支付連接地址pay_url = constants.ALIPAY_URL_PREFIX + order_stringreturn jsonify(errno=RET.OK, errmsg="OK", data={"pay_url": pay_url})@api.route("/order/payment", methods=["PUT"])
def save_order_payment_result():"""保存訂單支付結果"""alipay_dict = request.form.to_dict()# 對支付寶的數據進行分離  提取出支付寶的簽名參數sign 和剩下的其他數據alipay_sign = alipay_dict.pop("sign")# 創建支付寶sdk的工具對象alipay_client = AliPay(appid="2016081600258081",app_notify_url=None,  # 默認回調urlapp_private_key_path=os.path.join(os.path.dirname(__file__), "keys/app_private_key.pem"),  # 私鑰alipay_public_key_path=os.path.join(os.path.dirname(__file__), "keys/alipay_public_key.pem"),# 支付寶的公鑰，驗證支付寶回傳消息使用，不是你自己的公鑰,sign_type="RSA2",  # RSA 或者 RSA2debug=True  # 默認False)# 借助工具驗證參數的合法性# 如果確定參數是支付寶的，返回True，否則返回falseresult = alipay_client.verify(alipay_dict, alipay_sign)if result:# 修改數據庫的訂單狀態信息order_id = alipay_dict.get("out_trade_no")trade_no = alipay_dict.get("trade_no")  # 支付寶的交易號try:Order.query.filter_by(id=order_id).update({"status": "WAIT_COMMENT", "trade_no": trade_no})db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errno=RET.OK, errmsg="OK")

3.前端js

order.js中部分代碼：

$.get("/api/v1.0/user/orders?role=custom", function(resp){if ("0" == resp.errno) {$(".orders-list").html(template("orders-list-tmpl", {orders:resp.data.orders}));$(".order-pay").on("click", function () {var orderId = $(this).parents("li").attr("order-id");$.ajax({url: "/api/v1.0/orders/" + orderId + "/payment",type: "post",dataType: "json",headers: {"X-CSRFToken": getCookie("csrf_token"),},success: function (resp) {if ("4101" == resp.errno) {location.href = "/login.html";} else if ("0" == resp.errno) {// 引導用戶跳轉到支付寶連接location.href = resp.data.pay_url;}}});});

4.前端html

order.html中部分代碼：

 <li order-id={{order.order_id}}><div class="order-title"><h3>訂單編號：{{order.order_id}}</h3>{{ if "WAIT_COMMENT" == order.status }}<div class="fr order-operate"><button type="button" class="btn btn-success order-comment" data-toggle="modal" data-target="#comment-modal">發表評價</button></div>{{ else if "WAIT_PAYMENT" == order.status }}<div class="fr order-operate"><button type="button" class="btn btn-success order-pay">去支付</button></div>

paycomplete.html代碼，此代碼中有部分js代碼，處理上文中的第三部分邏輯。

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>愛家-我的訂單</title><link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"><link href="/static/css/reset.css" rel="stylesheet"><link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet"><link href="/static/css/ihome/main.css" rel="stylesheet"><link href="/static/css/ihome/orders.css" rel="stylesheet">
</head>
<body><div class="container"><div class="top-bar"><div class="nav-bar"><h3 class="page-title">支付完成</h3><a class="nav-btn fl" href="/my.html"><span><i class="fa fa-angle-left fa-2x"></i></span></a></div></div><div class="orders-con"><p> 支付已完成 </p><a href="/orders.html">回到我的訂單</a></div><div class="footer"><p><span><i class="fa fa-copyright"></i></span>愛家租房&nbsp;&nbsp;享受家的溫馨</p></div> </div><script src="/static/js/jquery.min.js"></script><script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script><script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script><script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script><script src="/static/js/template.js"></script><script type="text/javascript">function getCookie(name) {var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");return r ? r[1] : undefined;}var alipayData = document.location.search.substr(1);$.ajax({url: "/api/v1.0/order/payment",type: "put",data: alipayData,headers: {"X-CSRFToken": getCookie("csrf_token")}})</script>
</body>
</html>

返回頂部