Myth Games

A Myth Games egy gyűjthető kártyajátékokra (TCG) szakosodott webshop – Pokémon TCG, Magic: The Gathering, One Piece Card Game, Disney Lorcana és hasonló termékek –, amely a mythgames.eu Shopify áruházát szerette volna mobilappá alakítani, hogy a vásárlói közvetlenül a telefonjukról, push értesítésekkel és gyorsabb, natívabb élménnyel vásárolhassanak.

A cél egyszerűnek tűnt

Mégis akadt kihívás!

A meglévő webshopot kell "becsomagolni" egy dobozos, Capacitor-alapú webview alkalmazásba, hogy a fejlesztés gyors és költséghatékony maradjon, miközben az app minden funkciója (push notification, saját fiók, natív érzés) megvan.

A gyakorlatban viszont ez a fajta megoldás Androidon egy komoly problémát vet fel: a Google Pay nem működik automatikusan Capacitor webview-ban, mert a fizetési szolgáltatók natív böngésző-kontextust várnak, egy beágyazott webview-t nem feltétlenül ismernek fel biztonságosnak. Emellett meg kellett oldani azt is, hogy:

• a webshop felismerje, hogy épp a mobilalkalmazásban vagy a weben nyílik-e meg,
• a mobilalkalmazás ne kezelje a böngészőhöz hasonlóan a cookie-kat, hogy ne ütközzön a webes munkamenettel.

A megoldás

Shopify Checkout Kit integráció a Google Pay-hez

Androidon a Google Pay zökkenőmentes működéséhez bekötöttük a Shopify saját Checkout Kit-jét. Ez a checkout folyamatot félig-meddig egy natívabb, a fizetési szolgáltatók által megbízhatóként kezelt környezetbe irányítja ki, így a Google Pay natívan megjelenik és működik – ugyanúgy, mint az Apple Pay iOS-en.

Egyedi kód a Shopify témában a cookie-k kezelésére

A Shopify téma kódjába nyúltunk bele, hogy a mobilalkalmazás ne törje meg, illetve ne keveredjen össze a webes munkamenettel – a cookie-kezelést külön logika oldja meg attól függően, hogy az adott munkamenet appból vagy böngészőből érkezik-e.

Környezetfelismerés: app vagy web

A webshop kódjába épített logika felismeri, hogy a látogató éppen a mobilalkalmazásból vagy a normál webes felületről nyitotta-e meg az oldalt, és ennek megfelelően viselkedik.

Design: animált, videó alapú loading screen

Mivel a webshop designja már készen állt, a vizuális munka a betöltőképernyőre koncentrálódott: egy animált, videó alapú loading screen-t terveztünk az alkalmazáshoz.

Egyedi app ikonok iOS-re

iOS lehetővé teszi, hogy a felhasználó testre szabja az app ikon stílusát (pl. üveges/"glass" hatás), ezért három különböző ikonvariánst készítettünk, hogy a Myth Games ikonja minden beállítás mellett jól nézzen ki.

Eredmény

Az alkalmazás mind az App Store-ban, mind a Google Playben élesben elérhető, natívan működő Apple Pay-jel és Google Pay-jel – annak ellenére, hogy technikailag egy webview-alapú, dobozos megoldásról van szó. A megrendelő kifejezetten ezt a gördülékeny fizetési élményt kérte, és a Trustpilot-visszajelzés alapján a fejlesztési folyamat is zökkenőmentes és jól kommunikált volt.