This web widget allows you to add functionality to your website to take one off or recurring payment card donations.
A web widget comprises HTML code which you will add to a page on your website to allow a donation to be made.
Before you can add the widgets you need to:
- Connect Donorfy to Stripe - Stripe is the organisation that will process the payment on your behalf see the knowledge base article 'Connecting to Stripe' for details
- Once you have set up your Stripe account you need to login to your Stripe account and find your publishable key - the Stripe documentation will tell you how to that
- Add pages to your website - the minimum you will need is
- a page to host the web widget - e.g. a make a donation page
- a thank you page which is displayed when a donation is made
You can add as many web widgets as you want - for example to make donations to different funds or on landing pages for different campaigns. You can use the same ‘thank you’ page for many web widgets.
Creating the Widget
In Donorfy open the settings and find the web widgets - add a new widget as follows:
- Give the widget a meaningful description
- Complete the Website Settings section
- Choose 'Payment Card Donation using Stripe' as the type of widget you want
- Enter the Stripe Publishable key
- Enter the URLs of the page to display to thank a donor
- Complete the Transaction Settings section - this settings are used to correctly process donations received, the Product and Payment Method must be entered, the other settings are optional
- You can specify the different acknowledgements you want to use depending on whether you want to send the acknowledgement by email or mail - these work as follows:
- if you specify an email acknowledgement and the donor provides an email address then the email acknowledgement will be used
- if you do not specify an email acknowledgement or the donor does not provide an email address any mail acknowledgement will be used - provided the donor has provided a postal address
- Transaction related acknowledgements are used for one off donations, Recurring payment instructions acknowledgements are used for recurring gifts
- Press the Generate Widget button, the preview will show the fields in the widget - the display does not include any styling as this will be inherited from your website.
- Press the HTML button - this will show the HTML code for the widget
- Click into the HTML code - select all the HTML code (either double clicking or CTRL + A should select all) then copy all the HTML - either using the right click menu or CTRL + C
- Paste the HTML code into the donation page on your website, when you paste the widget code is has to be pasted in as HTML (or mark up) rather than just as 'content'.
How that is exactly done depends on your website.
Often when you go to the screen where you would add or edit a page there is an option to switch modes from content to HTML - there may be a button or tab labelled 'text' you have to click on which switches modes - if you are using Wordpress so this may help, whoever looks after your web site may be able to help you.
- Save and publish the page
Testing the Web Widget
After you have added the widget to your site you can enter a test donation using
- Test donor information e.g. John Smith, email email@example.com
- Test card details of
- card number: 4242424242424242
- card type: Visa
- expiry date: any valid date in the future in the format month/year
- cvc code: 123
The test payment will be passed to Stripe, then to Donorfy finally your thank you page will be displayed.
If you then go into Donorfy and search for your test donor you will find the transaction and if it was a recurring donation their recurring payment instruction on their timeline.
Changing the Widget
If you change anything in the Website Settings section of widget then you need to re-generate the Widget and copy the HTML code to your website
If you change anything in the Transaction Setting section then you don’t need to re-generate the widget - your new settings will be used for new donations as they are received.
Donation Processing Details
If you open a donation made via a web widget and display the payment details you can see the card information and transaction codes - as shown in the example below
Donations from Existing Donors
When we receive details of donation we will try to find an existing donor using the email address entered, if we have
- No matching email address we will add a new donor and add the transaction to the new donors timeline
- One matching email address we will add the transaction to the existing donors timeline
- More than one matching email address we will add the transaction to the list found under Financial | Online Donations - this allows you to choose which constituent the donation should be recorded against.
Donations that Fail
If a donation cannot be collected - e.g. due to lack of available funds - then a message will be displayed to the donor at the time
Editing the HTML in the Generated Widget
After you paste the widget HTML into your website you can edit it - e.g. make the style consistent with the rest of your website, change the layout, add graphics, change the wording etc. The key things are that you must NOT change are:
- The form tag
- The ids, names and maximum field lengths of the input fields
- The hidden fields at the end of the generated HTML - after the comment 'Do not change these values' - these are used to control the operation of the widget.