Skip to main content

Magento 2 - Implementing payment gateway


In magento 2, there is a small change in the implementation of the payment gateway. There is some addition in the frontend code as the checkout is now coming by the component ui. You can find the sample code in the git repo.

Add the files as per the blog post. Add the dependency modules sales and payment in the etc/module.xml file. Next we have to add the code in etc/adminhtml/system.xml file. We need to add this file as per the new xml schema as given in the blog post.
<section id="payment">
    <group id="vendorname_samplemodule" translate="label" type="text" sortOrder="1000" showInDefault="1" showInWebsite="1" showInStore="1">
        <label>Sample Payment Gateway</label>
        <field id="active" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Enabled</label>
            <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
        </field>
        <field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Title</label>
        </field>
        <field id="payment_action" translate="label" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Payment Action</label>
            <source_model>VendorName\SampleModule\Model\Source\PaymentAction</source_model>
        </field>
        <field id="order_status" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>New order status</label>
            <source_model>Magento\Sales\Model\Config\Source\Order\Status\Processing</source_model>
        </field>
        <field id="debug" translate="label" type="select" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Debug</label>
            <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
        </field>
        <field id="useccv" translate="label" type="select" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Credit Card Verification</label>
            <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
        </field>
        <field id="cctypes" translate="label" type="multiselect" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Credit Card Types</label>
            <source_model>VendorName\SampleModule\Model\Source\Cctype</source_model>
        </field>
        <field id="allowspecific" translate="label" type="allowspecific" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
            <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="120" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Payment from Specific Countries</label>
            <source_model>Magento\Directory\Model\Config\Source\Country</source_model>
        </field>
    </group>
</section>


Add the default values for the payment gateway in etc/config.xml.
<payment>
    <vendorname_samplemodule>
        <active>0</active>
        <cctypes>AE,VI,MC,DI</cctypes>
        <debug>0</debug>
        <order_status>processing</order_status>
        <model>VendorName\SampleModule\Model\Payment</model>
        <payment_action>authorize_capture</payment_action>
        <title>Credit Card (Sample)</title>
        <allowspecific>0</allowspecific>
    </vendorname_samplemodule>
</payment>

Add the code to VendorName\SampleModule\Block\Info\Cc, VendorName\SampleModule\Model\Source\Cctype, VendorName\SampleModule\Model\Source\PaymentAction, VendorName\SampleModule\Model\Payment as per the git repo.
Now the payment gateway will be visible in the admin order create page. But, in checkout payment page, it wont show up. The below steps are for showing the payment method in frontend.

Add view/frontend/layout/checkout_index_index.xml as given below.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="vendorname_samplemodule-payments" xsi:type="array">
                                                                    <item name="component" xsi:type="string">VendorName_SampleModule/js/view/payment/method</item>
                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="vendorname_samplemodule" 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>

This references the payment method javascript file and html files. Please add the files as per the git repo. view/frontend/web/js/view/payment/method.js, view/frontend/web/js/view/payment/method-renderer/method.js and view/frontend/web/template/payment/method.html

Also, we have to add the etc/frontend/di.xml to provide the payment configuration to the ui components.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <virtualType name="VendorName\SampleModule\Model\ConfigProvider" type="Magento\Payment\Model\CcGenericConfigProvider">
        <arguments>
            <argument name="methodCodes" xsi:type="array">
                <item name="vendorname_samplemodule" xsi:type="const">VendorName\SampleModule\Model\Payment::CODE</item>
            </argument>
        </arguments>
    </virtualType>

    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="vendorname_samplemodule_config_provider" xsi:type="object">VendorName\SampleModule\Model\ConfigProvider</item>
            </argument>
        </arguments>
    </type>

</config>



Comments

Popular posts from this blog

Magento 2 - Create Attributes in Setup

Sometimes in our module we require to create product or category attributes automatically on module install. Also, we might require to add extra fields to quote, sales order, invoice, creditmemo tables. We will go through how to do that in magento 2. You can find the sample code in the git repo .