> ## Documentation Index
> Fetch the complete documentation index at: https://formhug.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment Fields

> Add products, prices, stock, discounts, and payment collection to your FormHug forms

Payment fields let you add prices, products, order totals, discounts, and payment collection to a form. Use them for donations, product orders, ticket sales, hotel packages, deposits, paid registrations, and other workflows where the submitter needs to choose what they are paying for.

For a step-by-step scenario guide, see [Create a Payment Form](/guides/use-cases/payment-form). To connect online payment, see [Stripe](/integrations/stripe). For the product-level workflow, see the <a href="https://formhug.ai/payment-form" target="_blank">payment form builder</a> or start from <a href="https://formhug.ai/templates/use-case/orders-payments" target="_blank">order and payment templates</a>.

## Payment Field Types

Choose the field based on what the submitter needs to select before checkout.

| Field            | Best For                                                                                    | Example                                  |
| ---------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------- |
| **Price-Only**   | A fixed amount or custom amount without product details                                     | Donation, deposit, registration fee      |
| **Product**      | Visual products with images, descriptions, variants, stock, and quantities                  | T-shirt, tote bag, sticker pack          |
| **Text Product** | Products or packages that do not need images but still need variants, stock, and quantities | Hotel rooms, service packages, workshops |
| **Text Option**  | A single paid choice built from text option groups                                          | Ticket type + attendance option          |

<Note>
  The demo forms linked from this page are configured to show the product experience, but they do not need to be connected to a live payment account while you are testing setup.
</Note>

## Shared Capabilities

Payment fields share a few important settings.

| Capability            | How It Works                                                                       |
| --------------------- | ---------------------------------------------------------------------------------- |
| **Currency**          | Sets the currency shown on prices and totals.                                      |
| **Stripe account**    | Connects the form to a Stripe payment account when you want online payment.        |
| **Discounts**         | Applies early-bird or bulk discounts as a percentage or fixed amount.              |
| **Order summary**     | Shows selected products, quantities, discounts, and the final amount due.          |
| **Display-only mode** | Lets you show product selections and totals without sending submitters to payment. |

Product, Text Product, and Text Option also support variant-style pricing. Each variant row can have its own price, original price, stock, default quantity, minimum quantity, and maximum quantity.

## Price-Only

Use **Price-Only** when the payment amount is the main field. It is the simplest choice for donations, deposits, registration fees, service charges, and pay-what-you-want payments.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/price-only/price-only-donation-public-selection.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=a4a41236a416c2066fa8a222cace7b47" alt="Price-Only donation form showing fixed donation amounts, a custom amount, a message field, and the selected donation summary" width="1364" height="1294" data-path="images/payment-fields/price-only/price-only-donation-public-selection.png" />

In this donation example, submitters choose a preset amount or enter another amount. The selected amount appears in the order summary before submission.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/price-only/price-only-donation-field-settings.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=875f18a9ec36b8dac08114d83bdeb614" alt="Price-Only field settings showing amount options, custom amount, minimum amount, currency, payment account, discount, and validation rules" width="2444" height="1676" data-path="images/payment-fields/price-only/price-only-donation-field-settings.png" />

**Key settings:**

* Fixed amount options
* Custom amount input
* Minimum custom amount
* Currency
* Stripe payment account
* Discount
* Required and validation rules

<Card title="Open the donation demo" icon="arrow-up-right-from-square" href="https://formhug.ai/f/WoeStR" target="_blank">
  See a Price-Only field used for a children's reading corner donation form.
</Card>

## Product

Use **Product** when submitters need to compare visual products. Product fields support product images, descriptions, variants, stock, quantity rules, discounts, and selected-product summaries.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/product/product-merch-public-selection.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=398b20b69a7d13925bbac4449dfb4f3b" alt="Product field showing a merchandise store with T-shirt, canvas tote bag, and sticker pack product cards" width="1386" height="1158" data-path="images/payment-fields/product/product-merch-public-selection.png" />

In this merchandise store example, each product has images, a description, a price, an original price, stock-aware quantity controls, and an add-to-cart button.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/product/product-merch-add-to-cart-modal.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=352c524644871515a333d30ef53d3102" alt="Product add-to-cart modal showing images, size and color variants, unit price, total, quantity, and confirm action" width="1184" height="1846" data-path="images/payment-fields/product/product-merch-add-to-cart-modal.png" />

Use variants for choices such as size, color, material, bundle, or edition. FormHug combines variant options into purchasable rows, so each combination can have its own price and stock.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/product/product-merch-edit-product-settings.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=ea4dd4b8235b7f49719e69e021316d40" alt="Product settings dialog showing product images, size and color variants, and price and stock management rows" width="1592" height="2220" data-path="images/payment-fields/product/product-merch-edit-product-settings.png" />

**Key settings:**

* Product name and description
* Product images
* Variant groups such as Size and Color
* Price and original price
* Stock per product or variant
* Default, minimum, and maximum quantity
* Unit text and stock text
* Discount

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/product/product-merch-selected-summary.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=4e557aeca82ea654ea0a1835ceec705c" alt="Selected Product summary showing multiple merchandise items, quantities, and amount due" width="1346" height="1012" data-path="images/payment-fields/product/product-merch-selected-summary.png" />

<Card title="Open the merchandise demo" icon="arrow-up-right-from-square" href="https://formhug.ai/f/DQaWPa" target="_blank">
  See a Product field used for T-shirts, tote bags, and sticker packs.
</Card>

## Text Product

Use **Text Product** when the product or package does not need images. It works well for hotel packages, service packages, workshop passes, appointments with fixed packages, and other text-first purchases.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/text-product/text-product-hotel-public-selection.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=6d976b57e726fd36049efee33c2a629f" alt="Text Product hotel booking form showing check-in and check-out dates, hotel descriptions, an early-bird discount banner, and text product cards" width="1384" height="1200" data-path="images/payment-fields/text-product/text-product-hotel-public-selection.png" />

In this hotel booking example, the products are hotels. The variant is the room type, and the quantity is shown as nights.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/text-product/text-product-hotel-add-to-cart-modal.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=753b8961f5deb79ded92acc1a872c9de" alt="Text Product add-to-cart modal showing Grand Conference Hotel room type variants and three nights selected" width="1172" height="738" data-path="images/payment-fields/text-product/text-product-hotel-add-to-cart-modal.png" />

Text Product supports text or URL descriptions. Long descriptions can be collapsed so the public form stays compact.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/text-product/text-product-hotel-edit-product-settings.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=aba2fea9f077ff1031c3e8b60466aadb" alt="Text Product edit dialog showing text description, URL description, collapsed display, room type variants, and price and stock management" width="1584" height="1536" data-path="images/payment-fields/text-product/text-product-hotel-edit-product-settings.png" />

**Key settings:**

* Product name
* Text description or URL description
* Collapsed display for long descriptions
* Variant groups such as Room Type
* Price and original price
* Stock per product or variant
* Default, minimum, and maximum quantity
* Unit text such as nights or rooms
* Restore stock on deletion

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/text-product/text-product-hotel-selected-summary.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=ad0c45c23578fe82667ab355bd46f00e" alt="Selected Product summary showing hotel room selection, original price, discounted price, nights, discount, and amount due" width="1316" height="780" data-path="images/payment-fields/text-product/text-product-hotel-selected-summary.png" />

<Card title="Open the hotel booking demo" icon="arrow-up-right-from-square" href="https://formhug.ai/f/Yvc0ix" target="_blank">
  See a Text Product field used for a conference hotel booking form.
</Card>

## Text Option

Use **Text Option** when one paid offer is determined by text choices. It is useful for ticket booking, plans, packages, or registration options where the submitter chooses from option groups.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/text-option/text-option-ticket-public-selection.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=a2e3005e76fb612ca188dc276f63fd70" alt="Text Option ticket booking form showing ticket type and attendance options plus selected product summary" width="1358" height="1202" data-path="images/payment-fields/text-option/text-option-ticket-public-selection.png" />

In this ticket example, the price is based on the selected ticket type and attendance option.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/text-option/text-option-ticket-edit-option-settings.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=356b99dad6315db1cdc5637a0fce859a" alt="Text Option settings showing Ticket Type and Attendance variant groups plus price and stock management rows" width="1586" height="1598" data-path="images/payment-fields/text-option/text-option-ticket-edit-option-settings.png" />

**Key settings:**

* Option groups
* Option labels
* Combination pricing
* Original price
* Stock per option combination
* Default, minimum, and maximum quantity
* Default option

<Card title="Open the ticket booking demo" icon="arrow-up-right-from-square" href="https://formhug.ai/f/EAsbKm" target="_blank">
  See a Text Option field used for workshop ticket booking.
</Card>

## Discounts

Payment fields can apply discounts before checkout.

| Discount Type     | Use It For                                                            |
| ----------------- | --------------------------------------------------------------------- |
| **Early Bird**    | Reduce the price when the submitter purchases before a date and time. |
| **Bulk Discount** | Reduce the total when the submitter buys enough items in one order.   |

<img src="https://mintcdn.com/formhug-8bc4ebd1/G5qjSwDhNkLNSmDi/images/payment-fields/product/product-merch-discount-settings.png?fit=max&auto=format&n=G5qjSwDhNkLNSmDi&q=85&s=ce37afddb9abec3fa2d4e765f49ee2c7" alt="Discount settings showing bulk discount and percentage discount configuration" width="1188" height="922" data-path="images/payment-fields/product/product-merch-discount-settings.png" />

Discounts can be percentage-based or fixed-amount. Depending on the field setup, they can reduce the total order amount or product pricing shown in the selected-product summary.

## Currency, Stripe, and Testing

Set the currency before you publish a payment form. If you want online payment, choose a connected Stripe account in the payment settings. If you only want to test product configuration, you can leave the form unconnected and use the payment fields in display-only mode.

For the full connection flow, see [Stripe](/integrations/stripe).

<Note>
  Forms that already have submissions may restrict changes to currency or payment method. This helps keep past payment records consistent.
</Note>

## Related

<CardGroup cols={2}>
  <Card title="Create a Payment Form" icon="book-open" href="/guides/use-cases/payment-form">
    Build donation, merchandise, hotel booking, and ticket payment forms
  </Card>

  <Card title="Workspace Settings" icon="building" href="/features/account/workspace-settings">
    Connect Stripe before collecting online payments
  </Card>

  <Card title="Stripe Integration" icon="credit-card" href="/integrations/stripe">
    Connect Stripe and review payment status and receipts
  </Card>

  <Card title="Form Builder" icon="pen-to-square" href="/features/building/form-builder">
    Add and configure fields in the form editor
  </Card>

  <Card title="Order Form Templates" icon="grid-2" href="https://formhug.ai/templates/use-case/orders-payments" target="_blank">
    Start from product order and payment templates
  </Card>

  <Card title="Form Notifications" icon="bell" href="/features/settings/notifications">
    Send notifications after paid or display-only submissions
  </Card>
</CardGroup>
