When editing a donation page, you can see these options in Donation settings > Basics:
If you can see the options displayed above, you won't need to follow this HOWTO. You may be interested in how to create donation pages.
Donation templates from public themes that have not been customized will automatically inherit these new features. If you're using a public theme, it's also possible to click the Restore default button on the donation page template editor to obtain these upgrades, but be warned that custom modifications to your donation template will be overwritten.
If you'd like to maintain any custom modifications you've made to the donation template, or if you're using a custom theme, here's how to add the monthly and installment payment options to your donation template manually.
From the control panel, navigate to the donation page you wish to enable these features on
Select Template from the donation page navigation menu
If your theme is based on a version 2 theme
3. Find the following code block:
4. And replace the {% if request.current_order %} … {% endif %} code block with the following:
{% if request.current_order %}
{% for item in request.current_order.items %}
{% if item.num_time_periods and item.time_period_type %}
{{ item.quantity }} {{ item.name }} @ {{ item.amount }} - billed automatically every {{ item.num_time_periods }} {{item.time_period_type }}
{% else %}
{{ item.quantity }} {{ item.name }} @ {{ item.amount }}
{% endif %}
{% endfor %}
<a href="{{ page.donation.clear_order_url }}">Clear order</a>
{% elsif page.donation.donation_frequency == "monthly" %}
{% if page.donation.amount_in_cents != 0 %}
<h4 class="padbottomless">{{ page.donation.amount_formatted }}</h4>
<div class="row-fluid">
<div class="span12 padbottomless">Your credit card will be billed automatically every month</div>
</div>
{% else %}
<div class="radio-inline">{{ page.donation.form_amount_options }}</div>
<div class="row-fluid">
<div class="span12 padbottomless">Your credit card will be billed automatically every month</div>
</div>
{% endif %}
{% else %}
{% if page.donation.amount_in_cents != 0 %}
<h4 class="padbottomless">{{ page.donation.amount_formatted }}</h4>
{% else %}
<div class="radio-inline">{{ page.donation.form_amount_options }}</div>
{% endif %}
{% if page.donation.max_installments > 1 %}
<label for="num_installments" class="padbottomless">I want to pay this in {% collection_select "num_installments", page.donation.installment_collection, class:"select" %} installments</label>
{% endif %}
{% endif %}If your theme is based on a version 1 theme
3. Find the following code block:
4. And replace the {% if request.current_order %} … {% endif %} code block with the following:
{% if request.current_order %}
{% for item in request.current_order.items %}
{% if item.num_time_periods and item.time_period_type %}
{{ item.quantity }} {{ item.name }} @ {{ item.amount }} - billed automatically every {{ item.num_time_periods }} {{item.time_period_type }}
{% else %}
{{ item.quantity }} {{ item.name }} @ {{ item.amount }}
{% endif %}
{% endfor %}
<a href="{{ page.donation.clear_order_url }}">Clear order</a>
{% elsif page.donation.donation_frequency == "monthly" %}
{% if page.donation.amount_in_cents != 0 %}
<h4 class="padbottom">{{ page.donation.amount_formatted }}</h4> Your credit card will be billed automatically every month
{% else %}
<div class="radio-inline padbottom">{{ page.donation.form_amount_options }}</div>
Your credit card will be billed automatically every month
{% endif %}
{% else %}
{% if page.donation.amount_in_cents != 0 %}
<h4 class="padbottom">{{ page.donation.amount_formatted }}</h4>
{% else %}
<div class="radio-inline padbottom">{{ page.donation.form_amount_options }}</div>
{% endif %}
{% if page.donation.max_installments > 1 %}
<label for="num_installments">I want to pay this in</label>{% collection_select "num_installments", page.donation.installment_collection, class:"select" %} installments
{% endif %}
{% endif %}