Taking payments with My Web Based Custom POS App

Questions
1

Hello everyone. I’m new to forum. I tried to find a related topic but coudnt see anything. So, your help will be greatly appreciated.
We developed a web based custom POS application for our physical stores. Now, we want to use Square to take customer credit card payments (in store, face to face). We have square card readers/magstripes. But we don’t know how to take credit card payments with the devices, without using ios/android application, but using directly our web based pos application. Is this possible? If possible, which API should I use?
Thank you very much

2

:wave: Welcome! Currently the only hardware that will work with a web based POS that’s not on a Android or iOS device is the Terminal API. Square Terminal API lets you integrate Square payments with any software platform using Square Terminal, an all-in-one card payments device. Terminal API is compatible with any software, platform, or operating system (iOS, Android, desktop, or mobile web). Once you’ve integrated, you can use the Terminal for in-person, card-present payments. :slightly_smiling_face:

3

Wonderful!
Thank you for the information…

Have a great day

4

Hi Bryan,
After your answer, I bought a Square terminal device, and used Terminal API (with nodejs) to see if I can make in person payments. If I make Create terminal checkout request directly from Square developer web portal, everything works fine! Just I wanted! But if I make the request from my custom web based POS app, then I receive “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://connect.squareup.com/v2/terminals/checkouts” message. Obviously I cannot add Access-Control-Allow-Origin headers to square servers to allow requests from my domain (or can I ?)
Can you please guide me little bit more :slight_smile: ? How should I proceed?
Thank you again

5

That normally happens when you aren’t making server side requests. Is your POS setup to make a server side request to create the checkout? :slightly_smiling_face:

6

Yes. I’m making server side request with square Nodejs library
import { Client, Environment, ApiError } from “square”;
const getLocations = async () => {
try {
const response = await client.locationsApi.listLocations();
…
…
Should I make the request to a Php file in my server first, which will make the real request to square server? Instead of starting the request with a button click from browser and calling square server directly ?
Thanks for the help

7

Yes, the button click should trigger the PHP file in your server to make the request instead of doing it directly from the browser. :slightly_smiling_face:

8

Hi,

Enable [Cors Policy] when testing online payment for your payment controller. An example for ASP .NET is provided as below. Your website (the site where customer is making payment) will fetch your payment controller.

On your payment controller, add below line on top of the [payment controller]'s constructor.
[EnableCors(origins: “http://localhost:3000”, headers: “", methods: "”)]

Somehow, this forum page automatically removes [Asterisk Symbol]. Here is again.

//Actual coding as below. Replace [Asterisk Symbol] with *.
[EnableCors(origins: “http://localhost:3000”, headers: “[Asterisk Symbol]”, methods: “[Asterisk Symbol]”)]
public class PaymentController : ApiController
{
[HttpPost]
public async Task Post([FromBody]SquarePayment p)
{
//Your code handling java fetch from customer’s payment page here.
//It is very simple, if you understand Square Api.
}
}
//Actual coding ends here.

Disable [Cors Policy] for production environment. You do not need [Cors Policy] for production environment (published website’s payment controller).

Search for [Cors Policy] for more detailed information.