Add Paid Memberships To Your Bricks Website

In this tutorial, we’ll walk you through setting up a payment gateway using Fluent Forms with Stripe, completely free, so you can offer paid memberships without hassle. We’ll also walk through how to assign user roles upon successful payment and restrict access to your content accordingly.

If you haven’t watched the first part of this tutorial, do that before jumping in!

Let’s dive in step by step.

Step 1: Review the Existing Setup

Before going any further, make sure your site already has the essentials from the previous setup:

• You have a membership site built with Bricks Builder
• Content is restricted based on user role (e.g., only “Members” can view certain parts)
• A registration form is already in place
• If not, ensure you return to the initial setup before proceeding.

Step 2: Adjust the Registration Form

Initially, we set new user registrations to automatically become “Members”. However, now that we want to charge users for complete access, we need to update their default role.

Here’s how to do it:

• Go to Pages > All Pages
• Edit your registration page with Bricks
• Select the registration form
• Navigate to the “User Registration” settings
• Change the default role from “Member” to “Subscriber“

This ensures anyone registering will have limited access until they make a payment.

Step 3: Enable Payment Module in Fluent Forms

To handle payments, we’ll use Fluent Forms because they now allow Stripe payments within the free version.

• Go to Fluent Forms > Global Settings
• Choose “Payment Settings”
• Enable the Payment Module
• Fill in your business name and address
• Choose currency (e.g., USD or GBP)
• Save your settings

Step 4: Connect Your Stripe Account

• In “Payment Methods”, enable Stripe
• Connect your test or live Stripe account (for testing, you can skip real account connection)
• Once connected, you’re ready to build the payment form

Step 5: Create the Payment Form

Now let’s build the payment form that users will use to pay for membership.

• In Fluent Forms, click “Add New Form”
• Select a blank form
• Add essential fields:
  • Name (first and last)
  • Email
  • Address (optional but helpful for payments)

Now for the payment-specific bits:

• In the “Payment Fields” section:
  • Add a “Payment Item” (e.g., Premium Membership – £10)
  • Add “Payment Method” and “Payment Summary” fields

• Rename your submit button to something clear like “Purchase Membership”
  • Save the form and give it a descriptive name like “Membership Payment”.
  • Step 6: Configure Payment Settings for the Form

Within your form settings:

• Go to “Settings & Integrations”
• Choose a confirmation type (e.g., thank you page or custom URL)
• In “Payment Settings”:
  • Transaction type: Product or Service
  • Map the form fields to customer details:
    • Email: map to email field
    • Name: map to first + last name
    • Address: if collected

Save settings.

Step 7: Automatically Upgrade User Role After Payment

So far, our form accepts payments but doesn’t provide membership access. Let’s fix that with a simple code snippet.

A developer named Taylor Drayson created a useful snippet that updates the user role to “Member” once payment is successful.

Here’s how to use it:

• Install the free FluentSnippets plugin (or use something like Code Snippets)
• Add a new snippet
• Paste in the code snippet provided (the whole snippet is in the original video/article)
• On line 23, change the `$newRole` value to “member” (or whatever role you’ve used)
• Save and activate the snippet

This code listens for a successful payment and then updates the user’s role accordingly.

Important warning: Test this using a test account, not your admin account. If you upgrade an admin to member, you’ll lose admin access!

Step 8: Embed the Payment Form on a Page

Let’s make the form available on a front-end page.

• Go to Pages > Add New
• Name it (e.g., “Purchase Membership”)
• Edit with Bricks
• Add a container, then a shortcode element
• Paste in the form’s shortcode from Fluent Forms

The form will now appear on the page, allowing users to purchase a membership.

Step 9: Restrict Access to Purchase Form

To ensure only logged-in, non-members can see the form:

• Select the shortcode in Bricks
• Add display conditions:
  • User login status is “Logged In”
  • User role is not “Member”

This ensures only users who haven’t paid yet can see the form.

Step 10: Create Payment Management & Receipt Pages

These pages provide users with access to their payment history and receipt information.

• Go to Fluent Forms > Global Settings > Payment Settings
• Copy the shortcodes for:
  • Payment Management
  • Payment Receipt

For each:

• Create a new page in WordPress
• Edit with Bricks
• Paste the shortcode into a shortcode element
• Save the page
• Assign these pages in Fluent Forms under “Pages and Subscription Management”

Final Touches

• Add your new pages (like “Purchase Membership”) to your site’s main navigation
• Test everything thoroughly using a sandbox account before launching live
• Set up email notifications for purchases if you wish

That’s It!

You’ve now set up a fully functional paid membership system using:

• Bricks Builder
• Fluent Forms (Free version)
• Stripe for payments
• Simple code snippet to assign roles

From registration through to payment and membership access, you’ve got a scalable, no-fuss solution.

Happy building!