question

alexm avatar image
alexm asked alexm answered

Web App doesn't work in CodeLab example

I got the example from https://github.com/clover/codelab-remote-pay-cloud... working fine.

I created an App from my dashboard. I set the Web Configuration URL and CORS Domain to http://localhost:8080 and Default OAuth response to TOKEN. I modified the code like this 
this.remoteApplicationId ="JDBN0MQ6SX5BM.SAFRZKF8CYTFM";
and then ran my App from the dashboard.

When the page opens, I get an alert TypeError: NetworkError when attempting to fetch resource.and the console says Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sandbox.dev.clover.com/v3/merchants/V1NFVKYB8WWQ1/devices?access_token=[removed]. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

Will this example not work for my App?
Clover Flex
2 comments
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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

keithryanwong avatar image keithryanwong commented ·

Hi Alex,

So I logged in to view your app and your setup is still not complete.

The app's web configuration is set to http://localhost, not http://localhost:8080. Also, you need to set the required permissions for your application to allow Merchant Read.

Also, it isn't significant in sandbox, but please delete the values for equipment codes/name under the semi-integrated app settings. These are not meant to be filled out by the developer until instructed by First Data onboarding.

This doesn't explain the CORS, but why don't we get that fixed first and try it out.

Best,

Keith

0 Likes 0 ·
alexm avatar image alexm keithryanwong commented ·

Hi @keithryanwong,

Thank you for responding.

I've completed the setup as per your instructions. But I still get the CORS error.

The local URL is 

http://localhost:8080/?merchant_id=V1NFVKYB8WWQ1&employee_id=H0J1142GMXB9R&client_id=SAFRZKF8CYTFM#access_token=[removed]

Errors in console are:

GET https://sandbox.dev.clover.com/v3/merchants/V1NFVKYB8WWQ1/devices?access_token=[removed] 401 (Unauthorized)
Failed to load https://sandbox.dev.clover.com/v3/merchants/V1NFVKYB8WWQ1/devices?access_token=[removed]: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Although when I open the link in a new tab, it works fine.

Alex

0 Likes 0 ·

2 Answers

keithryanwong avatar image
keithryanwong Deactivated answered keithryanwong Deactivated edited
Hi @alexm,

After doing some more testing, I figured out that:

1) The issue is that your app permissions were not propagated. App permissions, when updated, do not take effect for merchants' instances until they uninstall and install the application. So you will need to uninstall and reinstall the app through your test merchant's app market.

The CORS error was a little misleading because it was a byproduct of that.

2) You were able to open the link in a new tab and retrieve information because that endpoint authenticates either through authtoken or by being logged into the merchant dashboard. If you were to try that endpoint directly when you were not logged in it would return instead: {message: not logged in}

Hope you're able to get going with that.

Best,
Keith
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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

alexm avatar image
alexm answered
Hi @keithryanwong,
It worked when I did that. Thanks for your help.
Alex
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

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