API Explorer vs real-word jQuery AJAX implementation of checkout API?

Questions
1

Using this page
POST /v2/online-checkout/payment-links - Square API Explorer
I setup my Sandbox Access token and my location_id and using the Run Request button I see that all looks good.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Generated request looks like this:
curl https://connect.squareupsandbox.com/v2/online-checkout/payment-links
-X POST
-H ‘Square-Version: 2024-08-21’
-H ‘Authorization: Bearer [MY SANDBOX ACCESS TOKEN]’
-H ‘Content-Type: application/json’
-d ‘{
“quick_pay”: {
“name”: “your purchase”,
“price_money”: {
“amount”: 123,
“currency”: “USD”
},
“location_id”: “[MY LOCATION ID]”
},
“description”: “description - items purchased my notes”,
“payment_note”: “items purchased: one, two, three”,
“checkout_options”: {
“ask_for_shipping_address”: true
}
}’
Returned response
200 looks good as follows:
{
“payment_link”: {
“id”: “3JJFQUVUZKUFLWO4”,
“version”: 1,
“description”: “description - items purchased my notes”,
“order_id”: “VZ3wp4izffAzEMxVss5JlhtMcBGZY”,
“checkout_options”: {
“ask_for_shipping_address”: true
},
“url”: “Checkout API Sandbox Testing Panel”,
“long_url”: “Checkout API Sandbox Testing Panel”,
“created_at”: “2024-09-01T17:33:14Z”,
“payment_note”: “items purchased: one, two, three”
},
“related_resources”: {
“orders”: [
{
“id”: “VZ3wp4izffAzEMxVss5JlhtMcBGZY”,
“location_id”: “[MY LOCATION ID]”,
“source”: {
“name”: “Sandbox for sq0idp-6N5DZ0yQzIy4fJzgUfqGxg”
},
“line_items”: [
{
“uid”: “Ao1FGGb2jykwrpgBZw5iN”,
“name”: “your purchase”,
“quantity”: “1”,
“item_type”: “ITEM”,
“base_price_money”: {
“amount”: 123,
“currency”: “USD”
},
“variation_total_price_money”: {
“amount”: 123,
“currency”: “USD”
},
“gross_sales_money”: {
“amount”: 123,
“currency”: “USD”
},
“total_tax_money”: {
“amount”: 0,
“currency”: “USD”
},
“total_discount_money”: {
“amount”: 0,
“currency”: “USD”
},
“total_money”: {
“amount”: 123,
“currency”: “USD”
},
“total_service_charge_money”: {
“amount”: 0,
“currency”: “USD”
}
}
],
“fulfillments”: [
{
“uid”: “YlPFQMHCrNPA1N7GnKg0pD”,
“type”: “SHIPMENT”,
“state”: “PROPOSED”,
“shipment_details”: {
“recipient”: {
“display_name”: " ",
“email_address”: “”
}
}
}
],
“net_amounts”: {
“total_money”: {
“amount”: 123,
“currency”: “USD”
},
“tax_money”: {
“amount”: 0,
“currency”: “USD”
},
“discount_money”: {
“amount”: 0,
“currency”: “USD”
},
“tip_money”: {
“amount”: 0,
“currency”: “USD”
},
“service_charge_money”: {
“amount”: 0,
“currency”: “USD”
}
},
“created_at”: “2024-09-01T17:33:13.868Z”,
“updated_at”: “2024-09-01T17:33:13.868Z”,
“state”: “DRAFT”,
“version”: 1,
“total_money”: {
“amount”: 123,
“currency”: “USD”
},
“total_tax_money”: {
“amount”: 0,
“currency”: “USD”
},
“total_discount_money”: {
“amount”: 0,
“currency”: “USD”
},
“total_tip_money”: {
“amount”: 0,
“currency”: “USD”
},
“total_service_charge_money”: {
“amount”: 0,
“currency”: “USD”
},
“net_amount_due_money”: {
“amount”: 123,
“currency”: “USD”
}
}
]
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// so here’s my jQuery ajax that uses the same POST method, same url, headers, data, etc
// fails, drops into the error method. I tried it with/without the “BEARER” prefix to the sandbox access token, no difference.

Any explanation as to why this fails would be greatly appreciated.

function trySquare()
{
$.ajax({
url: ‘https://connect.squareupsandbox.com/v2/online-checkout/payment-links’, // same url as
method: ‘POST’,
headers: {
‘Square-Version’: ‘2024-08-21’,
‘Authorization’: ‘MY SANDBOX ACCESS TOKEN’, // using sandbox key
‘Content-Type’: ‘application/json’
},
data: JSON.stringify({
idempotency_key: ‘’,
quick_pay: {
name: “your purchase”,
price_money: {
amount: 5,
currency: “USD”
},
location_id: “[my location.id]” // using same value as worked in xxxx
},
checkout_options: {
redirect_url: ‘[my completion page ur]’
}
}),
success: function(response) {
console.log(“Function success: Payment link created:”, response.payment_link.url);
// Redirect the user to the checkout page
window.location.href = response.payment_link.url;
},
error: function(xhr, status, error) {
console.error(“Error creating payment link:”, error);
}
});
}

2

:wave: 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

Postman
Take Payments
API Explorer Overview

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

Making API calls directly from the client-side can expose your API keys or access tokens, which is a security risk. Instead, it’s recommended to make these calls from a server-side environment where you can securely store and manage your credentials. :slightly_smiling_face:

4

Please ignore this post, there seems to be no way to delete one once it’s in the system, and this question was half-baked and a result of running down the wrong rabbit hole. My understanding of how the API really is expected be used has changed. I wish there were a way for me to delete this fumble, but until there is, please ignore it.

5

I appreciate your honesty and understand that sometimes we all run into rabbit holes during development. However, I want to assure you that your post is valuable to the Square developer community.

Even though you feel that your question was “half-baked,” it can still serve as a learning opportunity for others who might encounter similar challenges or misunderstandings. Your experience and the subsequent discussion can help clarify things for other developers and contribute to a more comprehensive knowledge base. :slightly_smiling_face: