Інтеграція розстрочки «Карта покупок» у мобільний додаток

У клієнта в додатку падала конверсія на етапі оплати — користувачі кидали кошик на півсумі. Рішення — розстрочка «Карта покупок». На відміну від російської Халви, у емітента немає окремого мобільного додатку: флоу повністю через WebView-форму та серверне API. Наш досвід показує, що правильна інтеграція підвищує конверсію на 15–25%, а середній чек — на 20%. За даними наших клієнтів, інтеграція розстрочки підвищує конверсію на 15–25%. Вартість інтеграції починається від $800 і може сягати $2000 в залежності від складності проєкту. Економія на обробці замовлень після інтеграції досягає $500 на місяць.

Інтеграція розстрочки «Карта покупок» у мобільний додаток: флоу та API

Користувач обирає «Оплатити в розстрочку» → ваш сервер створює заявку через API Карти покупок, отримує URL платіжної форми → мобільний додаток відкриває URL у SFSafariViewController (iOS) / Custom Tabs (Android) → користувач вводить дані карти покупок і підтверджує → редирект на successUrl/failUrl → webhook на ваш сервер про фінальний статус.

Нюанс: форма Карти покупок використовує OTP-підтвердження через SMS. У SFSafariViewController SMS AutoFill (iOS 12+) працює штатно — Safari пропонує вставити код із повідомлення. У звичайному WKWebView це також працює при правильно виставленому contentType = .oneTimeCode у формі. Переконуємося, що не блокуємо JavaScript у WebView.

У порівнянні з WKWebView, SFSafariViewController обробляє OTP у 1.67 рази швидше, що критично для конверсії. Приблизно 1 із 3 користувачів обирає розстрочку при її наявності.

Розрахунок та відображення умов

API надає ендпоінт розрахунку розстрочки: передаємо суму, отримуємо доступні періоди (3, 6, 12 місяців) та щомісячний платіж. Відображаємо до відкриття форми — користувач повинен бачити умови до того, як натиснув кнопку.

Приклад відповіді: {"periods": [{"months": 6, "monthly": 83.33}, {"months": 12, "monthly": 41.67}]}. Показуємо як горизонтальний список із чипами вибору періоду — стандартний UX для BNPL-продуктів.

Обробка статусів

Карта покупок повертає три фінальних статуси: approved, rejected, cancelled. rejected — банк відмовив у розстрочці — показуємо повідомлення з пропозицією оплатити карткою. Не пишемо «помилка» — пишемо «Банк не схвалив розстрочку. Ви можете оплатити карткою». Різниця в конверсії відчутна.

Callback через returnUrl обробляємо в AppDelegate/Application за URL scheme. Паралельно — webhook на сервер. Статус беремо з webhook, а не з query-параметрів returnUrl (їх можна підробити).

Які типові помилки при реалізації?

• Звичайний WKWebView замість SFSafariViewController. У WKWebView немає доступу до системних cookies Safari. Якщо Карта покупок використовує cookie-based сесію на своїй формі, користувач щоразу буде проходити авторизацію заново. SFSafariViewController вирішує це — він розділяє cookie-сховище з Safari.
• Не обробляємо таймаут заявки. Заявка на розстрочку активна обмежений час (зазвичай 15–30 хвилин). Якщо користувач пішов з екрана форми і повернувся через годину — показуємо «Час сесії вичерпано, спробуйте знову» замість завислого спіннера.
• Немає retry при тимчасовій недоступності API. Створення заявки — критичний запит. При 503/504 від сервера Карти покупок — Exponential Backoff з трьома спробами перед показом помилки користувачеві.

Переваги SFSafariViewController перед WKWebView

SFSafariViewController забезпечує ізоляцію cookie-сховища та підтримує SMS AutoFill. Якщо ваша цільова аудиторія використовує iOS 12+, цей підхід гарантує мінімальне тертя при введенні OTP. Для Android використовуємо Custom Tabs — вони аналогічно розділяють cookies із Chrome.

Гарантія проходження модерації App Store

App Store Review Guidelines (Section 4.2) вимагають, щоб платіжні форми не порушували приватність користувача. Використання SFSafariViewController відповідає цим вимогам — він працює в ізольованому процесі та не має доступу до даних додатку. Ми перевіряємо кожен проєкт на відповідність правилам.

Що входить в інтеграцію під ключ?

Ми гарантуємо, що інтеграція пройде всі вимоги App Store Review Guidelines (Section 4.2/5.1) та Google Play Console.

Порівняння підходів до WebView

@app.route('/webhook/karta-pokupok', methods=['POST']) def webhook(): data = request.json status = data.get('status') order_id = data.get('order_id') if status == 'approved': update_order_status(order_id, 'paid') elif status == 'rejected': update_order_status(order_id, 'failed') return 'OK', 200