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

        <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">
                <div class="row">
                    <label for="customer_name" 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="form-group">
                <div class="row">
                    <label for="customer_email" class="col-sm-2 control-label">Customer Email</label>

                    <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>
                        {/if}
                    </div>
                </div>
            </div>

            <hr>

            <h4>Plan</h4>

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

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

            <hr>

            <h4>Credit Card Details</h4>

            <div class="form-row">
                <label for="card-element">Credit or debit card</label>
                <div id="card-element">
                    <!-- a Stripe Element will be inserted here. -->
                </div>

                <!-- Used to display form errors -->
                <div id="card-errors" class="text-danger" role="alert"></div>
            </div>

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

            <div class="form-group">
                <div id="payment-errors" class="demo-error 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>

            </div>
        </fieldset>
    {/exp:charge:form}

    <br />

<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',
        elements_options: elementsOptions,
        card_form_options: cardFormOptions,
    });
</script>