## Document Scan quality requirements
Below are the requirements for size and quality of document images captured by any device, which are necessary for successful image processing by Document Reader SDK:
### Good lighting
Good lighting helps to achieve better OCR results. If the image is too dark or too bright, the document might not be processed successfully.
### Avoid reflections
Glares and reflections interfere with processing and reduce data extraction accuracy. We recommend not to use the flash of your mobile device when capturing document images.
### Focus and sharpness
Make sure the image is clear and there are no blurred areas.
### Angle
The tilt angle of the document should not exceed 10 degrees in any direction (horizontal or vertical).
### Margins (too small)
Make sure there is minimal space around the document. It is recommended that the document takes up 70-80% of the image.
### Margins (too big)
Make sure the space around the document does not take up more than 20-30% of the image. It is recommended that the document takes up 70-80% of the image.
### Contrast
The document should be in clear contrast to the background. A light-colored document on a light background, as well as a dark-colored document on a dark background, might not be recognized.
### Resolution of the image
To achieve a good quality of recognition of identification documents, we recommend that you provide images captured by a camera with a resolution of at least Full HD (1920×1080) and autofocus.
### Extraneous objects
Make sure your hands or other objects do not cover document data.
### Avoid distortion
When scanning the passport, ensure the pages are aligned properly and all details are clearly visible.
![[avoid-distortion.jpg]]
---
## JavaScript Events with postMessage
When our browser-based KYC workflows are run in an HTML `iframe`, it is good to set up an event listener on the parent window, to get a JS-event notification when the login workflow is completed either with a success or an error. See [MDN Mozilla Developer Network – Window.postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#security_concerns)
### Setup Eventlistener
HTML and Javascript example:
```javascript
<script>
window.addEventListener(
"message",
(event) => {
// NOTE: Allowed origins can be configured via merchant settings (please contact the support team)
// If not configured, "*" will be used as targetOrigin to postMessage
// https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#security_concerns
// Filter origin
// if (event.origin !== "http://example.org:8080")
// return;
if (event.data.product !== "SCANNING") return;
const payload = event.data.payload;
const {
sessionId,
sessionStatus,
relayState,
errorCode,
errorDetails,
} = payload;
if (errorCode) {
// handle error
console.error(payload);
} else {
// handle success
console.log(payload);
}
},
false
);
</script>
```
### Event Data Returned on Error message
Json example:
```json
{
"product": "SCANNING",
"payload": {
"errorCode": "LINK_EXPIRED",
"errorDetails": "The link is already used or expired",
"relayState": "12345",
"sessionId": "b67a91f8-3a33-474d-91b2-6669a435bc40",
"sessionStatus": "OperatorRequired"
}
}
```
### Event Data Returned on Successful Scanning
Json example:
```json
{
"product": "SCANNING",
"payload": {
"sessionId": "b91f2898-7b35-489e-b0d2-cbb783ac340f",
"sessionStatus": "Accepted",
"relayState": null,
"errorCode": null,
"errorDetails": null
}
}
```