Table of Contents

To keep the full amount of the donation your supporters would like to contribute, you can give them the option to cover a portion of their payment processing fees. If you haven't yet created a custom theme for your site, that will be the first step. Then you can add the code as described below to create a checkbox on all of your Donation v2 pages, and your donors can give a bit more to help recoup your costs!

If a donor opts to help cover fees, an additional amount will be added to their base contribution on both one-time and recurring donations.

📌 Note: This code is only designed to work on Donation (v2) type pages. If you are using a 3rd party payment processor with Donation type pages, you can upgrade to NationBuilder's fully integrated payment processor to implement this functionality.

Add code to set the fee amount your donors can cover

Once you have a custom theme for your website, navigate to Theme > Current custom theme > Files > pages_show_donation_v2_wide.html

Click on the file name to open the template.
At the bottom of this template, you'll see the following script:
```
<script src="/assets/liquid/theme_donation_v2.js"></script>
```
Replace this script with the following block of code:
```
<script src="/assets/liquid/donation_v2_page.js"></script>
<script>
$(document).ready(donationV2Page({
  feePercent: 0.029,
  feeAmount: 0.3,
  currencySymbol: "{{ page.donation_v2.currency_symbol }}",
}));
</script>
```
Because processing fees can vary based on international rates or credit card types, you can adjust the feePercent and feeAmount values to reflect the processing rate you would like donors to cover. The feePercent value is the percentage of the transaction, so 0.029 = 2.9%. The feeAmount value is the cents paid per transaction, so 0.3 = 30¢.

If you have already customized any of your Donation (v2) page templates, you'll also need to add the same script to the bottom of these templates.

Add a "Pay for processing fees" checkbox

You'll use different code to add a cover processing fees checkbox to your donation page depending on the stock theme your website theme is based on.

For every theme, this snippet of code can be placed anywhere in the file between {% form_for donation %} and {% endform_for %} in the pages_show_donation_v2_wide.html template, or directly into the page-level template of the donation page where you would like the checkbox to appear. However, you should not place the code within the {% if request.current_order %} conditional because this functionality is not designed to work in the context of event ticketing.

To place the checkbox directly beneath the "Amount" section of your donation page, paste the code snippet directly above the last {% endif %} before the "Pay with" section.

In all themes except Momentum, that block of code will include the words "Pay with". In Momentum-based themes, you'll see {{ t_forms_pay_with }} instead.

In each snippet of code below, you can replace the text, "I’ll cover the processing fee - add it to my donation." in the code with whatever message you would like to display next to the checkbox. By default, the resulting checkbox should look like this:

📌 Note: Displaying this checkbox as pre-checked is not currently supported. If the code is updated to make the checkbox appear this way, the additional fee percentage will not be added to the donation base amount when the transaction is processed.

Momentum

<div class="form-group">
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input checkbox" id="donation_donor_covers_fees" type="checkbox">
    <label for="donation_donor_covers_fees" class="custom-control-label checkbox">{{ t_forms_cover_the_processing_fee }}</label>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

Raise

<div class="form-group">
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input checkbox" id="donation_donor_covers_fees" type="checkbox">
    <label for="donation_donor_covers_fees" class="custom-control-label checkbox">I’ll cover the processing fee - add it to my donation.</label>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

If your donation pages are configured to only accepts one donation amount (versus multiple amounts) find <h2>{{ page.donation_v2.amount_formatted }}</h2> in your theme and replace it with:

<h2 class="single-amount">{{ page.donation_v2.amount_formatted }}</h2>

Action

<div class="row">
  <div class="col-md-12">
    <div class="checkbox">
      <input class="checkbox" id="donation_donor_covers_fees" type="checkbox">
      <label for="donation_donor_covers_fees">I’ll cover the processing fee - add it to my donation.</label>
    </div>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

If your donation pages are configured to accept just one donation amount (versus multiple amounts) find <h2>{{ page.donation_v2.amount_formatted }}</h2> in your theme and replace it with:

<h2 class="single-amount">{{ page.donation_v2.amount_formatted }}</h2>

Publish

<div class="row-fluid">
  <div class="span12">
    <label class="checkbox" for="donation_donor_covers_fees">
      <input class="checkbox" id="donation_donor_covers_fees" type="checkbox"> I’ll cover the processing fee - add it to my donation.
    </label>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

Victory Again

<div class="padbottom padtop">
  <label style="display: block" for="donation_donor_covers_fees">
    <input class="checkbox" id="donation_donor_covers_fees" type="checkbox"> I’ll cover the processing fee - add it to my donation.
  </label>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

Verve

<div class="row-fluid">
  <div class="span12">
    <label class="checkbox" for="donation_donor_covers_fees">
      <input class="checkbox" id="donation_donor_covers_fees" type="checkbox"> I’ll cover the processing fee - add it to my donation.
    </label>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

CityZen

<div class="row-fluid">
  <div class="span12">
    <label class="checkbox" for="donation_donor_covers_fees">
      <input class="checkbox" id="donation_donor_covers_fees" type="checkbox"> I’ll cover the processing fee - add it to my donation.
    </label>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

Collective

<div class="row-fluid">
  <div class="span12">
    <label class="checkbox" for="donation_donor_covers_fees">
      <input class="checkbox" id="donation_donor_covers_fees" type="checkbox"> I’ll cover the processing fee - add it to my donation.
    </label>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

Presence

<div class="row-fluid">
  <div class="span12">
    <label class="checkbox" for="donation_donor_covers_fees">
      <input class="checkbox" id="donation_donor_covers_fees" type="checkbox"> I’ll cover the processing fee - add it to my donation.
    </label>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

Headliner

<div class="row-fluid">
  <div class="span12">
    <label class="checkbox" for="donation_donor_covers_fees">
      <input class="checkbox" id="donation_donor_covers_fees" type="checkbox"> I’ll cover the processing fee - add it to my donation.
    </label>
  </div>
</div> 
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

Aware

<div class="row-fluid">
  <div class="span12">
    <label class="checkbox" for="donation_donor_covers_fees">
      <input class="checkbox" id="donation_donor_covers_fees" type="checkbox"> I’ll cover the processing fee - add it to my donation.
    </label>
  </div>
</div> 
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

Bootstrap

<div class="row">
  <div class="col-md-12">
    <div class="checkbox">
      <input class="checkbox" style="margin-left:0px" id="donation_donor_covers_fees" type="checkbox">
      <label for="donation_donor_covers_fees">I’ll cover the processing fee - add it to my donation.</label>
    </div>
  </div>
</div>
{% if page.donation_v2.amount_in_cents != 0 %}
  {% hidden_field_tag "donation[amount]", page.donation_v2.confirmation_amount %}
{% endif %}

How to upgrade your theme for Donation (v2) pages

Enable monthly payment and installment payment options on donation pages

How to update a customized theme to support express payment options