Developing the Mobile Check Capture User Interface

When developing the Mobile Check Capture UI, it is important to keep in mind that the submission of items for cropping requires rotation, which occurs in iterations until the check image is vertically aligned. It is therefore important that users using the solution are notified or mandated to take a photo of the check, in an already vertically aligned position.

Mandating alignment and significantly increased performance time can only occur within native mobile environments using notifications, cropping borders on the camera app, contrast/brightness changes, flash usage, and native cropping prior to API image submission. Unfortunately in hybrid environments, most of these options are not available. However, there are UI designs developers can utilize to ensure users do not suffer from delays or poor user experiences.

The following workflow addresses performance, streamlining the user experience, especially in mobile hybrid environments:

Requesting the user to capture the front image.
Submitting the front image to the Mobile Check Capture API on receipt.
While processing the front image, requesting the user capture the rear image.
Submitting the rear image to the Mobile Check Capture API on receipt.
Requesting the user enter and submit the check amount, while completing the capture process.
After submission of the check amount and clicking next, pre-populate the account number, routing number, and check number provided by the API, allowing the user to change data that may be incorrect. If the check number is not provided, do not show the check number input field.
Data updated or confirmed by the user should be saved into the user check number, routing number, and account number fields.

Mock Wireframe Using Best Practice Workflow

Below are wireframes of the complete process as described in the workflow above.

Sample User Interface

Please see the example user interface below using the above workflow in combination with MCC API.

Important Notes

As a reminder, it is extremely important that user captured data (i.e. user-entered amount, user confirmed account number, routing number, and check number be stored and used to recreate the MICR line upon change. For example, if the MICR line is "T067006432T12345U0100" and the user changes the check number from 0100 to 1000, the new replaced MICR line will equal "T067006432T12345U1000". If using the Check21.com Payment Gateway in the submission of X9 files to your financial institution, we highly recommend sending the user entered amount and the replacement MICR line, not the OCR captured data.

It is recommended, when submitting images to the MCC API, that resolution of the Base64 image is lowered to 0.60 using native iPhone or Android functions. Not doing so may result in excessive processing times.