question

thoughtspacewebsites avatar image
thoughtspacewebsites asked David Marginian Deactivated commented

Issues with eComm iframe integration

So I'm trying to make a basic eCommerce iframe integration with a WooCommerce website I'm working on. I've got through all of the steps for obtaining an access_token via Oauth. I've managed to start the iframe integration itself, but I'm having some problems...

1) When I run clover.elements() in my front end JS, I get the following console errors:

- Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”)

- Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data


These CSP issue above... I figured it was something on my end, but I searched the generated HTML for the page in question and there isn't even a CSP header present anywhere. Still might be my end... The second issue though looks to be some sort of formatting problem. It has a deeper trace but I omitted it for brevity.

Also, my other issue:

2) When I submit the form empty, I successfully get returned errors. If, however, I fill it out with card info, I get a 401 unauthorized response. I've ensured that I'm running "new Clover()" with my access_token obtained through Oauth on the server. I also have enabled eCommerce permissions, and read / write payment permissions for my app from the dashboard. Not sure why I'm getting an unauthorized response.

EDIT: MORE INFO BELOW...

So I tested in Chrome, and I don't get the CSP issues at all. The only issues I get are when I go to process the card, and they seem pretty strange... Looks like the dev sandbox URL tries to access a "tokens" URL and fails because of CORS. Looks like that failure is happening outside of my control though...

screenshot-from-2021-09-02-16-23-11.png

REST APIe-commerce apiOAuth
10 |2000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

thoughtspacewebsites avatar image
thoughtspacewebsites answered David Marginian Deactivated commented

Hey, just wanted to check back in here about the CSP issue. I'm having to use the ecomm sdk in my app. I already built in the website integration, and managed to work around the CSP issue I mentioned. That said, I'm trying to work around it for my app, but Chrome is throwing a fit. Is there anyway to make the Clover ecomm SDK not rely on unsafe-eval? It seems like a large security risk to open up in my app, especially considering it's being brought about by the payment processing integration I'm working on.

10 |2000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

thoughtspacewebsites avatar image
thoughtspacewebsites answered David Marginian Deactivated commented

I did look at these links, however at the same time, they only seem to discuss "ignoring the issue", but the issue seems to be actually blocking the load of this script at all on my app. I didn't see anyone mentioning load being blocked at all.

At the most basic, I can reproduce this issue by loading the CDN scripts in, and then calling the following code:

this.clover = new Clover(this.cloverApiKey);
console.log('clover info', this.clover)
this.elements = this.clover.elements();

The console log is optional, but if I investigate the Clover instance after it's created I only see "apiKey", "messageElement", and "options" properties, but not any reference to the "elements()" init method. Wondering if I'm calling things in wrong...

10 |2000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Welcome to the
Clover Developer Community