Ручне введення номера картки — часта причина помилок і відмов від оплати. Сканування через камеру скорочує час введення до 1–2 секунд і знижує відсоток покинутих кошиків на 15–20%. Ми у своїй практиці використовуємо перевірені рішення: Stripe CardScan (Bouncer) або нативні OCR-фреймворки. Розповімо, який варіант підійде під ваші завдання та як уникнути типових проблем. Впровадження такого функціоналу окупається за рахунок підвищення конверсії — економія може сягати десятків відсотків виручки.
Як обрати інструмент для сканування?
| Бібліотека | Підтримка | Точність | Складність | Ціна |
|---|---|---|---|---|
| Card.io (PayPal) | Не оновлюється з 2018 | Середня | Низька | Безкоштовно |
| Stripe CardScan / Bouncer | Активна, Apache 2.0 | >95% | Середня | Безкоштовно |
| Vision (iOS) + ML Kit (Android) | Apple/Google | ~90% (потребує фільтрації) | Висока | Безкоштовно |
Card.io історично популярний, але давно не оновлюється — на сучасних версіях iOS спостерігаються збої AVCaptureSession. Не рекомендуємо для нових проєктів. Stripe CardScan (колишній Bouncer) — нейромережеве рішення на TFLite/CoreML, працює офлайн. На iOS підключається через SPM: https://github.com/stripe/stripe-ios, на Android — через Gradle: com.stripe:stripecardscan. Його код відкритий, що дозволяє адаптувати під специфічні вимоги. Нативні OCR-фреймворки (VNRecognizeTextRequest, ML Kit Text Recognition v2) не потребують сторонніх залежностей, але потрібно самостійно реалізувати детекцію зони картки та стабілізацію результату (підтвердження через 3–5 послідовних однакових результатів).
Як забезпечити точність розпізнавання?
Точність розпізнавання залежить від умов зйомки. При гарному освітленні Stripe CardScan дає 97% правильних номерів. В умовах слабкого освітлення або відблисків точність падає до 85–90%. Ми рекомендуємо реалізувати перевірку за алгоритмом Луна та підсвітку кадру при нестачі світла. Для стабілізації результату використовуйте підтвердження через 3 послідовних збіги.
| Умова | Stripe CardScan | Vision/ML Kit |
|---|---|---|
| Гарне освітлення | 97% | 92% |
| Слабке світло | 85% | 78% |
| Відблиски | 80% | 72% |
Чому варто використовувати нативні фреймворки, а не готовий SDK?
Готовий SDK (Stripe CardScan) дає високу точність з коробки та скорочує час розробки. Але якщо вам потрібна повна кастомізація інтерфейсу або робота в специфічних умовах (нестандартні картки, погане освітлення) — нативні Vision/ML Kit надають повний контроль. Ми комбінуємо підходи: для MVP використовуємо Stripe CardScan, для production з унікальними вимогами пишемо свій модуль на нативних API.
Які дані можна і не можна розпізнавати?
Номер картки — основна мета, точність >95%. Термін дії (MM/YY) розпізнається впевнено. Ім'я власника — OCR справляється гірше через варіативність шрифтів та тиснення. Рекомендуємо: номер + термін скануємо автоматично, ім'я — заповнювати вручну як необов'язкове поле. Ніколи не розпізнаємо та не зберігаємо CVV/CVC — він на звороті, і його зберігання порушує вимоги PCI DSS. Це не просто правило, а обов'язкова умова для проходження аудиту безпеки.
Реалізація на Flutter
Пакет card_scanner на pub.dev працює через Platform Channels до нативних SDK. Альтернатива — google_mlkit_text_recognition з власним парсером. Для production-додатку переважніший Stripe CardScan через FFI: точніше та надійніше в нестандартних умовах (погане освітлення, нестандартний дизайн карток). Flutter-розробникам слід враховувати, що деякі методи стабілізації потребують нативного коду — ми допомагаємо з обв'язкою.
Дозволи та приватність: що важливо для App Store?
iOS: NSCameraUsageDescription в Info.plist з формулюванням «для сканування картки при оплаті». Android: uses-permission android:name="android.permission.CAMERA" + runtime request через ActivityResultContracts.RequestPermission. Кадри з камери обробляються тільки в пам'яті — не зберігаються на диск, не відправляються на сервер. Це критично для проходження рев'ю App Store та Play Market. Докладніше про вимоги можна прочитати в документації Stripe CardScan.
Що входить у роботу?
- Аналіз вимог та вибір оптимального стеку (Bouncer, Vision/ML Kit, Flutter-пакет).
- Інтеграція SDK з кастомним UI (прев'ю камери, рамка картки, анімація).
- Реалізація логіки стабілізації та фільтрації хибних спрацьовувань.
- Тестування на різних пристроях та в умовах слабкого освітлення.
- Документація з інтеграції та підтримка при публікації в стори.
Орієнтовні терміни та як ми працюємо
Інтеграція Stripe CardScan з базовим UI: 1–2 дні. Кастомний UI + нативний Vision/ML Kit з власною логікою стабілізації: 2–3 дні. Повний цикл — від аналітики до деплою — займає від 3 до 5 днів залежно від складності. Вартість розраховується індивідуально.
Хочете прискорити прийом платежів та знизити відсоток відмов? Отримайте консультацію щодо вашого проєкту — проаналізуємо вимоги та запропонуємо оптимальне рішення. Наш досвід: 5+ років у мобільній розробці, 30+ успішних проєктів з інтеграцією платежів. Гарантуємо якість та відповідність гайдлайнам сторів. Зв'яжіться з нами, щоб обговорити деталі.