Web Widget Troubleshooting


This article has some suggestions to help solve problems that may be experienced in getting Web Widgets working, best practice and where to locate information about errors occurring.


Only One Widget per Page 

You should set up your giving pages so you only have one widget on a page - if you have two widgets on the same page - even if one is hidden - the widgets will not work properly.

Also, don't have Stripe & GoCardless widgets on the same page.


Are you using Squarespace?

There are some specific steps to getting a widget working in Squarespace see this article


Your page should use https:// not http://

Your page should have an SSL certificate - i.e. its address should start https 



Don't use iFrames with GoCardless - GoCardless Web Widgets cannot be contained in an iFrame


The Error Log

Donorfy displays very limited error information in the web widget - this is to avoid providing information to anyone trying to hack your web widgets - to find more information sign in to Donorfy and look at the Errors & Info tab on the Online Donations page. Financial > Online Donations > Errors & Info




Check for errors logged to the Console of your web browser

  • Start your web browser, open the developer tools and display the console - go to the page containing your web widget and see if any errors are logged into the Console - errors can prevent the widget from initialising and then it will not work - similar to the example below


    • Often the errors relate to third-party libraries - e.g. jQuery - if you see an error relating to jQuery try adding a reference to it as the first line in the <head> of the page - as per the example below - you might need help from whoever looks after your website to resolve these.
<link type="text/css" rel="stylesheet" href="https://az763204.vo.msecnd.net/wwcss/stripepayments.2015.1.css">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="https://az763204.vo.msecnd.net/wwjs/stripepayments_2016.10.js"></script>


Not Secure warning 

If your webpage displays as Not Secure, it may be loading an image over http

In the HTML code, locate the following line:

<img id="img-spinner" src="http://cdn.donorfy.com/wwimages/loading.gif" alt="Loading"> 

The image link will need updating to one of the below:


Replace the src text to feature one of the images above: e.g

<img id="img-spinner" src="https://az763204.vo.msecnd.net/wwimages/loading.gif" alt="Loading"> 


Invalid Settings In Errors & Info 

If you see a message like

  • 'Invalid GoCardless Settings' or 'Invalid Stripe Settings', or 
  • The provided key 'sk_live_***********' does not have access to account 'acct_xxxxxxxxxx' (or that account does not exist). Application access may have been revoked

It means your Donorfy is not connected to Stripe or GoCardless or there is a problem with the connection and you need to disconnect from Stripe or GoCardless and re-connect


Are you using the right Stripe Publishable Key?

If you see a message similar to

  • No such token: tok_1Dixxxxx a similar object exists in test mode - you are using a test publishable key - see 'Stripe Publishable Keys and Test Card Numbers' below 
  • No such token: tok_1Dexxxxxxx - i.e. a similar message to above but without the 'a similar object exists in test mode' on the end -  or There is a problem with your donation - use your platform's publishable key combined with the `stripeAccount` parameter to confirm this PaymentIntent  this may mean the publishable key you have put into your widget is not from the Stripe account you have connected to - you could try
    • disconnecting from Stripe and reconnecting to be sure which account you are connected to 
    • check the publishable key in the Stripe dashboard against the value used by your widget - e.g. look at the hidden field in the widget similar to the example below
<input type="hidden" id="PublishableKey" value="pk_xxxxxxxx">

If you see an error similar to this 'There is a problem with your payment – Use your platform's publishable key combined with the `stripeAccount` parameter to confirm this PaymentIntent.'

Then this means the publishable key in the hidden field of your widget e.g. <input type="hidden" id="PublishableKey" value="pk_test_xxxxxxxxxxxxxxxxx" /> is different from the publishable key in your Donorfy Stripe Connect settings - you should 

  • Generate a new widget in Donorfy
  • Find the hidden PublishableKey field in the new widgets HTML 
  • Copy that publishable key into the widget 


The Wrong Page Displayed After Sign up

If after signing up for a direct debit your see the generic Donorfy error page at https://donorfy.com/payment-error - see the end of this article for an example - it means there is a problem with the URLs in the web widget settings - see below - this might be, the URL




Stripe Publishable Keys and Test Card Numbers 

Web widgets cannot use test Stripe publishable keys - you must use your live publishable key in the widget set-up - see the example below


Then if you use a test Stripe card number - e.g. 4242424242424242

  • you will see an error logged similar to this 'No such token: tok_xxx; a similar object exists in test mode, but a live mode key was used to make this request.'
  • This message means your web widget is probably working but you will need to use a real card number to perform a full end-to-end test.
  • If you use a real card you can cancel the transaction in the Stripe dashboard if needed

Amount debited in Stripe differs to the amount shown in Donorfy

If you alter the widget HTML to select a preset amount, and find Stripe is debiting a smaller amount than expected while Donorfy shows the full amount, this may be due to how the Amount value is processed.

For example:

  • Web page coded to show £55
  • Stripe debits £0.55
  • Donorfy transaction and history logs display £55.00

The Amount value must be a string with a decimal point:

// correct:
<input type="hidden" name="Amount" value="55.00" id="Amount">

// £55 transaction and £0.55 Stripe charge:
<input type="hidden" name="Amount" value="55" id="Amount">

Stripe card detail boxes are not present


Card Number fields do not seem to be working 

This may be due to cookie management on your webpage - as there are temporary cookies used within the Widgets the cookie management tools can disable the scripts that load the Stripe payment boxes. If you disable the cookie management tools for the donation page the boxes should appear again.


If you are using the Stripe widgets which are Strong Customer Authentication compliant - see this - the fields where people enter their card number, expiry date and CVC code might not look like you can enter anything into them - as per the example below. If you can see the placeholders in the fields - i.e. 4 sets of 1234 in the card number, MM/YY in the expiry date and CVC then the widget is initialising properly, also if you type a random card number in it will be shown in red as it is invalid. 

This means your widget is working but you need to make the card number field etc look like the other fields see the next section in this document 'Making the Card Number and associated fields look like the other fields on your page' 




Error when Donate button is pressed

If you get an error similar to 'There is a problem with your payment - Invalid widgetId'  or 'Invalid payment owner' then you need to check the widget Id in your hidden field

The Widget HTML code generated by Donorfy contains the widget Id in a hidden field - something like this - where the x's will be replaced with letters or numbers

<input type="hidden" id="WidgetId" value="xxxxxxx-xxxx-xxx-xxxx-xxxxxxxxxxxx" /> 

If you delete and re-add a widget it will get a new widget id

If the widget HTML on your web site the widget id is all zeros (e.g. <input type="hidden" id="WidgetId" value="00000000-0000-0000-0000-000000000000">) or missing you need to copy the HTML into your website 

If the HTML in the Donorfy settings has a widget id that is all zeros you should re-generate the widget HTML 



Example of Generic Donorfy Error Page








Web Widgets are a Professional-only feature. Essential subscribers, please contact us to find out more about upgrading.



Please sign in to leave a comment.
Powered by Zendesk