authorize.net dpm дата истечения срока действия кредитной карты поле выбора

Question

Я создаю форму для отправки Authorize.net с использованием DPM. Я считаю, что срок действия кредитной карты должен быть отформатирован как yyyy/dd в одной переменной.

Я хотел бы использовать два поля в моей форме html: одно раскрывающееся поле выбора для месяца и другое для даты. Как я могу объединить два поля формы html в одну переменную, чтобы она была отправлена ​​Authorize.net как одна правильно отформатированная переменная на submit?

Я подозреваю, что это может быть сделано с помощью javascript, однако он должен работать каждый раз, даже если javascript отключен.

Спасибо за любую помощь или альтернативные предложения.

Answer 1

Если вы хотите, чтобы он работал без JavaScript, вам понадобится дополнительный шаг для обработки отправки формы, а затем отобразите окончательную информацию для пользователя. Затем они могут отправить его Authnet для использования DPM.

Answer 2

Вот как я справился с этим.

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

Вы определенно не хотите размещать содержимое формы на исходном сервере, так как это поражает точку использования Direct Post Method.

Вот базовый код с помощью JQuery.

<form id="cart-form" action="..."> 
... 

Expiration Date: 
<div id="exp_date_wrap"> 
    <input name="x_exp_date" type="text" /> (format: mm/yy) 
</div> 

<select name="x_cc_month" id="x_cc_month" style="display:none"> 
    <option value="">-- month --</option> 
    ... 
</select> 

<select name="x_cc_year" id="x_cc_year" style="display:none"> 
    <option value="">-- year --</option> 
    ... 
</select> 

<script> 
    $('#exp_date_wrap').hide(); 
    $('#x_cc_month, #x_cc_year').show(); 

    $('#cart-form').submit(function() { 
    $('#x_exp_date').val(
     $('#x_cc_month :selected').val() + '/' + 
     $('#x_cc_year :selected').val() 
    ); 
    }); 
</script> 

</form>