maverick/money
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

x

Browse source
This commit is contained in:
Omar Najjar 2025-11-27 16:20:01 +11:00
parent f923a163b9
commit 47c53611a4
1 changed files with 62 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
index.html Normal file
View file

@ -0,0 +1,62 @@
<!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>