The question:
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.
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="MagentoPaymentModelMethodAdapter">
<arguments>
<argument name="code" xsi:type="const">OmniCapitalFinanceModelPaymentOmniFinance::METHOD_CODE</argument>
<argument name="formBlockType" xsi:type="string">OmniCapitalFinanceBlockForm</argument>
<argument name="infoBlockType" xsi:type="string">OmniCapitalFinanceBlockInfo</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="MagentoCheckoutModelCompositeConfigProvider">
<arguments>
<argument name="omni_finance" xsi:type="array">
<item name="omni_finance" xsi:type="object">OmniCapitalFinanceModelCustomConfigProvider</item>
</argument>
</arguments>
</type>
<!-- Configuration reader -->
<virtualType name="OmniFinanceConfig" type="MagentoPaymentGatewayConfigConfig">
<arguments>
<argument name="omni_finance" xsi:type="const">OmniCapitalFinanceModelCustomConfigProvider::METHOD_CODE</argument>
</arguments>
</virtualType>
</config>
And here is Config Provider Class.
namespace OmniCapitalFinanceModel;
use MagentoCheckoutModelConfigProviderInterface;
use MagentoFrameworkEscaper;
use MagentoPaymentHelperData 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;
}
}
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 1
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 NamespaceModulenameModel;
use MagentoCheckoutModelConfigProviderInterface;
/**
* 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' => [
NamespaceModulenameModelPayment::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="MagentoPaymentModelCcGenericConfigProvider">
<arguments>
<argument name="methodCodes" xsi:type="array">
<item name="test_payment" xsi:type="const">NamespaceModulenameModelPayment::CODE</item>
</argument>
</arguments>
</type>
<type name="MagentoCheckoutModelCompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="test_payment_config_provider" xsi:type="object">NamespaceModulenameModelSampleConfigProvider</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 :
NamespaceModulenameviewfrontendwebtemplatepayment
<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
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0