DonationForm Component

import DonationForm from '../components/DonationForm.astro';

<DonationForm />

---
import DonationForm from '../components/DonationForm.astro';
---

<DonationForm />

<DonationForm showHeader={false} />

<!-- General donation -->
<DonationForm id="general-donation" />

<!-- Building fund -->
<DonationForm id="building-fund" />

<!-- Missions fund -->
<DonationForm id="missions" />

Fee Calculation: (amount * 0.029) + 0.30
Example: $50 donation → $1.75 fee → $51.75 total

function calculateFee(amount: number): number {
  return Math.round((amount * 0.029 + 0.30) * 100) / 100;
}

By clicking "Complete Donation", you authorize Lake Ozark Christian Church Inc. 
to charge your payment method $50.00.

By clicking "Complete Donation", you authorize Lake Ozark Christian Church Inc. 
to charge your payment method $50.00 every month until cancelled. 
Manage or cancel at donork.it/locc.

const response = await fetch('https://api.locc.us/api/v2/donation', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    amount: 50,
    email: '[email protected]',
    donationType: 'recurring',
    frequency: 'monthly',
    coverFees: true
  })
});

{
  "success": true,
  "url": "https://checkout.donorkit.io/session/xyz123"
}

{
  "success": false,
  "message": "Invalid amount"
}

// Minimum amount
if (!amount || amount < 5) {
  showToast('Please enter an amount of at least $5', 'warning', 3000);
  return;
}

// Maximum amount
if (amount > 999999) {
  showToast('Amount cannot exceed $999,999', 'warning', 3000);
  return;
}

// Email validation
if (!email || !email.includes('@')) {
  showToast('Please enter a valid email address', 'warning', 3000);
  return;
}

// Info toast (indefinite)
const loadingToastId = showToast('Processing your donation...', 'info', 0);

// Success toast (2 seconds)
showToast('Redirecting to payment...', 'success', 2000);

// Error toast (5 seconds)
showToast('There was an error. Please try again.', 'error', 5000);

// Remove specific toast
removeToast(loadingToastId);

https://donork.it/locc

<div class="bg-gray-50 border border-gray-200 rounded-lg overflow-hidden">

.custom-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background-color: #fff;
}

.cover-fees:checked + .custom-checkbox {
  background-color: #8B5A2B; /* Brand color */
  border-color: #8B5A2B;
}

.amount-btn.selected {
  border-color: #8B5A2B;
  background-color: rgba(139, 90, 43, 0.05);
  color: #8B5A2B;
}

<button type="button" class="amount-btn" data-amount="10">$10</button>
<button type="button" class="amount-btn" data-amount="20">$20</button>
<button type="button" class="amount-btn" data-amount="50">$50</button>
<button type="button" class="amount-btn" data-amount="100">$100</button>

function calculateFee(amount: number): number {
  return Math.round((amount * 0.035 + 0.50) * 100) / 100; // New rates
}

<!-- Default to one-time instead of recurring -->
<input type="radio" name="donationType" value="one-time" checked />
<input type="radio" name="donationType" value="recurring" />

<!-- Change default amount -->
<input type="number" name="amount" value="100" />

<!-- Change default frequency -->
<select name="frequency">
  <option value="weekly" selected>Weekly</option>
</select>

const response = await fetch('https://api-test.locc.us/api/v2/donation', {
  // ...
});

// Trigger form submission
document.getElementById('donation-form').dispatchEvent(new Event('submit'));

// Check form data
const formData = new FormData(document.getElementById('donation-form'));
for (let [key, value] of formData.entries()) {
  console.log(key, value);
}

try {
  const response = await fetch(...);
  const data = await response.json();
  
  if (data.success && data.url) {
    // Success
  } else {
    throw new Error(data.message || 'Failed to create donation session');
  }
} catch (error) {
  console.error('Donation error:', error);
  showToast('There was an error. Please try again.', 'error', 5000);
  // Reset form state
}