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

**URL:** <https://developer.squareup.com/forums/t/api-explorer-vs-real-word-jquery-ajax-implementation-of-checkout-api/18728>\
**Category:** Questions\
**Tags:** checkout-api\
**Created:** [September 13, 2024, 9:57pm UTC](https://developer.squareup.com/forums/t/api-explorer-vs-real-word-jquery-ajax-implementation-of-checkout-api/18728 "2024-09-13T21:57:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Presto](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/presto/32/7327_2.png) [@Presto](https://developer.squareup.com/forums/u/Presto)\
**Post date:** [September 13, 2024, 9:57pm UTC](https://developer.squareup.com/forums/t/api-explorer-vs-real-word-jquery-ajax-implementation-of-checkout-api/18728/1 "2024-09-13T21:57:02Z")

</div>

Using this page  
[POST /v2/online-checkout/payment-links - Square API Explorer](https://developer.squareup.com/explorer/square/checkout-api/create-payment-link)  
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](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](https://sandbox.square.link/u/ggVhC5pN)”,  
“long\_url”: “[Checkout API Sandbox Testing Panel](https://connect.squareupsandbox.com/v2/online-checkout/sandbox-testing-panel/MLQNJQ2XDZ3T0/3JJFQUVUZKUFLWO4)”,  
“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](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);  
}  
});  
}

---

<div class="post-metadata">

**Author:** ![Square-Dev-AI](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/square-dev-ai/32/2513_2.png) [@Square-Dev-AI](https://developer.squareup.com/forums/u/Square-Dev-AI)\
**Post date:** [September 13, 2024, 9:57pm UTC](https://developer.squareup.com/forums/t/api-explorer-vs-real-word-jquery-ajax-implementation-of-checkout-api/18728/2 "2024-09-13T21:57:30Z")

</div>

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

> **[Make your First API Call](https://developer.squareup.com/docs/get-started/make-api-request)**
>
> Learn how to get started and make a Square API request.

> **[Quick Pay Checkout](https://developer.squareup.com/docs/checkout-api/quick-pay-checkout)**
>
> Learn how to create a Square-hosted quick pay checkout page by only specifying the name and price (without having to specify the Order object).

> **Additional Documentation**
>
> [Postman](https://developer.squareup.com/docs/devtools/postman)  
> [Take Payments](https://developer.squareup.com/docs/payments-api/overview)  
> [API Explorer Overview](https://developer.squareup.com/docs/devtools/api-explorer)

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.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [September 13, 2024, 10:04pm UTC](https://developer.squareup.com/forums/t/api-explorer-vs-real-word-jquery-ajax-implementation-of-checkout-api/18728/3 "2024-09-13T22:04:06Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![Presto](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/presto/32/7327_2.png) [@Presto](https://developer.squareup.com/forums/u/Presto)\
**Post date:** [September 13, 2024, 10:04pm UTC](https://developer.squareup.com/forums/t/api-explorer-vs-real-word-jquery-ajax-implementation-of-checkout-api/18728/4 "2024-09-13T22:04:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [September 13, 2024, 10:42pm UTC](https://developer.squareup.com/forums/t/api-explorer-vs-real-word-jquery-ajax-implementation-of-checkout-api/18728/5 "2024-09-13T22:42:15Z")

</div>

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. 🙂