'Error: Forbidden' on product setup – docs are outdated!

[tomkeysers]

I'm setting up some product specific buy button from a development store and I'm getting this error:

Error:
columnNumber: 8980
fileName: "http://sdks.shopifycdn.com/buy-button/0.1.34/buybutton.min.js?ver=4.8.1"
lineNumber: 2
message: "Forbidden"
response: Response { type: "cors", url: "https://testbuybuttonstuff.myshopify.com/api/apps/6/product_listings/11037071431", redirected: false, … }
stack: "o@http://sdks.shopifycdn.com/buy-button/0.1.34/buybutton.min.js?ver=4.8.1:2:8980\n"
status: 403
__proto__: Object { … }

In the client setup I filled in the domain, storefrontAccessToken, apiKey and appId.

Does anyone have a clue what goes wrong?

[tomkeysers]

Found the issue – apparently just a faulty setup.

I was just following the docs, but they seem to be out of date! On the opening page it states:

var client = ShopifyBuy.buildClient({
  domain: 'my-shop.myshopify.com',
  storefrontAccessToken: 'your-storefront-access-token', // previously apiKey, now deprecated
});

but the library still gave me the error that the apiKey was needed too (using the latest script as stated in the docs), so I gave the apiKey parameter along as well.

That didn't work, but what does seem to be working is this:

var client = ShopifyBuy.buildClient({
  domain: 'my-shop.myshopify.com',
  apiKey: 'your-storefront-access-token',
  appId: '6'
});

So basically, instead of using the storefrontAccessToken parameter, I have to use the apiKey parameter (which is 'deprecated') and give it the storefrontAccessToken as value instead of the actual api key. And then also use the appId.

I think that first page of the docs needs sorting out.

[ChalkyBrush]

It took me about an hour to get this working as well, because docs are out of date and doesn't explain the required 'appId' field

[tomkeysers]

@ChalkyBrush so I finally came to the conclusion that the referenced library on the docs is way outdated. Instead of using the 0.1.34 you have to use the 0.5.1 – the mentioned storefrontAccessToken works then, as well as other new parameters referenced.

Just follow this git's release number here in to stay up to date (and not the docs).

[ChalkyBrush]

wow I wonder how much functionality I'm missing since I'm using an old version.

The 0.51 compiled javascript file is not available via the CDN.

How do I compile the code of the git repository into 1 JS file that I can import into my web page?

[tomkeysers]

@ChalkyBrush sorry, there was a typo in my message – it's not 0.51 but 0.5.1 :)

[marianneciara]

This has been so helpful, thanks for posting the solution @tomkeysers

Has anyone else had any issues with the product images not displaying in the cart? The background image for all my products is url(//sdks.shopifycdn.com/buy-button/latest/no-image.jpg).

FYI I am running my WordPress locally on Docker, haven't tried in a live environment yet.