文章彙整

Magento2 製作客製化付款方式模組

By Steffi 5 months agoNo Comments
首頁  /  Magento  /  Magento-2  /  Magento2 製作客製化付款方式模組

how to create payment method on magento 2

本篇將介紹如何在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 模組產生器

參考文章:
https://www.mageplaza.com/magento-2-create-payment-method/

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento-2

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。