使用Stripe.js和Skeuocard

Question

我目前正在按照条带的教程制作一个定制的付款表格，我想使用斜卡作为我的表单。不幸的是，似乎将data-stripe属性添加到基本表单中并不能将它们带入表单的斜形视图中。是否有一种方法可以复制这些data-stripe属性，这样我就可以使用它了，还是现在只使用带可嵌入形式会更好呢？

我的具体表格如下：

        <div class="credit-card-input no-js" skeuocard id="skeuocard">
            <p class="no-support-warning alert alert-warning">
                Since you have JavaScript disabled, you can't use the awesome credit card entry service. Oh well.
            </p>
            <label for="cc_type">Card Type</label>
            <select name="cc_type" id="cc_type">
                <option value="">...</option>
                <option value="visa">Visa</option>
                <option value="discover">Discover</option>
                <option value="mastercard">MasterCard</option>
                <option value="maestro">Maestro</option>
                <option value="jcb">JCB</option>
                <option value="unionpay">China UnionPay</option>
                <option value="amex">American Express</option>
                <option value="dinersclubintl">Diners Club</option>
            </select>
            <label for="cc_number">Card Number</label>
            <input type="text" name="cc_number" id="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19" data-stripe="number">
            <label for="cc_exp_month">Expiration Month</label>
            <input type="text" name="cc_exp_month" id="cc_exp_month" placeholder="00" data-stripe="exp-month">
            <label for="cc_exp_year">Expiration Year</label>
            <input type="text" name="cc_exp_year" id="cc_exp_year" placeholder="00" data-stripe="exp-year">
            <label for="cc_name">Cardholder's Name</label>
            <input type="text" name="cc_name" id="cc_name" placeholder="John Doe" data-stripe="name">
            <label for="cc_cvc">Card Validation Code</label>
            <input type="text" name="cc_cvc" id="cc_cvc" placeholder="123" maxlength="3" size="3" data-stripe="cvc">
        </div>

Answer 1

我最近不得不亲自处理这件事。幸运的是，斜形使得更改值字段的it变得简单。只需创建如下所示的JavaScript实例：

card = new Skeuocard($("#skeuocard-entry"), {
    numberInputSelector: '[data-stripe="number"]',
    expMonthInputSelector: '[data-stripe="exp-month"]',
    expYearInputSelector: '[data-stripe="exp-year"]',
    cvcInputSelector: '[data-stripe="cvc"]',
});

然后，将实际的表单模板更改如下：

<div class="credit-card-input no-js" id="skeuocard-entry">
  <p class="no-support-warning">
    Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...
  </p>
  <label for="cc_type">Card Type</label>
  <select name="cc_type">
    <option>...</option>
    <option value="visa">Visa</option>
    <option value="discover">Discover</option>
    <option value="mastercard">MasterCard</option>
    <option value="amex">American Express</option>
  </select>
  <label>Card Number</label>
  <input maxlength="19" data-stripe="number" placeholder="XXXX XXXX XXXX XXXX" size="19" type="text">
    <label>Expiration Month</label>
    <input data-stripe="exp-month" placeholder="00" type="text">
      <label>Expiration Year</label>
      <input data-stripe="exp-year" placeholder="00" type="text">
        <label>Cardholder's Name</label>
        <input data-stripe="name" placeholder="John Doe" type="text">
          <label>Card Validation Code</label>
          <input maxlength="3" data-stripe="cvc" placeholder="123" size="3" type="text"></input>
        </input>
      </input>
    </input>
  </input>
</div>

您可以在主Github配置文件：https://github.com/kenkeiter/skeuocard上阅读有关选择器的信息。

当一个Skeuocard被实例化时，它会将自己附加到一个容器元素上，并在添加它自己的元素之前移除任何不需要的子元素；然而，Skeuocard将其值存储在预先存在的输入字段中，这些输入字段没有被选中以供移除。 默认情况下，Skeuocard设置以下默认选择器以匹配容器元素中的基础表单字段，并使用它们存储值： typeInputSelector: name="cc_type“numberInputSelector: name="cc_number”expMonthInputSelector: name="cc_exp_month“expYearInputSelector: name="cc_exp_year”nameInputSelector: name="cc_name“cvcInputSelector: name=”，在实例化时提供任何具有不同值的选项，都将导致Skeuocard使用您提供的选择器！

请注意，您应该遵循Stripe关于自定义表单的文档，包括使用单一使用令牌。您可以在这里找到文档：https://stripe.com/docs/tutorials/forms