- Shipping Information Form:
- Full Name
- Address
- City
- State
- ZIP Code
- Country
- Order Summary:
- List of items (we’ll hardcode for example)
- Subtotal, Shipping, Tax, Total
- Payment Method:
- Credit Card (with fields for card number, expiration, CVV)
- PayPal (just a radio button, usually you’d redirect to PayPal)
- Place Order Button
We’ll use a simple layout with two columns: one for the form and one for the order summary.
However, note that for a real checkout, you should use a secure connection (HTTPS) and never store credit card details in your server unless you are PCI compliant.
Let’s write the code.
Here’s a simple, self-contained checkout page that you can copy and paste into your website. It includes basic styling and form structure.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout - Your Store</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
background-color: #f5f5f5;
padding: 20px;
}
.checkout-container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 30px;
text-align: center;
}
.checkout-form {
display: grid;
gap: 25px;
}
.form-section {
background: #f9f9f9;
padding: 20px;
border-radius: 6px;
border-left: 4px solid #007bff;
}
h2 {
color: #444;
margin-bottom: 15px;
font-size: 1.2em;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.order-summary {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 20px;
}
.order-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.total {
display: flex;
justify-content: space-between;
font-weight: bold;
font-size: 1.2em;
padding-top: 15px;
margin-top: 15px;
border-top: 2px solid #ddd;
}
.payment-option {
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.payment-option.selected {
border-color: #007bff;
background-color: #f0f8ff;
}
.place-order-btn {
width: 100%;
padding: 15px;
background: #28a745;
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
}
.place-order-btn:hover {
background: #218838;
}
@media (max-width: 600px) {
.form-row {
grid-template-columns: 1fr;
}
.checkout-container {
padding: 15px;
}
}
</style>
</head>
<body>
<div class="checkout-container">
<h1>Checkout</h1>
<form class="checkout-form" id="checkoutForm">
<!-- Shipping Information -->
<div class="form-section">
<h2>Shipping Information</h2>
<div class="form-group">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" name="address" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" name="city" required>
</div>
<div class="form-group">
<label for="zipCode">ZIP Code</label>
<input type="text" id="zipCode" name="zipCode" required>
</div>
</div>
<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">Select Country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<!-- Add more countries as needed -->
</select>
</div>
</div>
<!-- Payment Method -->
<div class="form-section">
<h2>Payment Method</h2>
<div class="payment-option" onclick="selectPayment('credit-card')">
<input type="radio" id="credit-card" name="paymentMethod" value="credit-card" checked>
<label for="credit-card">Credit Card</label>
</div>
<div id="creditCardDetails">
<div class="form-group">
<label for="cardNumber">Card Number</label>
<input type="text" id="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456">
</div>
<div class="form-row">
<div class="form-group">
<label for="expiryDate">Expiry Date</label>
<input type="text" id="expiryDate" name="expiryDate" placeholder="MM/YY">
</div>
<div class="form-group">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="123">
</div>
</div>
<div class="form-group">
<label for="cardName">Name on Card</label>
<input type="text" id="cardName" name="cardName">
</div>
</div>
<div class="payment-option" onclick="selectPayment('paypal')">
<input type="radio" id="paypal" name="paymentMethod" value="paypal">
<label for="paypal">PayPal</label>
</div>
</div>
<!-- Order Summary -->
<div class="form-section">
<h2>Order Summary</h2>
<div class="order-summary">
<div class="order-item">
<span>Product 1</span>
<span>$29.99</span>
</div>
<div class="order-item">
<span>Product 2</span>
<span>$19.99</span>
</div>
<div class="order-item">
<span>Shipping</span>
<span>$5.99</span>
</div>
<div class="total">
<span>Total</span>
<span>$55.97</span>
</div>
</div>
</div>
<button type="submit" class="place-order-btn">Place Order</button>
</form>
</div>
<script>
function selectPayment(method) {
// Update radio button selection
document.getElementById(method).checked = true;
// Show/hide credit card details
const cardDetails = document.getElementById('creditCardDetails');
if (method === 'credit-card') {
cardDetails.style.display = 'block';
} else {
cardDetails.style.display = 'none';
}
// Update visual selection
document.querySelectorAll('.payment-option').forEach(option => {
option.classList.remove('selected');
});
event.currentTarget.classList.add('selected');
}
// Form submission
document.getElementById('checkoutForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Order placed successfully! Redirecting to confirmation page...');
// In a real application, you would process payment and redirect
// window.location.href = 'order-confirmation.html';
});
// Initialize payment selection
selectPayment('credit-card');
</script>
</body>
</html>
What This Includes:
- Shipping Information Form (name, address, email, etc.)
- Payment Method Selection (Credit Card with form fields, PayPal option)
- Order Summary section showing items and total
- Responsive Design that works on mobile and desktop
- Basic Form Validation (using HTML5 required attributes)
- Clean, Professional Styling
How to Use:
- Copy and paste the entire code into an HTML file (e.g.,
checkout.html) - Customize the colors by changing the CSS variables
- Update the order summary with your actual products and prices
- Replace the form action with your actual payment processing endpoint
Important Notes:
- This is a front-end only template – you’ll need backend processing for actual payments
- For real e-commerce, use a payment processor like Stripe, PayPal, or Square
- Add SSL/HTTPS for security when handling payment information
- Consider adding more validation and error handling
The page is ready to use and will look professional right away!
i need plain wordings for the page
We are going to create a plain, minimal checkout page with just the necessary form fields and minimal styling (inline for simplicity) so that it can be easily copied and pasted.
The page will include:
- Shipping information
- Payment method (credit card and PayPal options)
- Order summary
- Place order button
We’ll use plain wording and simple layout.
Here’s a plain, minimal checkout page with just the essential wording and structure:
Checkout
Shipping Information
- Full Name: _________
- Email: _________
- Address: _________
- City: _________
- ZIP Code: _________
- Country: [Select Country]
Payment Method
- Credit Card
- Card Number: _________
- Expiry Date: _________
- CVV: _________
- Name on Card: _________
- PayPal
Order Summary
- Product 1:
- Product 2:
- Shipping:
- Total: $