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.

Example

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

Setup

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 method.
  2. Add a Stacks page type to your project, if you have not done so already.
  3. Open the Stacks Library. Search for 'DonateStack'. Drag-and-drop a copy of DonateStack into your webpage.
  4. Select the stack in edit mode and access its settings, within the Stacks side panel.
  5. In the stack settings, customise aspects of the stack like the PayPal account, locale, currency, input method and any localisations. Be sure to replace the example will.woodgate@gmail.com email address with your own PayPal email address!
  6. Preview your page to see the DonateStack. Carefully check that the 'submit' button redirects users correctly through to the PayPal website, when clicked. Confirm that your business or account name is showing on the PayPal website.
  7. Export or publish the webpage in the normal way, when finished.


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:

http://example.com/?donation=30

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.
 

Contribute

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.