Charge Documentation

Adding Meta Information

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

   {exp:charge:form
        debug="yes"
        form_class="form-horizontal"
        form_id="charge-form"
        return="{segment_1}/thanks"
        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>
            <div class="form-group">
                <div class="row">
                    <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>

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

            <hr>

            <h4>Plan</h4>

            <div class="form-group">
                <div class="row">
                    <label for="plan_amount" class="control-label">Amount</label>

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

            <hr>

            <h4>Meta Information</h4>

            <div class="alert bg-success text-white">

                <div class="form-group">
                    <label for="meta:organization" class="col-sm-2 control-label">Organization</label>

                    <div class="col-sm-10 input-group">
                        <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}
                    </div>
                </div>
                <div class="form-group">
                    <label for="meta:charity" class="col-sm-2 control-label">Charity</label>

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

                <div class="form-group">
                    <label for="meta:contact_preference" class="col-sm-2 control-label">Contact Preference</label>

                    <div>
                        <label class="radio-inline" id="meta:contact_preference_1">
                            <input type="radio" name="meta:contact_preference" id="meta:contact_preference_1" value="email" {if meta:contact_preference == 'email' OR meta:contact_preference == ''} checked="checked" {/if} /> Email
                        </label>
                    </div>

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

                    <div>
                        <label class="radio-inline" id="meta:contact_preference_3">
                            <input type="radio" name="meta:contact_preference" id="meta:contact_preference_3" value="phone" {if meta:contact_preference == 'phone' OR meta:contact_preference == ''} checked="checked" {/if} /> Phone
                        </label>
                    </div>
                </div>
                {if error_meta:contact_preference}
                    {error_meta:contact_preference_message}
                {/if}
            </div>

            <hr>

            <h4>Credit Card Details</h4>
            <label for="card-element">Credit or debit card</label>
            <div id="card-element">
                <!-- a Stripe Element will be inserted here. -->
            </div>
            <div id="card-errors" class="text-danger" role="alert"></div>

            <div id="progress" style="display:none;">
            We are processing your payment... please wait.
            </div>

            <div id="payment-errors" class="text-danger" style="display:none;"></div>

            <button id="pay-button" type="button" class="btn btn-xs btn-primary" data-processing="Please Wait...">
            Pay Now
            </button>

        </fieldset>

    {/exp:charge:form}

    <br />
</div>
</div> <!-- close .row -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="{exp:charge:stripe_js}"></script>
<script src="{exp:charge:js}"></script>
<script>
    var elementsOptions = {
        fonts: [
            {
                cssSrc: "https://fonts.googleapis.com/css?family=Lobster",
            }
        ]
    };

    var cardFormOptions = {
        iconStyle: 'solid',
        style: {
            base: {
                iconColor: '#8898AA',
                color: 'black',
                lineHeight: '36px',
                fontWeight: 300,
                fontFamily: 'Lobster, "Helvetica Neue", Helvetica, sans-serif',
                fontSize: '19px',
                padding: '5px',

                '::placeholder': {
                    color: '#8898AA',
                },
            },
            invalid: {
                iconColor: '#e85746',
                color: '#e85746',
            }
        },
        classes: {
            focus: 'is-focused',
            empty: 'is-empty',
        }
    };

$(this).chargeForm({
  stripe_key: '{exp:charge:public_key}',
  form: '#charge-form',
  card: '#card-element',
  pay_button: '#pay-button',
  pay_button_processing_text: 'Please Wait...',
  pay_errors: '#payment-errors',
  progress: '#progress',
  coupon_form: '#coupon-form',
  coupon_field: '#coupon',
  coupon_status: '#coupon_status',
  card_form_options: cardFormOptions,
});
</script>