Creating a GoCardless Web Widget

This web widget allows you to add functionality to your web site to allow people to make recurring donations via direct debit using Go Cardless

A web widget comprises HTML code which you will add to a page on your web site to allow a donation to be made.

Before you can add the widgets you need to connect Donorfy to GoCardless - see the knowledge base article 'Connecting to GoCardless' for details 

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 Web Site Settings section
    • Choose 'Direct Debit Sign Up using GoCardless' as the type of widget you want
    • Enter the URL of the page on your web site to display
      • to thank a donor after setting up a direct debit
      • if there has been a problem setting up the direct debit
    • Optionally you can enter some text to appear on the GoCardless sign up forms - note this text must be less than 100 characters long
  • 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 so are not sent for GoCardless sign ups the Recurring payment instructions acknowledgements are used instead
  • 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 web site.
  • 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, save and publish the page - Note the widget must not be embedded in a iframe as it will not work properly 

 Changing the Widget

If you change anything in the Web Site Settings section of widget then you need to re-generate the Widget and copy the HTML code to your web site

 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.

Checking the Recurring Donations set up by the Web Widget

Click the plus sign next to the Actions menu to open the sub menu, click on Review Web Site Updates - click on the History tab - this will show the donations setup in the last 30 days - you can select a constituent from the list.

Donorfy stores the details of recurring donations on a constituents timeline as a Recurring Payment Instruction

Recurring Donations from Existing Donors

When we receive details of recurring 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 recurring donation to the new donors timeline
  • One matching email address we will add the recurring donation to the existing donors timeline
  • More than one matching email address we will add the details to the list found under Actions /  Review Web Site Updates - this allows you to choose which constituent the details should be recorded against.

Editing the HTML in the Generated Widget

After you paste the widget HTML into your web site 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.
Have more questions? Submit a request

Comments

Powered by Zendesk