Basic Payments
This is the simplest form. Take payment, redirect to a success page.
{exp:charge:form
form_class="form-horizontal"
form_id="charge-form"
return="{segment_1}/thanks"
return_error="{segment_1}/error"}
<fieldset>
{if have_errors}
<div class="alert alert-error">
<h4>We have {error_count} errors</h4>
<ul>
{errors}
<li>{error_message}</li>
{/errors}
</ul>
</div>
{/if}
<h4>Details</h4>
<label for="plan_amount" class="col-sm-2 control-label">Customer Name</label>
<input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="eg. Joe Smith" value="{customer_name}" />
{if error_customer_name}
<div class="alert alert-warning">
{error_customer_name_message}
</div>
{/if}
<label for="plan_amount" class="col-sm-2 control-label">Customer Email</label>
<input type="text" class="form-control" id="customer_name" name="customer_email" placeholder="eg. joe@smith.org" value="{customer_email}" />
{if error_customer_email}
<div class="alert alert-warning">
{error_customer_email_message}
</div>
{/if}
<hr>
<h4>Plan</h4>
<label for="plan_amount" class="col-sm-2 control-label">Amount</label>
<input type="text" class="form-control" id="plan_amount" name="plan_amount" placeholder="Enter Amount" value="{plan_amount}" />
{if error_plan_amount}
<div class="alert alert-warning">
{error_plan_amount_message}
</div>
{/if}
<hr>
<h4>Credit Card Details</h4>
{if have_card_token}
<h4>Payment Card</h4>
<p><strong>{card_type}</strong>: {card_number_dotted}</p>
{if:else}
<h4>Payment Card</h4>
<label for="card_number" class="col-sm-2 control-label">Credit Card Number</label>
<input type="text" class="form-control" id="card_number" value="4242 4242 4242 4242" data-stripe="number" />
<label for="card_exp_month" class="col-sm-2 control-label">Expires</label>
<select id="card_exp_month" class="form-control" data-stripe="exp_month">
{card_months}
<option value="{month_digit}" {if current_month}selected="selected"{/if}>{month_digit} / {month_long}</option>
{/card_months}
</select>
<select id="card_exp_year" class="form-control" data-stripe="exp_year">
{card_years}
<option value="{year_long}">{year_long}</option>
{/card_years}
</select>
<label for="card_cvc" class="col-sm-2 control-label">Security Code</label>
<input class="form-control" type="text" id="card_cvc" placeholder="" value="123" data-stripe="cvc" />
{/if}
<button id="submit_payment" type="submit" class="btn btn-primary form-control">Pay Now</button>
<div id="payment-errors"></div>
</fieldset>
{/exp:charge:form}
<br />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="{exp:charge:stripe_js}"></script>
<script src="{exp:charge:js}"></script>
<script>
(function(window, undefined) {
Stripe.setPublishableKey('{exp:charge:public_key}');
$(this).charge('#charge-form', '#payment-errors');
})(window);
</script>