Donate Button

The Donate Button allows you to accept donations on your website through Paysera's secure payment system. Visitors can select donation amounts and choose their preferred payment method.

Overview

The Donate Button provides a simple way to collect donations for your organization, charity, or cause. It offers:

• Flexible amounts - Donors can choose how much they want to contribute
• Multiple payment methods - Accept donations via cards, bank transfers, and e-wallets
• Secure processing - All payments are processed through Paysera's secure platform
• Easy integration - Two simple implementation methods

Prerequisites

Before implementing the Donate Button, you need to:

1. Have a Paysera account - Register here
2. Order "Online Payment Processing via E-banking and Other Systems" service
3. Create a project in your Paysera account
4. Obtain your project_id and project_password

See Obtaining Credentials for detailed setup instructions.

Implementation Methods

There are two ways to implement the Donate Button on your website:

Method A: Generated Code Snippet (Easiest)

This is the quickest method - Paysera generates the HTML code for you.

Steps:

1. Access Project Settings

   • Log in to your Paysera account
   • Navigate to: Projects and Activities → My projects
   • Select your project

2. Generate Button Code

   • Go to: Project Settings → General Settings → Donation Button
   • Click Generate
   • Copy the generated HTML code

3. Add to Your Website

   • Paste the HTML code snippet where you want the button to appear
   • The button will be automatically styled and functional

Example generated code:

<!-- Paysera Donate Button -->
<form action="https://www.paysera.com/pay/" method="post">
    <input type="hidden" name="data" value="YOUR_ENCODED_DATA" />
    <input type="hidden" name="sign" value="YOUR_SIGNATURE" />
    <input type="image" src="https://www.paysera.com/img/donate_button.png"
           alt="Donate via Paysera" />
</form>

Advantages

✅ No coding required ✅ Pre-configured and tested ✅ Automatic updates from Paysera ✅ Secure by default

---

Method B: PHP Script Implementation

For more control and customization, use the PHP script method.

Steps:

1. Download PHP Script

   • Download the donate button PHP script package from Paysera
   • Extract the files to your website directory

2. Configure Credentials

   • Open gateway_button.php file
   • Add your projectid and project_password

<?php
// gateway_button.php configuration

$projectid = 12345; // Your project ID
$sign_password = 'your_project_password'; // Your project password

// Donation settings
$currency = 'EUR';
$accepturl = 'https://yoursite.com/donation-success';
$cancelurl = 'https://yoursite.com/donation-cancel';
$callbackurl = 'https://yoursite.com/donation-callback';

3. Create Donation Form
   • Create an HTML form on your page
   • Link it to the configured PHP script

<form action="gateway_button.php" method="post">
    <h3>Support Our Cause</h3>

    <label>
        <input type="radio" name="amount" value="1000" checked> €10
    </label>
    <label>
        <input type="radio" name="amount" value="2500"> €25
    </label>
    <label>
        <input type="radio" name="amount" value="5000"> €50
    </label>
    <label>
        <input type="radio" name="amount" value="10000"> €100
    </label>

    <div>
        <label>
            Custom amount (€):
            <input type="number" name="custom_amount" min="1" step="0.01">
        </label>
    </div>

    <button type="submit">Donate Now</button>
</form>

4. Handle Form Submission

<?php
// gateway_button.php

require_once 'WebToPay.php';

$projectid = 12345;
$sign_password = 'your_project_password';

// Get amount from form
$amount = isset($_POST['custom_amount']) && $_POST['custom_amount'] > 0
    ? $_POST['custom_amount'] * 100 // Convert to cents
    : $_POST['amount'];

// Prepare payment data
$orderData = [
    'projectid' => $projectid,
    'orderid' => 'DONATION-' . time(),
    'amount' => $amount,
    'currency' => 'EUR',
    'accepturl' => 'https://yoursite.com/donation-success',
    'cancelurl' => 'https://yoursite.com/donation-cancel',
    'callbackurl' => 'https://yoursite.com/donation-callback',
    'version' => '1.9',
    'test' => 0, // Set to 1 for testing
];

try {
    // Generate payment request
    $request = WebToPay::buildRequest($orderData, $sign_password);

    // Redirect to payment page
    header('Location: https://www.paysera.com/pay/?' . http_build_query($request));
    exit;
} catch (WebToPayException $e) {
    die('Payment request failed: ' . $e->getMessage());
}

Advantages

✅ Full customization control ✅ Custom donation amounts ✅ Branded donation experience ✅ Integration with your CMS

Customization Options

All standard Checkout API parameters are supported. You can customize:

Donation Information

Parameter	Description	Example
amount	Pre-set donation amount in cents	5000 (€50)
currency	Currency code	EUR, USD, GBP
paytext	Donation purpose text	Donation to [owner_name]

Donor Information

Parameter	Description
p_firstname	Donor's first name
p_lastname	Donor's last name
p_email	Donor's email address

Visual Customization

You can replace the default donate button image with your own:

<input type="image" src="/images/custom-donate-button.png"
       alt="Support Us"
       style="width: 200px; cursor: pointer;" />

Complete Example

Here's a complete, styled donation form example:

Simple Form

<!DOCTYPE html>
<html>
<head>
    <title>Support Our Mission</title>
    <style>
        .donate-container {
            max-width: 500px;
            margin: 50px auto;
            padding: 30px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .donate-container h2 {
            color: #1a1a1a;
            margin-bottom: 20px;
        }
        .amount-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 20px 0;
        }
        .amount-option {
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            font-weight: 600;
        }
        .amount-option:hover {
            border-color: #0F62FE;
            background: #f0f7ff;
        }
        .amount-option input[type="radio"] {
            margin-right: 8px;
        }
        .custom-amount {
            margin: 20px 0;
        }
        .custom-amount input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
        }
        .donate-button {
            width: 100%;
            padding: 15px;
            background: #0F62FE;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
        }
        .donate-button:hover {
            background: #0353E9;
        }
    </style>
</head>
<body>
    <div class="donate-container">
        <h2>Support Our Mission</h2>
        <p>Your donation helps us continue our important work.</p>

        <form action="gateway_button.php" method="post">
            <div class="amount-options">
                <label class="amount-option">
                    <input type="radio" name="amount" value="1000" checked>
                    €10
                </label>
                <label class="amount-option">
                    <input type="radio" name="amount" value="2500">
                    €25
                </label>
                <label class="amount-option">
                    <input type="radio" name="amount" value="5000">
                    €50
                </label>
                <label class="amount-option">
                    <input type="radio" name="amount" value="10000">
                    €100
                </label>
            </div>

            <div class="custom-amount">
                <label>
                    Or enter custom amount (€):
                    <input type="number" name="custom_amount" min="1" step="0.01" placeholder="Enter amount">
                </label>
            </div>

            <button type="submit" class="donate-button">Donate Now</button>
        </form>

        <p style="margin-top: 20px; font-size: 14px; color: #666;">
            Secure payment processing by Paysera
        </p>
    </div>
</body>
</html>

With Donor Info

<form action="gateway_button.php" method="post" class="donate-form">
    <h2>Make a Donation</h2>

    <!-- Donation Amount -->
    <fieldset>
        <legend>Select Amount</legend>
        <div class="amount-grid">
            <label><input type="radio" name="amount" value="1000"> €10</label>
            <label><input type="radio" name="amount" value="2500"> €25</label>
            <label><input type="radio" name="amount" value="5000" checked> €50</label>
            <label><input type="radio" name="amount" value="10000"> €100</label>
        </div>
        <input type="number" name="custom_amount" placeholder="Custom amount (€)" min="1" step="0.01">
    </fieldset>

    <!-- Donor Information -->
    <fieldset>
        <legend>Your Information (Optional)</legend>
        <input type="text" name="p_firstname" placeholder="First Name">
        <input type="text" name="p_lastname" placeholder="Last Name">
        <input type="email" name="p_email" placeholder="Email Address">
    </fieldset>

    <!-- Submit Button -->
    <button type="submit" class="donate-button">
        Complete Donation
    </button>
</form>

Processing Donations

After a donor completes their payment:

1. Redirect - Donor is redirected to your accepturl or cancelurl
2. Callback - Paysera sends payment confirmation to your callbackurl
3. Verification - Verify the callback signature to confirm authenticity

See Processing Callback for detailed information about handling payment confirmations.

Testing

To test donations before going live:

1. Enable Test Mode

   • Go to your project settings
   • Enable "Allow test payments"
   • Add test=1 parameter to your donation requests

2. Use Test Cards

   • Card number: 4444 3333 2222 1111
   • Expiry: Any future date
   • CVV: Any 3 digits

Production

Remember to disable test mode and remove the test parameter before accepting real donations!

Troubleshooting

Button Doesn't Work

Check:

• Form action URL is correct
• projectid and sign_password are properly configured
• Payment service is activated in your Paysera account

Payment Fails

Common causes:

• Invalid project credentials
• Project not verified
• Payment service not ordered
• Test mode enabled for production donations

No Callback Received

Check:

• Callback URL is publicly accessible
• Callback script returns "OK"
• Signature verification is correct

Support

Need help with complex integrations?

Contact: tech_support@paysera.com

Related Documentation

• Obtaining Credentials - Setup your account
• Custom Integration - Advanced implementation
• Processing Callback - Handle payment confirmations
• Request Parameters - All available parameters
• FAQ - Common questions