> ## 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.

# Create a Payment Form

> How to build payment forms for donations, product orders, hotel packages, and ticket booking using FormHug payment fields.

A payment form collects selections, calculates totals, and optionally sends submitters to online payment. The right setup depends on what people are paying for: a simple amount, a visual product, a text-based package, or a ticket option.

For the field-by-field reference, see [Payment Fields](/docs/features/building/fields/payment-fields). For online payment setup, see [Stripe Collect Payments](/docs/integrations/stripe). The public demo forms in this guide show complete product configuration without requiring a live payment account.

## Match the Field to the Scenario

| Scenario                  | Payment Field | Use It When                                                                          |
| ------------------------- | ------------- | ------------------------------------------------------------------------------------ |
| **Donation**              | Price-Only    | People choose a fixed amount or enter a custom amount.                               |
| **Merchandise store**     | Product       | People compare visual products such as T-shirts, bags, and stickers.                 |
| **Hotel booking package** | Text Product  | People choose a text-based product such as a hotel, room type, and number of nights. |
| **Ticket booking**        | Text Option   | People choose from text option groups such as ticket type and attendance length.     |

## Build Your Payment Form

<Steps>
  <Step title="Choose the payment field">
    Start with the field that matches the buying decision. Use Price-Only for amount-only payments, Product for visual goods, Text Product for text-based packages, and Text Option for option-driven pricing.
  </Step>

  <Step title="Configure prices and variants">
    Add products, amount options, or option groups. For Product, Text Product, and Text Option, configure each variant row with price, original price, stock, default quantity, minimum quantity, and maximum quantity as needed.
  </Step>

  <Step title="Add discounts">
    Use early-bird discounts for purchase-by-date campaigns, or bulk discounts when buying more items should reduce the total.
  </Step>

  <Step title="Set currency and payment account">
    Choose the currency. When you are ready to collect online payments, connect Stripe and select the payment account. You can leave the form unconnected while testing product configuration.
  </Step>

  <Step title="Preview the order summary">
    Test the public form. Confirm the add-to-cart flow, selected-product summary, discount, quantity controls, and amount due all match your setup.
  </Step>
</Steps>

## Donation Form

Use **Price-Only** for donation forms, deposits, and simple fees.

<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="Donation form using a Price-Only field with fixed amounts, custom amount, message, selected product, and amount due" width="1364" height="1294" data-path="images/payment-fields/price-only/price-only-donation-public-selection.png" />

In this example, supporters choose `$10`, `$50`, `$100`, or enter another amount. The selected donation appears in the payment summary before submission.

<Card title="Open the donation demo" icon="arrow-up-right-from-square" href="https://formhug.ai/f/WoeStR" target="_blank">
  Demo: Children's Reading Corner Donation
</Card>

## Merchandise Store

Use **Product** when images matter. This is the best fit for T-shirts, tote bags, stickers, product catalogs, and physical goods.

<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="Merchandise order form showing 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" />

The merchandise example uses product cards with images, prices, original prices, quantity controls, and selected-product totals.

<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 for a T-shirt with images, size and color variants, and price and stock rows" width="1592" height="2220" data-path="images/payment-fields/product/product-merch-edit-product-settings.png" />

Use variants for options such as Size and Color. Configure price, original price, stock, and quantity rules for each variant combination.

<Card title="Open the merchandise demo" icon="arrow-up-right-from-square" href="https://formhug.ai/f/DQaWPa" target="_blank">
  Demo: FormHug Merchandise Store
</Card>

## Hotel Booking Package

Use **Text Product** for packages that are easier to compare by name and description than by image. Hotel booking is a good example: the products are hotels, the variant is room type, and the quantity can represent nights or rooms.

<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="Conference hotel booking form using Text Product cards for Grand Conference Hotel and City Center Inn" width="1384" height="1200" data-path="images/payment-fields/text-product/text-product-hotel-public-selection.png" />

The hotel example pairs check-in and check-out date fields with a Text Product field. The selected room is added to the order summary with a discount and amount due.

<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 for hotel booking showing room type, nights, original price, discount, and amount due" width="1316" height="780" data-path="images/payment-fields/text-product/text-product-hotel-selected-summary.png" />

<Tip>
  Use Text Product for predefined hotel packages. If submitters need to freely choose available time slots or dates from a booking calendar, use the Booking field instead.
</Tip>

<Card title="Open the hotel booking demo" icon="arrow-up-right-from-square" href="https://formhug.ai/f/Yvc0ix" target="_blank">
  Demo: Conference Hotel Booking Form
</Card>

## Ticket Booking

Use **Text Option** when the final price comes from text choices. Ticket forms often combine ticket type, attendance option, access level, or workshop package.

<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="Ticket booking form using Text Option groups for ticket type and attendance" width="1358" height="1202" data-path="images/payment-fields/text-option/text-option-ticket-public-selection.png" />

In this example, the submitter chooses a ticket type and attendance option. The selected combination controls the price shown in the summary.

<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 groups with combination prices and stock settings" width="1586" height="1598" data-path="images/payment-fields/text-option/text-option-ticket-edit-option-settings.png" />

<Card title="Open the ticket booking demo" icon="arrow-up-right-from-square" href="https://formhug.ai/f/EAsbKm" target="_blank">
  Demo: UX Design Workshop Registration and Payment
</Card>

## Payment Form Checklist

* Choose the field type that matches the buying decision.
* Set currency before publishing.
* Add prices, original prices, stock, and quantity limits where needed.
* Configure early-bird or bulk discounts if the offer depends on purchase timing or quantity.
* Connect Stripe only when you are ready to collect real online payments. See [Stripe Collect Payments](/docs/integrations/stripe) for the connection flow.
* Submit a test entry and check the selected-product summary before sharing the form.

## Related

<CardGroup cols={2}>
  <Card title="Payment Fields" icon="credit-card" href="/docs/features/building/fields/payment-fields">
    Learn every payment field type and setting
  </Card>

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

  <Card title="Submission Rules" icon="sliders" href="/docs/features/settings/submission-rules">
    Control capacity, submission limits, and closing behavior
  </Card>

  <Card title="Notifications" icon="bell" href="/docs/features/settings/notifications">
    Send confirmations and internal alerts after submissions
  </Card>

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