I have been trying to follow the payment form walkthrough, but I keep getting an error with regard to process-payment. Is that something that I need to create as a separate file that is not part of the walkthrough?
1 Like
Hi @shabba45 welcome to the forums!
It creates the process-payment route in 2.2.3: https://developer.squareup.com/docs/payment-form/payment-form-walkthrough#22-configure-the-backend-with-your-access-token.
Please let me know if you have any additional questions or concerns, I’m happy to help!
I see that in there as part of this statement
app.post(’/process-payment’, async (req, res) => {
Is there something more that I would need to do for this to work as is?
1 Like
No, that’s an express routing schema; that’s how you say process-payment can be POSTed to and this is what should happen when it’s POSTed to.
What error are you receiving exactly? Did you already run npm install and npm start to run the node server?
1 Like
@sjosey @shabba45
I’m struggling with this same issue (walkthrough process-payment reported as 404) - did you find a solution?
Hi @cleanwebdesign, just went through the walkthrough and all is working. Did you already run npm install and npm start to run the node server?
Thank you for answering @Bryan-Square!
Yes, npm is running, and I got as far as testing a payment. The problem is happening at https://havenhotsprings.com/pay - the nonce alert worked, then I moved on to sending a payment, were I get an alert:
Payment failed to complete!
Check browser developer console for more details
A look at the developer console shows that /process-payment is a 404 - which makes sense since it isn’t included in files that came with the stuff I downloaded from github .com /square/sqpaymentform-nodejs-starterkit, nor was it added when the installer gave me a bunch of stuff in /public_html/pay/node_modules/ …but according to earlier in this thread it’s coming from Square.
On page load, the console tells me about this:
>Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).The page’s settings blocked the loading of a resource at eval (“script-src”).
After submitting with fake 4111 values
Payment failed to complete! Check browser developer console for more details
Console shows
12:13:28.646
XHROPTIONShttps://pci-connect.squareupsandbox.com/v2/v?version=d7197334a2
[HTTP/2 200 OK 309ms]
12:13:28.854
XHRPOSThttps://pci-connect.squareupsandbox.com/v2/v?version=d7197334a2
[HTTP/2 204 No Content 283ms]
12:13:36.500
XHRPOSThttps://pci-connect.squareupsandbox.com/v2/card-nonce?_=1606763616470.3296&version=d7197334a2
[HTTP/2 200 OK 94ms]
12:13:36.622
XHRPOSThttps://pci-connect.squareupsandbox.com/v2/v?version=d7197334a2
[HTTP/2 204 No Content 58ms]
12:13:36.632
XHRPOSThttps://havenhotsprings.com/pay/process-payment
[HTTP/2 404 Not Found 362ms]
12:13:36.853
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data pay:116:11
I took a look at your site and see that the nonce is being successfully generated however it there isn’t a call to CreatePayment. Is the server.js file correctly configured and did you make changes to it from outside of the walkthrough?
Yes @Bryan-Square, and I checked my credentials again, but I will redo the server.js edits.
Could there be any problems with .htaccess rewrites or redirects?
<IfModule mod_rewrite.c>
# Turn on Rewrite Engine
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^\.]+)$ $1.php [NC,L]
</IfModule>@Bryan-Square
Yes, the server.js is just what it should be…accessToken is correct
One the initial load consoles shows Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”)
and refers to this:
function injectIntoContentWindow(contentWindow)
{
if (contentWindow && !injectedFramesHas(contentWindow))
{
injectedFramesAdd(contentWindow);
try
{
contentWindow[eventName] = checkRequest;
contentWindow.eval(
"(" + injectedToString() + ")('" + eventName + "', true);"
);
delete contentWindow[eventName];
}
catch (e) {}
}
}If the process-payment is 404ing, then either your server is not actually running (npm start), or you’ve changed something in the routes. It is included in the sample, as mentioned above (https://developer.squareup.com/docs/payment-form/payment-form-walkthrough#22-configure-the-backend-with-your-access-token) it’s just a route, which is how Node.js knows about what pages to include. The form itself doesn’t really require npm/node as it’s a client-side Javascript library, and thus will work even when the server is not running.
What is your hosting server? It’s possible that it doesn’t allow Node.js to be used, or that you need to do something extra to install the required components.
Hello! I’m new to the platform am also having a similar issue!
Would I be able to paste my code and grab your advice on what I am doing wrong?
Hi @AlchemyOrange - so you’re receiving a 404 about the process payment page not being found? Are you running this locally or on a hosted server? If the latter, what is your host provider?
Going back to the above, if you’ve copied and pasted everything from the walkthrough, then the issue is that the npm server isn’t running properly and therefore can’t handle the routes.
That looks like a different, non 404 error, than before. Can you share your browser developer console mentioned in the pop-up? Looks like it’s probably a client-side Javascript error.