Issues with eComm iframe integration

Question

question

thoughtspacewebsites asked Sep 2, '21 David Marginian Deactivated commented Sep 15, '21

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

postMessageHandler https://checkout.sandbox.dev.clover.com/scripts/card-cvv_10.entry.js:1

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

REST API e-commerce api OAuth

screenshot-from-2021-09-02-16-23-11.png (243.0 KiB)

10 |2000

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

Answer 1 · 2021-09-02T20:47:11Z

David Marginian Deactivated answered Sep 2, '21 thoughtspacewebsites commented Sep 2, '21

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

10 |2000

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

thoughtspacewebsites commented · Sep 02, 2021 at 09:12 PM

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 ·

Answer 2 · 2021-09-09T23:13:47Z

thoughtspacewebsites answered Sep 9, '21 David Marginian Deactivated commented Sep 15, '21

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

10 |2000

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

David Marginian ♦♦ commented · Sep 10, 2021 at 01:07 AM

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 ·

thoughtspacewebsites David Marginian ♦♦ commented · Sep 10, 2021 at 02:04 PM

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 ·

thoughtspacewebsites David Marginian ♦♦ commented · Sep 13, 2021 at 02:25 PM

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 ·

David Marginian ♦♦ thoughtspacewebsites commented · Sep 13, 2021 at 02:31 PM

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 ·

Show more comments

Answer 3 · 2021-09-15T19:05:51Z

thoughtspacewebsites answered Sep 15, '21 David Marginian Deactivated commented Sep 15, '21

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

10 |2000

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

David Marginian ♦♦ commented · Sep 15, 2021 at 07:07 PM

Do you see it here - https://codepen.io/gareth-dsouza/pen/yLeygaO?

0 ·

thoughtspacewebsites David Marginian ♦♦ commented · Sep 15, 2021 at 08:58 PM

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 ·

David Marginian ♦♦ thoughtspacewebsites commented · Sep 15, 2021 at 09:05 PM

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 ·

question