4

I am working on a Payment Gateway integration in Magento 2. The payment method is working fine and its listed on checkout page.
I need to add a Custom Select Field on the Checkout process.

enter image description here

MODULE/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0" ?>
<page 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">OmniCapital_Finance/js/view/payment/omni_finance</item>
                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="omni_finance" 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>

MODULE/view/frontend/web/js/view/payment/omni_finance.js

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'omni_finance',
                component: 'OmniCapital_Finance/js/view/payment/method-renderer/omni_finance-method'
            }
        );
        return Component.extend({});
    }    
);

MODULE/view/frontend/web/js/view/payment/method-renderer/omni_finance-method.js

define(
    [
        'Magento_Checkout/js/view/payment/default'
    ],
    function (Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'OmniCapital_Finance/payment/omni_finance'
            },
            getMailingAddress: function () {
                return window.checkoutConfig.payment.checkmo.mailingAddress;
            },
        });
    }
);

di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <virtualType name="OmniFinanceFacade" type="Magento\Payment\Model\Method\Adapter">
        <arguments>
            <argument name="code" xsi:type="const">OmniCapital\Finance\Model\Payment\OmniFinance::METHOD_CODE</argument>
            <argument name="formBlockType" xsi:type="string">OmniCapital\Finance\Block\Form</argument>
            <argument name="infoBlockType" xsi:type="string">OmniCapital\Finance\Block\Info</argument>
            <argument name="valueHandlerPool" xsi:type="object">OmniCapitalValueHandlerPool</argument>
            <!-- argument name="validatorPool" xsi:type="object">OmniCapitalValidatorPool</argument -->
            <!-- argument name="commandPool" xsi:type="object">OmniCapitalCommandPool</argument -->
        </arguments>
    </virtualType>

    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="omni_finance" xsi:type="array">
                <item name="omni_finance" xsi:type="object">OmniCapital\Finance\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>

    <!-- Configuration reader -->
    <virtualType name="OmniFinanceConfig" type="Magento\Payment\Gateway\Config\Config">
        <arguments>
            <argument name="omni_finance" xsi:type="const">OmniCapital\Finance\Model\CustomConfigProvider::METHOD_CODE</argument>
        </arguments>
    </virtualType>

   </config>

And here is Config Provider Class.

namespace OmniCapital\Finance\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\Escaper;
use Magento\Payment\Helper\Data as PaymentHelper;

class CustomConfigProvider implements ConfigProviderInterface {

    const METHOD_CODE   = 'omni_finance';
    protected $method = [];
    protected $escaper;

    public function __construct(
        PaymentHelper $paymentHelper,
        Escaper $escaper
    ) {
        $this->escaper = $escaper;
        $this->method  = $paymentHelper->getMethodInstance('omni_finance');
    }

    public function getConfig() { 
        $config = [
            'payment' => [
                'omni_finance' => [
                    'storedCards' => $this->getStoredCards(),
                ]
            ]
        ];
        return $config;
    }

    public function getStoredCards(){
        $result = array();
        $result['0'] = "Test";
        $result['1'] = "Test1";
        return $result;
    }

}
5
+50

Please follow this blog so you can get idea how to pass data payment form. create configprovider.php and di.xml.

I have posted basic code which you can modified as per your requirement. create SampleConfigProvider.php under File

Namespace/Modulename/Model/SampleConfigProvider.php

<?php

   namespace Namespace\Modulename\Model;

   use Magento\Checkout\Model\ConfigProviderInterface;

   /**
     * Class SampleConfigProvider
    */
   class SampleConfigProvider implements ConfigProviderInterface
   {

    public function getStoredCards(){
      $result = array();
      $result['0'] = "Test";
      $result['1'] = "Test1";
      return $result;
    }

    public function getConfig()
    {

    $config = array_merge_recursive($config, [
        'payment' => [
            \Namespace\Modulename\Model\Payment::CODE => [
                'storedCards' => $this->getStoredCards(),
            ],
        ],
    ]);
    return $config;
   }
}

Then in my frontend/di.xml add a new CompositeConfigProvider

File Namespace/Modulename/etc/frontend/di.xml

<?xml version="1.0" encoding="UTF-8"?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Payment\Model\CcGenericConfigProvider">
    <arguments>
        <argument name="methodCodes" xsi:type="array">
            <item name="test_payment" xsi:type="const">Namespace\Modulename\Model\Payment::CODE</item>
        </argument>
    </arguments>
</type>
<type name="Magento\Checkout\Model\CompositeConfigProvider">
    <arguments>
        <argument name="configProviders" xsi:type="array">
            <item name="test_payment_config_provider" xsi:type="object">Namespace\Modulename\Model\SampleConfigProvider</item>
        </argument>
    </arguments>
</type>
</config>

add below method in omni_finance-method.js add method :

        getStoreCard: function() {
            return  window.checkoutConfig.payment.checkmo.storedCards;
        },

        getCardList: function() {
            return _.map(this.getStoreCard(), function(value, key) {
                return {
                    'value': key,
                    'type': value
                }
            });
        },

add in omni_finance.html file :

Namespace\Modulename\view\frontend\web\template\payment

<select name="payment[subscription_id]" class="select input-text required-entry" 
                                data-bind="
                                    attr: {id: getCode()+'_payment_profile_id'},
                                    options: getCardList(),
                                    optionsValue: 'value',
                                    optionsText: 'type',
                                    optionsCaption: $t('--Please Select--'),
                                    ">
                    </select> 

you can add what ever you like it will display under relevant payment method section. Please follow this blog for basic understanding.

Don't forgot add constant CODE in your payment.php

  • if its working don't forgot accept answer so it will useful to other also. – Yogesh Oct 26 '17 at 12:20
  • getStoreCard: function() { return window.checkoutConfig.payment.omni_finance.storedCards; },. Tried this but it throws following error. – JItendra Rana Oct 27 '17 at 7:43
  • TypeError: window.checkoutConfig.payment.omni_finance is undefined – JItendra Rana Oct 27 '17 at 7:45
  • you need to post your code – Yogesh Oct 27 '17 at 8:25
  • Updated the Question. Please check – JItendra Rana Oct 27 '17 at 9:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.