Multi-Step Membership Flow

The new multi-step membership flow for ABC Friends is custom-built based on the multi-step Nationbuilder v2 Donation core functionality.

#Layout Tags

The Multi-Step Membership Flow is activated via a page tag - membership_donation - on any donation_v2 or signup page.

Similarly - for the Student Memberships we redirect users to dedicated signup pages - these all have special layout changes as well which are activated via a page tag - membership_signup - on any signup page.

Page Load / Initialization

When the page loads with the special template for the Multi-Step Membership Flow - we initialize a couple variables and states for the current page.

Firstly - the template will check the current underlying-action-pages.md page slug and based on the state-type-and-period.md format - we will initialize the values for the State, Membership Type, and Membership Period dropdowns on Step 1 to match.

Step 1. Membership Details

There are three dropdowns on the first slide State, Membership Type, and Membership Period. There is also a Payment amount - which gets set and re-calculated depending on the current selections for each dropdown.

When valid selections have been made for the State, Membership Type, and Membership Period dropdowns, the "Continue" button at the bottom of the slide will be enabled - allowing users to progress to Step 2.

Special scenarios

If a user selects "Outside Australia" as their State - they will not be able to advance through the membership flow - a message "Please select your State to continue" will be displayed.

If a user selects "Enduring" as their Membership Type - the Membership Period can only be "Lifetime" - as these memberships are permanent.

If a user selects "Student" as their Membership Type - the Membership Period can only be "1 Year" - and the Continue button at the bottom of the page - which usually progresses users through the flow for payment - instead redirects the user to a special signup page - as 1 Year Student memberships are free and do not require any form of payment.

Step 2. Personal & Contact Details

When the user progresses to Step 2 - we add the Membership Details summary at the top of the form - reminding users which selections they made in Step 1.

On Step 2, it collects information about the user signing up and making the payment for the membership. This includes personal details like the user's given and family name. It also includes contact like phone numbers (in formatted inputs - #### ### ###), and email address. For mailing and billing purposes we also collect a postal address (Street, Town, Postcode, State, and Country). Lastly - there are a couple opt-in/opt-out checkboxes here regarding how we use this information and letting ABCFriends contact or email the user.

When the user clicks the "Continue" button at the bottom of the slide - we validate the mandatory fields inputs (indicated by the use of an asterisk (*) in the field label. If there are any invalid inputs - the page will scroll up to the first invalid input. Users will then be able to click "Continue" to re-validate the slide. If the user clicks the "Continue" button and the slide is validated successfully - the user will proceed to Step 3.

Step 3. Payment Details

On Step 3 - the user will see the Credit Card, Expiration Date, and Security Code inputs. These inputs are validated by Stripe as the user enters inputs.

Beneath the credit card fields we display the "Total Amount" - which is a calculation of the cost that the user will be charged upon clicking the "Process Payment" button which is immediately beneath.

There is also a "Back" button that the user can click if they want to modify their selections or details before paying.

Special scenarios

If the member has selected a Membership Period of "1 Year" or "3 Years" - they will be given the optional selection of adding a one-time-donation.md to their payment. The checkbox will be unchecked by default - but if the user checks it - a "Donation Amount" field will be added to the form - accepting a dollar value.

NOTE: These special One-time Donations are not presented as an option for Enduring or Recurring Memberships.

If the user adds a one-time donation - the amount will be displayed below the input, and the Total amount value at the bottom of the form will be re-calculated based on the following formula: