Whether your Donation v2 page is configured for a certain campaign where there is a minimum donation amount requirement, or you want to encourage only higher-value donations on certain pages, implementing minimum donation amounts is possible on Donation v2 pages via template edits!
⚠️ This guide is intended for Donation v2 page using NationBuilder Payments.
Editing your page template
First, go to the Donation v2 page you’d like to implement a minimum donation amount on, and click into the Template tab. If a custom template has not been created, click ‘Create a custom template’.
Next, use the integrated “find” tool within the template editor to find {{ page.donation_v2.amount_other }} within the code:
Copy this text:
{{ page.donation_v2.amount_other }}Paste what you copied into the text box at the top of the code editor next to the Find button.
Click Find
The editor will jump down to the line in the code where
{{ page.donation_v2.amount_other }}appears:
⚠️ This line of code will be found on a different numbered line depending on your website theme, or if you’ve previously made code customizations.
Next, replace {{ page.donation_v2.amount_other }} with the following code:
<div class="input-group donation-other-input-container" data-focus-target="donation_amount_other_input">
<div class="input-group-prepend">
<span class="input-group-text currency-symbol">$</span>
</div>
<input id="donation_amount_other_input" type="text" name="donation[amount]" class="form-control text nb_donation_v2_amount" pattern="^(1(\.\d{1,2})?|[2-9](\.\d{1,2})?|[1-9]\d+(\.\d{1,2})?)$" oninvalid="this.setCustomValidity('This amount is lower than the $1 minimum')" onchange="this.setCustomValidity('')">
</div>
Code before editing:
Code after editing:
Customizing the sample code
Changing the minimum donation amount
In the above code example, the minimum donation amount is set to $1.00, so the page will not be able to be submitted when a value lower than 1.00 is entered in the amount field. The portion of the code that controls the minimum amount is:
pattern="^(1(\.\d{1,2})?|[2-9](\.\d{1,2})?|[1-9]\d+(\.\d{1,2})?)$"
This type of pattern attribute uses a “regular expression” (commonly called regex) to enforce numeric validation in an HTML input field.
Specifically, it is a: "Regex-based Numeric Range Validation Pattern"
This ensures that user input adheres to a specific numeric range (in this example, ≥ 1.00) while allowing for optional decimal precision.
Explanation of our example: pattern="^(1(\.\d{1,2})?|[2-9](\.\d{1,2})?|[1-9]\d+(\.\d{1,2})?)$"
1(\.\d{1,2})?→ Matches 1, 1.0, or 1.00 (allowing for optional decimal places)[2-9](\.\d{1,2})?→ Matches whole numbers 2-9, with optional decimal places (e.g., 2.5, 9.99)[1-9]\d+(\.\d{1,2})?→ Matches numbers 10 and above, with optional decimal places
This ensures that the minimum donation amount is $1.00, rejecting anything below it.
Changing the error message
If you attempt to donate less than $1 on that page, you'll see that an error reading This amount is lower than the $1 minimum appears.
You can see the error code written into the code in the following snippet:
oninvalid="this.setCustomValidity('This amount is lower than the $1 minimum')" onchange="this.setCustomValidity('')">
You can change the wording of the error message within the code to the wording of your choosing. Here’s an example of what the error message will look like when an amount less than $1.00 is entered on the donation page:
Now your organization can configure a custom minimum donation amount, with specific error messaging according to your organization's preferences.
We hope this guide has been helpful. Happy fundraising! 🎉
Please reach out to our support team at [email protected] if you have any questions or need help implementing these changes on your Donation v2 pages.