question

thoughtspacewebsites avatar image
thoughtspacewebsites asked David Marginian 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 characters needed characters left characters exceeded

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

David Marginian avatar image
David Marginian answered thoughtspacewebsites commented

2) You need to be passing the PAKMS key, not the access token:

https://docs.clover.com/docs/using-the-clover-hosted-iframe#configuring-the-sdk


1 comment
10 |2000 characters needed characters left characters exceeded

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

Ah, alright, I thought it could have something to do with that but I wasn't sure. I got confused around the language of the docs and was improperly setting the authorization header when trying to retrieve the api key for a merchant. This led me (incorrectly) to believe that the access_token was interchangable. I got it working now.

My first issue is still relevant though, FireFox only seems to be throwing CSP issues, and a syntax error, where Chrome doesn't do this at all. Any thoughts?

0 Likes 0 ·
thoughtspacewebsites avatar image
thoughtspacewebsites answered David Marginian 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.

13 comments
10 |2000 characters needed characters left characters exceeded

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

We have an internal issue to track this. It is my understanding that the problem is in a third party dependency. I don't have an update to provide on the issue.
0 Likes 0 ·
thoughtspacewebsites avatar image thoughtspacewebsites David Marginian ♦♦ ·
Is there anything I can do in the meantime to continue my development on this integration? Need to be able to build in card not present flows, and this is a blocker for now.
0 Likes 0 ·
thoughtspacewebsites avatar image thoughtspacewebsites David Marginian ♦♦ ·
Hey, just wanted to check in to see if there are any updates on this, or if you have any other recommendations for how I can work on my integration... I can't even seem to bypass the CSP errors with meta tags, it just keeps failing out. Can't proceed with my card integration til this is figured out.
0 Likes 0 ·
There is no update and I don't expect one for awhile. It looks like you may need to move forward with just a web integration if this is blocking your app on the Android side.
-1 Like -1 ·
Show more comments
thoughtspacewebsites avatar image
thoughtspacewebsites answered David Marginian 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...

3 comments
10 |2000 characters needed characters left characters exceeded

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 David Marginian ♦♦ ·

Ok, so I figured out my way around the block after a bunch of research. Partially the way my code was structured. The CSP issue is still present, just as a heads up, but it is no longer a blocker to my development

0 Likes 0 ·
We understand the CSP issue is still present but it shouldn't be blocking anyone at this point. I am glad you figured it out and thank you for letting us know.
0 Likes 0 ·

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