Web Widget Troubleshooting

This article has some suggestions to help solve problems getting web widgets working.

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 under Financial

 

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.

Check for Errors Logged to the Console of your 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

mceclip0.png

    • 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.
<head>
<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>
</head>

Are you using Squarespace?

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

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

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 

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

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

Other things to check

  • Don't use iFrames with GoCardless - GoCardless web widgets cannot be contained in an iFrame
  • Don't have Stripe & GoCardless widgets on the same page 

Example of Generic Donorfy Error Page

 

Have more questions? Submit a request

Comments

Powered by Zendesk