Checkout

Page Overview

The Checkout page is where you choose how you'll receive your order, provide (or select) an address, review costs including any tip, and pay. You must be logged in and have at least one item in your cart to reach this page.

Interface Overview

Checkout is organized into:

1. Fulfillment Method — choose Delivery or Store Pickup.
2. Address section — a New Address or Saved Addresses tab (for Delivery), or Contact Information (for Pickup).
3. Payment Details — a secure card entry section powered by Stripe.
4. Order summary panel — your cart items and a cost breakdown, ending in the Procced to Payment button.

UI Components

Fulfillment Method

• Delivery button — has your order shipped to an address you provide.
• Store Pickup button — shows the seller's Pickup Location details (shop name, address, phone, email, and pickup instructions) instead of a shipping address form.

Address section (Delivery)

• New Address / Saved Addresses tabs — switch between typing a new address or picking one you've saved before.
• New Address form fields: First Name, Last Name, Street Address, Apt/Suite/Unit (optional), Country, State/Region (a dropdown of US states when Country is United States, otherwise a text field), City, Postal/ZIP Code, Phone Number, More Info (notes), and Drop-off Instructions (Front door, Back door, Garage door, Mail box, Wagon, Table, On hand, Others — with a text field if you choose Others).
• Save this Address for later Use checkbox.
• Save this Billing Address for later Use checkbox — when unchecked, a separate Billing Address form appears (First Name, Last Name, Country, State/Region, City, Phone Number, Address 1, Address 2, plus its own save-for-later checkboxes).
• Saved Addresses tab — a dropdown to Select a saved address, listing your previously saved addresses.

Payment Details

• A Card Information field for entering your card number, expiry, CVC, and (for US cards) ZIP code, provided by Stripe.
• A security notice noting your payment is protected with 256-bit SSL encryption.
• Accepted card logos: Visa, Mastercard, American Express, Discover.

Order summary panel

• Checkout Products — your cart items with image, name, unit label, quantity, and price.
• Subtotal
• Sales Tax (shown when tax applies to your order; a "Calculating..." label appears briefly while it's computed)
• Shipping Fee (Delivery orders only; shown as "Calculating..." while being computed, or a dash if it couldn't be determined)
• Carrier Tip (Delivery orders only) — quick-select buttons: 5%, 10%, 15%, 20%, or No Thanks.
• Total — labeled "(Pickup)" or "(Shipping+Cart)" depending on your fulfillment method.
• Procced to Payment button — creates your order and processes payment.

Note: "Procced to Payment" is the exact label shown on the button (it is a known typo in the interface).

Step-by-Step User Guide

To check out with delivery:

1. On the Checkout page, make sure Delivery is selected under Fulfillment Method.
2. Choose New Address and fill in your shipping details, or choose Saved Addresses and pick one from the dropdown.
3. Optionally select a Drop-off Instruction.
4. If your billing address is different from your shipping address, uncheck Save this Billing Address for later Use and fill in the Billing Address form.
5. Optionally choose a Carrier Tip percentage.
6. Enter your card details under Payment Details.
7. Review the order summary, then click Procced to Payment.

To check out with store pickup:

1. Select Store Pickup under Fulfillment Method.
2. Review the Pickup Location details shown for your order's shop(s).
3. Fill in your Contact Information (used in place of a shipping address).
4. Enter your card details under Payment Details.
5. Review the order summary (no shipping fee or carrier tip for pickup orders), then click Procced to Payment.

Forms / Tables / Statuses

Shipping Address required fields: Last Name, Country, Phone, State/Region, City, ZIP/Postal Code, Street Address.

Billing Address required fields (if not reusing shipping address): Last Name, Country, Phone, State/Region, City, Address 1.

Order status after checkout: see Order Confirmation for possible outcomes (Payment Confirmed, Payment Processing, or Payment Failed).

Notifications

• If required fields are missing, a message lists which fields need to be filled (for example, "Please fill: City, ZIP Code").
• If your card details are incomplete, you'll be asked to complete them before payment can proceed.
• If shipping cannot be calculated for your address, an error message is shown near the Shipping Fee line.
• For orders with items from multiple sellers, you may see progress messages as each seller's payment is processed in turn.

User Tips

Tip: Choosing Store Pickup removes the shipping fee and carrier tip from your total.

Tip: You can save both your shipping and billing address for future orders using the "Save this Address for later Use" checkboxes.

Warning: Double-check your address fields before paying — shipping fees and delivery are calculated from the address you enter.

Best Practices

• Use Saved Addresses for repeat orders to avoid retyping your details.
• Review the full cost breakdown (Subtotal, Sales Tax, Shipping Fee, Carrier Tip, Total) before clicking Procced to Payment.
• Select a Drop-off Instruction if you want the carrier to leave your delivery in a specific place.

Common Mistakes

• Forgetting that Store Pickup hides the shipping fee and tip sections since they don't apply.
• Leaving the Billing Address unchecked as "same as shipping" when it should be different, resulting in incorrect billing details.
• Clicking Procced to Payment before your card details are fully entered.

Troubleshooting

• Shipping fee won't calculate: Make sure your Street Address, City, and Country are all filled in; wait a moment after typing for it to update.
• "Procced to Payment" button doesn't respond: Check for a toast message listing missing required fields or incomplete card details.
• Payment fails: Try re-entering your card details, or use a different card; if the problem continues, contact Contact & Support.

Frequently Asked Questions

Q: Why is the button called "Procced to Payment" instead of "Proceed to Payment"? A: That's the current label used in the Hatecholo interface.

Q: Is tipping required? A: No — you can choose No Thanks if you don't want to add a carrier tip. Tips are only shown for Delivery orders.

Q: Can I pick up my order instead of having it delivered? A: Yes, choose Store Pickup under Fulfillment Method to see pickup location details for your order.

Related Documentation

• Shopping Cart
• Order Confirmation
• My Profile