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

}
Improve this question

1 Answer 1

Reset to default
8
+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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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