Magento 2 Payment Method Development – In this dev doc article, we will learn how to create a custom payment method and render it to the checkout page in Magento 2.
There are following files will have to create:-
1 – Create Test/Testpayment/registration.php for register your module.
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Test_Testpayment', __DIR__ );
2- Create Test/Testpayment/etc/module.xml for define module name.
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:`xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Test_Testpayment" setup_version="2.0.0" active="true"> </module> </config>
3- Create Test/Testpayment/etc/config.xml for define your payment method.
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd"> <default> <payment> <testpayment> <payment_action>authorize</payment_action><!-- You can use another methor like capture --> <model>Test\Testpayment\Model\PaymentMethod</model> <active>1</active> <title>Test Payment</title> <order_status>pending_payment</order_status><!-- set default order status--> </testpayment> </payment> </default> </config>
4- Create Test/Testpayment/etc/adminhtml/system.xml for display payment method in backend. In this file mentioned only one field for enable/disable method.You can add field accordingly your need.
<?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="testpayment" translate="label" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Test Payment</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>
5- Create model file to define payment method Test/Testpayment/Model/PaymentMethod.php
<?php namespace Test\Testpayment\Model; /** * Pay In Store payment method model */ class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod { /** * Payment code * * @var string */ protected $_code = 'testpayment'; /** * Authorizes specified amount. * * @param InfoInterface $payment * @param float $amount * * @return $this * * @throws LocalizedException */ public function authorize( \Magento\Payment\Model\InfoInterface $payment, $amount ) { return $this; } }
6- In this file Test/Testpayment/view/frontend/web/js/view/payment/method-renderer.js register our template or renderer file.
define( [ 'uiComponent', 'Magento_Checkout/js/model/payment/renderer-list' ], function ( Component, rendererList ) { 'use strict'; rendererList.push( { type: 'testpayment', component: 'Test_Testpayment/js/view/payment/method-renderer/testpayment' } ); return Component.extend({}); } );
7- Create Test/Testpayment/view/frontend/web/js/view/payment/method-renderer/testpayment.js
define( [ 'Magento_Checkout/js/view/payment/default' ], function (Component) { 'use strict'; return Component.extend({ defaults: { template: 'Test_Testpayment/payment/testpayment' } }); } );
8- Create template file Test/Testpayment/view/frontend/web/template/payment/testpayment.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"> <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>
9- Create Test/Testpayment/view/frontend/layout/checkout_index_index.xml for define payment method at checkout page.
<?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="testpayment" xsi:type="array"> <item name="component" xsi:type="string">Test_Testpayment/js/view/payment/method-renderer</item> <item name="methods" xsi:type="array"> <item name="testpayment" 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>
Now to install this module execute php bin/magento setup:upgrade command in your root.
Now, You can check your custom payment method at checkout page like as below screen-shot.
Thank’s for reading this article on Magento 2 payment method. Now you will be able to develop customized payment options, from the basic Cash On Delivery method to a more complex and unique, Magento 2 Partial Payment extension.
We hope you have learned something new today. If you have any queries please send us an email at [email protected].
24 comments
Thanks for your valuable feedback, Stay tuned with us for more blogs…
Thanks & Regards
Webkul Team.
Please provide us any screen-shot which error are you getting.So that i can check and provide you solution.
Thanks & Regards
Shubham Sharma
I am new on Magento 2.
2 things I want to add below Radio Button on checkout page but how to get?
1)Textfield Instruction , How to show instruction below Radio Button of custom payment however does not display any text when I type in text-fied of instruction from admin panel?
2) Billing Address does not show on checkout page.
Please help me to display above things on checkout page.
Thanks in Advance…
http://localhost/magento/rest/default/V1/guest-carts/b703a3b6b37fbf70eb93d3904824df14/payment-information 400 (Bad Request)
I guess, it’s happening, because the step payment-information is not created yet. Is it the point? Should I create de payment-information? Or its Magento 2 already have this?
Best Regards
Tiago
http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_overview.html
What am I doing wrong here? Should it have taken me to a complete order screen?
I got this error:
[2017-02-26 06:33:44] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_2d41d8cd98f00b204e9800998ecf8427e and handles : Please correct the XML data and try again. [] []
Thanks
Before placing an order, Enable the browser console and check the response, you must be getting the response as 400 bad request, if you are getting this response, then go to
Test/Testpayment/etc/config.xml
replace
authorize
with
capture
It will work 🙂
[2017-01-05 09:32:00] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_2d41d8cd98f00b204e9800998ecf8427e and handles : Please correct the XML data and try again. [] []
Am I doing anything wrong. Magento version is 2.1.3.
Can you help me how to do this?
But when i place the new order ,order status is showing as “processing” instead of “pending”.
How can i change it..?
Test/Testpayment/etc/config.xml
use pending instead of pending_payment
Currently there is a bug in Magento 2.x which does not allow to use config.xml and set proper order status when placing order. You have to use custom InitializeCommand or CaptureCommand to prepare order specific data together with status.
Hope it helps.
I have been create module and I magento redirect to payment gateway
but my session checkout invalid