Magento 2 – Add Custom Select Field in Checkout Process

checkoutcustom-fieldmagento2payment-gatewaypayment-methods

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;
    }

}

Best Answer

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

Related Topic