Payment Form Components
The hosted payment page guides customers through the payment process using several key components.
Component Overview
| Item | Component | Description |
|---|---|---|
| 1 | Payment Form | Always rendered. Used for simple flows without order details. |
| 2 | Order Details | Displays when line items are provided in the request. |
| 3 | Card Holder Name | Can be pre-filled if provided in the request. |
| 4 | Billing Details | Can be partially pre-filled when provided in the request. |
| 5 | Pay Button | Submits the payment form to complete the transaction. |
Order Details Section
Displays when line items are included in the checkout session request.
Fields Displayed
- Line item descriptions: Product or service names
- Individual amounts: Price per item
- Quantities: Number of items (if applicable)
- Subtotal: Sum of all line items
- Taxes and fees: Additional charges (if applicable)
- Total: Final amount to be charged
Card Holder Name
Pre-fillable field that improves customer experience. Customers can modify pre-filled values as needed.
Billing Details
Collects customer address information for payment processing and fraud prevention.
Available Fields
- Country: Customer's country
- City: Customer's city
- Street: Street address
- House Number/Name: Building number or name
- Postal Code: ZIP or postal code
Customers can modify pre-filled billing details as needed.
Pay Button
Primary call-to-action that submits the payment form.
Button States
- Enabled: All required fields are valid
- Disabled: Required fields are empty or invalid
- Processing: Payment submission in progress (displays loading indicator)
Amount Display
The button displays the total charge amount with currency-specific formatting based on the currencyCode parameter:
- "Pay €100.00"
- "Pay $250.00"
- "Pay £50.00"