I have a payment module for Magento 2 and I would need to add a new field to checkout fiels. To my understanding I can add the field to checkout_index_index.xml layout file, but I just can't get it right.
My layout file is currently
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/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">
<!-- merge payment method renders here -->
<item name="children" xsi:type="array">
<item name="lindorff-payments" xsi:type="array">
<item name="component" xsi:type="string">Company_Mypayment/js/view/payment/mypaymentpayment</item>
<item name="methods" xsi:type="array">
<item name="mypaymentpayment" 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>
I wish to keep all existing default payment address fields and add a new text field, but how?
asked Aug 9, 2016 at 8:24
Tero Lahtinen
5712 gold badges9 silver badges22 bronze badges
1 Answer 1
You need to create js component for that
#Company/Mypayment/view/frontend/web/js/view/payment/mypaymentpayment.js
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'mypaymentpayment',
component: 'Company_Mypayment/js/view/payment/method-renderer/mypaymentpayment'
}
);
/** Add view logic here if needed */
return Component.extend({});
}
);
Create Company/Mypayment/view/frontend/web/js/view/payment/method-renderer/mypaymentpayment.js
define(
[
'Magento_Payment/js/view/payment/cc-form',
'jquery',
'Magento_Payment/js/model/credit-card-validation/validator'
],
function (Component, $) {
'use strict';
return Component.extend({
defaults: {
template: 'Company_Mypayment/payment/form',
transactionResult: ''
},
/**
* @returns {String}
*/
getCode: function () {
return 'mypaymentpayment';
},
/**
* @returns {Boolean}
*/
isActive: function () {
return true;
},
validate: function() {
var $form = $('#' + this.getCode() + '-form');
return $form.validation() && $form.validation('isValid');
}
});
}
);
Now create a template for it [Company/Mypayment/view/frontend/web/template/payment/form.html]
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
<label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="payment-method-billing-address">
<!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<form class="form" data-bind="attr: {'id': getCode() + '-form'}">
<!-- ko template: 'Magento_Payment/payment/cc-form' --><!-- /ko -->
</form>
<div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="actions-toolbar">
<div class="primary">
<button class="action primary checkout"
type="submit"
data-bind="
click: placeOrder,
attr: {title: $t('Place Order')},
css: {disabled: !isPlaceOrderActionAllowed()},
enable: (getCode() == isChecked())
"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
</div>
</div>
</div>
</div>
answered Aug 9, 2016 at 9:09
Sohel Rana
36.2k3 gold badges74 silver badges94 bronze badges
-
I fail to see where you added the custom text input field?Tero Lahtinen– Tero Lahtinen2016年08月09日 13:36:43 +00:00Commented Aug 9, 2016 at 13:36
-
You can add additional input field inside form tagSohel Rana– Sohel Rana2016年08月09日 14:32:21 +00:00Commented Aug 9, 2016 at 14:32
-
@SohelRana i follow this but couldn't succeeded to post the data my data is not posting in
additional_dataQaisar Satti– Qaisar Satti2017年05月10日 07:44:26 +00:00Commented May 10, 2017 at 7:44 -
where I can print my text value and do my logix business before place order ?Jsparo30– Jsparo302017年08月09日 10:07:34 +00:00Commented Aug 9, 2017 at 10:07
default