使用Stripe.js和Skeuocard

Question

我目前正在關注製作自定義付款表格的Stripe s教程，並且我想使用skeuocard作爲我的表單。不幸的是，它似乎添加data-stripe屬性的基本形式不會將它們帶入窗體的skeuomorphic視圖。有沒有辦法讓skeuocard複製這些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

我不得不最近應對這個自己。幸運的是，Skeuomorphic可以很簡單地改變值字段的ID。只要創建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：[名稱=「CC_TYPE」] numberInputSelector： [ NAME = 「CC_NUMBER」] expMonthInputSelector：[名稱= 「cc_exp_month」] expYearInputSelector：[名稱= 「cc_exp_year」] nameInputSelector： [名稱= 「cc_name」] cvcInputSelector：[名稱= 「cc_cvc」]提供任何的 這些選項在實例化時使用不同的值將導致Skeuocard使用您提供的選擇器，取而代之的是 ！

請注意，您應該遵循Stripe有關自定義表單的文檔，包括使用單次使用令牌。你可以在這裏找到文檔：https://stripe.com/docs/tutorials/forms