Create Third-Party Settings in SureMembers

This guide explains how developers can add custom settings sections to the SureMembers Membership edit screen using supported hooks and a React component.

Prerequisites

Before you start, make sure you have:

• Basic knowledge of WordPress plugin development
• Access to add PHP hooks in your plugin
• Basic understanding of React
• SureMembers is installed and active

What This Integration Allows

Using SureMembers hooks, your plugin can:

• Add a custom settings section to a Membership
• Show custom fields inside the Membership editor
• Load saved values when editing a Membership
• Save values when the Membership is updated

Hooks Used by SureMembers

SureMembers provides three hooks for third-party integrations.

Hook	Type	Purpose
suremembers_third_party_sections	Filter	Register your settings section
suremembers_get_membership_data	Filter	Load saved data
suremembers_after_submit_form	Action	Save data

Step 1: Register a Settings Section (PHP)

First, register your settings section so it appears in the Membership editor.

add_filter( 'suremembers_third_party_sections', function( $sections ) {    $sections['my_plugin_settings'] = [
        'title'     => __( 'My Plugin Settings', 'my-plugin' ),
        'icon'      => 'Settings',
        'priority'  => 20,
        'component' => 'MyPluginSettings',
    ];    return $sections;
} );

Notes

• The array key my_plugin_settings is your section ID
• The component value must match your React component name

Step 2: Load Saved Membership Data (PHP)

When a Membership is opened, SureMembers asks plugins for saved data.

add_filter( 'suremembers_get_membership_data', function( $data, $post_id ) {    $saved_data = get_post_meta(
        $post_id,
        '_my_plugin_membership_settings',
        true
    );    if ( ! isset( $data['third_party_data'] ) ) {
        $data['third_party_data'] = [];
    }    $data['third_party_data']['my_plugin_settings'] =
        is_array( $saved_data ) ? $saved_data : [];    return $data;}, 10, 2 );

Notes

• Data must be added under third_party_data
• The key must match your section ID

Step 3: Save Data When Membership Is Saved (PHP)

When the user clicks Save, SureMembers sends all data back.

add_action( 'suremembers_after_submit_form', function( $post_id, $post_data ) {    $my_data =
        $post_data['third_party_data']['my_plugin_settings'] ?? [];    if ( empty( $my_data ) ) {
        delete_post_meta(
            $post_id,
            '_my_plugin_membership_settings'
        );
        return;
    }    update_post_meta(
        $post_id,
        '_my_plugin_membership_settings',
        [
            'enabled' => ! empty( $my_data['enabled'] ),
        ]
    );}, 10, 2 );

Best Practices

• Always sanitize user input
• Store data as a single array
• Remove post meta if no data exists

Step 4: Create the React Component (JavaScript)

This component controls what is shown inside the Membership editor.

(function () {    window.suremembers_third_party_components =
        window.suremembers_third_party_components || {};    const { useState, useEffect } = window.React;    const MyPluginSettings = ({ sectionData, updateData }) => {        const [ enabled, setEnabled ] =
            useState( sectionData?.enabled || false );        useEffect( () => {
            setEnabled( sectionData?.enabled || false );
        }, [ sectionData ] );        return React.createElement(
            'label',
            null,
            React.createElement( 'input', {
                type: 'checkbox',
                checked: enabled,
                onChange: e => {
                    setEnabled( e.target.checked );
                    updateData({
                        enabled: e.target.checked
                    });
                },
            }),
            ' Enable feature'
        );
    };    window.suremembers_third_party_components.MyPluginSettings =
        MyPluginSettings;    window.dispatchEvent(
        new CustomEvent(
            'suremembers_third_party_component_registered'
        )
    );})();

Important

• The component name must match the PHP registration
• Call updateData() whenever values change
• Always dispatch the registration event

Step 5: Enqueue the Script (PHP)

Load your JavaScript file on SureMembers admin pages.

add_action( 'admin_enqueue_scripts', function() {    if ( ! wp_script_is( 'suremembers_posts', 'enqueued' ) ) {
        return;
    }    wp_enqueue_script(
        'my-plugin-suremembers',
        plugins_url( 'suremembers.js', __FILE__ ),
        [ 'suremembers_posts', 'react' ],
        '1.0',
        true
    );}, 99 );

Why Priority 99 Matters

SureMembers registers its scripts late.
Using priority 99 ensures your script loads after SureMembers.

Data Flow Overview

1. User opens the Membership edit screen
2. SureMembers loads Membership data
3. Your plugin injects saved data
4. React renders your settings section
5. User updates values
6. User clicks Save
7. SureMembers triggers save action
8. Your plugin stores post meta

Available Icons

The icon field accepts any Lucide icon (https://lucide.dev/icons/) name.

Common options:

• Settings
• Lock
• Users
• Shield
• Star
• Zap

When Should You Use This?

Use this integration if your plugin needs membership-specific settings that change per Membership in SureMembers.

Summary

This integration allows third-party plugins to extend SureMembers in a clean and supported way.

You control:

• The settings UI
• How data is stored

SureMembers handles:

• Rendering
• Saving
• State management

Following this guide ensures your integration remains stable and future-ready.