Building a simple webpage with the ammado donation API

ammado provides a number of ways to fundraise and raise awareness of your cause online. We provide a donation widget which can be embedded on a website within minutes. We also have a Facebook giving application that can be added to a fan pages with a few clicks. 

However, a number of developers and nonprofit websites have asked us for more control over the user donation experience, workflow and styling. This can be achieved with the ammado donation API and as we add more capability you can build a richer webpage experience. The donation API can be used to make a single donation to a nonprofit or fundraiser in a 75+ currencies using 30+ payment methods.

Sample API webpage

For our simple API example we will create a webpage used to collect donations for an Earthquake Appeal. The developer has preselected the beneficiary for the donation and has decided to supply some preset amounts with some context of what each donation amount can do. There are no constraints in the layout and style of your webpage (only limited by your imagination).

.AimpleAPISteps.png

The basic user flow for a donation using the API is outlined in the image above. As a web developer you need to implement steps (1) and (4) - ammado handles the payment processing in steps (2) and (3).

The solution requires you to add an HTML form on your website (1) with several parameters to pass minimal amount of information to ammado. Once the data is submitted from your website to ammado, we present the donor with a screen offering a choice of payment methods (2). Credit card payments are then handled by the WorldPay payment gateway (3). After the donor successfully confirms the transaction, they are returned to a success page on your website (4). The funds received are distributed directly to nonprofits every month.

To start raising funds on your website you need to pick a nonprofit or a fundraiser and create an HTML form to pass the beneficiary and some other basic information to ammado.

  • The form action must be https://api.ammado.com/v1/donate.
  • You must not make direct calls from your website's backend to the /donate API endpoint - you must let the donor's browser submit the form.
  • The form fields may appear in any order
  • You may create a success page on your website with a customized "Thank you" message.

The following code snippet shows the form code for the above example with the the parameters to be passed to the API donate action (substitute your values for YourDonationBeneficiary, YourDeveloperKeyGoesHere, YourDonationSuccessPage, YourDonationErrorPage)

 

<form method="post" action="https://api.ammado.com/v1/donate" accept-charset="utf-8">
<div>
<label for="donorEmail">Email:</label>
<input type="email" name="donorEmail" id="donorEmail" value="" />
</div>

<fieldset>
<div>
<input type="radio" name="donationAmount" id="amount10" value="10" />
<label for="amount10">€10</label>
</div>
<div>
<input type="radio" name="donationAmount" id="amount25" value="25" />
<label for="amount25">€25</label>
</div>
<div>
<input type="radio" name="donationAmount" id="amount50" value="50" />
<label for="amount50">€50</label>
</div>
<div>
<input type="radio" name="donationAmount" id="amountOther" value="" />
<label for="amountOther">Other</label>
<input type="number" min="4" max="10000" name="donationAmount" id="customAmount" />
</div>
</fieldset>

<input type="hidden" name="currencyCode" value="EUR" />
<input type="hidden" name="beneficiaryId" value="YourDonationBeneficiary" />
<input type="hidden" name="apiKey" value="YourDeveloperKeyGoesHere" />
<input type="hidden" name="onSuccess" value="http://YourDonationSuccessPage.html" />
<input type="hidden" name="onError" value="http://YourDonationErrorPage.html" />

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

 

 

SimpleAPISite2.jpg

 

Hopefully this post has shown how straight forward integration with our donation API is. If you have an interesting project where you would like to use the ammado donation API let us know at support@ammado.com and we can organise a developer key. Detailed technical information can be found on the API documentation page https://api.ammado.com .

Have more questions? Submit a request

Comments