Using Square payment process in a Web app

Questions
1

Hi,
We have a Square reader device that we want to use along with our custom web app. Is there anyway that we can use Square service to process the payment?

2

Hi @Rachael,

At this time the only Square hardware that will work with a web app is the Terminal API. SquareTerminal API lets developers 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.

If your app is a mobile web app you can use the Mobile Web Point of Sale API to process payment with our other readers.

3

Thank you for the fast reply! I have one more question, can we use any payment gateway to process the payment while still using Square reader?

4

You will need to use Square to process payment with our readers. They wonā€™t work with other payment gateways. :slightly_smiling_face:

5

Hi, so just to confirm! what I am understanding is that the only option we have is to use Terminal Square?!. So In general, web application only works with Terminal square?

6

Hi Rachael, web applications can take manually entered card payments via the Square Payment Form as well. If youā€™re talking about the Terminal API, then technically it can be used alongside any device that has the capability of making an HTTP request (web browsers, mobile devices, etc). The other readers we offer only work with mobile devices/tablets for in-person payments, which is what Bryan was saying above. The last comment is that they will only work with Square, not other payment gateways/services.

Please let me know if I misunderstood or if you have additional questions!

7

Thank you! I will start from the start just to confirm we are on the same page. So we have a custom build web application for a client which will run on an IPad using Safari. We already got the square mag stripe reader, the one for free. We are trying to connect the square reader to the web application to process the payments. Of course our web application already has a checkout cart and everything but we canā€™t process payments since we donā€™t have a payment gateway. What are our options? Thank you so much!

8

Since youā€™re using an iPad and the mag stripe reader, your only option currently would be the POS Web API, as mentioned above by Bryan. This API will allow you to trigger a sale on a link/button click that will switch-over to the Square POS application to handle the payment, and then switch back to your website once the payment is complete (along with any information such as success/errors).

9

Great, Thank you so much!

10

Hi, sorry got some more questions. I did everystep but wondering. In the instructions, it stated to call point of sale by calling the URL.so (Replace_ME) should be my website URL or my Square online URL? Also are there any tutorial videos?

Initiate a mobile web transaction on iOS

To initiate a Square Point of Sale transaction from your website, call the Square Point of Sale application with a URL using the following format:

square-commerce-v1://payment/create?data={REPLACE ME}
11

The {REPLACE_ME} is for the data you want to pass to the Square POS so it knows how much money you want to charge, as well as other things (list of data can be found here: https://developer.squareup.com/docs/pos-api/web-technical-reference#ios-data-fields)

You can see an example in the next step that you listed (step 1 shows the var dataParameter): https://developer.squareup.com/docs/pos-api/build-mobile-web#initiate-a-mobile-web-transaction-on-ios

I donā€™t believe we have any tutorial videos for this at this time unfortunately.

12

Thank you, I see! sorry I am new and trying to figure this one out. I really appreciate your help. In my case I have an HTML form , I named it ā€œposformā€, and I am passing the input from the user, so I replaced the {REPLACE ME} with the following code: JSON.stringify($("#posform").serializeArray()); right?
Also, can I test the code using sandbox Credentials and sandbox creditcards, or not?
Thank you so much!

13

That depends on the output of JSON.stringify($("#posform").serializeArray());. Like, it still needs to adhere to the data format that is expected. For example, for the amount money it should be:

var data = {
  amount_money: {
    amount: "100",
    currency_code: "USD"
  }
}

If youā€™re using the ā€œposformā€ to ask the user the amount, then you probably would still want to use the above ^, and just replace "100" with the amount they pass in. Then, finally do:

window.location =
    "square-commerce-v1://payment/create?data=" +
    encodeURIComponent(JSON.stringify(data));

Thereā€™s no way to test POS API in sandbox at this time, unfortunately.

14

Thank you so much! I have all the pieces together, but I have an error. so I need to encode the JSON inside the URL. Now I have the following to direct to Square API. I found JSON URL encode tool online so ā€œencoded JSONā€ in my code is the actual encoded link
<?= $eid ? lang('submit') : lang('payment'); ?>

When I replace ā€œencoded JSONā€ with JSON object name which in the case is ā€œdataā€ and remove ā€˜ā€™, then it directs me to Square App but I get an error ā€œThe JSON passed in the request is invalid, Check that your JSON string is URL-Encoded and JSON is correctly formattedā€.

To pass the amount form the user
var data = {
amount_money: {
amount: $("#balance_amount").val(),
currency_code: ā€œUSDā€
},

Thank you for all your help, I donā€™t have JSON experience so I am trying to figure how to do it right!

15

My apologies, thereā€™s actually a few more required fields (see: https://developer.squareup.com/docs/pos-api/web-technical-reference#ios-data-fields):

so if any of the above are missing, it will error out. With that said, Iā€™m not sure what you mean by needing to encode the JSON inside the URL. You should just be able to create a Javascript object (which you showed above as data), and use the built in encodeURIComponent(JSON.stringify(data)) functions to handle this; there should be nothing else you need to do.

All encodeURIComponent does is turn certain characters into specific escape characters so the device knows how to handle them as a URI, and JSON.stringify just turns the object into a literal JSON string instead of an object.

16

No worries, I have all these, but didnā€™t want to post the whole thing. I found this example which they encoded JSON

17

encodedURIComponents worked for me. Thank you so much for all the help!

1 Like
18

Hi, so I have two more question. I have tried to use the amount according to the field but it either shows 0 or it displays an error message but if I set it to an actual number, like ā€œ500ā€ then it works fine. Can you please let me what I am doing wrong? I tried many things non worked!
The other question, if I canceled a payment it still directs me to the success ā€œcallbackā€ link. I have callback.html and callback.js

19

Iā€™m not sure what you mean by:

Can you clarify? I see you say if you use ā€œ500ā€ it works, so what are you trying that doesnā€™t work? Note it must be an integer value, no decimals. 500 == $5.00. If you want cents, just do 550 == $5.50 for example.

The callback_url is used for both success and failures. If you cancel, then the response data should have an error_code (which in this case for canceled should be payment_canceled). You can see how to handle the data here: Build on Mobile Web

20

so if I types 500 then it works $5.00, but when I try to assign ā€œamountā€ to a value according to the serviceā€™s price then it shows $0 on Square app since the value is going to change according to the selected services.