View Categories

Payment Form Settings

8 min read

 

Payment Form Settings

Payment Form settings are configured individually for each custom payment form you create. These settings control the appearance, behavior, and functionality of standalone payment forms that can be embedded anywhere using shortcodes.

Important: These settings are accessed when editing individual payment forms in Direct → All Payment Forms. Each form has its own independent configuration.

📋 General Tab

Core settings that define what products the form sells and how it processes payments.

Select product(s)
Type: Multi-select dropdown
Required: Yes
Purpose: Choose which WooCommerce products this form will sell
Features:
• Select one or multiple products
• Searchable dropdown interface
• Products must exist in WooCommerce
• Form displays product names, images, and prices
• Total price calculated automatically
Tip: You can create multiple forms for different product combinations or individual products for focused marketing campaigns.
Select a Payment Gateway
Type: Dropdown selection
Required: Yes
Purpose: Choose which payment gateway processes payments for this form
Available Options:
• All active WooCommerce payment gateways
• Each form can use a different gateway
• Gateway must be properly configured
• Only enabled gateways appear in list
Activation for logged in users
Type: Switch (On/Off)
Default: Off
Purpose: Allow logged-in users to use this payment form
When Enabled:
• Logged-in users see simplified form (no email/name fields)
• Uses saved billing information
• Faster checkout process
• Automatic user identification
Note: When disabled, only guest users can see and use the form.
Email Validation Method
Type: Radio selection
Default: Send verification code
Purpose: Choose email verification method for guest users
Verification Options:
Send verification code: Email OTP code for security
Show confirmation popup: JavaScript confirmation dialog
No validation: Only format validation, no verification
Name and Family Field Options
Type: Switch settings
Purpose: Control customer name collection
Options:
Display name and family fields: Show first/last name inputs
Optional name fields: Make name fields optional instead of required

🎨 Style Tab

Visual customization options to make the form match your site’s design and branding.

Form Layout Style
Type: Radio selection
Default: Two Columns
Purpose: Choose the overall layout structure
One Column
Product info and form fields stacked vertically
Two Columns
Product info on left, form fields on right
Title and Description Display Mode
Type: Radio selection
Default: Display above the form
Purpose: Control where form title and description appear
Display Options:
Above the form: Title and description at the top
In the details column: Integrated with product information
Hide: Don’t display title and description
Form Appearance Settings
Purpose: Customize the visual appearance of the form container
Customizable Properties:
Border radius: Corner roundness (default: 0px)
Disable form shadow: Turn off drop shadow effect
Form background color: Container background (default: white)
Title and description color: Text color (default: #333)
Padding: Internal spacing (default: 30px)
Margin: External spacing (default: 0px)
Form max width: Maximum width in pixels (default: 800px)
Payment Button Styling
Purpose: Customize the appearance of the payment button
Button Properties:
Font color: Button text color (default: white)
Background color: Button background (default: green)
Form Elements Control
Type: Checkbox options
Purpose: Hide specific parts of the form for customization
Hide Options:
Disable form title: Hide the form title
Disable form description: Hide the form description
Disable products completely: Hide all product information
Disable product images: Hide product thumbnails
Disable product prices: Hide individual product prices
Disable total price: Hide the total price calculation
Caution: Hiding essential elements like products or total price may confuse customers about what they’re purchasing.

📝 Texts Tab

Customize all text elements displayed in the payment form to match your language and tone.

Form Field Labels
Purpose: Customize labels for input fields
Customizable Labels:
Email field text: Default “Email”
Verify Code field text: Default “Enter Verification Code”
First Name field text: Default “First Name”
Last Name field text: Default “Last Name”
Button State Texts
Purpose: Customize button text for different states
Button Texts:
Disabled Payment Button: Text when form is incomplete (default: “Fill info to continue”)
Normal Payment Button: Text when ready to pay (default: “Pay”)
Connecting Button: Text while processing (default: “Pay”)
Total Price Section Text
Purpose: Customize the label for the total price display
Default: “Total Price”
Examples: “Total Amount”, “Grand Total”, “Final Price”

Form Content Management

Title and Description

Each payment form has a title and description that you can edit using the standard WordPress editor:

  • Title: Entered in the standard WordPress title field
  • Description: Added using the WordPress content editor (rich text)
  • HTML Support: Full HTML and WordPress formatting supported
  • Media Support: Can include images, videos, and other media

Best Practices

Design Recommendations
Consistent Branding: Match colors to your site theme
Clear Messaging: Use descriptive titles and helpful descriptions
Mobile Responsive: Test forms on different screen sizes
Minimal Fields: Only ask for essential information
Trust Signals: Include security badges or guarantees in descriptions
Performance Tips
Image Optimization: Use properly sized product images
Gateway Testing: Test payment processing thoroughly
Form Validation: Ensure proper email verification setup
Caching Compatibility: Test with your caching plugins
Loading Speed: Monitor form loading times

Create a Custom Ultra-Fast Payment Form

To create a custom payment form, go to the Direct / New Payment Form menu.

You can also go to Direct / All Payment Forms and click on the “New Payment Form” button.

 

On the opened page, in the first box enter the payment form title, and in the large editor box enter your desired description for the form.

Genral Options

  1. Select product(s): This setting allows you to select the specific products for which this payment form will be used. You can add or remove products from the list.
  2. Select a Payment Gateway: Here you choose the payment gateway that will process the payments made through this form. The screenshot shows ‘Credit/Debit Cards’ is selected.
  3. Activation for logged in users: When this option is enabled, the form will be active for users who are logged into the site. No information is received from the user because they are already registered.
  4. Email Validation Method: This setting lets you choose how the user’s email address will be validated. The options are sending a verification code, showing a confirmation popup, or only checking the email format without further validation.
  5. Display name and family fields: Enabling this setting adds fields for the user’s name and family name to the payment form.
  6. Optional name and last name fields: If you activate this option, the name and last name fields, which are normally required, become optional, allowing the user to leave them blank.

 

Style Options

  1. Display Quick Payment Form For: This setting controls the layout of the payment form. You can choose between ‘One Column’ or ‘Two Columns’.
  2. Payment Form Title and Description Display Mode: Here you can decide where the form’s title and description will appear. The options are ‘Display above the form’, ‘Display in the details column’, or ‘Hide’ them entirely.
  3. Border radius: This field lets you set the roundness of the corners of the form’s border in pixels (px).
  4. Disable form shadow: This is a toggle switch to turn off the shadow effect around the payment form. The current setting is ‘OFF’, meaning the shadow is enabled.
  5. Form background color: This option allows you to select the background color for the payment form.
  6. Form title and description color: This setting lets you choose the text color for the form’s title and description.
  7. Padding: You can enter a value in pixels (px) to set the inner spacing between the form content and its border.
  8. Margin: This field allows you to set the outer spacing around the payment form in pixels (px).
  9. Pay button font color: This setting is for selecting the color of the text on the payment button.
  10. Pay button background color: Here you can choose the background color of the payment button.
  11. Disable different parts of the form: This section provides several checkboxes to disable specific elements of the form, such as the form title, description, products, product images, product prices, and the total product price.
  12. Form max width: You can set the maximum width of the payment form in pixels (px).

Texts options

  1. Email field text: This field lets you customize the placeholder text for the email input field on the form.
  2. Verify Code field text: Here you can change the text for the verification code input field.
  3. First Name field text: This option allows you to edit the placeholder text for the first name input field.
  4. Last Name field text: You can customize the placeholder text for the last name input field here.
  5. Disabled Payment Button Text: This setting lets you set the text that appears on the payment button when it is disabled, typically before the user has entered all required information.
  6. Normal Payment Button Text: Here you can change the text that is displayed on the payment button when the form is ready for submission.
  7. Payment Button Text While Connecting to Gateway: This field allows you to customize the text shown on the button while the form is connecting to the payment gateway.
  8. Total Price Section Text: You can edit the label text for the section that displays the total price of the products.

Preview – Guest User – Two Columns

 

Preview – Guest User – One Column

 

Preview – Logged in Users