Magento 2.4 – Add Additional Info Based on Country Selection in One Page Checkout

Well, I have managed to sort it out. It was quite simple than I was expecting.

To add a custom field in IWD checkout page, go to app\design\frontend\base\default\template\opc then add your custom field in any phtml.

For e.g. I have included a select box on checkout page.

Then to capture this value

1) Create an observer for the event checkout_onepage_controller_success_action

2) Hook another event with same observer for checkout_controller_onepage_save_shipping_method

The reason for creating checkout_controller_onepage_save_shipping_method is on the extension's checkout page there is no event like save_order_place_before so when ever you load checkout page, set shipping,payment or even click place order, you can debug using FireBug that the checkout_controller_onepage_save_shipping_method event is fired before order placement.

So what I did is, in the observer method for the above event I captured the posted data.

e.g. $data = Mage::App()->getRequest()->getPost('yourCustomFieldName');

Then save $data into customer/session.

No come to the observer class method for the event checkout_onepage_controller_success_action. This is the event when your order has been placed. Now you can add any stuff into order table or anywhere you want.

You have your submitted data from front end. Just write your custom query in the observer to enter into DB. Similarly you can write queries to read from database also.

Hope this will be helpful for some of you. Although I am a beginner may be didn't explain properly.

Thank you.

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>