eCommerce Reaches 25% of Total Retail Sales for the First Time
Reading Time: 1 minuteDigital Commerce 360 reports that eCommerce accounted for 25% of total retail…
In this post you will learn how to create custom Payment Module in Magento 2. For creating a Payment Module in Magento 2 you need to follow the below steps and your Payment Module will be ready.
Here “Cedcommerce” is our workspace and “Payment” is our extension name.
1. Create app/code/Cedcommerce/Payment/registration.php
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Cedcommerce_Payment', __DIR__ );
2. Create app/code/Cedcommerce/Payment/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Cedcommerce_Payment" setup_version="1.0.0" schema_version="1.0.0"></module>
</config>
After that you need to run the following commands to register your module:
For Linux users-
/opt/lampp/bin/php bin/magento setup:upgrade
For Windows Users-
php bin/magento setup:upgrade
3. Create app/code/Cedcommerce/Payment/etc/adminhtml/system.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
<system>
<section id="payment">
<group id="money" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Payment Cedcommerce
</label>
<field id="active" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="title" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Title</label>
</field>
<field id="order_status" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="0">
<label>New Order Status</label>
<source_model>Cedcommerce\Payment\Model\Config\Source\Order\Status\Pendingpayment</source_model>
</field>
<field id="allowspecific" translate="label" type="allowspecific" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Payment from Applicable Countries</label>
<source_model>Magento\Payment\Model\Config\Source\Allspecificcountries</source_model>
</field>
<field id="specificcountry" translate="label" type="multiselect" sortOrder="41" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Payment from Specific Countries</label>
<source_model>Magento\Directory\Model\Config\Source\Country</source_model>
<can_be_empty>1</can_be_empty>
</field>
<field id="instructions" translate="label" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Instructions</label>
</field>
<field id="sort_order" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Sort Order</label>
<frontend_class>validate-number</frontend_class>
</field>
</group>
</section>
</system>
</config>
After creating system.xml you can see this section by going to admin>stores>configurations>sales>Payment methods.
4. Create app/code/Cedcommerce/Payment/etc/config.xml, it provides default values for your admin configurations.
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">
<default>
<payment>
<money>
<active>1</active>
<title>Money</title>
<order_status>pending_payment</order_status>
<instructions>Instruction.</instructions>
<payment_action>true</payment_action>
<model>Cedcommerce\Payment\Model\Money</model>
<group>offline</group>
</money>
</payment>
</default>
</config>
5. Create app/code/Cedcommerce/Payment/etc/payment.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<payment xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="../../../Magento/Payment/etc/payment.xsd">
<groups>
<group id="offline">
<label>Offline Payment Methods</label>
</group>
</groups>
<methods>
<method name="money">
<allow_multiple_address>1</allow_multiple_address>
</method>
</methods>
</payment>
6. Create app/code/Cedcommerce/Payment/Model/Config/Source/Order/Status/Pendingpayment.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Cedcommerce\Payment\Model\Config\Source\Order\Status;
use Magento\Sales\Model\Order;
use Magento\Sales\Model\Config\Source\Order\Status;
/**
* Order Status source model
*/
class Pendingpayment extends Status
{
/**
* @var string[]
*/
protected $_stateStatuses = [Order::STATE_PENDING_PAYMENT];
}
7. Create app/code/Cedcommerce/Payment/Model/Money.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Cedcommerce\Payment\Model;
/**
* Pay In Store payment method model
*/
class Money extends \Magento\Payment\Model\Method\AbstractMethod
{
/**
* Payment code
*
* @var string
*/
protected $_code = 'money';
/**
* Availability option
*
* @var bool
*/
protected $_isOffline = true;
}
8. Create app/code/Cedcommerce/Payment/view/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/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">
<!-- merge payment method renders here -->
<item name="children" xsi:type="array">
<item name="payment-payments" xsi:type="array">
<item name="component" xsi:type="string">Cedcommerce_Payment/js/view/payment/money</item>
<item name="methods" xsi:type="array">
<item name="money" 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>
9. Create app/code/Cedcommerce/Payment/view/frontend/web/js/view/payment/method-renderer/money-method.js
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
/*browser:true*/
/*global define*/
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Cedcommerce_Payment/payment/money'
},
/** Returns send check to info */
getMailingAddress: function() {
return window.checkoutConfig.payment.checkmo.mailingAddress;
},
});
}
);
10. Create app/code/Cedcommerce/Payment/view/frontend/web/js/view/payment/money.js
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
/*browser:true*/
/*global define*/
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'money',
component: 'Cedcommerce_Payment/js/view/payment/method-renderer/money-method'
}
);
/** Add view logic here if needed */
return Component.extend({});
}
);
11. Create app/code/Cedcommerce/Payment/view/frontend/web/template/payment/money.html
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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>
Your Payment Method is ready now. You can place an order and check that your payment method is applicable or not.
When you will order any product you will see this payment method (frontend name: Money) on checkout page.
This brings us to the end of this blog. Please feel free to share your comments with us.
Very nice tutorial . Step by step explanation is great. looking forward for more posts.
This payment module is very much helpful to me.Great work ,It’s working.
Hello…..:)
Nice and very easy to understand this article for custom Payment method,
I follow your article and create a payment method in magento 2 and it work without error.
This module provides the meaningful extension to our marketplace basic. Actually I wanted such type of product which will help to add custom method for payment and surely this is what I was wondering.
Very Helpful Blog….Everything explained in a much simple way..thanks.
hello
Thanks for creating such a nice tutorial. All things are explained briefly which is easy to understand.
hello
(Object DOMDocument should be created) Error is came at checkout page and in backend also grid is not created
hello
(Object DOMDocument should be created) Error is came at checkout page and in backend also grid is not created.kindly provide any idea for it
hello
(Object DOMDocument should be created) Error is came at checkout page and in backend also grid is not created.kindly give idea for it.
Well ,,many thanks ,,, can you explore it more to handle API request using iframe,? like send order id and amount(along with some other necessary details) on some PCI(gateway) URL and get transaction response to update order status ?
Thanks for appreciation. We would consider your request and make sure in the next update include your points.
Very nice article I followed the steps and the comilation was successful without error. But I am not able to see the module on checkout page. What should I do for that. Do we need to install this module via composer, if yes then how. Please help me in this I am new to Magento.
Thanks for the appreciation. Yes you install it through composer also .But I would prefer just create all the files and run upgrade command i.e
php bin/magento setup:upgrade
and your module will be installed.
Hey Thanks for your prompt response. I already run ‘php bin/magento setup:upgrade’ and I can see my module in Stores/Configuration/Advance/Advance. I enabled the module. I can see the backend part but I am not able to see this module on checkout page.
I tried so many examples for offline payment module but I am getting same issue. And when I searched for module install from composer I get so many links which making me confuse. Could you please explain in simple steps.
I will really appreciate your help.
Namita
Hi Namita , We need to check the issue. You could raise a ticket at our Support ( http://support.cedcommerce.com) and give us the details and we would provide the necessary solution . Thanks
Hi, Thank you so much for your response. I think I can’t raise the ticket for this as it was asking FTP host details and site address.
I am plug-in developer my companys requirement is to convert Magento1.9 Payment module to Magento 2 (redirect method/Hosted payment Page). As I am new to magento, I was trying simple examples for Magento2. But I am not able to see Payment Method on chekout page.
I installed Magento2 from https://www.magentocommerce.com/download and I am trying to put my code in app/code folder. Backend is fine and there is no compilation error but I am not able to see my module on frontend. I am trying to install my module through composer but no luck I am getting different error messages. Please can someone help me in this. Can someone please post simple or clear steps to do it.
Thanks
Hi Namita,
As you said in your earlier in your previous replies that none of offline payment methods are working so there is some issue.
So for that purpose we need to debug the code to make it work.
But if you are not providing us related details then it will extremely diffcult for us to check the issue.
Thanks
Hey Thanks for coming back, I really appreciate this.
Detail about my issue.
I copied above Cedcommerce code and dropped it in app/code folder. Now according to this tutorial I should be able to see this on checkout page, but I am not able to see it. I installed Magento CE.
What I am doing wrong or what additional steps I need to follow.
I am sorry for posting same question again but I am reaching nowhere I tried everything I tried to install module from composer as well, but still the same issue.
Could you please explain this and help me, what steps I need to take.
Thanks,
hi, i try to redirect to my payment api just like paypal do. how can i do that?. thanks.
Helllo @cedcommerce:disqus ,
Thanks for nice article.
But,I want to add custom fields like purchase order number. Can you please let me know how to add that and save in the order?
Thanks
Where I put the code of my getway payment API (for exmaple, the code that goes to Tranzila gateway) ?
Leave a Reply