index.html

 
<div class='container'>
  <div class='row'>
    <div class='span12'>
      <h2>Samurai Startup IslandのDayPassを購入してスタートアップライフを満喫しましょう！</h2>
      <h4>価格: 2,100円</h4>
      <form accept-charset="UTF-8" action="/tickets" class="new_ticket" id="new_ticket" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="xhANERJ85JA2nKY9esTc7hTIOQiLd6n0lrFn6QWqTmE=" /></div>
            <label for="ticket_name">名前</label>
            <input id="ticket_name" name="ticket[name]" size="30" type="text" />
            <label for="ticket_email">メールアドレス</label>
            <input id="ticket_email" name="ticket[email]" size="30" type="text" />
            <fieldset>
              <label for="card_number_クレジットカード番号">クレジットカード番号</label>
              <input id="card_number" type="text" />
              <label for="card_month_有効期限">有効期限</label>
              <select id="card_month">
              <option value="1">1 - January</option>
              <option value="2">2 - February</option>
              <option value="3">3 - March</option>
              <option value="4">4 - April</option>
              <option value="5">5 - May</option>
              <option value="6">6 - June</option>
              <option value="7">7 - July</option>
              <option value="8">8 - August</option>
              <option value="9">9 - September</option>
              <option value="10">10 - October</option>
              <option selected="selected" value="11">11 - November</option>
              <option value="12">12 - December</option>
              </select>
              <select id="card_year">
              <option value="2007">2007</option>
              <option value="2008">2008</option>
              <option value="2009">2009</option>
              <option value="2010">2010</option>
              <option value="2011">2011</option>
              <option selected="selected" value="2012">2012</option>
              <option value="2013">2013</option>
              <option value="2014">2014</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              </select>
              <label for="card_cvv_CVV">Cvv</label>
              <input id="card_cvv" type="text" />
            </fieldset>
            <input class="btn btn-large btn-primary submit-button" name="commit" type="submit" value="購入" />
      </form>
    </div>
  </div>
</div>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type='text/javascript'>
  //<![CDATA[
    Stripe.setPublishableKey('pk_setpublicapikeyhere');
    Stripe.endpoint = 'https://api.webpay.jp/v1'
    $(document).ready(function() {
      $("#new_ticket").submit(function(event) {
        // disable the submit button to prevent repeated clicks
        $('.submit-button').attr("disabled", "disabled");
        Stripe.createToken({
            name: $('#ticket_name').val(),
            number: $('#card_number').val(),
            cvc: $('#card_cvv').val(),
            exp_month: $('#card_month').val(),
            exp_year: $('#card_year').val()
        }, stripeResponseHandler);
        // prevent the form from submitting with the default action
        return false;
      });
    });
    function stripeResponseHandler(status, response) {
        if (response.error) {
            console.log(response.error.message);
            $(".submit-button").removeAttr("disabled");
        } else {
            var form$ = $("#new_ticket");
            // token contains id, last4, and card type
            var token = response['id'];
            // insert the token into the form so it gets submitted to the server
            form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
            // and submit
            form$.get(0).submit();
        }
    }
  //]]>
</script>