Here we will learn, How to add custom form on checkout page in Magento 2
1. Create a layout file: Webkul\CustomForm\view\frontend\layout\checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="afterMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="creditamount" xsi:type="array">
<item name="component" xsi:type="string">Webkul_CustomForm/js/view/payment/customform</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Now, need to create Js file Webkul\CustomForm\view\frontend\web\js\view\payment\customform.js
define(
[
'jquery',
'ko',
'uiComponent',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/totals',
'Magento_Checkout/js/model/cart/totals-processor/default',
'Magento_Catalog/js/price-utils',
],
function (
$,
ko,
Component,
quote,
totals,
defaultTotal,
priceUtils
) {
'use strict';
return Component.extend({
defaults: {
template: 'Webkul_CustomForm/checkout/customform' //template file location
},
initialize: function () {
this.isApplied = ko.observableArray(false);
this._super();
},
/**
* apply action
*/
apply: function(value) {
if (this.validate()) {
/* Apply Button action */
}
},
/**
* Cancel action
*/
cancel: function() {
/* Cancel Button action */
},
/**
* form validation
*
* @returns {boolean}
*/
validate: function() {
var form = '#my-form';
return $(form).validation() && $(form).validation('isValid');
},
});
}
);
3. Now lets create template file: Webkul/CustomForm/view/frontend/web/template/checkout/customform.html
<div class="payment-option _collapsible opc-payment-additional discount-code"
data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">
<div class="payment-option-title field choice" data-role="title">
<span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">
<!-- ko i18n: 'Custom Form'--><!-- /ko -->
</span>
</div>
<div class="payment-option-content" data-role="content">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<form class="form form-discount" id="my-form">
<div class="payment-option-inner">
<div class="field">
<div class="control">
<input class="input-text"
type="text"
id="my_input"
name="my_input"
data-bind="attr:{placeholder: $t('Enter Account Number')}"
data-validate="{required:true,'validate-number-range':true,'validate-number':true}"
/>
</div>
</div>
</div>
<div class="actions-toolbar">
<div class="primary">
<!-- ko ifnot: isApplied() -->
<button class="action action-apply" type="submit" data-bind="'value': $t('Apply'), click: apply">
<span><!-- ko i18n: 'Apply Discount'--><!-- /ko --></span>
</button>
<!-- /ko -->
</div>
<div class="primary">
<!-- ko if: isApplied() -->
<button class="action action-cancel" type="submit" data-bind="'value': $t('Cancel'), click: cancel">
<span><!-- ko i18n: 'Cancel'--><!-- /ko --></span>
</button>
<!-- /ko -->
</div>
</div>
</form>
</div>
</div>
4. Now run : php bin/magento setup:static-content:deploy
That’s it.
knockout.js:3012 Uncaught ReferenceError: Unable to process binding “if: function (){return isApplied() }”
Message: isApplied is not defined