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 

 

iFrames

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

mceclip0.png

 

 

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

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>

 

 

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

mceclip3.png

 

 

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

mceclip2.png

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 have edited the HTML code to display a fixed amount and Stripe is debiting a smaller amount but Donorfy shows the full amount, this may be due to missing decimalisation.

For example:

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

You will need to add decimalisation to the code where the amount has been coded, for example:

<input type="hidden" name="Amount" value="55" id="Amount">

Should be: <input type="hidden" name="Amount" value="55.00" id="Amount">

 

Stripe card detail boxes are not present

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.

 

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 

mceclip1.png

 

Example of Generic Donorfy Error Page

 

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk