Розробка мобільного додатку для інтернет-магазину під ключ

Розробка мобільного додатку для інтернет-магазину під ключ

Мобільний додаток інтернет-магазину конкурує не з вашим сайтом — він конкурує з додатками OZON, Wildberries та Rozetka. Користувач звик до певного UX: швидкий пошук, плавний скрол каталогу, миттєвий checkout. Будь-яке відхилення від відомого патерну веде до втрати клієнтів. Ми розробляємо e-commerce додатки, які не поступаються лідерам ринку, і упаковуємо їх у зрозумілий процес з гарантією результату. Середня конверсія на мобільних пристроях — 2.5–3%, що вище за десктопні показники, а додатки з push-сповіщеннями утримують на 35% більше користувачів. Отримайте консультацію та точну оцінку вашого проєкту — напишіть нам.

Чому каталог гальмує і як це виправити?

Найчастіше вузьке місце — екран каталогу із зображеннями. UICollectionView на iOS або LazyVerticalGrid у Flutter смикаються при скролі, якщо декодування зображень синхронне. Рішення: SDWebImage (iOS) / Coil (Android) з кешуванням на диск та prefetch через UICollectionViewDataSourcePrefetching / PagingSource. На React Native — FlashList замість FlatList для великих списків: віртуалізація працює коректніше, немає проблем з keyExtractor та getItemLayout. FlashList краще FlatList у 2 рази за продуктивністю в тестах Scroll Performance.

Зображення товарів — головна причина великого розміру завантажуваних даних. Використовуємо WebP (на 25–30% компактніше JPEG при порівняній якості), lazy loading, розмір під реальний UIImageView — не завантажуємо 2000x2000 для прев'ю 150x150. Це економить трафік до 30% і прискорює завантаження.

Як ми реалізуємо пошук і фільтри?

Рядок пошуку з дебаунсом 300ms → запит до search endpoint (Elasticsearch/Meilisearch на бекенді). Автодоповнення за популярними запитами та назвами товарів. Історія пошуку зберігається в UserDefaults/DataStore Preferences.

Фільтри — окремий екран (bottom sheet або модал): категорія, ціна (RangeSlider), бренд, розмір, колір. Застосування фільтра не перезавантажує весь каталог — лише оновлюємо URL-параметри запиту і показуємо skeleton-loader поки завантажуються нові результати. Активні фільтри — чипи над каталогом з хрестиком для швидкого зняття. Це стандарт e-commerce, без якого користувач губиться.

Кошик і checkout: що всередині?

Кошик синхронізується з сервером — не тільки в UserDefaults. Користувач додав товар на телефоні, відкрив додаток на планшеті — бачить той самий кошик. Механізм: при кожній зміні (add/remove/quantity) — PATCH /cart у фоні. При відкритті екрана кошика — GET /cart для sync.

Checkout — критичний флоу. Максимальна кількість кроків: адреса → доставка → оплата → підтвердження. Всі дані, які можна попередньо заповнити — попередньо заповнюємо (адреса з профілю, збережена картка). Apple Pay/Google Pay — додаємо обов'язково: за даними Stripe, конверсія checkout з ними на 15–20% вища. One-tap checkout для користувачів, що повертаються: збережена адреса + saved card → один екран підтвердження.

Особистий кабінет, відгуки та push-сповіщення

Історія замовлень — пагінований список з фільтром за статусом. Детальна сторінка замовлення: товари, трекінг доставки, можливість скасувати або оформити повернення. Трекінг — або через API служби доставки (СДЕК, Пошта Росії, Нова Пошта), або посилання на сайт.

Push-сповіщення за статусом замовлення — обов'язкові: «Ваше замовлення відправлено», «Замовлення прибуло до пункту видачі». Використовуємо FCM + APNs з rich notifications (фото товару в сповіщенні).

Відгук з фото: користувач завантажує з галереї або камери. Upload через pre-signed S3 URL безпосередньо з пристрою (не через сервер — економимо трафік і час). Рейтинг товару — зірки + кількість відгуків у картці та на детальній сторінці. Відгуки з фото збільшують конверсію покупки на 10%.

Як проходить розробка?

1. Аналітика та прототипування — вивчаємо бізнес-логіку, цільові сценарії, конкурентів. Збираємо вимоги до каталогу, пошуку, кошика, checkout.
2. Дизайн UX/UI — створюємо користувацькі флоу в Figma, затверджуємо з замовником. Враховуємо гайдлайни App Store та Google Play.
3. Розробка — паралельна робота над iOS та Android (або кроссплатформенний стек). Кожен модуль покривається unit-тестами.
4. Інтеграція з бекендом — підключаємо API для товарів, кошика, замовлень. Використовуємо GraphQL або REST.
5. Тестування — QA на реальних пристроях, перевірка продуктивності, сумісність з версіями ОС.
6. Деплой в магазини — завантаження в App Store Connect та Google Play Console, проходження модерації.
7. Пост-релізна підтримка — моніторинг crash-репортів, оновлення під нові версії ОС.

Що входить у результат?

• Вихідний код з коментарями та документацією API
• Схеми екранів та користувацькі сценарії
• Доступи до App Store Connect та Google Play Console
• Налаштовані push-сповіщення та аналітика (Firebase / Amplitude)
• Інструкція з експлуатації для вашої команди
• 2 тижні безкоштовної підтримки після запуску

Наш досвід — понад 5 років у мобільній розробці та 50+ реалізованих проєктів для e-commerce. Ми знаємо, як пройти модерацію App Store та Google Play без зайвих ітерацій. Замовте розробку та отримайте консультацію експерта — просто напишіть нам.

Орієнтири за термінами

MVP (каталог, пошук, кошик, checkout з одним платіжним методом, історія замовлень): 4–8 тижнів. Повноцінний додаток з відгуками, wishlists, програмою лояльності, трекінгом та push-кампаніями: 2–4 місяці. Вартість розраховується індивідуально, але ми завжди даємо прозору смету до старту робіт. Зв'яжіться з нами для безкоштовної оцінки вашого проєкту.

Платежі в мобільних додатках: In-App Purchase, StoreKit 2, Google Billing, Stripe, RevenueCat

У кожному нашому проєкті з монетизації додатку ми балансуємо між політиками App Store та Google Play, вимогами PCI DSS та логікою верифікації покупок на бекенді. Неправильно зроблена система платежів — це не просто баг, це фінансові втрати та можливий бан додатку. За 7 років ми розібрали понад 50 кейсів інтеграції платіжних SDK — від простої Stripe-форми до розподіленого біллінгу з власними серверними вебхуками.

Як вибрати між In-App Purchase та зовнішнім платіжним шлюзом?

Якщо додаток продає цифровий контент або підписки — Apple та Google вимагають використовувати їхні платіжні системи. Обійти це неможливо: порушення правил 3.1.1 App Store або Google Play Developer Policy призводить до видалення додатку. Фізичні товари та послуги, що надаються офлайн, — інша історія.

In-App Purchase: дві платформи, два різних API

StoreKit 2 (iOS 15+)

StoreKit 2 — повна переробка оригінального StoreKit з async/await API. Product.products(for:), product.purchase(), Transaction.currentEntitlements — читабельно та передбачувано порівняно з чергою транзакцій через SKPaymentTransactionObserver.

Найважливіша зміна: транзакції в StoreKit 2 підписані JWS (JSON Web Signature) і верифікуються локально без серверного roundtrip. Transaction.verificationResult повертає .verified(Transaction) або .unverified(Transaction, VerificationError). Це не означає, що сервер не потрібен — він потрібен для зберігання статусу підписки, але локальна верифікація прибирає затримку при старті.

StoreKit.AppTransaction — верифікація самого факту завантаження додатку з App Store. Потрібна для додатків з платним завантаженням або безстроковими покупками, не підписками.

Складне місце в StoreKit 2 — обробка renewalState для підписок: .subscribed, .expired, .inBillingRetryPeriod, .inGracePeriod, .revoked. Стан inGracePeriod означає, що Apple намагається відновити оплату (до 16 днів) — у цей час потрібно продовжувати надавати доступ. Не обробиш — втратиш лояльних користувачів, у яких тимчасово не пройшла картка. За досвідом, близько 5% підписок потрапляють у billing retry, і автоматичне відновлення доступу повертає до 80% з них.

Google Play Billing Library (v6+)

Google Billing — складніший за StoreKit за кількістю сценаріїв. BillingClient з PurchasesUpdatedListener, queryProductDetailsAsync, launchBillingFlow, queryPurchasesAsync — обов'язково викликати при кожному старті додатку, не покладатися на PurchasesUpdatedListener як єдине джерело правди.

Підтвердження покупки: acknowledgePurchase() для non-consumables та підписок, consumePurchase() для consumables. Якщо не викликати acknowledge протягом 3 днів — Google автоматично зробить повернення. Це гарантована втрата грошей, якщо забути про acknowledge на бекенді після верифікації.

ProductDetails з SubscriptionOfferDetails — в Billing v5+ структура оферт ускладнилася: один продукт може мати кілька basePlanId та offerId (пробний період, знижка для нових користувачів, retention-офер). BillingFlowParams.SubscriptionUpdateParams для апгрейду/даунгрейду підписки з prorationMode.

Чому серверна верифікація обов'язкова?

Ніколи не довіряйте лише клієнтському коду при розблокуванні платного контенту. Клієнтська верифікація обходиться модифікацією додатку.

Для IAP мінімальна схема: додаток отримує receiptData (iOS) або purchaseToken (Android), відправляє на бекенд, бекенд верифікує через Apple App Store Server API / Google Play Developer API, зберігає статус у БД, віддає відповідь клієнту. RevenueCat робить це за вас — але якщо у вас кастомний бекенд, потрібно реалізувати самостійно.

Webhook-и важливіші, ніж здається. Користувач може скасувати підписку через налаштування телефону, не через додаток — додаток не отримає про цю подію в реальному часі. Тільки webhook від Apple/Google (або RevenueCat) дозволяє своєчасно оновити статус. Ми використовуємо перевірку підпису вхідних запитів через Apple's signedPayload та Google's DeveloperNotification.

Як RevenueCat спрощує інтеграцію?

Підтримувати StoreKit 2 та Google Billing одночасно, з урахуванням промо-кодів, оферт, відновлення покупок та серверної верифікації — це кілька місяців розробки. RevenueCat закриває більшу частину цього шару.

RevenueCat — не просто SDK для платежів. Це:

• Єдиний API для iOS та Android (і Stripe для вебу)
• Серверна верифікація та зберігання статусів підписок
• Webhooks на події (покупка, відновлення, скасування, billing issue)
• Аналітика по когортам, MRR, churn
• A/B тестування оферт через Experiments

Purchases.configure(withAPIKey:) при старті, Purchases.shared.getCustomerInfo() для отримання поточних entitlements — мінімальний інтегрований шар. Purchases.shared.purchase(package:) замість прямого виклику StoreKit/Billing.

У документації RevenueCat сказано: «RevenueCat handles receipt validation on the server side, reducing client-side complexity and preventing fraudulent purchases.»

Обмеження RevenueCat: платний (безкоштовно до певного рівня MRR, далі відсоток від доходу), не підходить для дуже складних flow з кількома storefront-ами або кастомними bundle-ами. Однак для типового SaaS-додатку економія на власній розробці є значною — інтеграція окупається швидко.

Stripe в мобільних додатках

Stripe — для оплати фізичних товарів, послуг, B2B-платежів де IAP не вимагається політикою платформи.

Stripe iOS SDK та Android SDK — PaymentSheet для готового UI оплати, PaymentSheetFlowController для кастомного UI зі збереженими картками. Payment Intent створюється на сервері, client secret передається в додаток — карткові дані ніколи не проходять через ваш сервер, лише через Stripe.

Apple Pay та Google Pay через Stripe: PKPaymentRequest (iOS) та GooglePayLauncher (Android) вже інтегровані в Stripe SDK. Конверсія у Apple Pay дає в 1.3–2 рази вищий результат, ніж форми з ручним введенням картки — це цифри, які ми підтвердили на десятці проєктів.

Збережені картки через SetupIntent + Customer API — користувач платить в один тап при повторному візиті. Compliance: PCI DSS SAQ A — найлегший рівень compliance, оскільки Stripe Tokenization прибирає потребу зберігати карткові дані на своїй стороні. Згідно з PCI DSS, передача токенів звільняє від необхідності сертифікації рівня 1.

3DS2 (Strong Customer Authentication) — обов'язковий для платежів у ЄС за PSD2. Stripe обробляє автоматично через PaymentIntent.confirmPayment, але потрібно коректно обробити .requiresAction статус та повернути користувача на потрібний екран після аутентифікації.

Що входить в роботу (deliverables)

Процес та терміни

Починаємо з з'ясування бізнес-моделі: підписки, разові покупки, consumables, freemium. Від цього залежить архітектура. Тестування IAP вимагає Sandbox-акаунтів (Apple) та License Testers (Google) — це окреме налаштування середовища.

Sandbox Apple поводиться не так, як production: підписки відновлюються кожні 5 хвилин замість місяця, inGracePeriod працює по-іншому. Обов'язково тестувати сценарії: закінчення тріалу, скасування, billing retry, refund.

Як налаштувати тестове середовище для платежів?

Вартість розраховується індивідуально виходячи з набору інструментів та складності серверної логіки. У середньому ми вкладаємося в бюджет, який обговорюється окремо, але економія від запобігання помилок та churn окупає ці вкладення за 2–3 місяці.

Отримайте консультацію по вашому проєкту — зв'яжіться з нами. Ми допоможемо обрати оптимальну архітектуру платежів, яка пройде рев'ю сторів та не зламається при пікових навантаженнях.