Skip to main content
Parque Marino del Pacífico Sur is a non-profit institution. Donations and volunteer engagement are central to its ability to fund conservation, research, and education programmes. Both flows are accessible to the public without requiring an account.

Donation portal

Visitors can donate in Costa Rican colones or US dollars using PayPal, credit/debit card, or SINPE Móvil / cash. A real-time currency converter uses an exchange rate of 1 USD = 520 CRC.

Volunteer sign-up

Prospective volunteers complete a short form. The submission is sent via EmailJS so the park team can follow up by email or phone.

​
Donation flow

The Donar component (frontend/src/components/home/metodos-y-donaciones/Donar.jsx) renders programme cards from a static data file (donarData). Each card can expose one or more action buttons that open a modal with the appropriate form or payment interface. The PaymentSelector component inside the modal drives the donation transaction:
1

Choose currency

The donor selects Colones (CRC) or Dólares (USD). Switching currency converts the current amount automatically.
// Donar.jsx — PaymentSelector
const EXCHANGE_RATE = 520; // 1 USD = 520 CRC

const handleCurrencyChange = (newCurrency) => {
  if (newCurrency === 'USD') {
    setAmount(Math.round(amount / EXCHANGE_RATE));
  } else {
    setAmount(Math.round(amount * EXCHANGE_RATE));
  }
};
2

Select an amount

Suggested amounts are shown as quick-select buttons. The donor can also enter a custom amount.
CurrencySuggested amounts
CRC₡5,000 · ₡10,000 · ₡25,000 · ₡50,000 · ₡100,000
USD5⋅5 · 10 · 25⋅25 · 50 · $100
Minimum amounts: ₡1,000 CRC or $2 USD.
3

Choose a payment method

The PaypalPayment component processes the transaction. The payment method string recorded is "PAYPAL".
4

Donation recorded

On success the frontend calls createDonation() to persist the transaction:
// Donar.jsx — handleDonation
await createDonation({
  amount,
  currency,          // 'CRC' | 'USD'
  payment_method: method === 'card'   ? 'CARD'
                : method === 'paypal' ? 'PAYPAL'
                : 'CASH',
  status: 'SUCCESS',
  transaction_id: paymentDetails.transaction_id || '',
});
A confirmation message is shown in the modal on success.
The PayPalMetodo component is present in the codebase (PaypalMetodo.jsx) but is currently commented out in Donacion.jsx. Only the in-modal PayPal integration via PaypalPayment is active.

​
Contact form for institutional donations

For larger or institutional donations the “Contactar para donar” button opens the ContactDonationForm modal. This form collects the donor’s details and sends them to the park team rather than processing a payment immediately.

​
Volunteering

The volunteer application is handled by VolunteerContactForm (frontend/src/components/home/metodos-y-donaciones/VolunteerContactForm.jsx). It collects:
  • Nombre completo (required)
  • Correo electrónico (required, validated with regex)
  • Teléfono (optional)
  • Motivación — why the applicant wants to volunteer (required)
  • Preferred contact method — email or phone
On submit the form sends the data to EmailJS: 
// VolunteerContactForm.jsx
const Datos = {
  nombre: form.name,
  correo: form.email,
  asunto: 'Solicitud de Voluntariado',
  mensaje: form.motivation,
};

emailjs.send(
  'service_ke9gzcs',
  'template_cho3xqg',
  Datos,
  '3mQx8AVIUbbufg0BX'
);
The park team receives the message and contacts the applicant through their preferred channel. The volunteer page (/apoyo/voluntariado) renders the VolunteerContactForm inside a modal triggered from the donation/support section.
Volunteer applications and donation contact requests both go through EmailJS. Delivery depends on the EmailJS account quota and template configuration.

​
Park mission

As stated in the Donar component header:
“El Parque Marino Central del Pacífico Sur es una institución sin fines de lucro dedicada a la conservación, investigación y educación sobre los ecosistemas marinos de Costa Rica. Tu donación nos ayuda a continuar con nuestra labor de protección de la biodiversidad marina.”
Donations directly fund the rescue centre, research laboratory, educational programmes, and exhibit maintenance described in the rest of this documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us