question

alexm avatar image
alexm asked alexm commented

Issues with connecting to Clover API - CodeLab example

Hello,

I am working with a Clover Flex device and trying to connect to it through Javascript. I have installed the CodeLab: Remote Pay Cloud app on the device.

I followed the instructions from:
https://github.com/clover/codelab-remote-pay-cloud

Web Configuration:
Site URL: http://localhost:8080/
CORS Domain (optional): http://localhost:8080/
CORS OAuth Response: CODE

The API that is called internally:
https://sandbox.dev.clover.com/v3/merchants/MERCHANT_ID/devices?code=CODE

I always get a 401 Unauthorized error. I get the same error when I change settings and try ACCESS TOKEN instead of CODE as well.

Is there anything else that I need to set up?

Alex
Clover Flex
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.

2 Answers

Greg avatar image
Greg answered
Hi @alexm

Is that web configuration for the installed CodeLab application, or one that you have created? The CodeLab configuration should already be set to ACCESS TOKEN so that when you launch the app from the web dashboard you will be able to log in through your sandbox account and get the token back to put into your code.

To clarify, the CodeLab application provides the project skeleton you will be building on, so you will NOT need to create a new application yourself. The installed CodeLab application in your web dashboard will change based on code that you write from the source code you clone from the Github repository.

Please let me know if this is not clear from the README as well, so we can fix the tutorial.

Greg
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 alexm commented
Hi @Greg,

I created a Web App from my dashboard on http://localhost:8080. I then set up the application on my local computer from the README using the skeleton provided. I finished up to establishing a connection with the device.

To test my code thus far, I launched the application from my dashboard by clicking on the Example OAuth Request and then the relevant Merchant. It opens the local website for the application I had set up with some query parameters like so http://localhost:8080/?merchant_id=MERCHANT_ID&employee_id=EMPLOYEE_ID&client_id=CLIENT_ID#access_token=ACCESS_TOKEN

But when the html page is loaded, I get an alert with the message TypeError: Cannot read property 'forEach' of undefined.

When I looked into the console, I see the error Failed to load resource: the server responded with a status of 401 (Unauthorized).

I had modified the application and tried CODE when ACCESS TOKEN didn't work for me. But none of them worked.

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

Greg avatar image Greg commented ·

Hi @alexm,

The only application you need is the CodeLab, and you should not be launching it through an example OAuth Request from your developer dashboard. If you go to your sandbox test merchant dashboard, you will find the CodeLab application. If you click on that application it will take you to localhost:8080 and you should see the UI of the application (if your server is running through npm run build). At this point you can follow along on the tutorial (setting the configuration fields like merchant id, token, etc from the url).

To reiterate, you do NOT need to create an application on the dashboard yourself. The CodeLab application provides the structure for web app that will connect to your local server. Please launch the CodeLab, and not your Web App (you should uninstall it from all the test merchants and remove it). The local source code you are running is set to point the Remote Application ID of the CodeLab to establish a connection, and not a new application you create.

0 Likes 0 ·
alexm avatar image alexm Greg commented ·

Hi @Greg,

I followed your instructions and uninstalled my application from the device. Now when I run the CodeLab application from the dashboard, it opens up my localhost and loads the page without errors. I can see the serial number of my device in the select list.

Unfortunately, on hitting Connect, it doesn't connect to the device. The errors from the console are 401 (Unauthorized) and Response for preflight has invalid HTTP status code 401.

0 Likes 0 ·
Greg avatar image Greg alexm commented ·

Hi @alexm,

Please make sure you have updated the configuration correctly in your local source code in the Device Pairing section, and have followed the steps to the end. You may need to backtrack if you have been editing the source code before you properly launched the CodeLab application.

Specifically, make sure merchant id, access token, and remote application id (which shouldn't change from "CLOVERDEV.655VQ41Z9CVF8", correspond to the ones from your CodeLab application url after logging in.

0 Likes 0 ·
Show more comments

Welcome to the
Clover Developer Community