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 Twitter 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 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.

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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.