Payment templates
HTML Payment Form Templates
Collection of secure payment form templates with modern designs. Find responsive, credit card enabled payment forms with complete code samples.
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-900 mb-6">Payment Details</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Card Holder Name</label>
<input type="text" name="card_holder" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Card Number</label>
<input type="text" name="card_number" required pattern="[0-9]{16}" placeholder="1234 5678 9012 3456" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">Expiry Date</label>
<input type="text" name="expiry" required pattern="[0-9]{2}/[0-9]{2}" placeholder="MM/YY" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">CVV</label>
<input type="text" name="cvv" required pattern="[0-9]{3,4}" placeholder="123" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
Pay Now
</button>
</div>
</div>
</form>Colors
Typography
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-md mx-auto p-8 bg-white rounded-xl shadow-lg">
<div class="flex justify-center mb-8">
<div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H5a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
</div>
</div>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">Select Amount</label>
<div class="mt-2 grid grid-cols-3 gap-3">
<button type="button" class="amount-btn px-4 py-2 border border-emerald-300 rounded-md text-emerald-600 hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-emerald-500">$10</button>
<button type="button" class="amount-btn px-4 py-2 border border-emerald-300 rounded-md text-emerald-600 hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-emerald-500">$25</button>
<button type="button" class="amount-btn px-4 py-2 border border-emerald-300 rounded-md text-emerald-600 hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-emerald-500">$50</button>
</div>
<div class="mt-3">
<input type="number" name="custom_amount" placeholder="Custom Amount" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Card Information</label>
<div class="mt-1 p-3 border border-gray-300 rounded-md">
<div class="space-y-4">
<div>
<input type="text" name="card_number" required pattern="[0-9]{16}" placeholder="Card Number" class="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm">
</div>
<div class="flex space-x-4">
<input type="text" name="expiry" required pattern="[0-9]{2}/[0-9]{2}" placeholder="MM/YY" class="block w-1/2 border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm">
<input type="text" name="cvv" required pattern="[0-9]{3,4}" placeholder="CVV" class="block w-1/2 border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm">
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Name on Card</label>
<input type="text" name="card_holder" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
Complete Payment
</button>
</div>
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
const amountButtons = document.querySelectorAll('.amount-btn');
const customAmountInput = document.querySelector('input[name="custom_amount"]');
amountButtons.forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons
amountButtons.forEach(btn => btn.classList.remove('bg-emerald-500', 'text-white'));
// Add active class to clicked button
button.classList.add('bg-emerald-500', 'text-white');
// Set custom amount input to button value
customAmountInput.value = button.textContent.replace('$', '');
});
});
});
</script>Colors
Typography
Order Summary
Product $99.00
Tax $9.90
Total $108.90
Secure Payment
Protected by SSL encryption
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
<div class="flex flex-col md:flex-row">
<!-- Order Summary -->
<div class="w-full md:w-2/5 bg-emerald-600 p-8 text-white">
<h2 class="text-2xl font-bold mb-6">Order Summary</h2>
<div class="space-y-4">
<div class="flex justify-between">
<span>Product</span>
<span>$99.00</span>
</div>
<div class="flex justify-between">
<span>Tax</span>
<span>$9.90</span>
</div>
<div class="border-t border-emerald-500 pt-4 mt-4">
<div class="flex justify-between text-lg font-semibold">
<span>Total</span>
<span>$108.90</span>
</div>
</div>
<div class="mt-8">
<div class="bg-emerald-700 rounded-lg p-4">
<div class="flex items-center">
<svg class="w-6 h-6 text-emerald-300 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
<div class="text-sm">
<p class="font-medium">Secure Payment</p>
<p class="text-emerald-300">Protected by SSL encryption</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Payment Form -->
<div class="w-full md:w-3/5 p-8">
<form action="https://formsubmit.co/[email protected]" method="POST" class="space-y-6">
<div>
<h2 class="text-2xl font-bold text-gray-900 mb-4">Payment Details</h2>
<p class="text-gray-600 mb-6">Complete your purchase by providing your payment details.</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Card Information</label>
<div class="mt-1 p-3 border border-gray-300 rounded-md">
<div class="space-y-4">
<div>
<input type="text" name="card_number" required pattern="[0-9]{16}" placeholder="Card Number" class="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm">
</div>
<div class="flex space-x-4">
<input type="text" name="expiry" required pattern="[0-9]{2}/[0-9]{2}" placeholder="MM/YY" class="block w-1/2 border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm">
<input type="text" name="cvv" required pattern="[0-9]{3,4}" placeholder="CVV" class="block w-1/2 border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm">
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Name on Card</label>
<input type="text" name="card_holder" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Billing Address</label>
<input type="text" name="address" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500" placeholder="Street Address">
<div class="mt-4 grid grid-cols-2 gap-4">
<input type="text" name="city" required placeholder="City" class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
<input type="text" name="postal_code" required placeholder="Postal Code" class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-emerald-500 focus:border-emerald-500">
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
Pay $108.90
</button>
</div>
</form>
</div>
</div>
</div>Colors
Typography
Get started
Ship a payment form in one command.
FormSubmit handles the backend — you paste the HTML.