48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Donate</title>
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
</head>
|
|
<body>
|
|
<h2>Support us with a donation</h2>
|
|
<form id="donation-form">
|
|
<label>Amount (USD):</label>
|
|
<input type="number" id="amount" min="1" step="0.01" required>
|
|
<div id="card-element"></div>
|
|
<button type="submit">Donate</button>
|
|
</form>
|
|
<div id="result"></div>
|
|
|
|
<script>
|
|
const stripe = Stripe("pk_test_your_publishable_key_here");
|
|
|
|
const elements = stripe.elements();
|
|
const card = elements.create("card");
|
|
card.mount("#card-element");
|
|
|
|
document.getElementById("donation-form").addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const amount = document.getElementById("amount").value;
|
|
|
|
const res = await fetch("/create-payment-intent", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({amount})
|
|
});
|
|
const { clientSecret } = await res.json();
|
|
|
|
const result = await stripe.confirmCardPayment(clientSecret, {
|
|
payment_method: { card: card }
|
|
});
|
|
|
|
if (result.error) {
|
|
document.getElementById("result").innerText = result.error.message;
|
|
} else if (result.paymentIntent.status === "succeeded") {
|
|
document.getElementById("result").innerText = "✅ Thank you for your donation!";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|