Gsyfuy

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?

I am also looking for solution on this . I am going to integrate new payment method in magento checkout ...
Kindly suggest how can i bind any request call on

on clicking on Next button ...