Charge for Craft, full payment example

twig

  
  	<div class="jumbotron">
    	<h1>Charge for Craft</h1>
  	</div>


  	<h2>Basic Payment</h2>

  	<form class="form-horizontal" id="charge-form" method="post" action="" accept-charset="UTF-8">
      <input type="hidden" name="action" value="charge/charge">
      <input type="hidden" name="redirect" value="charge/success/{hash}">

        {% macro errorList(errors) %}
        {% if errors %}
            <div class="alert alert-warning">
                {% for error in errors %}
                    <p>{{ error }}</p>
                {% endfor %}
            </div>
        {% endif %}
        {% endmacro %}

        {% if charge is defined %}
            {{ _self.errorList(charge.getErrors('general')) }}
        {% endif %}


  		<div id="payment-errors" class="alert alert-error"></div>

  		<h4>Customer Details</h4>
  		<div class="form-group">
    		<label for="customerName" class="col-sm-2 control-label">Name</label>
    		<div class="col-sm-10">
     			<input type="text" class="form-control" id="customerName" name="customerName" placeholder="eg. Joe Smith" value="{% if charge is defined %}{{ charge.customerName }}{% endif %}">
          {% if charge is defined %}
            {{ _self.errorList(charge.getErrors('customerName')) }}
          {% endif %}
    		</div>

  		</div>
  		<div class="form-group">
    		<label for="customerEmail" class="col-sm-2 control-label">Email</label>
    		<div class="col-sm-10">
     			<input type="email" class="form-control" id="customerEmail" name="customerEmail" placeholder="eg. joe@example.com" value="{% if charge is defined %}{{ charge.customerEmail }}{% endif %}"/>
          {% if charge is defined %}
            {{ _self.errorList(charge.getErrors('customerEmail')) }}
          {% endif %}
        </div>
  		</div>


  		<h4>Plan Details</h4>
  		<div class="form-group">
    		<label for="planAmount" class="col-sm-2 control-label">Amount</label>
    		<div class="col-sm-10">
    			<select class="form-control" name="planAmount" id="planAmount">
    				<option value="5" {% if charge is defined and charge.planAmount == '5' %}selected="selected"{% endif %}>$5</option>
    				<option value="10" {% if charge is defined and charge.planAmount == '10' %}selected="selected"{% endif %}>$10</option>
    				<option value="20" {% if charge is defined and charge.planAmount == '20' %}selected="selected"{% endif %}>$20</option>
    				<option value="50" {% if charge is defined and charge.planAmount == '50' %}selected="selected"{% endif %}>$50</option>
    			</select>

    		</div>
  		</div>

      <div class="form-group">
        <label for="planInterval" class="col-sm-2 control-label">Plan Interval</label>
        <div class="col-sm-10">
          <select class="form-control" name="planInterval" id="planInterval">
            <option value="" {% if charge is defined and charge.planInterval == '' %}selected="selected"{% endif %}>One-Off</option>
            <option value="week" {% if charge is defined and charge.planInterval == 'week' %}selected="selected"{% endif %}>Weekly</option>
            <option value="month" {% if charge is defined and charge.planInterval == 'month' %}selected="selected"{% endif %}>Monthly</option>
            <option value="year" {% if charge is defined and charge.planInterval == 'year' %}selected="selected"{% endif %}>Yearly</option>
          </select>
        </div>
      </div>


      <div class="form-group">
        <label for="planIntervalCount" class="col-sm-2 control-label">Plan Interval Count</label>
        <div class="col-sm-10">
          <select class="form-control" name="planIntervalCount" id="planIntervalCount">
            <option value="0"></option>
            <option value="1"  {% if charge is defined and charge.planIntervalCount == '1' %}selected="selected"{% endif %}>Every Period</option>
            <option value="3"  {% if charge is defined and charge.planIntervalCount == '3' %}selected="selected"{% endif %}>Every 3 Periods</option>
            <option value="12"  {% if charge is defined and charge.planIntervalCount == '12' %}selected="selected"{% endif %}>Every 12 Periods</option>
          </select>


        </div>
      </div>



  		<h4>Card Details</h4>

        <div class="well">
        {% if charge is defined and charge.cardToken is not null %}

            <input type="hidden" name="cardToken" value="{{ charge.cardToken }}" data-stripe="token"/>
            <input type="hidden" name="cardLast4" value="{{ charge.cardLast4 }}"/>
            <input type="hidden" name="cardType" value="{{ charge.cardType }}"/>

            <p>We have card details</p>
            <p>Card Last 4 : {{ charge.cardLast4 }}</p>

        {% else %}

      		<div class="form-group">
        		<label for="cardNumber" class="col-sm-2 control-label">Card Number</label>
        		<div class="col-sm-3">
         			<input type="text" class="form-control" id="cardNumber" placeholder="eg. **** **** **** ****" data-stripe="number" value="4242 4242 4242 4242">
        		</div>
      		</div>
      		<div class="form-group">
        		<label for="cardCvc" class="col-sm-2 control-label">Card CVC</label>
        		<div class="col-sm-1">
         			<input type="text" class="form-control" id="cardCvc" placeholder="eg. 123" data-stripe="cvc" value="123">
        		</div>
      		</div>
      		<div class="form-group">
        		<label for="cardExpMonth" class="col-sm-2 control-label">Card Expiry</label>
        		<div class="col-sm-2">
         			<select class="form-control" data-stripe="exp_month" id="cardExpMonth">
        				{% for month in craft.i18n.getLocaleData().getMonthNames() %}
                  <option value="{{ loop.index }}" {% if now.month == loop.index %}selected="selected"{% endif %}>{{ month }}</option>
                {% endfor %}
        			</select>
        		</div>

            <div class="col-sm-1">
              <select class="form-control" data-stripe="exp_year" id="cardExpYear">
                {% for year in now.year..now.year+5 %}
                    <option value="{{ year }}">{{ year }}</option>
                {% endfor %}
              </select>
            </div>
      		</div>

        {% endif %}

        </div>

  		<div class="form-group">
    		<div class="col-sm-offset-2 col-sm-10">
     			<button type="submit" class="btn btn-primary">Pay with Stripe</button>
    		</div>
  		</div>
	</form>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="{{ resourceUrl('charge/js/stripe_v2.min.js') }}"></script>
	<script src="{{ resourceUrl('charge/js/jquery.charge.js') }}"></script>
    <script>
		(function(window, undefined) {
            Stripe.setPublishableKey('{{ craft.charge.getPublicKey() }}');
            $(this).charge('#charge-form', '#payment-errors');
		})(window);
	</script>

I tried that but I got an error on submit : RangeError: Maximum call stack size exceeded
Is this code still valid ?

OK got it. Two inclusions of jquery !