stripe checkout не подтверждает требуемые поля

Question

Stripe checkout не подтверждает required поля ввода.

обязательное поле:

<input type="tel" name="appointment[patient_phone]" id="appointment_patient_phone" required="required" placeholder="Phone Number"> 

При нажатии на кнопку stripe, то stripe checkout popup появляется и форма не утверждена.

Так что я попробовал и добавить пользовательский валидатор, но stopPropagation не работает как stripe checkout popup еще всплывает после alert и stopPropagation называется

function validateAppointmentForm() { 

    var validateForm = function(event) { 
    debugger; 
    var phone = $('#appointment_patient_phone').val(); 
    if (!phone) { 
     alert("Phone number is required."); 
     event.preventDefault(); 
     event.stopPropagation(); 
    } 
    } 

    var watchStripeButton = function() { 
    debugger; 
    $("#new-appt-stripe-button").on("click", validateForm); 
    } 

    debugger; 
    watchStripeButton(); 

} 
; 

Answer 1

Вы должны использовать Custom Checkout здесь вместо этого. Это позволяет вам иметь свою собственную кнопку и добавлять валидацию в вашу форму перед открытием Checkout.

Когда клиент нажимает на вашу кнопку для оплаты и вводит данные своей карты, вы обнаружите, что некоторые поля заполнены неправильно или имеют недопустимое значение и отображают сообщение об ошибке. Если форма проверяется, вы можете вызвать handler.open() в обработчике кликов.