LWC - Setting Up and Configuring the Membership Information Card

The Membership Information Card is a robust Lightning Web Component (LWC) that allows organizations to surface critical membership data within Member Portal sites.

This component replaces the legacy Visualforce Membership Snapshot, offering a modern look and feel, improved performance, and deeper integration with current Universal Order Architecture (UOA) processes. It serves as a central hub where members can quickly view their status and either join, renew, or pay pending balances.

Whether you are a new member looking to join, an existing member needing to pay a balance, or a current member ready to renew, this dynamic component adapts to your unique situation.

Key Features

  1. Smart Action Button Logic

The core strength of the Membership Information Card is the dynamic "smart" action button. The component evaluates the user's Account and Membership History records in real-time to display the most appropriate action:

User Scenario

Button Label

Behavior

The Account has at least one submitted, unpaid order (Regular or Proforma) relevant to the membership context, and it is not hidden from the portal.

Pay Balance

Redirects the user to the configured Checkout page to settle the outstanding balance.

The Account is a current member or within the reinstate period, AND a billing history (Proforma) order exists, OR the AlwaysAllowMembershipRenewal custom setting is enabled.

Renew

Redirects the user to the configured Join/Renew page to begin the renewal process. Critical parameters (like Membership Type ID) are passed to the page to pre-select options.

The membership type is flagged as "Auto Renew Required."

(No Button)

The action button is suppressed entirely. Membership information still displays, but the user cannot manually initiate an action.

The user does not fall into any of the above categories (not a current member, not in the reinstate window, no pending unpaid orders).

Join

Redirects the user to the configured Join/Renew page to begin a new join scenario.

 

  1. Support for Concurrent Memberships

The LWC supports accounts that hold multiple active, concurrent memberships. If an account has two or more active, linked memberships, the card display is effectively duplicated. Users can navigate between their different memberships directly within the card interface, allowing them to manage each membership independently. Concurrent memberships are distinguished with a specialized 'concurrent' badge.

 

Configuration within Experience Builder

Administrators can configure the Membership Information Card directly within Salesforce Experience Builder.

  1. Navigate to Experience Builder for your Member Portal.

  2. Locate the Membership Card component in the standard components list.

  3. Drag and drop the component onto the desired page (e.g., Home page or a dedicated Membership page).

Component Properties

You can configure the following properties in the properties panel:

  • Join/Renew Page URL: Specify the relative URL (e.g., /s/join-renew) of the page that hosts the Join/Renew process. This can be the legacy nc__joinrenew page or a custom page hosting a Flow.

  • Checkout Page URL: Specify the relative URL (e.g., /s/checkout) of the order checkout page. This is required for the "Pay Balance" functionality.

  • Wizard Style: A "Wizard Style" parameter (send as "Simple" or "Complex") can be sent as a Simple or Complex to the J/R flow.

  • Always Allow Membership Renewal: If enabled, this checkbox overrides the date/day based logic and allows renewal as long as the account Member field is "True" or they are in the reinstatement period.

 

How Join/Renew Parameters are Passed via URL

When user clicks Join or Renew, the LWC navigates to the configured page and appends critical contextual data as URL parameters. These parameters are essential for the Join/Renew flow logic to function correctly.

Common parameters include:

  • Account ID: The Salesforce ID of the Account associated with the membership.

  • Membership ID: The Salesforce ID of the Membership record (if it is a renewal).

  • Membership Field API Name: Used to identify the lookup field on the Account that links concurrent memberships.

 

Important Considerations

Deferred/Proforma Orders Handling

The renewal logic in the LWC has been optimized to work with Proforma (Unified Order Architecture/UOA) orders.

  • When a staff user generates renewal proforma orders in bulk side, the new Membership LWC card will display a Pay Balance button (provided the order is not flagged as "Hidden from Portal").

  • Clicking Pay Balance navigates the user to the Order Checkout page to pay the Proforma balance.

  • The card avoids creating duplicate "Renewal Cart" orders if an unpaid proforma order already exists in the backend for that renewal period.