Payment gateway configuration in Wordpress - Mini Project: Build & Apply

Payment gateway configuration

📖 Scenario: You are building a WordPress plugin that adds a simple payment gateway configuration form to the admin dashboard. This form will allow the site admin to enter and save the payment gateway API key and enable or disable the gateway.

🎯 Goal: Create a WordPress plugin that registers a settings page with a form. The form should have a field for the API key and a checkbox to enable or disable the payment gateway. The settings should be saved and loaded correctly.

📋 What You'll Learn

Create a settings page under the WordPress admin menu

Add a text input field for the payment gateway API key

Add a checkbox to enable or disable the payment gateway

Save and retrieve these settings using WordPress options API

💡 Why This Matters

🌍 Real World

Many WordPress sites need to configure payment gateways for e-commerce or donations. This project shows how to build a simple plugin to manage such settings safely.

💼 Career

Understanding WordPress plugin development and the Settings API is essential for WordPress developers working on custom plugins or themes that require configuration options.

1

Create plugin header and register settings

Create a plugin file with the header comment for WordPress. Then register two settings called payment_gateway_api_key and payment_gateway_enabled using register_setting inside a function hooked to admin_init.

Wordpress

<?php
/*
Plugin Name: Simple Payment Gateway
Description: Adds payment gateway configuration.
Version: 1.0
Author: Your Name
*/

// Your code here

Need a hint?

Use register_setting inside a function hooked to admin_init to register your settings.

2

Add admin menu page for settings

Add a function called spg_add_admin_menu that uses add_options_page to add a menu item named Payment Gateway under the Settings menu. Hook this function to admin_menu.

Wordpress

<?php
/*
Plugin Name: Simple Payment Gateway
Description: Adds payment gateway configuration.
Version: 1.0
Author: Your Name
*/

function spg_register_settings() {
    register_setting('spg_options_group', 'payment_gateway_api_key');
    register_setting('spg_options_group', 'payment_gateway_enabled');
}
add_action('admin_init', 'spg_register_settings');

// Add admin menu page
// Your code here

Need a hint?

Use add_options_page inside a function hooked to admin_menu to add the settings page.

3

Create the settings page form

Define the function spg_settings_page that outputs a form with method post and action options.php. Inside the form, call settings_fields('spg_options_group') and do_settings_sections('spg-settings'). Add a text input named payment_gateway_api_key with the saved value from get_option('payment_gateway_api_key'). Add a checkbox named payment_gateway_enabled that is checked if get_option('payment_gateway_enabled') is truthy. Add a submit button labeled Save Changes.

Wordpress

<?php
/*
Plugin Name: Simple Payment Gateway
Description: Adds payment gateway configuration.
Version: 1.0
Author: Your Name
*/

function spg_register_settings() {
    register_setting('spg_options_group', 'payment_gateway_api_key');
    register_setting('spg_options_group', 'payment_gateway_enabled');
}
add_action('admin_init', 'spg_register_settings');

function spg_add_admin_menu() {
    add_options_page('Payment Gateway', 'Payment Gateway', 'manage_options', 'spg-settings', 'spg_settings_page');
}
add_action('admin_menu', 'spg_add_admin_menu');

// Create settings page form
// Your code here

Need a hint?

Use get_option to get saved values and output a form with text input and checkbox inside spg_settings_page.

4

Ensure settings are saved and accessible

Add code to sanitize and save the payment_gateway_api_key as a string and payment_gateway_enabled as a boolean when the form is submitted. Use the sanitize_text_field function for the API key. This is handled automatically by register_setting but add a sanitization callback function called spg_sanitize_options and pass it as the third argument to register_setting. The function should accept an array with keys payment_gateway_api_key and payment_gateway_enabled and return the sanitized array.

Wordpress

    
        Payment Gateway Settings
        
            
            
                
                    API Key
                    " class="regular-text" />
                
                
                    Enable Gateway
                     />
                
            
            
        
    
    <?php
}

// Add sanitization callback
// Your code here

Need a hint?

Use sanitize_text_field for the API key and a custom function to convert the enabled checkbox value to 1 or 0. Pass these as sanitize_callback in register_setting.