Charge Documentation

Recurring Payments

Just like the basic payment, but specifying the payments to be recurring.

{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_name" 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>
            </div>

            <hr>

            <h4>Plan</h4>

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

                <div class="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 class="alert bg-success text-white">
                <div class="form-group">
                    <label for="plan_interval_count" class="col-sm-2 control-label">Frequency</label>

                    <div>
                        <label class="radio-inline" id="plan_interval_count_0">
                            <input type="radio" name="plan_interval_count" id="plan_interval_count_0" value="0" {if plan_interval_count == '0' OR plan_interval_count == ''} checked="checked" {/if} /> One Time
                        </label>
                    </div>

                    <div>
                        <label class="radio-inline" id="plan_interval_count_1">
                            <input type="radio" name="plan_interval_count" id="plan_interval_count_1" value="1"  {if plan_interval_count == '1'} checked="checked" {/if} /> Monthly
                        </label>
                    </div>

                    <div>
                        <label class="radio-inline" id="plan_interval_count_3">
                            <input type="radio" name="plan_interval_count" id="plan_interval_count_3" value="3"  {if plan_interval_count == '3'} checked="checked" {/if} /> Quarterly
                        </label>
                    </div>

                    <div>
                        <label class="radio-inline" id="plan_interval_count_12">
                            <input type="radio" name="plan_interval_count" id="plan_interval_count_12" value="12"  {if plan_interval_count == '12'} checked="checked" {/if} /> Annually
                        </label>
                    </div>
                    {if error_plan_interval_count}
                        <div class="alert alert-warning">
                            {error_plan_interval_count_message}
                        </div>
                    {/if}
                </div>
            </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" role="alert"></div>

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

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