Does this work in React Native or Cordova? Any Recommended card readers?

[3210jr]

Hey, i am looking to build a mobile app with react native and want to implement a way to process our own privately owned cards. This seems like a great fit so far.

Do you know if I can work with it inside react native or cordova? probably cordova since its just a web page wrapped in native shell. If it works on cordova I cant see why it wont work on electron for desktop.

Also, do you recommend any particular card reader? brand or otherwise? anything you have worked with personally.

Thanks again

[khrome]

The library is pure javascript, it will happily work with react provided you have a loader that works in common js or you provide a shim that provides equivalent functionality. Normally this is a server-side component as sending track data directly over the wire and trusting the user is not forging them is questionable. For reference: the cardswipe enables a "card present" transaction which from the processors point of view is like saying "the customer physically presented the card". In a kiosk-type of intranet app, however, this would be fine. If the library was rewrapped with an UMD loader, it would be drop-in ready... my current gig makes contributing to open source a pain, but if you'd like to wrap the library, I'd gladly integrate a pull request ( https://github.com/umdjs/umd/blob/master/templates/returnExports.js ).

[khrome]

The code was developed with a Magtek USB wedge reader, but I believe any of the non-serial readers will work (this expects keyboard "wedge" input, which is seen as standard keystrokes by the OS)

[khrome]

When I originally answered this question, I assumed this was a mobile solution or a localhost kiosk... It's worth noting that transmitting track1 & track2 data across a WAN is not allowed by the processors (submitting track data is what qualifies the transaction as 'card present', and allowing transmission of that would kind of defeat the purpose). So while the logic is web compatible, how you intend on using it may get your merchant account blacklisted and you and the merchant fined.

That said, I intend on adding UMD support and browser build targets in an upcoming release, which could help.

[jaydenmaddison]

@khrome I need to get MagTek working in a react native environment. what is the best way to do this? Should I export the object C MagTek SDK or is there another work around that is pure javascript? I couldn't really understand what you meant by that link.

[khrome]

This mostly intended for 'wedge' input (comes in as keyboard input). That said, you could easily wire it to anything just by piping the stream of characters into the scanner. If you used it in combination with 'node-hid' or 'serialport' it would be easy to wire up. Checkout another of my projects ('barcode-scanner') for simple examples of working with those libs: https://github.com/khrome/barcode-scanner/blob/master/barcode-scanner.js#L37

[jaydenmaddison]

Thanks for the advice I will give this a try. It doesn't look like IOS is supported on node-hid, seems likes it's meant for desktops. Could you confirm if this would work with IOS please?

[khrome]

HID & serial are for desktop apps, as that's what barcode-scanner supports. I was just illustrating how the parser/scanner works in conjunction with a device driver. For example: were you to purchase a Magtek Scanner you would need to interface with it's SDK ( https://www.magtek.com/support/idynamo?tab=software ), you would then need something to plug your driver to react native. So a more productive question would be "does device X that I'm integrating my app with support react native?" Another potential solution is to write a bridge to react using the SDK you need, but this would require more effort.

card-swipe is a pure JS module which knows nothing about the driver that powers it. so yes, it works in react native. Your hardware driver is another story.