@microblink/photopay-in-browser-sdk
Version:
A simple payment barcode scanning library for WebAssembly-enabled browsers.
79 lines (63 loc) • 2.25 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>PhotoPay UI Component</title>
<script type="module" src="../dist/photopay-in-browser/photopay-in-browser.esm.js"></script>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html {
font-family: "Avenir Next", sans-serif;
}
body {
background-color: #fff;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
photopay-in-browser {
max-width: 400px;
/* Customization of UI - see variables in src/components/shared/styles/_globals.scss */
/*
--mb-component-background: red;
--mb-component-action-label: none;
--mb-component-border-width: 0;
--mb-component-action-buttons-width: 100%;
--mb-component-action-buttons-justify-content: space-evenly;
--mb-component-button-size: 48px;
--mb-component-button-border-radius: 24px;
*/
}
</style>
</head>
<body>
<photopay-in-browser engine-location="http://localhost:3333/resources" license-key="sRwAAAYJbG9jYWxob3N0r/lOPgo/w35CpHnVLZc/Zv6pLBo5ZvwJFaM3ZjQrU0vLlpL/zASv/9C8h4qLCQxHz/lzLj57TZmZrjtZt9rxDp++uMb3vHGgq2lhIZ4AKQkSfgqZpjbYMH4EWMDeDITcZCCCN5jpU4eZR/HcfRXBTJOImwM99APTz++jWQXxNGqWdM0qJzl5t0S9O7qwn9gPA0/kNw==" recognizers="CroatiaPdf417PaymentRecognizer"></photopay-in-browser>
<script type="text/javascript">
const photopay = document.querySelector('photopay-in-browser');
photopay.addEventListener('fatalError', (ev) => {
console.log('fatalError', ev.detail);
});
photopay.addEventListener('ready', (ev) => {
console.log('ready', ev.detail);
});
photopay.addEventListener('scanError', (ev) => {
console.log('scanError', ev.detail);
});
photopay.addEventListener('scanSuccess', (ev) => {
console.log('scanSuccess', ev.detail);
});
photopay.addEventListener('feedback', (ev) => {
console.log('feedback', ev.detail);
});
</script>
</body>
</html>