NationBuilder - How to upgrade donation code

In October 2025, NationBuilder has repleased upgraded donation page changes. These changes added support for new features:

Direct debit payments (GBP processing only)
One-time, monthly, and annual donation frequency options on one form
Single-submit express payment options (Google Pay, Apple Pay, browser-saved payment methods)
Streamlined employer and occupation submissions
Log into GitHub and proceed to follow the steps below.

NationBuilder documentation on upgrading:

This upgraded added much needed support for new functionality - but also unintentionally introduced some bugs into our donation code. Follow the steps below to upgrade a NationBuilder Public Theme site split before 17 February 2026 (All sites after that should be working fine as that is when the public theme was updated).

Our Public Theme donation templates are staged and our sites use Bootstrap v4 - so there are a combination of changes we need to apply.

#1. Add comments to irrelevant and deprecated code

Update the following message to the current date. We will paste this at the top of deprecated, un-used, and irrelevant SCSS files - if they exist.

_z_staged-donations.scss ( note the "-" in "staged-donations" - different from "staged_donations" )
_staged-dontations-v2.scss ( note the spelling error - "dontations" vs "donations" )

/*
 * ⚠️ DEPRECATION NOTICE ⚠️
 * -----------------------------------------------------------------------
 * DATE ADDED: 17 February 2026
 *
 * STATUS: This file is flagged for removal.
 *
 * 🚨 DO NOT MODIFY: Any changes made here will likely be lost.
 * Please migrate styles to the new architecture instead.
 *
 * 🗑️ EXPIRATION: If you are reading this after 17 February 2027,
 * this file has officially overstayed its welcome. Please delete
 * it and remove any remaining imports.
 * -----------------------------------------------------------------------
 */

Paste this into the top of the deprecated, un-used, and irrelevant Liquid HTML files - if they exist.

_z_pages_show_donation_v2_wide_form_upgrade.html
_z_pages_show_donation_v2_wide_form_wip.html

2. Create new require files

_z_template_2_panel.scss

Create a new file in the current theme: _z_template_2_panel.scss with contents:

NOTE: The color variables at the top will likely need to be tweaked for your given theme:

/*
*
* _z_template_2_panels.scss
*
*/

// ************************************* //
// ************ VARIABLES ************** //
// ************************************* //

// Extracted Hardcoded Colors
$donation-hover-bg:       rgba(255, 192, 0, 0.5) !default;
$donation-hover-text:     #303030 !default;
$donation-active-bg:      #ffc000 !default;
$donation-active-text:    #ffffff !default;
$donation-gradient-rgb:   rgba(243, 242, 242, 0) !default; // Used for RGBA transparency

// Existing Logic Variables
$panel-form-wrapper-bg-color:                 $primary !default;
$panel-form-wrapper-h4-color:                 $light !default;
$panel-form-wrapper-text-color:               $light !default;
$panel-form-wrapper-btn-primary-action-color: $secondary !default;
$panel-form-wrapper-btn-secondary-acion-color: $tertiary !default;

// ************************************* //
// *********** BEGIN 2-PANEL *********** //
// ************************************* //

.left-panel {
  display: flex;
  flex-direction: column;

  .social-share-container {
    margin-top: auto !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

@media (min-width: 992px) {
  .left-panel, .right-panel {
    margin: inherit;
  }
}

.panel-form-wrapper {
  background-color: $panel-form-wrapper-bg-color;

  h4 { color: $panel-form-wrapper-h4-color; }

  p, span, label, strong {
    color: $panel-form-wrapper-text-color;
  }

  .btn-primary-action {
    @include button-variant($panel-form-wrapper-btn-primary-action-color, $panel-form-wrapper-btn-primary-action-color);
    color: $primary !important;
  }

  .btn-secondary-action {
    @include button-variant($panel-form-wrapper-btn-secondary-acion-color, $panel-form-wrapper-btn-secondary-acion-color);
  }
}

.right-panel {
  img {
    max-width: 100%;
    height: auto;
  }

  &.page-has-feature {
    z-index: 1;
    margin-top: 1rem;

    @include media-breakpoint-up(lg) {
      margin-top: -375px;
    }
  }
}

.panel-form-detail-wrapper {
  background: $gray-300;
  border-radius: 5px;

  .panel-form-detail-container {
    position: relative;

    .panel-form-detail-wrapper-overlay {
      position: absolute;
      width: 100%;
      height: 160px;
      bottom: 0;
      z-index: 1;

      // Using the extracted RGB variable for the gradient
      background-image: linear-gradient(top, $donation-gradient-rgb 0%, $gray-300 100%);
      background-image: -webkit-linear-gradient(top, $donation-gradient-rgb 0%, $gray-300 100%);
      background-image: -ms-linear-gradient(top, $donation-gradient-rgb 0%, $gray-300 100%);
    }

    .panel-form-detail-signer {
      background-color: $white;
      border-radius: 5px;
      color: $gray-800;
      font-size: 0.875rem;
    }
  }
}

.panel-form-divider {
  background-color: $gray-500;
  height: 1px;
  width: 100%;
}

.progress {
  height: 12px;
  border-radius: 6px;

  &-bar {
    background-clip: border-box;
    background: -webkit-linear-gradient(left, $progressbar-0, $progressbar-100);
    background: linear-gradient(to right, $progressbar-0, $progressbar-100);
  }
}

// ****************************************** //
// ************* BEGIN DONATION ************* //
// ****************************************** //

.page-pages-show-donation-wide,
.page-pages-show-donation-v2-wide {

  .radio-inline {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;

    label.radio {
      background: $white !important;
      border-radius: 30px !important;
      border: 1px solid $white !important;
      color: $gray-700 !important;
      cursor: pointer !important;
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        background: $donation-hover-bg !important;
        color: $donation-hover-text !important;
      }
    }

    input[type="radio"]:checked + label {
      color: $donation-active-text !important;
      background-color: $donation-active-bg !important;
      border-color: $donation-active-bg !important;
    }
  }

  .custom-control-inline {
    width: 50% !important;
    margin: 0 !important;
    padding: 15px !important;

    .custom-control-label { margin: 0 !important; }
  }

  .custom-radio {
    .custom-control-label::before {
      display: block !important;
      position: absolute !important;
      left: -9999px !important;
    }
    .custom-control-input:checked ~ .custom-control-label::after {
      background-image: none !important;
    }
  }

  .progress-stages .progress-stage .btn-process-donation {
    border: none !important;
    font-size: unset !important;
  }

  #donation_card_expires_on_1i {
    margin-bottom: 1rem;
  }
}

3. Copy and paste in new versions of files

For the most part the following files should just be copy-paste upates. However - please do proceed with caution. It is recommended to do a code-diff between your site's current file and this new updated version of the file. These sites may have been customized since splitting from the Public Theme - in which case you won't want to accidentally remove any client specific functionality.