Payment API backend implementation

Hello, I am very new here, trying to embed Square payments to my web site. I use html, php, and understand the general idea. I started to implement a test from this example:

"https://github.com/square/web-payments-quickstart/blob/main/public/examples/card-payment.html "

It works until when CreatePayment returns an error. I am also not clear about the back-end implementation (I prefer php, ) and I am not sure how the

"const paymentResponse = await fetch(‘/payment’, "

should be implemented. It seems “/payment” refers to a file that should implement the back-end API, but I don’t see what should be in it, or what it should do.

Please advise or direct to the document which could help.
Thanks and best

The /payment is the function in our example. That function is in the server.js file of our Quickstart. Also we do have a PHP payment example. :slightly_smiling_face:

Great thanks for the info!

Hello, since our last conversation, I purchased a VPS package, installed node.js, npm and tried the setup again. Still having the same problem, though I think node.js us running. The app fails right after const paymentResponse = await fetch(‘/payment’,
so the backend is not responding right. Is the directory structure correct? Could you please check the attached screenshots? I think I am pretty close, and any help would be very much appreciated. Thanks! (node - v: 20.9.0, npm -v 10.2.4)





Also, the last screenshot shows the token etc right inside “body” (document.write to debug) before it is passed to the backend, so the front end seems to be working. Thanks

Is the CreatePayment function in the same directory? The error your getting means the function that process the payment is found. :slightly_smiling_face:

OK, I think this is conflicting with the web site that I already have. I erased all the node modules then put everything in web-payments-quickstart as if that is a stand alone web site, then both development and sandbox works if I run it from a browser on the VPS. If I go to http://196.xx.xx.xxx:3000 which is IP address where the actual web site resides, it fails with "application ID and/or location ID incorrect. It seems one of the links in web-payments-quickstart ends up in the root of the web site, and this way doesn’t find the .env files.

I think all is related to the directory structure and how it should be integrated with an actual web site etc. Could you give some ideas about that please? Should I update the apache configurations so that the root of the web site is inside the web-payments-quickstart for example? How should I arrange the structure of the square portion with the web site that is already there?

One more question: At the final implementation with the web site, payments etc, npm should always be running? After the npm start command, it should never stop and keep running to catch any payments that might come from a customer. Is my understanding correct?

Thanks a lot!

Hi again, I also implemented the php-chekout example as a separate project, on a separate web site, again it works if I run it on the server, with php -S localhost:8888
but if I go to the web site www.xxxxx.com and run it there (same folder structure) the index.php appears and checkout.php fails with 500 error. I actually like the php structure better in a way, but please advise as to how to make this setup work for a real life web site. Thanks and best

At this time the Quickstart on local. Running it on your network isn’t currently available. Deploying a Node.js application involves several steps, and the exact process can vary depending on your hosting environment and deployment preferences. Here’s a general guide to deploying a Node.js server:

1. Prepare Your Node.js Application:

Ensure your Node.js application is ready for deployment. This includes:

  • Dependencies: Make sure your package.json file lists all the necessary dependencies, and run npm install to install them.
  • Environment Variables: If your application relies on environment variables, make sure they are properly configured for your production environment.

2. Choose a Hosting Provider:

Choose a hosting provider that supports Node.js. Popular choices include:

  • Heroku: Easy to use and deploy. Supports Node.js out of the box.
  • AWS (Amazon Web Services): Provides a wide range of services, including EC2 for virtual servers and AWS Lambda for serverless applications.
  • DigitalOcean: Offers virtual private servers (Droplets) that can be configured for Node.js applications.
  • Google Cloud Platform (GCP): Provides services like Compute Engine and App Engine for deploying Node.js applications.

3. Set Up Hosting Environment:

Depending on your hosting provider, set up the environment for your Node.js application. This may include configuring:

  • Environment Variables: Set any environment variables needed for your application.
  • Ports: Ensure that your application is configured to listen on the correct port (often port 80 for HTTP or 443 for HTTPS).

4. Choose a Process Manager:

Choose a process manager to keep your Node.js application running. Popular choices include:

  • PM2: A production process manager that makes it easy to run Node.js applications in a production environment.

5. Configure Deployment:

Configure your deployment based on your hosting provider. This might involve:

  • Creating Deployment Scripts: Write scripts or configuration files that specify how your application should be deployed.
  • Setting Up Continuous Integration (Optional): Consider setting up continuous integration tools (e.g., Jenkins, Travis CI) to automate the deployment process.

6. Deploy Your Application:

Deploy your Node.js application using the chosen deployment method. This might involve:

  • Uploading Your Code: Push your code to a repository connected to your hosting provider.
  • Running Deployment Scripts: Execute scripts or commands to deploy your application.

7. Monitor and Scale:

Set up monitoring to track the performance of your application. Depending on your needs, consider scaling options to handle increased traffic.

Remember that the specifics of deployment can vary based on your hosting provider and deployment strategy, so refer to the documentation provided by your chosen platform for detailed instructions. :slightly_smiling_face:

It works, yay! :smile: :smile: I use Hostinger, and after setting up the apache2 server with reverse proxy, and starting the app in the web-payments-quickstart folder with pm2, payment goes through from the “website”! It is cool when it works. Thanks for the information!

Awesome! Glad to hear its working! :slightly_smiling_face:

Hello! Since our last conversation, I setup the SDK with PHP and successfully processed some payments with Connect API. Would you please guide me as how I can retrieve the Name, Last Name and e-mail information processed by the Connect API using the CheckoutId and TransactionId? I would like to send automated receipts and acknowledgements. I can see this customer info after a transaction on my Square App on the phone so it appears it should be possible.

I would greatly appreciate any pointers for this purpose.
Thanks and Happy New Year!

Are you collecting the customer information and storing it with the Customers API prior to making a payment? If so then you’ll want to use the customer_id from the payment to get the information.

If your not collecting this information then the customer profile may not have all the information you need since it wasn’t collected and set prior to the payment. :slightly_smiling_face:

The client clicks on checkout and is taken to https://connect.squareup.com/v2/checkout? where they have to enter first last name and email. After they do that they pay. I don’t need any more information, just name and email. I can actually see this info on my cell on the square app after they make it so I don’t collect the information beforehand but square does during checkout.

That’s the deprecated Checkout API. We recommend migrating to the new payment links that the Checkout API uses. :slightly_smiling_face:

Hello, since our last communication I have been using the php back end for taking payments etc successfully. Meanwhile I returned to node.js to create a smiliar implementation with it to see which one works better. However in the interim I had to reinstall apache2, and during the process web-payments-quickstart stopped working with pm2. It had been earlier, and now it works with npm start and the reverse proxy, but pm2 is unable to open port 3000 with square anymore. (pm2 works with port 3000 with a test app.) I had to reinstall node, npm and pm2 (to newest versions). any ideas or suggestions? I don’t see much literature about this… Thanks!

Here are a few suggestions that might help:

  1. Check for Port Conflicts: Ensure that port 3000 is not being used by another service. You can use the command lsof -i :3000 to check for any processes that might be using the port.
  2. PM2 Configuration: Verify that your PM2 configuration is set up correctly for your Square application. Check the ecosystem file (usually ecosystem.config.js) for any discrepancies that might have occurred after the reinstallation.
  3. Permissions: Sometimes, permission issues can prevent PM2 from accessing certain ports. Make sure that the user running PM2 has the necessary permissions.
  4. Firewall Settings: Ensure that your firewall settings are not blocking PM2 from accessing port 3000.
  5. PM2 Logs: Check PM2 logs for any errors that could provide more insight into the issue. You can use the command pm2 logs to view the logs.
  6. Restart PM2: If you haven’t already, try restarting PM2 using pm2 restart all or specifically restart your Square application process.
  7. Node.js Version: Sometimes, certain versions of Node.js may have compatibility issues. If you’ve updated to the latest version, consider downgrading to the version you were using when the setup was working.
  8. Apache2 Configuration: Since you reinstalled Apache2, double-check that the reverse proxy configuration is still intact and correctly forwarding requests to port 3000.
  9. PM2 Startup Script: Ensure that the PM2 startup script is correctly configured to start your application on system boot. You can regenerate the startup script using pm2 startup. :slightly_smiling_face:

Thanks for quick reply. I had done everything above except downgrading node.js. In the interim I installed the node_payment from the connect-api-examples, and made that work with pm2. It seems that web-payments-quickstart is somewhat older, so I don’t think it is necessary to debug it now that the node_payment example works which I will use as a starting point for development. Thanks so much!

Hello, my node app works, taking payments, creating customers, orders etc. All is great. As a next step and next question, I have two separate square accounts with two different access tokens. Can one node app have two separate access tokens depending endpoint? This was easy to do on php checkout with loading .env1 or .env2 but doesn’t appear to be as straight forward in the node template. Is this a good idea, and possible? Thanks and best