BLINKCARD ELEMENT =================

ELEMENT DESCRIPTION
--------------------------------
BLINKCARD element integrates Microblink BlinkCard, AI-powered software for lighting-fast Card scanning. BlinkCard runs directly on your user’s phone or your own servers, without the need for an internet connection.
This way, images of credit cards and other sensitive data never end up in the wrong hands.
Reads more than 1,700 different card types and recognises twelve card issuers — American Express, UnionPay, Diners, Discover Card, Elo, Jcb, Maestro, Mastercard, RuPay, Verve, Visa, VPay.

STEP-BY-STEP SETUP
--------------------------------
 0) Register a MICROBLINK account: https://microblink.com/login

 1) Get a licence key from MICROBLINK for BLINKCARD, on IN-BROWSER platform: https://developer.microblink.com/license

 2) Enter your BLINKCARD LICENSE KEY in the Plugin Settings, field BLINKCARDLICENSEKEY, optionally, enter this CSS customisation in the Plugin Settings, field CUSTOM CSS (HEADERS):
   /* Global font family */
   --mb-font-family: inherit;

   /* Component (UI with buttons) */
   --mb-component-background: #FFF;
   --mb-component-font-color: #000;
   --mb-component-font-size:  14px;
   --mb-component-font-style: normal;
   --mb-component-font-weight: 400;
   --mb-component-letter-spacing: normal;
   --mb-component-line-height: 20px;
   --mb-component-text-transform: none;
   --mb-component-border-color: rgba(120, 120, 128, 0.2);
   --mb-component-border-radius: 5px;
   --mb-component-border-style: solid;
   --mb-component-border-width: 1px;
   --mb-component-box-shadow: none;
   --mb-component-button-background:        #FFF;
   --mb-component-button-border-color:         rgba(120, 120, 128, 0.2);
   --mb-component-button-border-color-disabled: rgba(116, 116, 128, 0.08);
   --mb-component-button-border-radius: 20px;
   --mb-component-button-border-style: solid;
   --mb-component-button-border-width: 1px;
   --mb-component-button-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
   --mb-component-button-box-shadow-disabled: none;

   /* User feedback (messages below buttons) */
   --mb-feedback-font-color-error: #FF2D55;
   --mb-feedback-font-color-info: rgba(60, 60, 67, 0.7);
   --mb-feedback-font-size: 12px;
   --mb-feedback-font-style: normal;
   --mb-feedback-font-weight: 400;
   --mb-feedback-letter-spacing: normal;
   --mb-feedback-line-height: 16px;
   --mb-feedback-text-transform: none;

   /* Overlays */
   --mb-overlay-draganddrop-background: rgba(72, 178, 232, 0.25);
   --mb-overlay-draganddrop-background-error: rgba(255, 45, 85, 0.25);
   --mb-overlay-draganddrop-border-color-error: #FF2D55;
   --mb-overlay-draganddrop-border-style-error: dashed;

 3) Drap and drop up the visual element BLINKCARD in your app, containing the scanning engine.

 4) Select the BLINKDCARD element, in APPEARANCE section, configure the following fields:
 
 FIELDS :
 - ACTION MESSAGE : Default text message shown to the user prior to scanning.
 - RTL : Right to left (RTL) Support.
 - RESULT DATA TYPE : Must always be set to Result (BlinkCard).

 5) Integrate the logic into your application using the following BLINKCARD events, states and actions:

 EVENTS :
 If you intend to trigger an action depending on the scan events, use any of the following Workflow Start:
 - READY : Event which is emitted when UI component is successfully initialized and ready for use.
 - SCAN SUCCESS : Event which is emitted after successful scan.
 - CAMERA SCAN STARTED : Event which is emitted when camera scan is started, i.e. when user clicks on scan from camera button.
 - IMAGE SCAN STARTED : Event which is emitted when image scan is started, i.e. when user clicks on Scan from gallery button.
 - SCAN ABORTED : Event which is emitted when scan is aborted, i.e. when user clicks on close from the gallery toolbar, or presses escape key.
 - SCAN ERROR : Event which is emitted during or immediately after scan error.
 - FEEDBACK : Event which is emitted during positive or negative user feedback scanning, for example partially hidden ID or successful scanning.
 - FATAL ERROR : Event which is emitted during initialization of UI component.

 EXPOSED STATES:
 Use any element able to show/process the data of interest (such as a Group with a Text field) stored within the result of the following states of the BLINKCARD element :
   - RESULT : Result of the scan, containing individually selectable information detected from the Card scan.
   - ERROR CODE : BLINKCARD Technical Error code.
   - ERROR FATAL : BLINKCARD Technical Fatal error short description.
   - ERROR MESSAGE : BLINKCARD Technical Fatal error message.
   - FEEDBACK CODE : BLINKCARD feedback code, preventing scanning.
   - FEEDBACK MESSAGE : BLINKCARD feedback message, preventing scanning.
   - FEEDBACK STATE : BLINKCARD feedback state, indicating whether the event preventing the scan has been cleared or not.
   - RAW RESULT : BLINKCARD Raw scanning results.

 ELEMENT ACTIONS - TRIGGERED IN WORKFLOW:
   - RESET : Reset the BLINKCARD element to its original state and attributes.    

IMPLEMENTATION EXAMPLE
======================
Feel free to browse the app editor in the Service URL for an implementation example.

ADDITIONAL INFORMATION
======================
> Supported issuers: American Express, UnionPay, Diners, Discover Card, Elo, Jcb, Maestro, Mastercard, RuPay, Verve, Visa, VPay.

TROUBLESHOOTING
================
Any plugin related error will be posted to the Console of the browser.

PERFORMANCE CONSIDERATIONS
===========================
N/A

QUESTIONS ?
===========
Contact us at [email protected] for any additional feature you would require or support question