Show donation amount on each step of the donation process in NationBuilder

Reassure your supporters by making it easy for them to see how much they are donating right throughout the process.

Show donation amount on each step of the donation process in NationBuilder
NOTE: You'll need to create a custom theme for your NationBuilder site if you don't already have one.

We work with inspiring clients leading important causes who are often powered primarily by small indiviudal donations. It’s critical to make the donation process as smooth and simple as possible to maximise the support those organisations receive to continue their vital work.

One significant improvement we pioneered was to create a staged process for donation forms on all our client websites. The key enhancement outlined in this tutorial is to ensure the exact contribution amount is visible to the donor through each step of the donation process. This is important so the donor feels confident that their chosen contribution amount is correct as they enter their credit card details on the final stage of confirming their donation.

Relevant Files

  1. staged-donations.js
  2. a small update to pages_show_donation_wide.html

Show the donation amount on each step of your staged donation form

STEP 1

Add the following line of code to your pages_show_donation_wide.html template directly beneath the <div class="progress-stages"> line:

<div class="center lead"><strong id="chosen_donation_amount"></strong></div>

STEP 2

Update the version of staged-donations.js in your theme to ensure you are using the updated and extended file at this link: https://github.com/code-nation/tutorials/blob/master/show_donation_amount_on_each_step_of_your_staged_donation_form/staged-donations.js

What’s different in the new version of **staged-donations.js**?

If you understand a little bit of code and you’re interested in knowing the key differences in the latest version of staged-donations.js, the changes required to show the donation amount on each step of the staged donation form are:

  1. Add the new showDonationAmount function:

    this.showDonationAmount = function(donation_btn_amount){ var donate_value = $(‘#donation_amount_other’).val() == “” ? donation_btn_amount : parseFloat($(‘#donation_amount_other’).val()); $(‘#chosen_donation_amount’).text(“Donation amount: $” + donate_value); }

  2. Add the following two lines of script inside the updateProgressStages function:

    var donation_btn_amount = $(‘.progress-stage input[type=”radio”]:checked’).length == 0 ? 0 : parseInt($(‘.progress-stage input[type=”radio”]:checked’).val()); StagedDonations.showDonationAmount(donation_btn_amount);

  3. Add the following two lines of script inside the $('.progress-stages .radio').each(function(){$(this).click(function(event){ code block:

    var donation_btn_amount = parseInt($(this).prev(‘input[type=”radio”]’).val()); StagedDonations.showDonationAmount(donation_btn_amount);


Have any questions? We're always happy to help
Get in touch on email: info@codenation.com