Code playground example explanation

Questions
1

I have found an example payment form https://developer.squareup.com
/reference/sdks/web/payments/card-payments. This creates a form as
I desire, albeit with no information for what or how much to pay, even so
it does run.

Number one [stop trying to format my text] . When I copy this form to
my own server it renders just a pay button which is just the html
“<button id=“card-button” type=“button”>Pay” as written
with no action.

Number two. I donot understand point 4, “Get the payment token”.
It says “If the payment card information is valid, it returns a one-time-
use token which you can use to create a Payment using the Payments
API CreatePayment endpoint to charge a customer.” Return it to
whom, to where and how?

2

:waving_hand: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

Make your First API Call
Create a Card on File from a Payment ID
Download, Configure, and Run the Client Sample

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

3

I will add that I am using https for my example.

4

Hi @giacomo, the payment token will be returned to your own application after successfully calling the tokenize() method. I’d recommend checking out the Web Payments SDK quickstart project, which will help demonstrate the flow of generating a payment token and then using it to process a payment with the Payments API.

6

the
payment token will be returned to your own application after
successfully calling the tokenize()

In the example tokenize() is called by the client. How does the return
value from this get transferred to my server?

The term “return” is used. In the example the value from tokenize() is
returned to the client. I think you mean sent via a post. This is done
with “paymentResponse = await fetch(”, so it is not “returned” but sent.

https://sq-block.slack.com/archives/C02EGVB09BP/p1783028558285469

“Sign in to Block, Inc” please just post information in a simple way.

7

…good, I have made some progress. I understand the flow is the
client is providing the callback, not Square. I now need a Java API
example of how to handle the callback and proceed with the payment.

The examples on the hub of gits are out-of-date.

8

@giacomo Yes, sorry if that phrasing was ambiguous. Square is unopinionated about how that payment token gets passed between your client and server logic, so you’re free to use whatever patterns make the most sense to you there!

We don’t currently have any end-to-end examples of implementing the Web Payments SDK with the Java SDK, but I’m happy to help however I can. Have you successfully passed the payment token to your backend, and you’re just looking for how to consume that payment token to process a payment?

9

Before we get to the token the form is asking for a ZIP code; I have a postcode. How do I control this? Is there such a thing like javadoc for the script?

Yes the payment token is received, the post body is like:
{"locationId":"TC4Z39DBKWXKH","sourceId":"cnon:CA4HHFG4SnoMXDeDO0IPEOqGnEsYASgC","idempotencyKey":"bc35f7ac-356e-4f49-8521-f6dbd2171a10"}

Straight away I have 2 questions

How do I check the token for validity?

        CreatePaymentRequest
            .builder()
            .sourceId(sourceId)

is not listed as throwing an exception which might be the answer.

How do I send back failure? This is answered because I write the script that received the response albeit I copied it from the example so I can rewrite this as I want but I a struggling to see why I should have to rewrite the example, typically this indicates I have misunderstood. Taking a step backwards I realise I am writing a script to run client side to process data I send to the client, then I ask the client to send back the answer. RMI. Why do I not calculate the token myself? The only explanation I have is someone thinks the client script only needs writing once whereas several SDKs are needed depending on the server. However it does mean the script needs checking on all current web browsers. Personally I’d rather do it server side and retain control. Alternative explanations include it is doing something opaque.

My attitude is tainted by how easy it was to take a payment 20 years ago. We had to construct our own posts but it did mean it was completely clear when the server communicated with the payment system. Such communication is now opaque being buried in an SDK call.

Back to the present day, I attempted to construct a payment request:

        CreatePaymentResponse createPaymentResponse = squareClient.payments().create(
            CreatePaymentRequest
                .builder()
                .sourceId(sourceId)
                .idempotencyKey(idempotencyKey)
                .amountMoney(
                    Money
                        .builder()
                        .amount((long) order.price())
                        .currency(Currency.GBP)
                        .build()
                )
                .customerId(order.person().squareid())
                .locationId(company.square_location_id())
                .build()
        );

but I get an exception


StandardWrapperValve[xx.xxxx.xxxx.xxxx.ServletSquarePayment]: Servlet.service() for servlet xx.xxxx.xxxx.xxxx.ServletSquarePayment threw exception
SquareClientApiException{message: Error with status code 400, statusCode: 400, body: {errors=[{code=BAD_REQUEST, detail=Not authorized to take payments with location_id=TC4ZZ3KKKRXXXRH, field=location_id, category=INVALID_REQUEST_ERROR}]}}
        at com.squareup.square.RawPaymentsClient.create(RawPaymentsClient.java:257)
        at com.squareup.square.RawPaymentsClient.create(RawPaymentsClient.java:208)
        at com.squareup.square.PaymentsClient.create(PaymentsClient.java:91)

the locationid is correct and for a sandbox so what authorisation does it need?