Magento2 製作客製化付款方式模組
本篇將介紹如何在Magento2新增一個付款方式，可以讓你在後台進行開關，設定付款名稱等設定，如果你需要串接不同金流，本篇將會提供你基礎必須資訊。
*適用版本: Magento2.0.X~2.2.X
製作模組需要的設定檔
首先創立模組需要的註冊檔
1.registration.php
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, AstralWeb_Payment, __DIR__ );
2.etc/module.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="AstralWeb_Payment" setup_version="0.1.0"> <sequence> <module name="Magento_Sales"/> <module name="Magento_Payment"/> <module name="Magento_Checkout"/> <module name="Magento_Directory" /> <module name="Magento_Config" /> </sequence> </module> </config>
製作付款方式模組
3.etc/payment.xml
<?xml version="1.0" ?> <payment xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Payment:etc/payment.xsd"> <groups> <group id="offline"> <label>Offline Payment Methods</label> </group> </groups> <methods> <method name="simple"> <allow_multiple_address>1</allow_multiple_address> </method> </methods> </payment>
4.製作 config.xml，此檔案裡可以設定此付款的預設值
<?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd"> <default> <payment> <simple> <active>1</active> <model>AstralWeb\Payment\Model\Payment\Sample</model> <order_status>pending</order_status> <title>Simple</title> <allowspecific>0</allowspecific> <group>Offline</group> </simple> </payment> </default> </config>
再來我們來製作付款的Model檔案，這裡跟上面 config.xml裡的payment model欄位裡的路徑要核對上才能生效
5.Model/Payment/Sample.php
<<?php
namespace AstralWeb\Payment\Model\Payment;
class Sample extends \Magento\Payment\Model\Method\AbstractMethod
{
/**
* Payment code
*
* @var string
*/
protected $_code = sample;
}
展示付款方式在Checkout頁面
6.建立layout : view/frontend/layout/checkout_index_index.xml
<?xml version="1.0" ?> <pagepage layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="checkout.root"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="checkout" xsi:type="array"> <item name="children" xsi:type="array"> <item name="steps" xsi:type="array"> <item name="children" xsi:type="array"> <item name="billing-step" xsi:type="array"> <item name="children" xsi:type="array"> <item name="payment" xsi:type="array"> <item name="children" xsi:type="array"> <item name="renders" xsi:type="array"> <item name="children" xsi:type="array"> <item name="offline-payments" xsi:type="array"> <item name="component" xsi:type="string">AstralWeb_Payment/js/view/payment/sample</item> <item name="methods" xsi:type="array"> <item name="sample" xsi:type="array"> <item name="isBillingAddressRequired" xsi:type="boolean">true</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock> </body> </pagepage>
7.建立 /view/frontend/web/js/view/payment/sample.js
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (Component,
rendererList) {
'use strict';
rendererList.push(
{
type: 'sample',
component: AstralWeb_Payment/js/view/payment/method-renderer/sample-method'
}
);
return Component.extend({});
}
);
8.建立 /view/frontend/web/js/view/payment/method-renderer/simple-method.js
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: AstralWeb_Payment/payment/sample'
},
getMailingAddress: function () {
return window.checkoutConfig.payment.checkmo.mailingAddress;
},
});
}
);
9.最後建立 /view/frontend/web/template/payment/sample.html
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
<label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="payment-method-billing-address">
<!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="actions-toolbar">
<div class="primary">
<button class="action primary checkout"
type="submit"
data-bind="
click: placeOrder,
attr: {title: $t('Place Order')},
css: {disabled: !isPlaceOrderActionAllowed()},
enable: (getCode() == isChecked())
"
disabled>
<span data-bind="i18n: 'Place Order'"></span>
</button>
</div>
</div>
</div>
</div>
之後再進行最後步驟
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy
以上就是這次關於Magento2 製作客製化付款方式模組，更多Magento 2 的教學，別忘訂閱歐斯瑞電子報和追蹤我們的粉絲專頁喔！
更多Magento相關文章請看: Magento教學導覽
延伸閱讀：
Magento2 客製化模組製作
Magento1.X和Magento2.X 模組產生器
我要留言