Magento2: How to add block in my payment module

Question

I am try to create one custom payment module.

i want to show some options in drop down list during my payment selection.

and also i want to validate that drop down box before placing the order.

how to achieve this and how to add a custom block to my payment option.

Thanks in advance

Here is my stuff

<item name="testpayment" xsi:type="array">
<item name="component" xsi:type="string">vendor_payment/js/view/payment/testpayment</item>
<item name="methods" xsi:type="array">
<item name="testpayment" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>`

Component file is
`define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'testpayment',
                component: 'vendor_payment/js/view/payment/method-renderer/payment-method'
            }
        );
        return Component.extend({});
    }
);

method render js file is

define(
    [
        'jquery',
        'Magento_Checkout/js/view/payment/default',
        'Magento_Checkout/js/model/full-screen-loader',
        'mage/url'
    ],
    function ($,Component,fullScreenLoader,url) {
        'use strict';
        return Component.extend({
            redirectAfterPlaceOrder: false,
            defaults: {
                template: 'vendor_payment/payment/templatename'
            },            
            getMailingAddress: function() {
                return window.checkoutConfig.payment.checkmo.mailingAddress;
            },
            isActive: function() {
                return true;
            },          
        });
    }
);

My template file is,

<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="control">
            <div class="fields group group-2">
               <label>Please choose your deposit percentage:</label>
                    <div class="control">
                        <select name="custom_field"></select>
                    </div>
            </div>
        </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="text: $t('Place order')"></span>
                </button>
            </div>
        </div>
    </div>
</div>

Now how to add dynamic values in "custom_field" select box. or its any possible to include .phtml file directly to that place?

Answer 1

For example, I have inserted customer data here and I validating if customer data is available Place Order button will appear in payment block and the message should be displayed otherwise it will not appear.

The same way you can do your stuff.

isDisplayed is the custom method in .js file and <!-- ko if: isDisplayed() --> and <!-- /ko --> is the function to validate in .html file.

method render js file is

define(
        [
            'jquery',
            'Magento_Checkout/js/view/payment/default',
            'Magento_Checkout/js/model/full-screen-loader',
            'Magento_Customer/js/customer-data',
            'mage/url'
        ],
        function ($,Component,fullScreenLoader, customer, url) {
            'use strict';

             var isLoggedIn = ko.observable(window.isCustomerLoggedIn),
                customerData = {};

            if (isLoggedIn()) {
                customerData = window.customerData;
            } else {
                customerData = {};
            }

            return Component.extend({
                redirectAfterPlaceOrder: false,
                customerData: customerData,
                defaults: {
                    template: 'vendor_payment/payment/templatename'
                },            
                getMailingAddress: function() {
                    return window.checkoutConfig.payment.checkmo.mailingAddress;
                },
                isActive: function() {
                    return true;
                },
                isDisplayed:function () {
                    console.log(customerData.firstname);
                    if(customerData != null){
                        $('#custom_message').text('Custom Message');
                        return true;
                    }else{
                        return false;
                    }
                }           
            });
        }
    );

template file is,

<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="control">
            <div class="fields group group-2">
             <p id="custom_message" style="font-weight: bold;"></p>
               <label>Please choose your deposit percentage:</label>
                    <div class="control">
                        <select name="custom_field"></select>
                    </div>
            </div>
        </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">
                <!-- ko if: isDisplayed() -->
                    <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>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

for more info see this thread. feel free to ask if any queries.