Effective Method to Create Payment Method in Magento 2

Magento 2 Create Payment Method proves that store admin like you has rights to generate as many payment methods as you need when your store is based on Magento 2 platform, a great era of ecommerce architecture. Depending on the customer’s requirements, you probably add them to your list of the existing payment method. The additional payment methods surely bring the diversity of customer choice when they proceed to checkout on your site, which can enhance their experience and reduce the abandoned cart rates. On the other hand, offering multiple payment method is the great strategy to reach out to the global marketplace.

Abandoned Cart Email Extension

Abandoned Cart Email for Magento 2

Solutions to abandoned carts issue, helping online businesses boost sales and enhance conversion rates (Hyva ready)

(41 reviews)
Check it out!

In the tutorial, you will learn how to create your own Payment Gateway integration in Magento 2 stores. After launching the new payment methods, you will find and configure it according to the path Admin panel > Stores > Settings > Configuration > Sales > Payment Methods. There, admin possibly assigns a payment method to a specific shipping method, which means they will work in pairs when enabling. It allows better security, better experience and may reduce related fees for you and your customers.

Necessary factors that a payment gateway needs

Here are some key points on how a payment gateway should be to secure E-commerce business:

  • Security: 100% secure to protect sensitive customer data during transactions.

  • Compatibility: Compatible with your store platform, whether it’s the online store or the Brick-and-Mortar store.

  • Speedy Process: Offer a speedy payment process, minimizing waiting time for customers.

  • Fraud Detection: Implement strong fraud detection mechanisms to prevent unauthorized transactions.

  • Invoicing Capabilities: Support invoicing capabilities for seamless billing.

  • Impressive UI: Provide an impressive user interface (UI) to enhance the overall customer experience.

  • Cost-Effective: Offer feasible costs for merchants, considering transaction fees and other charges.

  • International Support: Ensure it provides support for international payments and accepts various currencies.

  • Support Policy: Clear documentation and responsive customer support are essential.

  • Card Types: Support various card types (credit, debit, etc.).

  • Recurring Payments: Handle recurring payments efficiently.

  • Hosted/Non-Hosted: Decide whether you want a hosted (redirects to the gateway’s site) or a non-hosted (integrated on your site) solution.

When you operate a Magento store, you should identify the essential features your payment gateway needs to meet your business needs. While a perfect payment gateway doesn’t exist, you can create your own payment method within Magento 2.

Create payment method module

The sample module available here.

After install the sample payment method module, you can see the configuration in Admin panel > Stores > Settings > Configuration > Sales > Payment Methods

sample payment method

In checkout step, you can choose new payment method (gateway): SampleGateway

magento 2 sample payment method in checkout

Download Sample module


You may also be interested in Magento 2 Create Shipping Methods to customize the shipping methods as expected.

Step 1: Create payment method module

  1. Create file registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Mageplaza_Payment',
    __DIR__
);
  1. Declare module.xml file
<?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="Mageplaza_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>

This module have to run after the Magento_Sales, Magento_Payment, Magento_Checkout, Magento_Directory, and Magento_Config. So we add depends (sequence) them like above block of code.

Step 2: Declare payment method module

  1. Now we create file payment.xml file in etc folder 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>
  1. Create config.xml file in etc folder.
<?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>Mageplaza\Payment\Model\Payment\Simple</model>
                <order_status>pending</order_status>
                <title>Simple</title>
                <allowspecific>0</allowspecific>
                <group>Offline</group>
            </simple>
        </payment>
    </default>
</config>

In this file, we declare Model of this payment method, we calle Simple model.

  1. Create Simple model file

Create file Model/Payment/Simple.php

<?php
namespace Mageplaza\Payment\Model\Payment;
class Simple extends \Magento\Payment\Model\Method\Cc
{
    protected $_isGateway = true;
    protected $_canCapture = true;
    protected $_canCapturePartial = true;
    protected $_canRefund = true;
    protected $_canRefundInvoicePartial = true;
    protected $_stripeApi = false;
    protected $_countryFactory;
    protected $_minAmount = null;
    protected $_maxAmount = null;
    protected $_supportedCurrencyCodes = array('USD');
    protected $_debugReplacePrivateDataKeys
        = ['number', 'exp_month', 'exp_year', 'cvc'];
    public function __construct(\Magento\Framework\Model\Context $context,
        \Magento\Framework\Registry $registry,
        \Magento\Framework\Api\ExtensionAttributesFactory $extensionFactory,
        \Magento\Framework\Api\AttributeValueFactory $customAttributeFactory,
        \Magento\Payment\Helper\Data $paymentData,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Payment\Model\Method\Logger $logger,
        \Magento\Framework\Module\ModuleListInterface $moduleList,
        \Magento\Framework\Stdlib\DateTime\TimezoneInterface $localeDate,
        \Magento\Directory\Model\CountryFactory $countryFactory,
        array $data = array()
    ) {
        parent::__construct(
            $context, $registry, $extensionFactory, $customAttributeFactory,
            $paymentData, $scopeConfig, $logger, $moduleList, $localeDate, null,
            null, $data
        );
        $this->_countryFactory = $countryFactory;
        $this->_minAmount = $this->getConfigData('min_order_total');
        $this->_maxAmount = $this->getConfigData('max_order_total');
    }
    /**
     * Authorize payment abstract method
     *
     * @param \Magento\Framework\DataObject|InfoInterface $payment
     * @param float $amount
     * @return $this
     * @throws \Magento\Framework\Exception\LocalizedException
     * @api
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function authorize(\Magento\Payment\Model\InfoInterface $payment, $amount)
    {
        if (!$this->canAuthorize()) {
            throw new \Magento\Framework\Exception\LocalizedException(__('The authorize action is not available.'));
        }
        return $this;
    }
    /**
     * Capture payment abstract method
     *
     * @param \Magento\Framework\DataObject|InfoInterface $payment
     * @param float $amount
     * @return $this
     * @throws \Magento\Framework\Exception\LocalizedException
     * @api
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function capture(\Magento\Payment\Model\InfoInterface $payment, $amount)
    {
        if (!$this->canCapture()) {
            throw new \Magento\Framework\Exception\LocalizedException(__('The capture action is not available.'));
        }
        return $this;
    }
    /**
     * Refund specified amount for payment
     *
     * @param \Magento\Framework\DataObject|InfoInterface $payment
     * @param float $amount
     * @return $this
     * @throws \Magento\Framework\Exception\LocalizedException
     * @api
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    public function refund(\Magento\Payment\Model\InfoInterface $payment, $amount)
    {
        if (!$this->canRefund()) {
            throw new \Magento\Framework\Exception\LocalizedException(__('The refund action is not available.'));
        }
        return $this;
    }
}

This model includes basic functions such as

  • authorize(): Authorize the payment e.g: card
  • capture(): Capture money from a customer
  • refund(): Chargeback money to the customer.

Step 3: Display payment method in checkout page

In previous steps, we talked about declaring modules, config and model files. Now we need to display this Simple payment method in checkout page.

  1. Create layout file: 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">Magento_OfflinePayments/js/view/payment/offline-payments</item>
                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="simple" 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>
  1. Create js files to load KO template in checkout page
define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (Component,
              rendererList) {
        'use strict';
        rendererList.push(
            {
                type: 'simple',
                component: 'Mageplaza_Payment/js/view/payment/method-renderer/simple-method'
            }
        );
        return Component.extend({});
    }
);

In this file, it call another component: js/view/payment/method-renderer/simple-method

Now we need to create /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: 'Mageplaza_Payment/payment/simple'
            },
            getMailingAddress: function () {
                return window.checkoutConfig.payment.checkmo.mailingAddress;
            },
        });
    }
);
  1. Finally, create KO template file /view/frontend/web/template/payment/simple.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>

When you follow these steps above, the extension will configure backend settings to activate the payment method and set a title for it.

Sample Payment method module

Download Sample module

The bottom line

Creating payment methods is an essential step for online businesses to make, as multiple payment options can increase conversion rates and create extra sales, not to mention global reach. That is why you should take this into account now for better business operations. And it is not as difficult as you may think it is, right?

Happy coding and enjoy your extra sales!

Any questions? Feel free to leave a comment.

Explore Mageplaza Payment Suite for better payment method control

Related Post

Image Description
Vinh Jacker
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Previous How to Create Shipping Method in Magento 2
Next Magento 2 Create Widget
One Step Checkout for Magento 2 by Mageplaza

People also searched for

  • magento 2 create payment method
  • magento 2 custom payment method
  • magento 2 create custom payment method
  • create payment method magento 2
  • magento 2 create new payment method
  • create custom payment method in magento 2
  • custom payment method in magento 2
  • magento 2 add payment method
  • create payment method in magento 2
  • custom payment method magento 2
  • payment method magento 2
  • magento 2 add new payment method
  • add payment method magento 2
  • magento custom payment method
  • magento 2 payment method
  • magento 2 create online payment method
  • magento 2 custom credit card payment method
  • magento 2 add custom payment method
  • magento 2 payment methods
  • magento 2 new payment method
  • magento custom payment gateway
  • magento 2 payment module
  • magento 2 custom payment gateway
  • payment method in magento 2
  • magento payment methods
  • magento 2 admin payment method
  • magento 2 payment gateway tutorial
  • magento 2 create offline payment method
  • magento 2 set payment method programmatically
  • 2.3.x, 2.4.x
x