62 lines
No EOL
2.7 KiB
HTML
62 lines
No EOL
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Invest Now - Real Payments</title>
|
||
<script src="https://js.stripe.com/v3/"></script>
|
||
<style>
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f172a; color: white; text-align: center; padding: 60px 20px; }
|
||
.card { max-width: 480px; margin: 0 auto; background: #1e293b; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||
h1 { font-size: 2.5em; margin-bottom: 10px; }
|
||
p { opacity: 0.9; line-height: 1.6; }
|
||
input { width: 100%; padding: 14px; margin: 15px 0; border-radius: 8px; border: none; font-size: 18px; text-align: center; }
|
||
button { width: 100%; padding: 16px; background: #6366f1; color: white; border: none; border-radius: 8px; font-size: 20px; cursor: pointer; margin-top: 10px; }
|
||
button:hover { background: #4f46e5; }
|
||
.small { font-size: 0.8em; opacity: 0.7; margin-top: 20px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<h1>Invest Today</h1>
|
||
<p>One-time contribution to support our project.<br>All major cards accepted.</p>
|
||
|
||
<input type="number" id="amount" placeholder="100" min="5" step="1" value="100"/>
|
||
<div style="margin:10px 0; font-weight:bold;">USD $ <span id="display">100</span></div>
|
||
|
||
<button id="pay">Pay & Invest Now</button>
|
||
<div class="small">Secured by Stripe • Funds go directly to us • Instant confirmation</div>
|
||
</div>
|
||
|
||
<script>
|
||
const stripe = Stripe('pk_live_XXXXXXXXXXXXXXXXXXXXXXXX'); // Put your real publishable key here
|
||
|
||
// Update displayed amount live
|
||
document.getElementById('amount').addEventListener('input', (e) => {
|
||
const val = e.target.value || 0;
|
||
document.getElementById('display').textContent = val;
|
||
});
|
||
|
||
document.getElementById('pay').addEventListener('click', () => {
|
||
const amount = parseInt(document.getElementById('amount').value);
|
||
if (!amount || amount < 5) {
|
||
alert('Please enter at least $5');
|
||
return;
|
||
}
|
||
|
||
// This uses Stripe’s client-only mode (no backend needed)
|
||
stripe.redirectToCheckout({
|
||
lineItems: [{ price: 'price_1YOUR_PRICE_ID_HERE', quantity: 1 }], // fixed price
|
||
// OR use dynamic amount (requires a tiny backend) → see note below
|
||
mode: 'payment',
|
||
successUrl: window.location.origin + '?success=true',
|
||
cancelUrl: window.location.origin + '?canceled=true',
|
||
billingAddressCollection: 'required',
|
||
customerCreation: 'always',
|
||
}).then((result) => {
|
||
if (result.error) alert(result.error.message);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |