Now a day’s payment method becomes common to use online payment gateway such as PayPal or Braintree. Here are some examples which help you to create a new offline payment method in magento 2
The following examples are:
- Create xml file in
app/code/local/[name_space]/[your_module]/etc/adminhtmlCreate xml file in app/code/local/[name_space]/[your_module]/etc
- Create xml file in app/code/local/[name_space]/[your_module]/etc
- Create php file in app/code/local/[name_space]/[your_module]/etc
- Create php file in
- Create layout:create file checkout_index_index_xml file in app/code/local/[name_space]/[your_module]/view/ frontend/layout
- Create js file in app/code/local/[name_space]/[your_module]/view/web/js/frontend/payment
- Creat new payment-method.js file in app/code/local/[name_space]/[your_module]/view/web/js/frontend/payment/method-renderrer
- Create template in new payment.html file in
app/code/local/[name_space]/[your_module]/view/web/frontend/paymet
Step 1:
To Create system.xml file in
app/code/local/[name_space]/[your_module]/etc/adminhtml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd"> <system> <section id="payment"> <group id="newpayment" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Newpayment</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>[name_space]\[your_module]\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>
Step 2:
To Create config.xml file in
app/code/local/[name_space]/[your_module]/etc
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd"> <default> <payment> <newpayment> <active>1</active> <title>Newpayment</title> <order_status>pending_payment</order_status> <instructions>Instruction.</instructions> <payment_action>true</payment_action> <model>[name_space]\[your_module]\Model\Newpayment</model> <group>offline</group> </newpayment> </payment> </default> </config>
Step 3:
To Create payment.xml file in
app/code/local/[name_space]/[your_module]/etc
<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="newpayment"> <allow_multiple_address>1</allow_multiple_address> </method> </methods> </payment>
Step 4:
To Create newpayment.php file in app/code/local/[name_space]/[your_module]/etc
<?php
namespace [name_space]\[your_module]\Model;
/**
* Pay In Store payment method model
*/
class Newpayment extends \Magento\Payment\Model\Method\AbstractMethod
{
/**
* Payment code
*
* @var string
*/
protected $_code = 'newpayment';
/**
* Availability option
*
* @var bool
*/
protected $_isOffline = true;
}Step 5:
To create pendingpayment.php file in
<?php
namespace [name_space]\[your_module]\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];
}Step 6:
To Create layout: create file checkout_index_index_xml file in
app/code/local/[name_space]/[your_module]/view/ frontend/layout
<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="newpayment-payments" xsi:type="array"> <item name="component" xsi:type="string">[name_space]_[your_module]/js/view/payment/newpayment</item> <item name="methods" xsi:type="array"> <item name="newpayment" 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> |
Step 7:
To Create newpayment.js file in app/code/loca
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'newpayment',
component: '[name_space]_[your_module]/js/view/payment/method-renderer/newpayment-method'
}
);
/** Add view logic here if needed */
return Component.extend({});
}
);l/[name_space]/[your_module]/view/web/js/frontend/payment
Step 8:
To Create new payment-method.js file in
app/code/local/[name_space]/[your_module]/view/web/js/frontend/payment/method-renderrer
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: '[name_space]_[your_module]/payment/newpayment'
},/** Returns send check to info */
getMailingAddress: function() {
return window.checkoutConfig.payment.checkmo.mailingAddress;
},
});
}
);Step 9:
To Create template in new payment.html file in
app/code/local/[name_space]/[your_module]/view/web/frontend/ payment
<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> |
I hope the above mentioned steps help you to create a new offline payment method in magento 2.
Leave a Reply