Charge - Basic payments demo template

gistfile1.html

{embed="charge/_head"}



	<h2>Basic Charge</h2>
	<p>This demostrates the simplest possible usage of <a href="http://squarebit.co.uk/addons/charge">Charge</a>.</p>
    <p>All the other example templates use a variation of this basic setup. Inputs for customer, plan and card are required.</p>

    <hr/>



    {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>
            <div class="form-group">
                <label for="plan_amount" class="col-sm-2 control-label">Customer Name</label>
 
                <div class="col-sm-10">
                    <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}
                </div>
            </div>

            <div class="form-group">
                <label for="plan_amount" class="col-sm-2 control-label">Customer Email</label>

                <div class="col-sm-10">
                    <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}
                </div>
            </div>

            <hr/>

            <h4>Plan</h4>

            <div class="form-group">
                <label for="plan_amount" class="col-sm-2 control-label">Amount</label>

                <div class="col-sm-10 input-group">
                    <input type="text" class="form-control" id="plan_amount" name="plan_amount" placeholder="Enter Amount" value="{plan_amount}"><span class="input-group-addon">.00</span>
                     {if error_plan_amount}
                        <div class="alert alert-warning">
                        {error_plan_amount_message}
                        </div>
                    {/if}
                </div>
            </div>

            <hr/>

            <h4>Credit Card Details</h4>

            {if have_card_token}
                <div class="well">
                    <h4>Payment Card</h4>
                    <p><strong>{card_type}</strong> : {card_number_dotted}</p>
                </div>
            {if:else}
                <div class="well">
                    <h4>Payment Card</h4>
                    <div class="form-group">
                        <label for="card_number" class="col-sm-2 control-label">Credit Card Number</label>

                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="card_number" value="4242 4242 4242 4242" data-stripe="number"/>
                            <span class="help-block">We've hardcoded a valid test card number here. <a href="http://squarebit.dev/addons/charge/docs/testing-cards">Other Testing Card Numbers are here</a></span>
                        </div>


                    </div>


                    <div class="form-group">
                        <label for="card_exp_month" class="col-sm-2 control-label">Expires</label>
                        <div class="col-sm-3">
                            <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>
                        </div>
                        <div class="col-sm-2">
                        <select id="card_exp_year" class="form-control" data-stripe="exp_year">
                            {card_years}
                                <option value="{year}">{year}</option>
                            {/card_years}
                        </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="card_cvc" class="col-sm-2 control-label">Security Code</label>
                        <div class="col-sm-2">
                            <input class="form-control" type="text" id="card_cvc" placeholder="" value="123" data-stripe="cvc"/>
                        </div>
                    </div>
                </div>
            {/if}

            <div class="form-group">
                <button id="submit_payment" type="submit" class="btn btn-primary form-control">Pay Now</button>

                <div id="payment-errors"></div>
            </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>


{embed="inc/_foot"}