2

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?

0

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 enter image description here

on clicking on Next button ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.