Magento – How to use the vault in custom payment module.

I found that I should customize the CE to implement PCI compliant. And we cannot use the CC payment in CE version by default.

There are many options to handle the CC processing, depend on the service provider. For example some banking provided virtual terminal for online credit card processing

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.