Stripe Conditional Fields Visibility

Overview

The new Stripe Plans field support enhances the functionality of Ultimate Member forms by enabling the display or concealment of groups of Stripe Plans based on conditions set within the Ultimate Member Form. This feature provides greater flexibility in designing forms and tailoring user experiences, ensuring that Stripe plans are presented contextually and efficiently.

Setup

To set up the Stripe plans in a grouped section is almost the same step as how you add a Stripe plan to a register form. Go to wp-admin> Ultimate Member> Forms> Edit a Register Form then click on the "+" plus sign button to add a new field. The fields manager will appear, this is where you need to select the "Stripe Plans (Grouped Section)" field. It allows you to set up a field in your Stripe integration for users to select their subscription plan. This field is particularly useful if you offer multiple subscription options.

Once you have selected the field, you can now configure the following settings for the "Stripe Plans (Grouped section) Field":

  • Title: This is the title of the field, which in this case is "Business." It helps the admin understand what the field is for, only seen in the back end.
  • Meta Key: This is the key used to store the selected plan in your database. In this case, it's "business_plan."
  • Label: This is a label that the user will see on the front end. In this case, it's "Select your plan."
  • Help Text: This provides additional instructions or guidance to users when they are selecting a plan. 
  • Icon: This allows you to add an icon to the field for visual representation. You can choose an icon or choose to have no icon. You can pre-fill the field with a default value before the user enters their own value. Enter the value in the field, if you prefer not to have a default value, simply leave it blank
  • Placeholder: This is the text inside the field that guides users in the front end.
  • Stripe Plans Type: This specifies the type of plan available, which is "Multiple Plan Options," indicating that users can choose from more than one plan.
  • Stripe Prices: This shows the available plans and their corresponding prices or the imported prices from your Stripe account, you can add here the prices you want to group by clicking on the "[+] Add New Price" button, the prices are listed in the drop-down list where you can select the imported Stripe plan prices.
  • After configuring the settings for your field, you need to create conditions for your fields. To do this, click on the "+Add conditional fields support" link.

Explanation for Conditional Fields Support:

Conditional field support allows you to show or hide certain fields based on the user's selection or input in a parent field. This feature enhances the user experience by dynamically displaying relevant options based on their choices.

  • Condition Operators:
    • Use equals to or not equals when the parent field has a single option. This means that the child field will be displayed only if the selected value matches or does not match the specified value.
    • Use greater than or less than when the parent field is a number. This means that the child field will be displayed only if the entered number is greater than or less than the specified value.
    • Use contains when the parent field has multiple options. This means that the child field will be displayed if the selected value contains the specified value.
  • Adding a New Rule button: You can add a new conditional rule by specifying the condition operator and the value to compare against.
  • Resetting Rules button: You can reset all conditional rules to start fresh or remove existing conditions.

Example: 

The goal is to display different sets of Stripe prices based on the user's selection of the account type (either "personal" or "business"). This is achieved using conditional logic to show the prices for the Personal Plan if the account type is chosen as personal, and the prices for the Business Plan if the account type is chosen as business.

Setup:

  1. Account Type Field:
    • Setup or add new a Radio field with options/choices "Business" and "Personal" for the account type selection. In the examples below, the Default Value option is set to "Personal" so the displayed prices will be the Personal Plan Prices.
  2. Stripe Plan (Grouped Section) Fields:
    • Create two separate "Stripe Plans (Grouped Section)" fields, one for the "personal" account type and one for the "business" account type. Inside each grouped section, fields are created for the respective plan options or prices(Personal Plan and Business Plan).
  3. Conditional Logic:
    • For the "Personal" Stripe Plans (Grouped Section) Field:
      • A conditional rule is set up with the Account Type field as the parent field.
      • The "equals" operator is used to check if the selected value is "personal."
      • If the condition is met, the Personal Plan prices/options are displayed.
    • For the "Business Plan" grouped section:
      • A similar conditional rule is set up, but this time checking if the selected value is "business."
      • If the condition is met, the Business Plan prices/options are displayed.

Conditional logic is used to dynamically display the appropriate set of prices based on the user's selection of the account type. This enhances the user experience by showing only relevant information and options, streamlining the form-filling process. Once the users fill up their registration and users selecting "Personal" from the account type, will see the Personal Plan prices, while users selecting "Business"  from the account type will see the Business Plan prices, ensuring they can easily choose the plan that fits their needs.