javascript - 在 Recurly.js v4 中，您可以使用下拉列表而不是文本输入字段来托管字段的到期月份和年份吗？

Question

我想知道当您在 Recurly.js v4 中使用 hosted fields 时，您是否可以使用下拉菜单(选择带有选项标签)而不是文本输入字段来输入到期月份和年份。下面的div

<div data-recurly="month" id="month"></div>
<div data-recurly="year" id="year"></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="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>

有什么东西可以传递给 Recurly 以将输入更改为下拉列表吗？这就是我想要的:

<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>

这是我的循环配置:

              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

在 Recurlyjs.v4 中无法为到期年份或月份字段做下拉或选择框。

这种特殊的集成方法允许商家通过 SAQ-A 合规性。简化合规性的权衡是字段格式仅限于文本输入字段。

(来源:我为 Recurly 工作)