Charge Documentation

Adding Meta Information

You can use the meta:* fields, you can get extra information from your customers.

NOTE: You can have up to 20 meta: fields, with field names up to 40 characters long and values up to 500 characters long.


{exp:charge:form
  debug="yes"
  form_class="form-horizontal"
  form_id="charge-form"
  return="{segment_1}/thanks"
  return_error="{segment_1}/error"
  required="meta:organization|meta:charity|meta:contact_preference"}

  <div class="alert bg-info">Your meta:tag must exist on the page as a parsable tag with curly braces (i.e. {meta:tagname}). Just having <input name="meta:tagname"&rt; won't work.</div>

  <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}

    {exp:charge:error_info}
      {if has_error}
        {error_message}
      {/if}
    {/exp:charge:error_info}

    <h4>Details</h4>
    <label for="customer_name" 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="customer_email" class="col-sm-2 control-label">Customer Email</label>
    <input type="text" class="form-control" id="customer_email" 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}" /><span class="input-group-addon">.00</span>
     {if error_plan_amount}
      <div class="alert alert-warning">
        {error_plan_amount_message}
      </div>
    {/if}

    <hr>

    <h4>Meta Information</h4>

    <label for="meta:organization" class="col-sm-2 control-label">Organization</label>
    <input type="text" class="form-control" id="meta:organization" name="meta:organization" placeholder="Organization Name" value="{meta:organization}" />
    {if error_meta:organization}
      {error_meta:organization_message}
    {/if}

    <label for="meta:charity" class="col-sm-2 control-label">Charity</label>
    <input type="text" class="form-control" id="meta:charity" name="meta:charity" placeholder="Charity Name" value="{meta:charity}" />
    {if error_meta:charity}
      {error_meta:charity_message}
    {/if}

    <label for="meta:contact_preference" class="col-sm-2 control-label">Contact Preference</label>
    <label class="radio-inline">
      <input type="radio" name="meta:contact_preference" value="email" {if meta:contact_preference == 'email' OR meta:contact_preference == ''} checked="checked" {/if} /> Email
    </label>

    <label class="radio-inline">
      <input type="radio" name="meta:contact_preference" value="post" {if meta:contact_preference == 'post'} checked="checked" {/if} /> Post
    </label>

    <label class="radio-inline">
      <input type="radio" name="meta:contact_preference" value="phone" {if meta:contact_preference == 'phone'} checked="checked" {/if} /> Phone
    </label>
    {if error_meta:contact_preference}
      {error_meta:contact_preference_message}
    {/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}

<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>

Support

Having problems setting up and/or using Charge? Support is offered from 10am to 4pm EST weekdays. Send us an email at help@eeharbor.com and we will respond as quickly as we can.