How to update Nation Signup page and theme templates

On September 8, 2017, NationBuilder will begin the next phase in a transition to using Stripe to bill for nations. Stripe is a modern payment toolset that enables secure collection of payment information and distribution of funds. As part of this upgrade, we have updated the following public themes to take credit card information on Nation Signup pages with Stripe:

  • Action
  • Aware
  • Bootstrap
  • Cityzen
  • Collective
  • Headliner
  • Presence
  • Publish
  • Verve
  • Victory Again

However, any Nation Signup pages with a custom page template or that use a theme with a custom pages_show_nation_signup_wide.html theme file are not yet adding payment info to Stripe and must be updated. You can make the required changes at either the theme or page level.

Until you make these changes, the page can only be archived or deleted and will not be able to accept new networked nation signups. Similarly, you will be unable to switch your site to a theme with a custom pages_show_nation_signup_wide.html theme file until the required changes are made if the site has a visible Nation Signup page.


Steps to take

  1. Find the public theme your custom theme was cloned from below to determine the changes you must make to your page template or pages_show_nation_signup_wide.html theme file.

  2. To edit a theme that is not currently associated with a site, go to Website > [Site Name] > Theme > Switch to a custom theme and click the Edit button next to the theme you want to edit. You will find the pages_show_nation_signup_wide.html theme file under the Templates menu.

  3. Locate the code block in the “Old” section, paste in the code block in the “New” section, and click the Save and publish changes button. If your nation is connected to Dropbox, you can edit theme and page template files there.

  4. Once you have made and published the required changes, return to the affected page’s basic settings and choose an option from the Status dropdown that will allow you to resume taking nation signups on your website.

Code to replace

Action

Old:

New:

Bootstrap

Old:

New:

Cityzen

Old:

New:

Presence

Old:

New:

Aware, Collective, Headliner, Publish, Verve, Victory Again

Old:

New:


Styling

When rendered on the page, the {% payment_field "card" %} field will ask for credit card number, expiration date, CVC, and billing postal code in a single input. This guide does not cover making styling changes to this input. In order to make this transition as easy as possible, we are automatically detecting the input styles from the rest of the form:

Input styles

If you want to specify the error container separately, you can add an error-container variable to the tag like this:

{% payment_field "card", error-container:".card-error" %}

If no error container is defined, errors will appear in the default location beneath the input field.

Webfonts (such as Google Fonts) will not be reflected on the field labels using this approach. Please contact help@nationbuilder.com for advice on handling this.

Be the first to comment

Wrap code snippets in <code></code> tags.
Please check your e-mail for a link to activate your account.

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.