Seamless Campaign Donation Integration

Donation Form Integration Proposal – Brief

Objective
Embed the full donation form directly on the campaign landing page to remove the current popup, reduce friction, improve clarity, and increase conversion rate. The updated flow will support credit cards, Apple Pay, and Google Pay via Stripe. All donation events will remain fully traceable for PDPA, IRAS, and financial audit requirements.
Key Improvements
• Inline donation form directly on the landing page (no popup).
• “Donate” buttons scroll to the form smoothly.
• Dynamic fields based on donor type: Personal vs Corporate.
• Embedded Stripe Elements for secure card entry.
• Apple Pay & Google Pay via Stripe Payment Request Button.
• Inline success and error messages to reduce drop-off.
• Full event logging and donation records for audit.
User Flow
1. User lands on the campaign page and scrolls to the embedded donation form.
2. User selects donor type: Personal or Corporate.
3. Relevant identification fields appear automatically (NRIC/FIN or UEN).
4. User enters donation amount (preset or custom).
5. User chooses payment method: Credit Card, Apple Pay, or Google Pay (based on device/browsersupport).
6. User submits payment → inline confirmation message appears.
7. Backend creates Stripe PaymentIntent and stores donation metadata.
8. Stripe webhook updates donation status and triggers confirmation email.

Developer Tasks – Frontend
• Embed the donation form directly into the campaign page and remove popup triggers.
• Implement donor-type toggle with conditional display of form fields.
• Build predefined amount buttons + custom amount input with validation.
• Integrate Stripe Elements for secure card entry.
• Add Stripe Payment Request Button for Apple Pay and Google Pay.
• Show Apple Pay / Google Pay only when supported by the device.
• Implement inline error messages, loading states, and button disabling during submission.
• Add GA4/GTM tracking for form view, donor type, amount selection, payment method, and donationsuccess.

Developer Tasks – Backend
• Create backend endpoint to initialize donation and generate Stripe PaymentIntent.
• Store full donor information, amount, payment method, campaign ID, and audit fields.
• Implement Stripe webhook to handle payment success/failure.
• Update donation record with PaymentIntent and Charge IDs.
• Send confirmation email on successful payment.
• Provide exportable reporting for finance and IRAS submissions.

Traceability
All donations will be logged with donor identity, amount, campaign ID, timestamps, payment method (Card/Apple Pay/Google Pay), and Stripe references. This ensures full auditability for internal finance, PDPA compliance, and IRAS tax-deduction submissions.

Outcome
A streamlined, mobile-optimized donation experience with one-tap wallet payments, higher conversion, and secure traceability—supporting Sian Chay’s fundraising goals with modern, user-friendly payment infrastructure.