Day 28 - WooCommerce: 显示虚拟帐号付款资讯

昨天虽然完成了以永丰银行虚拟帐号付款方式进行结帐，但如果没有找个地方显示帐号，顾客也不知道要汇钱到那里，因此我们必须好好的规划一下显示这重要资讯的地方。

显示虚拟帐号付款资讯

就电商大部分的购物流程来说，会出现在两个地方。

• 订单完成页面
• 订单详细页面

图 28-1: SinoPac_Payment controller

来到 SinoPac_Payment 的 init 区块。在这里新增两个 Hook。

第 13 行 这个 Hook woocommerce_thankyou 出现在订单完成页的底部，我们要将汇款资讯插入该页的底部。
第 14 行 woocommerce_after_order_details 顾名思义，这个 Hook 的位置在订单详细资料的下方。

订单完成页面

图 28-2: display_transation_info (method)

第 12 行 读取交易资讯，如果有存在的话，且有 ATM 资讯，才显示。
第 18 行 载入网页样板，是一个显示虚拟帐号资讯的区块。

流程展示

*图 28-3: 汇款资讯於订单完成页

在购买完商品之後，顾客已经可以在订单完成页看到汇款的帐号资讯。

订单详细页面

图 28-4: display_payment_info_for_va (method)

第 11 行 如果付款方式是 sinopac-va，才显示这整个区块。
第 23 行 我们送出的帐号过期时间为 7 天。
第 25 行 样板档案的内容。

图 28-5: views/order_detial.php

网页样板，和结帐完成页面一样是一个显示虚拟帐号资讯的区块，多了该虚拟帐号的过期时间。

流程展示

*图 28-6: 汇款资讯於订单详细页

由以上 GIF 展示从完成结帐再点选进我的帐号，再进到订单列表页面，点选刚刚完成的订单，可以看到汇款的资讯已经在订单详细页面的下方罗!

*图 28-7: 汇款资讯於订单详细页

流程总结

以上就是虚拟帐号付款的一些细节，它的好处是不跳转到其它的网站（例如信用卡付款会跳转到永丰银行收款平台的刷卡页面）。但缺点是要被动地等待顾客付款。

明天铁人赛的倒数第二天，要和大家分享的是，永丰银行收款平台收到汇款後通知我们关於顾客已付款的细节，我们明天见。

注：Day 28 的范例程序码可在这里浏览。