在Recurly.js v4中,您是否可以为托管字段的月份和年份提供下拉菜单而不是文本输入字段?

时间:2016-02-04 16:56:11

标签: javascript html recurly

我想知道在Recurly.js v4中使用托管字段时,是否可以使用下拉列表(选择w /选项标记)而不是文本输入字段作为到期月份和年份。下面的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'
                }
              }
            });

1 个答案:

答案 0 :(得分:7)

无法为Recurlyjs.v4中的过期年份或月份字段执行下拉列表或选择框。

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

(来源:我为Recurly工作)