Day22 - [丰收款] 以Django Web框架实作永丰API线上支付模拟情境(3) - 两种付款方式实作

昨天使用了Bootstrap5、Vue，打造了我们的付款流程入口页面後，今天要将之前的ATM虚拟帐户转帐付款以及信用卡线上刷卡的页面也实作一下。

还记得我们昨天从order_create_entrance页面送出form表单後，会执行action页面order_create_next，接着就是要实作这个view以及Django Template。

[View] order_create_next

先看一下view def的部份：

def order_create_next(request):
    context = {
        "title": "订单成立罗！",
        "desc": "请依照下列付款资讯完成付款，放心，我们不是诈骗集团，但这麽说好像也不会让人多放心。",
        "amount": int(request.POST.get("amount")),
        "payment_type": request.POST.get("payment")
    }
    if context["payment_type"] == "atm":
        will_paid = True
        resp = create_new_atm_order(will_paid, context["amount"])
        context["order_no"] = resp.orderno
        context["atm_pay_no"] = resp.atm_pay_no
        context["atm_url"] = resp.web_atm_url
    elif context["payment_type"] == "card":
        will_paid = True
        auto_billing = "Y"
        resp = create_new_card_order(will_paid, context["amount"], auto_billing)
        context["order_no"] = resp.orderno
        context["card_pay_url"] = resp.card_pay_url
    else:
        pass

    return render(request, 'order/order_create_next.html', context)

程序说明

我们会从前一页传入amount总金额以及payment_type付款方式两个参数。要记得先将amount转换成int的型态，否则後面在永丰的规则要把amount补2个零的时候，如果你把一个长的像数字的字串拿去x100的话…(笑)。

由於先前已实作好create_new_atm_order()以及create_new_card_order()这两个针对ATM转帐以及信用卡刷卡的方法，现在在後段实作上就发挥功效了！我们终於不用再辛辛苦苦面对那些加解密和安全签章等等过程。要做的就只有当时我们需要传入的参数，准备一下就好了。

这次有所差别的是，之前是使用乱数模拟付款金额，现在我们可以从前一页所挑选的商品总金额正确的传入。

上面的payment_type，我在这边仅使用字串判断，当然如果你要以更严谨的系统去设计与考量，中间有很多是可以去强化的，包含各种值域的检查以及例外处理等，在此为避免失焦，这些都不在此demo设计范围内。

上述两种付款方式的选择，主要差异在完成後的结果，ATM的话会拿回虚拟帐号atm_pay_no和线上WebATM网址atm_url。而信用卡的话会拿回信用卡刷卡网址card_pay_url。

准备好了，就可以来看本篇重点，order_create_next.html Template罗！

显示模板

{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block body %}
<div id="app" class="row g-3 align-self-center">
<h1 class="display-4 text-center  mb-3 mt-5">{{ title }}</h1>
<p class="lead  text-center">{{ desc }}</p>
<hr/>
<div class="container-fluid">
    <h3 class="mb-5">
      订单号码 <small class="text-muted">{{ order_no }}</small>
    </h3>
    {% if payment_type == "atm" %}
    <h6>您可以透过两种方式进行ATM转帐</h6>
    <div class="row">
        <div class="col border border-secondary rounded m-2">
            <p class="fs-5">1. 请转帐至下方永丰银行虚拟帐户</p>
            <p>
                银行代码 <span class="primary fs-4">807</span>
            </p>
            <p>
                转帐号码 <span class="primary fs-4 text-primary">{{ atm_pay_no }}</span>
            </p>
            <p>
                转帐金额 <span class="primary fs-4">NT$ {{ amount }}</span>
            </p>

        </div>
        <div class="col border border-secondary rounded m-2">
            <p class="fs-5">2. 点选下方按钮进入永丰线上WebATM转帐</p>
            <a href="{{ atm_url }}" class="btn btn-light btn-lg" tabindex="-1" role="button" aria-disabled="true">跳转至永丰线上WebATM</a>

        </div>
    </div>
    {% else %}
    <p>
        您这次的总消费金额是 <span class="text-primary fs-4">NT$ {{ amount }}</span>，请点选以下按钮，进入信用卡刷卡页面。
    </p>
    <a href="{{ card_pay_url }}" class="btn btn-success btn-lg" tabindex="-1" role="button" aria-disabled="true">进入永丰线上信用卡刷卡页面</a>
    {% endif %}
    <br/><br/><br/><br/>
    <hr/>
    <div class="row mt-3">
        <div class="col text-center">
            <a href="{% url 'order_create_entrance' %}" class="btn btn-primary btn-lg" tabindex="-1" role="button" aria-disabled="true">继续购买</a>
            &nbsp
            <a href="{% url 'my_orders' %}" class="btn btn-secondary btn-lg" tabindex="-1" role="button" aria-disabled="true">回到订单</a>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block script %}
{% endblock %}

程序说明

首先，这里其实用不到Vue，如果把Django View转入的context变数再转成Vue的binding，昨天文章已示范过，其实在这个页面中是多此一举，因此我这次会直接以Django Template的变数直接替换。

这里使用了if的逻辑，将付款方式拆开显示订单成立後所需要有差别的资讯。

1. ATM虚拟帐户付款

我们提供了两种ATM付款方式，一个是把虚拟帐户显示在UI上，让使用者使用自己惯用的转帐方法去转帐，因此当然需要列出转入银行代码、转入帐号以及告知其金额。

第二种是直接将永丰提供的线上WebATM的网址给他(我们写成一个按钮让User点选)，不过先前有说明，询问永丰技术部门後，这次测试这个网址的测试功能是不提供的。

但为了情境模拟，我们还是列出来供假想顾客作选择，是不是很贴心。

不过这个情境都不需要我们真的付款，因为永丰API会自动帮我们模拟付款的动作，需要等几分钟就是了，如果有一整个系列收看的朋友，应该还记得中间我们花了不少天在处理PayToken的取得与询问的部份，就在於那个千呼万唤始出来的BackendURL实作 (我们放到了Heroku平台上)，因此先前都作完了，这部份也无需担心了。