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
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.
<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>
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:
https://az763204.vo.msecnd.net/wwimages/loading.gif
https://az763204.vo.msecnd.net/wwimages/circleLoading.gif
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
- Is missing
- Does not have a full address - e.g. /ThankYou instead of https://www.example.org/thankYou
- The URL contains
- characters that are not letters - e.g. https://www.example.org/thank-You should be changed to https://www.example.org/thankYou
- query parameters - e.g. https://www.example.org/thank-You?q=12 remove any parameters
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 pre-set 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.
Or
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'
Uncaught TypeError: $ is not a function error message
This should be able to be fixed by adding the following code line to the top of the Web Widget code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
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.
Comments