Clearent JavaScript SDK

IDTech VP8300 Overview

The sdk supports the use of an IDTech VP8300 card reader. The reader supports 3 credit card interactions - contactless, chip, and swipe. The reader requires a USB connection so it can communicate with our SDK using keyboard emulation.

Audience

This guide is intended for developers/solutions that plan to, or already are, integrated with the javascript-sdk.

Prerequisites

The following are required before you begin using the VP8300:

Use a computer with Windows or macOS (Macbook) and a USB port.

Serve your application over HTTPS both in development and in production.

Your domain must have a valid SSL certificate.

It is recommended that integrators implement the manual card entry of the JavaScript SDK solution as a fallback measure.

Initialize the sdk

In order to support the reader you pass to our init function the enableReader flag set to true and the deviceType as 'IDTECH'

          ClearentSDK.init({
            "baseUrl": "https://gateway-sb.clearent.net",
            "pk": "YOUR PUBLIC KEY GOES HERE"
            "enableReader":true,
            "deviceType": "IDTECH"
          });
        

Connect reader to computer

Plug the reader into a USB port on your computer. You might need an adapter depending on the age of the computer.

Select the Reader button

By selecting the reader button you are placing focus on the 'Card Number' area. This is important since the reader will produce keyboard emulated data and place it in this location.

Note

At this point you want to make sure you are not presenting the card to the reader. The solution uses javascript's focus ability and if you present the card too early the keyboard emulation will begin but not have any location to drop the data into. If this does happen you can select the Clear option to reset.

Present Card to Reader

You should now see the message 'Ready for card reader'. It is time to present the card or phone to the reader.

Select the Submit button

Once the card has been read you should see masked information. When you select the submit button the keyboard emulated data will be sent to Clearent for processing. The success and error functions you have implemented will be called when the response comes back.

Note

At this point you also have the option to select Clear. This will reset the form allowing you to reinitialize and try another transaction.

Contactless

Interacting with the contactless interface is new to many. The solution uses NFC (near field communication) and requires the contactless card or phone to remain close to the reader until the card is read successfully. This feedback can come from their phone, or the beeps of the reader, or from the attendant.

Inserting the card with chip

The chip will face you when inserting the card. Ensure the card has been seated correctly by pushing down until you feel it hit the bottom of the reader.

Unsuccessful Responses

The majority of errors returned cannot be remedied but are listed here to document the IDTech messages and ours. We return an error object to convey the details but the action taken when you see this would be to try once more, and if the issues persists, try manually entering the card number, or request a different card or payment method.

Example of an Error Response

      {
        "code": "400",
        "status": "fail",
        "exchange-id": "ID-clearent-mobile-jwt-2-729b876d-60b4-42bc-90cb-c394d5584a1e",
        "payload": {
          "error": {
            "error-message": "Card Rejected",
            "result-code": "mobile-jwt-idtech-contact-response-5009",
            "time-stamp": "2022-07-09T13:40:10.753877"
          },
          "payloadType": "error"
        }
      }
    

Error messages

Appendix A – Related Links

Refer to the following table for links to helpful resources: