Example

Here is an example of how to use the Webserial API to interact with a PinPad device.

import {PinPad} from '@danidoble/webserial';

const pinPad = new PinPad();
pinPad.username = 'username';
pinPad.password = 'password';

pinPad.on('serial:disconnected', event => {
    document.getElementById('disconnected').style.display = 'block';
});

pinPad.on('serial:connected', event => {
    document.getElementById('disconnected').style.display = 'none';
    document.getElementById('need-permission').style.display = 'none';
});

pinPad.on('serial:need-permission', event => {
    document.getElementById('need-permission').style.display = 'block';
});

pinPad.on('serial:soft-reload', event => {
    // reset your variables
});

pinPad.on('serial:unsupported', event => {
    document.getElementById('unsupported').style.display = 'block';
});

async function tryConnect(){
    await machine.connect().then(() => {
    }).catch(console.error);
}

document.addEventListener("DOMContentLoaded", () => {
    tryConnect();
    document.getElementById('connect').addEventListener('click', tryConnect);
});

// i don't recommend expose pinPad object since it's a global object and has control over the pinPad
//window.pinPad = pinPad;

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>
    <script src="./src/webserial/pinPad.js" type="module"></script>
</head>
<body>
<button id="connect">Connect to serial</button>

<div id="need-permission" style="display: none">
    Woooah! It seems that you need to give permission to access the serial port.
    Please, click the button to try again.
</div>

<div id="disconnected">
    The pinPad is disconnected. Please, check the connection.
</div>

<div id="unsupported">
    This browser does not support the WebSerial API. Please, use a compatible browser.
</div>
</body>
</html>