Payments SDK won't process payment

I’m getting errors on my local machine when testing the new payments sdk when trying to make a payment online.

I get the nonce logged to the console, but I also get errors, as below. From what I saw it looks like a csrf error, but I have that in the head of my laravel page just like I did for the old web payments. What’s going on here and how can I fix it?

square.js:1          POST http://localhost:8000/checkout2/6308 419 (unknown status)
e @ square.js:1
createPayment @ 6308:81
handlePaymentMethodSubmission @ 6308:250
await in handlePaymentMethodSubmission (async)
(anonymous) @ 6308:265
r @ square.js:1
square.js:1 Unexpected token < in JSON at position 0
(anonymous) @ square.js:1
handlePaymentMethodSubmission @ 6308:257
await in handlePaymentMethodSubmission (async)
(anonymous) @ 6308:265
r @ square.js:1

:wave: Is the body of the payment request in our required JSON request body? If you add a break point and print the request what does it look like? :slightly_smiling_face:

Can you explain how to did that?

Ok, I have been comparing my old checkout form to this one, and it turns out I was NOT sending the csrf token with my code. I fixed that, thanks to my old code, but I’m getting the following error:

[Log] cnon:CBESEFPJhvahmBGn39exVohVRrQ (square.js, line 1)
[Error] Can't find variable: $
	(anonymous function) (square.js:1:41352)
	(anonymous function) (6311:261)
	(anonymous function)

Any ideas where to go from here? So frustrating.

Is the variable $ the money object that you pass to the payment request?

I think it’s actually not using my javascript code for the CSRF token, like it did in the old code.
I was using this code to access the CSRF token from the head of my document (I’m using Laravel and Blade):

const paymentResponse = await fetch('{{$payment->id}}', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

It doesn’t like the $ as the first character of ‘X-CSRF-TOKEN’: in the headers object I’m passing. I don’t know how to fix that or why it would have worked on the old payment form but not now.

Oooh! I got that part to work! For anyone else searching for how to do this with Laravel and Blade, adding the CSRF token in the javascript looks like this:

                        'X-CSRF-TOKEN': '{{ csrf_token() }}'

I was able to get the payment to go through, but I’m getting FAILURE messages in the console. I can see the charge for $0.01 in my square app on my iPhone.

Here is the console:

[Log] token – "cnon:CBASEP18tDU_nWJyP0noHBy5DiM" (square.js, line 1)
[Log] response (square.js, line 1)

body: ReadableStream {locked: true}

bodyUsed: true

headers: Headers {append: function, delete: function, get: function, has: function, set: function, …}

ok: true

redirected: false

status: 200

statusText: "OK"

type: "basic"

url: "http://localhost:8000/checkout2/6311"

Response Prototype
[Log] displayPaymentResults – "FAILURE" (square.js, line 1)
[Log] TypeError: undefined is not an object (evaluating 'user.action') (square.js, line 1)
(anonymous function) — 6311:93

[Error] undefined is not an object (evaluating 'user.action')
	(anonymous function) (square.js:1:41352)
	(anonymous function) (6311:272)
	(anonymous function)

I don’t see anywhere user.action was used on the old one, so I don’t understand what that part is doing in this section or how the SUCCESS and FAILURE messages would be displayed to the customer.