【问题标题】:Can you have dropdowns instead of text input fields for Hosted Fields for expiration month and year in Recurly.js v4?在 Recurly.js v4 中,您可以为托管字段的到期月份和年份提供下拉列表而不是文本输入字段吗?
【发布时间】:2016-02-04 16:56:11
【问题描述】:

我想知道当您在 Recurly.js v4 中使用 托管字段 时,是否可以使用下拉菜单(选择带有选项标签)而不是文本输入字段来表示到期月份和年份。下面的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'
                }
              }
            });

【问题讨论】:

    标签: javascript html recurly


    【解决方案1】:

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

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

    (来源:我为 Recurly 工作)

    【讨论】:

    • 有没有办法将输入 maxlength 设置为:16 表示 Visa、Mastercard 和 Discover 的 CVV 的数字 3。 4 for CVV of Amex 2 for Expiration Month 2 for Expiration Year 我不确定号码 iframe 是否可以与 cvv iframe 通信,让它知道 CC 的前缀是什么,通过以下前缀确定卡类型:美国运通 34 , 37 MasterCard 50-55 Visa 4 Discover Card 6011, 622126-622925, 644-649, 65 如果无法通信,是否可以将最大长度设置为 4?
    • 示例:
    • 感谢您的回答!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-09-11
    • 2015-06-21
    • 2023-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-03
    相关资源
    最近更新 更多