This demo store runs in test mode, so no real payment is taken. That does not change what is being shown: on page A the button produces nothing at all, on page B the same button creates the checkout and answers back.
Reproduced on a clean store running SureCart 4.7.2, the same version as your site. Both pages below use the same embedded checkout form block, the same theme and the same plugin build. The only difference is whether one required field in the form has a valid value when the page loads.
A – The checkout button does nothing
Open the page, leave the amount field empty and press Donate now. The button reacts visually but nothing else happens: no request in the Network tab, no error in the Console. Then type 25 into the amount field and press Donate now again – the checkout goes through immediately.
B – The same form, working
Identical form, identical version. The amount is supplied by a Donation block with one preset amount already selected, so the form is valid from the first paint and Donate now submits straight away.
What is actually happening
Before SureCart sends anything to the server, the checkout form validates every field inside it. If one field is invalid, the submit is abandoned. It never reaches the network layer, so the Console and Network tabs stay completely silent and the button looks dead. The most common blocker on a donation form is the amount field, which is required and often has a minimum.
Adding the product to the cart and checking out from the cart is a different code path that does not run this validation, which is why that route keeps working.
How to find the blocking field on your own page
Open the campaign page, press F12, go to the Console tab, paste this and press Enter, then press your checkout button:
(async () => {
const f = document.querySelector('sc-form');
if (f) console.log('sc-form validates:', await f.validate());
const deep = (r, o = []) => { r.querySelectorAll('input,select,textarea').forEach(e => o.push(e));
r.querySelectorAll('*').forEach(e => e.shadowRoot && deep(e.shadowRoot, o)); return o; };
deep(document).filter(e => e.willValidate && !e.validity.valid)
.forEach(e => console.log('BLOCKING FIELD:', e.id || e.name || e.className, '|', e.validationMessage,
'| visible:', !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length)));
})();Every line starting with BLOCKING FIELD is a field that is stopping the submit. If sc-form validates prints false, that confirms the checkout is being held back by validation rather than by a network or payment problem.
