Using Stripe.js and Skeuocard

Question

I'm currently following Stripes tutorial on making a custom payment form, and I want to use skeuocard as my form. Unfortunately, it seems like adding data-stripe attributes to the base form does not carry them into the skeuomorphic view of the form. Is there a way to make skeuocard copy these data-stripe attributes so I can use it, or would I be better off just using a Stripe embeddable form at this point?

The specific form I have is as follows:

        <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

I had to deal with this recently myself. Fortunately Skeuomorphic makes it simple to change the ids for the value fields. Just create the JavaScript instance like so:

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

Then, change the actual form template like so:

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

You can read about the selectors on the main Github profile: https://github.com/kenkeiter/skeuocard

When a Skeuocard is instantiated, it attaches itself to a container element and removes any unneeded children, before adding its own; however, Skeuocard stores its values in pre-existing input fields, which aren't selected for removal.

By default, Skeuocard sets the following default selectors to match the underlying form fields within the container element, and use them to store values:

typeInputSelector: [name="cc_type"] numberInputSelector: [name="cc_number"] expMonthInputSelector: [name="cc_exp_month"] expYearInputSelector: [name="cc_exp_year"] nameInputSelector: [name="cc_name"] cvcInputSelector: [name="cc_cvc"] Providing any of those options with different values at instantiation will cause Skeuocard to use your supplied selector, instead!

Please note that you should follow Stripe's documentation regarding custom forms, including the use of single use tokens. You can find the documentation here: https://stripe.com/docs/tutorials/forms