Jak jsme implementovali Google Pay platbu

Minulý rok jsme se rozhodli před vánoční sezónou na e-shopy Nay.sk a ElectroWorld.cz implementovat další online platební metodu Google Pay. Ta zákazníkovi umožní pohodlněji zaplatit svou objednávku a posune zpracování zakázky k rychlejšímu finálnímu doručení. 

Platbu Google Pay už čeští a slovenští zákazníci znají z obchodů díky platbě přes mobilní telefon s podporou NFC. Pokud vaše platební karta podporuje Google Pay, tak po aktivaci ve vašem účtu stačí, když v obchodě přiložíte telefon k platebnímu terminálu a máte zaplaceno.

Minulý rok se ale začalo více mluvit o možnosti využití Google Pay přímo v internetovém prostředí pro platby na e-shopu nebo při objednávkách dalších služeb (letenky, jídlo, vstupenky atd.). Samotný Google tuto platební metodu uvádí sloganem: „A better way to pay, by Google”. Použití NFC platby v obchodech vyžaduje spolupráci mezi Google a vydavateli platebních karet. Google Pay platbou na e-shopu může zaplatit jakýkoliv uživatel, který má platební metodu uloženou ve svém Google účtu.

S implementací Google Pay na webu jsme byli úplně první v rámci Slovenska.

Nay je prvním slovenským e-shopem, který integroval platební metodu Google Pay na svůj web a do své mobilní aplikace. Jak probíhala samotná implementace #GooglePay? To se už brzy dočtete na našem Pecka blogu.#development #jsmepecka https://t.co/bc46G2ykQo

— PeckaDesign (@peckadesign) December 7, 2018

Jak funguje Google Pay v internetovém prostředí?

Google Pay si můžete představit jako klasickou platbu kartou s několika vychytávkami navíc. Tento typ platby využijete, pokud máte Google účet, na kterém máte spárovanou platební kartu. Následně uděláte nákup na jakémkoliv zařízení, kde jste přihlášení ke svému Google účtu (prohlížeč, mobilní telefon, smart hodinky, tablet…). Po zvolení Google Pay platby dojde k vyvolání obrazovky. Tady vyberete jednu ze svých karet, potvrdíte a máte zaplaceno. Žádné zdlouhavé zadávání čísla karty, platnosti ani CVV nehrozí - celou platební operaci dokončíte velmi elegantně a rychle. 

Cílem Google je naučit zákazníky Google Pay využívat a poskytnout jim tuto službu v celém svém ekosystému. Vize je např. taková, že vyvoláte Google asistentku na svém mobilním telefonu nebo chytrém reproduktoru od Google a dáte pokyn: „Google, prosím potřebuji koupit USB kabel k tiskárně”. Sám Google pak najde internetový obchod s nejvýhodnější cenou a udělá vše za vás - od objednávky až po platbu kartou.

Proč se zabývat Google Pay platbou

• Google má miliardy uživatelů.
• Mezi mobilními zařízeními je 75% podíl Android uživatelů.
• Mobilní aplikace Google Pay má 100 milionů stažení celosvětově.
• Při implementaci platby přímo na detailu produktu je možné dosáhnout dokončení objednávky jen na 2 kliky.
• Aktuálně je podpora Google Pay puštěna na 68 trzích světa.
• Na webu není omezujícím faktorem typ prohlížeče ani platforma zařízení.
• Platbu integrovali i celosvětoví hráči e-commerce (např. Airbnb, Deliveroo, Shopify, Uber, Wish).
• Za provedené transakce si Google neúčtuje žádné poplatky.
• Při určitých typech implementace (viz rozbor jednotlivých možností v dalším odstavci) je možné přes API pracovat s daty o doručovací adrese nebo kontaktními údaji uživatele a je již na eshopu jak je použije (např. předvyplněním údajů v objednávce).

zdroj dat: Google prezentace

Jaké jsou možnosti implementace na web

Samotnou platbu lze implementovat několika způsoby. Od nejjednodušší, kdy není potřeba udělat skoro nic, ale zákazníkovi to nepřinese téměř žádné výhody, až po řešení, kdy má vývojář e-shopu vše pod svou kontrolou a zákazník může využít výhody naplno.

1. Google Pay platba na stránce platební brány při úhradě online kartou:

• Tuhle možnost jsme poprvé zaregistrovali u GP webpay, která ji všem svým klientům zapla automaticky, ale nabízí ji i další platební brány.
• Výhoda: Implementace nepotřebuje jakýkoliv zásah ze strany e-shopu.
• Nevýhoda: Platba je ukrytá v rámci platební brány, na kterou vás e-shop přesměruje pro vykonání platby online a je tak téměř neviditelná.

2. Google Pay platba jako speciální platba na úrovni e-shopu skrze vygenerovanou nabídku plateb od platební brány:

• Některé platební brány nabízí prezentaci svých plateb jako oddělené platby na úrovni e-shopu. S takovým řešením jsme se setkali u PayU.
• Výhoda: Platba je pro zákazníka viditelná už jako oddělená platba na e-shopu.
• Nevýhoda: Pro finální dokončení platby většinou probíhá přesměrování mimo e-shop.

3. Implementace Google Pay platby přes přímou integraci prostřednictvím procesora:

• Kompletní implementaci si zajišťuje e-shop sám. Samotné platby probíhají přes procesora a e-shop tak nemusí mít bankovní licenci na zpracování online plateb. Podívejte se na seznam podporovaných procesorů, který se stále rozšiřuje.
• Výhoda: E-shop má implementaci zcela pod svou kontrolou, a to jak umístění tlačítek na webu (do objednávky, přímo na detailu produktu atd.), dokončení platby v rámci e-shopu, tak i možnost předvyplnit osobní údaje zákazníka do právě rozpracované objednávky a to z vybraného zákazníkova Google profilu.
• Nevýhoda: Do implementace se zpočátku investuje více času než u předchozích dvou možností. E-shop odvádí poplatky za uskutečněnou platbu danemu procesorovi (nikoli však Googlu, ten si poplatky z platby nebere).

4. Implementace Google Pay platby přes přímou integraci bez využití procesora:

• Kompletní implementaci si e-shop zajišťuje sám včetně vyřízení všech okolností ohledně zpracování platby.
• Výhoda: Není potřeba žádného procesora. Díky tomu e-shop neplatí žádné poplatky za uskutečněnou platbu.
• Nevýhoda: Pro možnost téhle implementace musí mít e-shop PCI DSS certifikaci, kterou není lehké získat.

A jakou cestou jsme šli my? Pro každý e-shop jsme zvolili trochu jiný postup a zabrousili jsme i do implementace Google Pay platby do mobilní aplikace.

Implementace Google Pay na frontendu webu Electroworld.cz

PayU pro implementaci Google Pay platby nabízí všechny tři výše zmíněné způsoby s využitím procesora. Vzhledem k blížící se vánoční sezóně a rychlé implementaci jsme zvolili pro web ElectroWorld.cz druhou možnost. Plánujeme upravit podobu implementace do třetí varianty kvůli širším možnostem.

Z pohledu PayU znamená zprovoznění platby vyřešit administrativní věci a zapnout platbu v PayU profilu pro daný e-shop. Díky tomu, že máme na ElectroWorldu implementaci PayU přes REST API, kde si nabídku platebních metod automaticky aktualizujeme 1krát denně, tak šlo vše hladce. Po povolení na straně PayU se Google Pay platba, po spuštění synchronizace, okamžitě objevila mezi možnostmi plateb na e-shopu. Jedinou vadou na kráse téhle verze implementace je, že PayU zatím nenabízí zobrazení Google Pay okna s výběrem karty inline nad prostředím e-shopu a dochází k přesměrování na speciální PayU Google Pay microsite. Řešením je přejít na přímou implementaci, při které si okno vyvoláme sami.

Implementace Google Pay na frontendu webu Nay.sk

Při implementaci platební metody pro web Nay.sk jsme zvolili cestu přímé integrace skrze procesora Braintree, se kterým jsme už měli zkušenost z předchozí implementace platební metody PayPal. 

Aktuálně implementace vypadá tak, že se Google Pay zobrazuje v objednávce jako individuální platba v nabídce plateb pro vybranou dopravu. Při dokončení objednávky se zobrazí mezistránka a pak stále v rámci Nay.sk webu se objeví Google Pay okno, kde si uživatel vybere z nabídky přiřazených karet ke svému Google účtu.

Při použití přímé implementace proces nasazení nekončí, je třeba projít schvalovacím procesem přímo od Googlu

Google si chce implementaci Google Pay platby pohlídat, aby na všech webech vypadala co nejpodobněji a byla tak pro uživatele konzistentní. Proto jsme museli projít schvalovacím procesem naší implementace, abychom pro Google Merchant ID eshopu dostali povolení platbu používat.

Co je potřeba udělat pro schválení:

• Projít integrační checklist nadefinovaný přímo Googlem (nezáleží přes kterého procesora děláte implementaci). 
• V rámci splnění implementace se vám určitě bude hodit Google Pay Brand Guidelines. 
• Dole na stránce Integračního chekclistu najdete odkaz na vytvoření žádosti - Request production access.

V odeslané žádosti doporučujeme popsat podpoře, jak si může implementaci vyzkoušet na vašem produkčním nebo testovacím webu. Vzhledem k tomu, že je web ve slovenštině a podpora je v USA a tím pádem komunikuje v angličtině, tak se ve finále ukázalo jako nejschůdnější poslat podpoře odkaz na Google dokument s printscreeny, odkazy konkrétních kroků potřebných pro objednávku a přístupové údaje pro testovací uživatelský účet.

A ještě jedno doporučení. Podpora je v Americe, takže vždy očekávejte reakci nejdříve v nočních hodinách z pohledu našeho časového pásma. Buďte připraveni hned večer odpovědět, abyste na reakci nemuseli čekat dalších 24 hodin.

Implementace Google Pay do Android mobilní aplikace

E-shop Nay a ElectroWorld má pro své zákazníky mobilní aplikaci (EW Android, Nay Android, Nay iOS). 

Nay.sk se pro svůj nový release aplikace rozhodl umožnit zákazníkovi nakoupit zboží přes aplikaci v rámci svého nového konceptu Scan-Pay-Go. Proto bylo potřeba do aplikace dostat něco, díky čemu může zákazník na jedno kliknutí zakázku zaplatit. A přesně proto byla Google Pay platba optimální variantou.

Samotnou aplikaci vyvíjí společnost InloopX ve spolupráci s námi. My pro aplikaci vyvíjíme REST API, přes které s námi aplikace komunikuje a bere si od nás jak informace pro zobrazení (data o produktech, prodejnách, akcích, …) tak nám data posílá (o vytvořených registracích, objednávkách, rezervacích,...).

V oblasti implementace Google Pay do mobilní aplikace fungujeme prostřednictvím API pro mobilní aplikaci ve formě Server-side klient. Pro aplikaci zpracováváme vygenerování tokenu pro možnost vytvoření platby a následně ověření, zda uskutečněná platba proběhla v pořádku. A to vše díky SDK Braintree. Důvody, proč si tohle aplikace všechno neudělá na své straně jsou hlavně tři:

• Bezpečnostní: Aplikace si nemusí ve svém APK souboru uchovávat žádné klíče a hashe, které jsou potřebné pro komunikaci s SDK Braintree.
• Použitelnost na více mobilních platformách: aktuální endpointy mohou vývojáři kromě implementace pro Android aplikaci použít v budoucnu i pro jiné platformy a nemusí pro každý systém komunikaci vyvíjet odděleně, ale využijí naše univerzální endpointy v REST API. 
• Potřeba případné úpravy na straně komunikace s SDK: Pokud by došlo na straně SDK Braintree k potřebě nějaké úpravy, tak ji provedeme my a všem nainstalovaným verzím aplikace se změna promítne ihned. Pokud by změnu musela dělat aplikace, tak musí vydat nový release, který se určitě mezi uživateli neaktualizuje tak rychle, jako když změnu uděláme na webu.

Závěr

Jsme rádi, že jsme se mohli seznámit a mít možnost hned několika způsoby implementovat novou zajímavou platební metodu, která má velký potenciál k využití do budoucna. Naše práce tím ale nekončí. Na Electro Worldu chceme aktuální podobu překlopit do přímé integrace, tak abychom umožnili zákazníkovi provést platbu přímo na e-shopu. Na obou zmiňovaných e-shopech analyzujeme i možnost umístit platební tlačítko ještě blíže zákazníkovi pro snadnější nákup.

Užitečné odkazy:

• demo e-shop s Google Pay platbou od Googlu
• stránka pro vývojáře od Googlu
• integračni checklist od Googlu 
• formulář k žádosti o povolení platby 
• dokumentace od PayU pro přímou integraci 
• dokumentace od Braintree pro přímou integraci