Website users do not need to already hold a PayPal account. In most instances, they can click to checkout as a guest; and pay using normal credit or debit cards. However quite a lot of people might not realise this, so it is worth stating this on your website, next to DonateStack.

The standard PayPal fees are applied to each transaction. If you are registered as a charitable organisation, you may be able to negotiate reduced or free payment processing in some countries.

DonateStack is quick and simple to deploy within a website. The only mandatory setting is the account name or email address for the nominated PayPal account you want funds paid into. All other settings are optional. Stacks 3 or later is required.

DonateStack is styled to match Bootstrap forms. It purposefully has 'fat and friendly' styling, to make it extra user-friendly for all website users. Several style settings are included, to enable you to customise the appearance and get it to match your existing website. It is easy to integrate DonateStack into some of our other popular stacks, like TintStack, Shady or StandOut.

A useful advanced feature is the ability to pre-populate the donation amount field with a URL query string. This opens-up the possibility of being able to use the CalcStack for a user to calculate a donation amount, and then CalcStack can pass the answer over into DonateStack. It's one of the reasons this stack was created.


This is a real working example of the DonateStack, with the address fields enabled:


Follow these instructions for getting a DonateStack working in your webpage. Please remember that a PayPal account is required, before for you can start accepting payments!
  1. Download and install the stack into RapidWeaver using the normal methods
  2. Add a stacks page to your project if you have not done so already
  3. Open the stacks library, and drag-and-drop a copy of DonateStack into your webpage
  4. Select the stack in edit mode and access the stack settings
  5. In the stack settings, customise aspects of the stack like the PayPal account, locale, currency, input method and any localisations
  6. Preview your page to see the DonateStack. Check that the 'submit' button redirects users through to the PayPal website, when clicked (with your business or account name shown on the PayPal website). Publish the webpage when finished.

Sample PayPal details are included already, to show you what needs to get entered and where. Be sure to change this information before publishing your website, otherwise payments will be sent for-real to this PayPal account and cannot be refunded! If you like using DonateStack, then of course feel free to make a small PayPal contribution through DonateStack, to show your appreciation for the extensive development and testing that has been put into this stack.

It is recommended that you provide a confirmation link in the stack settings. This is the page a user is sent to after the transaction is completed on PayPal; like a special 'thank you' page. Alternatively you could link to the page DonateStack has been placed on and include a query string that can trigger the display of a message using QueryDisplay.

The display of name and address fields is optional. When enabled, the name and address fields are displayed on your website for a user to complete. This information is then passed over to PayPal (together with the donation amount) and it saves the hassle of someone having to complete the same details on PayPal a second time.

Pre-populating the amount field from a URL query string:

When enabled, the DonateStack will check the browser address bar for any matching query strings and associated values. This is a good option to use if the person is able to customise how much they want to pay on another page or using a stack like CalcStack. For example, if you setup DonateStack to look for a donate query string, you can look for a value in the address bar like this:

In this instance, the amount field will be set to 30 as the page loads. Of course, a user could still customise the value if they want to. This method only works with number input boxes, not select menus.


If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.