Charge Documentation

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>