Magento – Payment method with custom form in Knockout js

I've created a custom payment method successfully in Magento2. When this custom payment method selected, I need a form to display a text field and submit button that will hit some AJAX Api's using in controller and then show a pop-up based on result API response.

Here is my knockout js file:

RLTS/Custompayment/view/frontend/web/js/view/payment/method-renderer/mycustompayment.js

define(
    [
        'Magento_Checkout/js/view/payment/default',
        'Magento_Ui/js/form/form'
    ],
    function (Component) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'RLTS_Custompayment/payment/mycustompayment'
            },
            initialize: function () {
                this._super();
                return this;
            },
            onSubmit : function () {            
                var formData = this.source.get(this.getCode() + '-form' );
                var formField = this.source.get('customformfield');
                console.log(formData);
                console.log(formField);
            }
        });
    }
);

And I added my form in ko template as follow:

<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>
        <div class="payment-method-form-wrapper">
            <form id="custom-checkout-form" class="form" data-bind="attr: {'id': getCode() + '-form' , 'data-hasrequired': $t('* Required Fields')}">
                <input type="text" class="input-text" name="customformfield" placeholder="Custom Form Field" />
                 <button type="reset">
                    <span data-bind="i18n: 'Reset'"></span>
                </button>
                <button type="button" data-bind="click: onSubmit" class="action">
                    <span data-bind="i18n: 'Submit'"></span>
                </button>
            </form>
        </div>
        <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="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>
    </div>
</div>

Without using form, my payment method is working perfectly fine. How to add custom form and process Ajax calls for it before placing order?