Here I will explaing how to create custom paymnet method in Magento 2.
Follow the below steps.
Declare Module
File : app/code/PHPCode/Quickpay/etc/module.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noTestSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="PHPCodez_Quickpay" setup_version="2.0.0" active="true"> </module> </config>
Register the module
File : app/code/PHPCodez/Quickpay/registration.php
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'PHPCodez_Quickpay', __DIR__ );
Create config.xml
File : app/code/PHPCodez/Quickpay/etc/config.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd"> <default> <payment> <quickpay> <payment_action>capture</payment_action><!-- You can use another methor like capture --> <model>PHPCodez\Quickpay\Model\PaymentMethod</model> <active>1</active> <title>PHPCodez Quickpay</title> <order_status>pending</order_status><!-- set default order status--> </quickpay> </payment> </default> </config>
Create system configuration file
File : app/code/PHPCodez/Quickpay/etc/adminhtml/system.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd"> <system> <section id="payment"> <group id="quickpay" translate="label" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1"> <label>PHPCodez Quick Pay</label> <field id="active" translate="label comment" sortOrder="1" type="select" showInDefault="1" showInWebsite="1" showInStore="0"> <label>Enable</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> </field> </group> </section> </system> </config>
Create model file to define payment
File : app/code/PHPCodez/Quickpay/Model/PaymentMethod.php
<?php namespace PHPCodez\Quickpay\Model; class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod { protected $_code = 'quickpay'; }
Create method-renderer.js
File : app\code\PHPcodez\Quickpay\view\frontend\web\js\view\payment
define( [ 'uiComponent', 'Magento_Checkout/js/model/payment/renderer-list' ], function ( Component, rendererList ) { 'use strict'; rendererList.push( { type: 'quickpay', component: 'PHPCodez_Quickpay/js/view/payment/method-renderer/quickpay' } ); return Component.extend({}); } );
Create quickpay.js
File : app\code\PHPcodez\Quickpay\view\frontend\web\js\view\payment\method-renderer\Quickpay.js
define( [ 'Magento_Checkout/js/view/payment/default' ], function (Component) { 'use strict'; return Component.extend({ defaults: { template: 'PHPCodez_Quickpay/payment/quickpay' } }); } );
Create template file quickpay.html
File : app\code\PHPcodez\Quickpay\view\frontend\web\template\payment\quickpay.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>
Create checkout_index_index.xml
File : app\code\PHPcodez\Quickpay\view\frontend\layout\checkout_index_index.xml
<?xml version="1.0"?> <page 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="component" xsi:type="string">uiComponent</item> <item name="children" xsi:type="array"> <item name="payment" xsi:type="array"> <item name="children" xsi:type="array"> <item name="renders" xsi:type="array"> <!-- merge payment method renders here --> <item name="children" xsi:type="array"> <item name="quickpay" xsi:type="array"> <item name="component" xsi:type="string">PHPCodez_Quickpay/js/view/payment/method-renderer</item> <item name="methods" xsi:type="array"> <item name="quickpay" 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> </page>
Issue the following commands and you will be able to see payment method ‘PHPCodez Quick Pay’ on checkout page.
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy -f php bin/magento cache:clean