How to enable monthly payment and installment payment options on donation pages

In some cases, a single, lump sum payment is not an ideal fit for your project. NationBuilder has options for monthly payments and installment payment plans for donation pages. When editing a donation page, you can see these options in Donation settings > Basics:

donation-installments-option.png

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.

Alternatively, 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.

  1. From the control panel, navigate to the donation page you wish to enable these features on
  2. Select "Template" from the donation page navigation menu

If your theme is based on a version 2 theme

     3.  Find the following code block:

v2-code-block.png

     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:

v1-code-block.png

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

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.