WPRuby Logo WPRuby
Log in Get started
  • Plugins
  • Docs
  • Blog
    • eCommerce
    • Plugins
    • How to
    • Coding
  • Affiliate Area
  • Contact Us
  • About Us
  • Plugins
  • Docs
  • Blog
    • eCommerce
    • Plugins
    • How to
    • Coding
  • Affiliate Area
  • Contact Us
  • About Us

WPRuby Account

4
  • How to upgrade your license
  • How to renew your license
  • How to change your plugin’s license domain
  • How to cancel your subscription.

WooCommerce Australia Post Shipping Method Pro

17
  • Installation
  • How to activate your plugin license
  • How to Upgrade from Free to Pro
  • Australia Post Zone Settings
  • Australia Post Global Settings
  • Australia Post Tracking
  • Pre-Paid Satchels
  • How to Mark a Product to be Shipped individually?
  • TroubleShooting and Common issues
  • Available WordPress Actions and Filters
  • [Labels Pro] How to connect the plugin with your MyPost Business account
  • [Labels Pro] How to connect Labels Pro with your eParcel account
  • [Labels Pro] How to create shipping labels?
  • [Labels Pro] How to print labels and create shipping orders.
  • [Labels Pro] Label Printing & Contracted Prices Credentials
  • [Labels Pro] How to Mark a Product as Containing Hazardous Materials?
  • Step by Step Guide on how to migrate to Shipping Zones

WooCommerce Custom Payment Gateway Pro

11
  • Getting Started
  • Custom Payment Gateway Settings
  • Custom Checkout Field Builder
  • Conditional Display Rules
  • Sending Payment Data to an External API
  • How to Create a Pay by Invoice Payment Method
  • How to Create a Manual Payment Link or Review-Based Payment Method
  • Troubleshooting
  • Frequently Asked Questions
  • Security and Sensitive Payment Data
  • How to Upgrade from Free to Pro

WooCommerce Royal Mail Shipping Calculator Pro

4
  • Installation
  • Settings
  • TroubleShooting and Common issues
  • How to activate your plugin license

Controlled Admin Access Pro

3
  • Available Actions for a Restricted Admin
  • Installation
  • Settings

WooCommerce Simple Table Rates Pro

8
  • Installation
  • Settings
  • Rules and Actions
  • How to Setup Weight Based Shipping
  • How To Setup Shipping By Shipping Class
  • How to Setup Shipping by Cart Total
  • How to Setup Shipping by Product
  • How to Setup Shipping by Product Category

WooCommerce Pack IQ

5
  • Installation
  • How to activate your plugin license
  • How to add a new box
  • How to change the boxes weight and dimensions units
  • How to view the packing results

WooCommerce Restricted Shipping and Payment Pro

4
  • Installation
  • Setting Up Shipping Methods Conditions
  • Available Shipping & Payment Rules
  • Setting Up Payment Gateways Conditions

Affiliate Butler PRO

9
  • Installation and Upgrade
  • Quick Start Guide
  • Settings
  • Keywords Management
  • Installation
  • Frequently Asked Questions
  • Files Structure
  • Links Types
  • Statistics

WooCommerce Adyen Payment Gateway

2
  • Setup the Adyen payment gateway
  • How to configure Adyen Webhook notifications? 

WooCommerce Free Shipping Per Product

2
  • Installation
  • How to setup free shipping for a certain product

WooCommerce UPS Shipping Method Pro

4
  • Installation
  • UPS Zone Settings
  • UPS Global Settings
  • How to get the UPS Access Key?

Delivery Promise for WooCommerce

9
  • Getting Started
  • Understanding Processing Time vs Transit Time
  • Setting the Cutoff Countdown
  • Configuring Default Delivery Estimates
  • Creating Delivery Rules
  • Setting Working Days and Holidays
  • Using Rule Presets
  • Product-Level Lead Times
  • Why the “Order Within” Countdown Is Not Showing
View Categories
  • Home
  • Knowledge Base
  • WooCommerce Custom Payment Gateway Pro
  • Custom Checkout Field Builder

Custom Checkout Field Builder

Waseem
Updated on July 7, 2026

4 min read

The Custom Form section on each gateway settings page includes the Custom checkout field builder. Use it to collect extra information from customers when they choose your custom payment method.

Table of Contents

Toggle
  • What the field builder is used for
  • How to open the field builder
  • Field Palette
  • Checkout Preview
  • Field Settings
    • Common field settings
    • Settings for choice fields (Checkbox, Radio, Select)
    • Settings for Date fields
    • Settings for File Upload fields
    • Settings for Instructions fields
  • Field types in detail
    • Text
    • Password
    • Textarea
    • Email
    • URL
    • Number
    • Currency
    • Phone
    • Time
    • Date
    • Checkbox
    • Radio
    • Select
    • Customer Signature
    • File Upload
    • Instructions
  • Example form: Pay by Invoice
    • Example field configuration
  • Tips

What the field builder is used for

  • Collect business details (company name, tax ID, purchase order number)
  • Gather payment references or confirmation numbers
  • Accept uploaded payment receipts or proof of payment
  • Show read-only instructions inside the checkout form
  • Capture signatures for terms acceptance

Fields appear on the checkout page only when your gateway is selected.

How to open the field builder

  1. Go to WooCommerce → Settings → Payments.
  2. Click Manage on your gateway.
  3. Scroll to Custom Form.
  4. Use the three panels: Field palette, Checkout preview, and Field settings.

Click Save changes in the field builder (or the main Save changes button at the bottom of the page) to save your fields.

Field Palette

The Field palette on the left lists every field type you can add. Click a field type to add it to your form.

Available field types match the plugin code:

Field typeDescription
TextSingle-line text input
PasswordMasked text input
TextareaMulti-line text area
EmailEmail address field
URLWebsite link field
NumberNumeric value field
CurrencyAmount/currency style field
PhonePhone number field
TimeTime picker field
DateDate picker field
CheckboxMultiple selectable options
RadioSingle choice from options
SelectDropdown list of options
Customer SignatureSignature drawing field
File UploadFile upload for receipts or documents
InstructionsDisplay-only instructions block

Note: The legacy Credit Card field cannot be added to new gateways. Existing gateways that still use it show a deprecation warning. See Security and Sensitive Payment Data.

Checkout Preview

The center Checkout preview panel shows how fields will appear at checkout.

From the preview you can:

  • Select a field to edit its settings
  • Move fields up or down
  • Duplicate a field
  • Delete a field

The preview is a layout guide. Always test on the live checkout page before going live.

Field Settings

Select a field in the preview to edit settings in the Field settings panel on the right.

Common field settings

SettingWhat it does
Field labelThe label shown to the customer
Help textShort hint shown next to the field (displayed as an info icon on checkout)
Field sizeInput width: Small, Medium, or Large
Default valuePre-filled value (Text, Email, Number, and similar fields)
RequiredYes or No — blocks checkout if empty when Yes
CSS classesOptional CSS classes for theme styling
API parameterKey name used when sending this field’s value in API requests

Settings for choice fields (Checkbox, Radio, Select)

  • Options — list of choices customers can pick from

Settings for Date fields

  • Date format — display format (for example, mm/dd/yy, dd/mm/yy, yy-mm-dd)

Settings for File Upload fields

SettingWhat it does
Allowed file extensionsComma-separated list (default: jpg,jpeg,png,webp,pdf)
Max file size (MB)Maximum upload size (default: 5 MB)
Show in admin order detailsWhether the file link appears on the order screen
Show in emailsWhether the file link appears in order emails
Store with orderWhether the file is saved with the order

Settings for Instructions fields

SettingWhat it does
Field labelOptional heading for the instruction block
InstructionsHTML content shown to the customer (HTML tags allowed)
CSS classesOptional styling classes

Instructions fields are display-only — customers do not submit a value.


Field types in detail

Text

Single-line text input.

Example use case: Company name, purchase order number, payment reference.

Password

Masked text input (characters hidden).

Example use case: Internal reference codes where you want input hidden on screen. Do not use for credit card numbers or CVV codes.

Textarea

Multi-line text area.

Example use case: Additional order notes, special billing instructions.

Email

Email address with format validation.

Example use case: Billing contact email, accounts payable address.

URL

Website URL with format validation.

Example use case: Company website or vendor portal link.

Number

Numeric value with validation.

Example use case: Internal account number, quantity reference.

Currency

Amount-style numeric field.

Example use case: Expected payment amount or budget code reference.

Phone

Phone number field.

Example use case: Accounts payable phone number.

Time

Time picker.

Example use case: Preferred callback time for payment follow-up.

Date

Date picker with configurable format.

Example use case: Required delivery date, preferred pickup date.

Checkbox

Multiple options; customer can select more than one.

Example use case: “I agree to payment terms” plus “Send copy to procurement.”

Radio

Single choice from a list of options.

Example use case: Select invoice delivery method (Email / Post).

Select

Dropdown with one choice.

Example use case: Select cost center or department.

Customer Signature

Drawing pad for customer signature.

Example use case: Sign acceptance of payment terms or purchase authorization.

File Upload

Secure file upload for documents and images.

Example use case: Upload purchase order PDF, payment receipt, or proof of bank transfer.

Allowed extensions are validated. Files are stored in the WordPress media library.

Instructions

Read-only HTML block inside the form.

Example use case: Remind customers to include their order number on bank transfers.


Example form: Pay by Invoice

Add these fields for a typical B2B invoice checkout:

Field typeField labelRequiredNotes
TextCompany nameNoLegal business name
TextVAT / Tax IDNoTax registration number
TextPurchase order numberNoCustomer PO reference
EmailBilling contact emailYesWhere to send the invoice

Example field configuration

Company name

  • Field label: Company name
  • Help text: Enter your registered company name
  • Required: No

VAT / Tax ID

  • Field label: VAT / Tax ID
  • Help text: Your tax or VAT registration number
  • Required: No

Purchase order number

  • Field label: Purchase order number
  • Help text: Required for invoice matching
  • Required: No

Billing contact email

  • Field label: Billing contact email
  • Help text: We will send the invoice to this address
  • Required: Yes

Click Save changes when finished.

Tip: Gateways created from the Pay by Invoice template include these fields by default. You can adjust labels and requirements to match your process.

Tips

Test required fields with debug mode before customers see the gateway.

Keep forms short — only ask for information you need.

Use Instructions fields for text customers read but do not type.

Set API parameter names if you send data to an external system (see API requests).

Custom Payment Gateway SettingsConditional Display Rules
WPRuby Logo WPRuby

In 2015, WPRuby was established as an independent agency where we focus on producing and supporting many WordPress plugins. Each product we develop is simple to use and easy to customize and backed by awesome support and regular updates.

Resources

  • Knowledge Base
  • Affiliate Area
  • About Us
  • WPTools
  • Nomad Jar

Legal

  • Privacy Policy
  • Terms of Use

Follow us

  • Github
  • X.com
  • LinkedIn
  • Facebook

© 2026 - WPRuby