Day 21 - WooCommerce: 信用卡付款设定选项 (上)

图 21-1
图 21-1: 付款方式列表

我们已经建立了继承 WC_Payment_Gateway 的的 WC_SinoPac_Credit_Card_Payment 类别作为信用卡付款方式。

目前在截图看到的方法名称和描述是可以透过自己定义设定值来修改的喔,今天的进度就是和大家方享如何建立设定选项。

引入设定档

图 21-2
图 21-2: WC_SinoPac_Credit_Card_Payment

第 8 行 可以看到我们引入了回传一个阵列值的 PHP 档案,存进 $this->form_fields 这个属性。这个属性是存放整个设定页面的栏位结构,在 WC_Payment_Gateway 找不到,因为它被定义在 WC_Settings_API 这个抽象类别里面。

WC_Payment_Gateway 是继承自 WC_Settings_API,所以如果在范例中或者参考其它付款方式的看到不熟悉的属性,但不存在 WC_Payment_Gateway 中,不妨可以查查 Settings API 的原始码。

档案位置:

/woocommerce/includes/abstracts/abstract-wc-settings-api.php

第 10-15 行 我们把设定的选项都用 $this->get_options 读进来了,变成本付款闸道类别的属性了。可以取代原本的 public 属性,也可以自定义属性用在自己的程序逻辑中,弹性很大喔!

建立设定选项

基本项目

图 21-3
图 21-3: settings-cc-payment.php

一开始先规划四个选项,分别是 enabledtitledescriptionorder_button_text。这个四个选项其实就是 Payment Gateway API 的公开属性唷!提供这些选项给使用者们,在图 21-1 的范例中的标题及描述,都可以透过选项改变,客制化选项文字。

图 21-4
图 21-4: SinoPac 信用卡设定页面

放进这四个选项,再点进去「设定」看看,页面已经有模有样罗!

栏位说明

图 21-5
图 21-5: 设定栏位说明 1

这是一个二维阵列。Settings API 规范好的架构中,阵列的 key 值就是栏位的属性名称,例如图 21-5enabled 决定这个付款方式是否启用。default 预设值是 no。title 是设定页面的栏位标题,type 是栏位的属性,这里是 checkbox 勾选方块。label 则是勾选方块的小标题。

图 21-6
图 21-6: 设定栏位说明 2

再举个例子,title 会显示在图 21-1 的付款方式列表中,它的 type 是 text 文字输入框,少了 label 但多了 descriptiondesc_tip

desc_tip 设为 false,则 description 则会直接显示在设定页面上。

图 21-7
图 21-7: SinoPac 信用卡设定页面

如果设为 true,则会变成一个问号圈圈,滑鼠移过去出现说明文字喔!

流程总结

其实设定栏位的 type 还有其它种类,可以看看 WooCommerce 外挂内建的 PayPal 付款,它的设定档十分有参考性喔。

光是基本项目列出来的栏位,还不够。我们在明天要加入永丰金流技术客服在 Email 里给我们的 ShopNo 和四组 Hash,有了这些自定的栏位选项,信用卡付款的设定才算真正完成。

那,我们明天见吧。


<<:  卡夫卡的藏书阁【Book21】- Kafka - KafkaJS 消费者 3

>>:  IT 铁人赛 k8s 入门30天 -- day21 k8s Task Deploying PHP Guestbook application with Redis

这些日子我学到的JavaScript:Day26- BOM

BOM,是 JavaScript 与浏览器沟通的桥梁,JavaScript 可以透过 BOM 对浏览...

DAY23 这边先帮你上一个按钮喔~(五)

直接一点的说,今天的主题就是要让骰子动起来,现在他已经躺在那边准备好被你狠狠D甩出去了,你就不要客气...

#27 No-code 之旅 — 客制化 Favicon ~

嗨嗨!今天来讲一下怎麽设定网站的 favicon!还有用 Next.js 也可以快速设定每个页面用不...

Day16:【技术篇】SQL之基本CRUD处理能力

一、前言   对於全端工程师的工作内容与心法,我在前面15天的系列文章中已简单列出并加以介绍,而这篇...

Day 13 - Futures期货、Options选择权Order建立

本篇重点 Futures期货Order建立 Options选择权Order建立 由於前一篇有说明Or...