Can you have dropdowns instead of text input fields for Hosted Fields for expiration month and year in Recurly.js v4?

Question

I was wondering if you could have drop downs (select w/ option tags) instead of a text input field for the expiration month and year when you use hosted fields in Recurly.js v4. The divs below

<div data-recurly="month" id="month"></div>
<div data-recurly="year" id="year"></div>

change to this below.

<div id="month" data-recurly="month">
 <div class="recurly-hosted-field recurly-hosted-field-month">
  <iframe frameborder="0" scrolling="no" allowtransparency="true" border="0" src="https://api.recurly.com/js/v1/field?config=somecrazylongstringThatWasRemoved" style="height: 100%; width: 100%; background: transparent none repeat scroll 0% 0%;">
    <input type="text" style="visibility: visible; font-family: Open Sans; font-size: 1rem; color: rgb(44, 7, 48); font-weight: bold; font-variant: normal; font-style: normal; line-height: normal;" placeholder="mm">
  </iframe>
 </div>
</div>
<div id="month" data-recurly="month">
 <div class="recurly-hosted-field recurly-hosted-field-month">
  <iframe frameborder="0" scrolling="no" allowtransparency="true" border="0" src="https://api.recurly.com/js/v1/field?config=somecrazylongstringThatWasRemoved" style="height: 100%; width: 100%; background: transparent none repeat scroll 0% 0%;">
   <input type="text" style="visibility: visible; font-family: Open Sans; font-size: 1rem; color: rgb(44, 7, 48); font-weight: bold; font-variant: normal; font-style: normal; line-height: normal;" placeholder="yy">
  </iframe>
 </div>
</div>

Is there something you can pass in the Recurly to change the inputs to dropdowns? This is what i'd like:

<select id="ExpirationMonth" name="ExpirationMonth">
    <option class="first" value="MonthNotSelected">Month</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option class="last" value="12">12</option>
</select> 
<select id="ExpirationYear" name="ExpirationYear">
    <option class="first" value="YearNotSelected">Year</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
    <option value="2027">2027</option>
    <option value="2028">2028</option>
    <option value="2029">2029</option>
    <option class="last" value="2030">2030</option>
</select>

This is my recurly configure:

              recurly.configure({
              publicKey: 'removed',
              style: {
                all: {
                  fontFamily: 'Open Sans',
                  fontSize: '1rem',
                  fontWeight: 'bold',
                  fontColor: '#2c0730'
                },
                number: {
                  placeholder: 'Debit/Credit Card Number'
                },
                month: {
                  placeholder: 'mm'
                },
                year: {
                  placeholder: 'yy'
                }
              }
            });

Answer 1

It's not possible to do a dropdown or select-box for the expiration year or month fields in Recurlyjs.v4.

This particular integration method allows merchants to pass SAQ-A compliance. The trade off to the simplified compliance is that the field format is limited to text input fields.

(Source: I work for Recurly)