Magento 2 - Как добавить функции JavaScript в мою HTML-форму

Question

Я пытаюсь добавить для этого примера простую функцию javascript, которая выдает предупреждение о загрузке документа в мою форму в Magento 2.

Я добавил пользовательскую форму в свой вариант оплаты.

Я попытался добавить встроенный код формы HTML

define
    ([
        'Magento_Checkout/js/view/payment/default',
        'jquery',
        'jquery/ui',
    ],
    function (Component,$) {
        'use strict';

        $(document).on("click","#SendOTP", function() {
            alert("Test!");
        });

        return Component.extend({
            defaults: {
                template: 'Emipro_Custompayment/payment/custompayment'
            },
        });
    });

Пожалуйста, введите свой идентификационный номер и нажмите «Отправить OTP», чтобы продолжить процесс, это поможет нам подтвердить вашу личность и обеспечьте безопасность транзакции.

                <table>
                <tr nowrap>
                <td nowrap>
                <label >ID Number : <span class="required"></span></label>

                </td>
                <td>
                <input id="idNumber" name="idNumber" type="text" class="form-control" AutoPostBack="True">

                </td>
                <td>
                <button id="SendOTP" type="button" class="btn btn-secondary" data-bind="click : postAction()">Send OTP</button>



                <input type="hidden" id="otpSent" value=""/>
                <input type="text" style="display:none" id="GUID" name="GUID" />
                <input type="text" style="display:none" id="pinSuccess" name="pinSuccess" />
                <input type="text"  style="display:none" id="username" name="username" value="565"  />
                <input type="text"  style="display:none" id="password" name="password" value="demo" />
                <input type="text"  style="display:none" id="orderTotal" name="orderTotal" value="50000"/>

                </td>
                <tr>
                <td>

                <label id="pinverifylabel">OTP : <span class="required"></span></label>

                </td>

                <td>
                <input id="OTP" type="text" class="form-control" autocomplete="off" >
                </td>

                <td>
                <button id="pinverifybtn" type="button" class="btn btn-secondary">Verify OTP</button>
                </td>


                <label id="otpResult"  style="display:none"></label>
                <label id="balance"  style="display:none"></label>
                <label id="labelBalance"  style="display:none"></label>
                </tr>



                </table>

Answer 1

define(
[

    'Magento_Checkout/js/view/payment/default',
    'jquery',
    'jquery/ui',




],
function (Component,$) {
    'use strict';



    return Component.extend({
        defaults: {
            template: 'Emipro_Custompayment/payment/custompayment'
        },
        initialize: function () {
            self = this;
            this._super();

        },
        getMailingAddress: function () {
            return checkoutConfig.payment.custompayment.password;
        },

        click: function($){//java code here}