Using Square payment process in a Web app

Questions
21

So what type of variable are you setting? Note the amount must be a string; earlier I see you were using .val(), which can return a string, number, or array. Can you confirm that the value is actually a string?

22

sorry I am lost, is it integer or string? I tried String in the beginning but got an error, then I tried integer and got 0 whenever I try to pass a value.

23

It should be a string. Like “500” (the quotes implies it’s a string). If it’s evaluating to something other than a string, it’s probably just ignoring it, or it may cause an error.

You said “500” works, which is definitely a string, so now I’m also confused :sweat_smile:. Can you confirm what actually works or not?

24

actually “500” and 500 both works, so both string and number worked for me for some reason. so in my case var num2 = $("#total-payable").val();
var num3 = num2.toSyring();
var data = {
amount_money: {
amount: num3,
currency_code: “USD”
},
when I run the code, I get “API Error The JSON passed in your request is invalid. Check that your JSON string is URL-encoded and JSON is correctly formatted”

25

for more clarification, I am getting the value from a span tag inside a table data cell td. I have been trying to retrieve the data using document.getElementbyID() and the way above and in both cases trying to change the value to String type but I keep getting the above error. this is the code

<td class="text-right" colspan="2" style="font-weight:bold;"><span id="total-payable">0</span>
</td>

I really appreciate your help! :slight_smile:

26

If you’re using span as the HTML element, then I think you would need to do:

var payable = document.getElementById("total-payable").innerHTML;
var data = {
  amount_money: {
    amount: payable,
...

Note: you’d probably want to add additional validation here, though, since amount needs to be an integer, to make sure you don’t pass bad data.

Further, val() wouldn’t work on a span element as far as I know…it typically is used on something like an input, so this would result in nothing (because a span doesn’t have a value), which is why neither of the above are working, I’m guessing.

Edit: If you prefer jQuery, it looks like you can do:

var payable = $("#total-payable").text(); // instead of .val()
...
27

Thank you, I tried both but neither worked, still getting the error.

28

Can you confirm in the above example, payable is actually equal to something if you print it out? If so, what does it print?

To be clear, I tested the above, and it worked fine as far as I could see. Passing the hard-coded “5” versus doing var payable = document.getElementById("total-payable").innerHTML; produced the exact same data object.

29

yes, we also debugged the code and the value that is passed is correct but when the value is passed, then the amount to be paid is showing as 0 now. I will look into it more and see what we are missing.
For the call back, I am just getting an empty page with a header. Just to confirm, I don’t have to change anything in the callback.html and callback.js, correct? sorry for bothering you!

30

@Bryan-Square any update of Square’s functionality here? Is there an ability to connect a web application to a Square reader?

If not, curious why not? Because of the limited bluetooth functionality, making it difficult to find the device?

Thank you.

31

At this time the only way to connect a web application with Square hardware is with Terminal API. Connecting to a reader isn’t currently possible. :slightly_smiling_face: