403 Access Denied on GET sandbox main-iframe.html

Questions
1

I am having issues with the Square Web-SDK frontend, the card payment form will not render.
Below, I instantiate the card through the Square Web-SDK and register it to my DOM element.

    const payments = await Square.payments(this.applicationId, this.locationId)
        .catch(err => console.log(err));
    this.card = await payments!.card();

    await this.card.attach('#card-container');

Below is the script tag that I am using for the SquareJS in my header.

type="text/javascript" src="https://sandbox.web.squarecdn.com/v1/square.js"

I am viewing through localhost on Firefox, though the Web-SDK is implemented in Angular 19.2.14, Node 22.16.0.
Here is the GET request url:

https://sandbox.web.squarecdn.com/1.70.0/main-iframe.html?applicationId=<my-application-id>&hostname=localhost

And its response:

<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code><Message>Access Denied</Message></Error>

I also tried using a self signed cert to serve from https://localhost; however, that did not change the response. I also tried creating another application and setting it to sandbox mode, so I think I ruled out a bad appId.
What mechanism is there on sandbox.web.squarecdn that is preventing me from accessing the main-iframe.html resource?

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

Payment API: Process Online and In-Person Payments
Square Developer
Get Started

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 did some sleuthing and here is some more information that I think may lead us (me) to a solution:
I had another look at the GET request that was failing:

https://sandbox.web.squarecdn.com/1.70.0/...

Having spied the version number “1.70.0”, I then decided to search within the javascript returned from squarecdn and found the following line of code:

VERSION(){return null!=="1.73.5"?"1.73.5":Hn}

I then modified the link initially called by my Web-SDK implementation to contain the version number found above. Now, visiting this in my browser gives me this result:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>Square Web Payments SDK</title>
		<s*ript defer="defer" 
			src="main-iframe.js"
			integrity="sha256-PttQIHS0aU5paeJqxYB81RuA/x5rTLheUCPE5xH1TfQ=" 
			crossorigin="anonymous">
		</s*ript>
	</head>
	<body></body>
</html>

Interesting! Could the Web Payments SDK be calling the wrong resource on squarecdn? For calling the iframe with respect to version 1.70.0 produces the following:

image
image324×135 2.5 KB

4

So it turns out that I am the donut-hole here, I was using an outdated version of square.js that my angular schematic builds to my dist.
So the script that I was trying to get from the CDN was never working, or was being shadowed by what was already pre-bundled with the app.
With my local square.js script now the right version, my card form is now rendering properly:

image
image615×185 3.78 KB

I hope someone else finds this useful.

5

Glad to hear that your were able to figure out the issue. :slight_smile: