Internationale checkout in Hyvä: 4 layouts die we bouwden

Een checkout die in het ene land goed werkt, kan in het volgende verkeerd aanvoelen. Adresformaten verschillen, klanten verwachten andere betaalmethoden, en sommige markten hebben velden nodig die andere nooit tonen.

Toen we onze Hyvä-demowebshop bouwden, met Engelse en Duitse store views, wilden we een checkout die vanuit één codebase meerdere landen kon bedienen. Het werden vier layoutvarianten. Dit artikel legt uit wat we bouwden, waarom, en wat we onderweg hebben geleerd. Ook leggen we uit hoe dit aansluit op de checkoutopties die we klanten aanbieden.

De checkoutkeuzes op Hyvä

Hyvä vervangt de Luma-frontend, en de standaard Luma-checkout is gebouwd op dezelfde KnockoutJS- en RequireJS-stack die Hyvä weghaalt. Een Hyvä-webshop heeft daarom een checkoutstrategie nodig.

• Hyvä Checkout is de officiële checkout van het Hyvä-team, gebouwd op Magewire. Hij rendert op de server en werkt delen van de pagina bij zonder zwaar JavaScript-framework.
• Een checkout op basis van Luma, zoals een beproefde one-page-checkoutextensie, kan naast een Hyvä-thema draaien. Dit is een veilige keuze als een betaalmodule nog niet Hyvä-klaar is.
• Een maatwerklayout bovenop een checkout op basis van Hyvä, en dat zijn onze eigen templates.

We hebben deze opties uitgebreid vergeleken in is Hyvä Checkout het waard. In dit artikel richten we ons op de layout en de internationale details.

De vier layouts die we bouwden

In de demowebshop is de internationale checkout één formulier met vier layouts. De blokken zijn in elke layout hetzelfde. Alleen het CSS-grid verandert, samen met welke blokken elke stap toont.

Doordat we meerdere layouts in één webshop hadden, konden we dezelfde producten, dezelfde betaalmethoden en dezelfde store views in verschillende flows testen. Het liet ons ook zien dat de layout zelden het moeilijkste deel is.

Adressen verschillen meer dan je denkt

Magento weet al veel over landen, en een goede internationale checkout gebruikt die kennis in plaats van ertegen te vechten.

• Postcodes. Sommige landen gebruiken helemaal geen postcodes. In Magento kun je de postcode per land als optioneel instellen via Stores > Configuration > General > Country Options.
• Regio's en staten. Sommige landen vereisen een staat of provincie, de meeste Europese landen niet. Magento regelt dit per land, en de checkout moet die instelling volgen.
• Adresregels. In sommige landen staat het huisnummer vóór de straatnaam, in andere erna. Duidelijke labels helpen meer dan slimme parsing.
• Bedrijf en btw-nummer. Zakelijke kopers in de EU verwachten vaak dat ze een btw-nummer kunnen invullen. Als je dat veld alleen toont wanneer er een bedrijfsnaam is ingevuld, blijft het formulier kort voor alle anderen.

Ook de volgorde van de velden telt. Zet je het land bovenaan, dan kan de rest van het formulier zich aanpassen voordat de klant begint te typen.

Betalen en verzenden per markt

Klanten vertrouwen de betaalmethoden die ze al gebruiken. Creditcard en PayPal zijn in heel Europa gangbaar, maar veel markten hebben sterke lokale methoden, en sommige klanten haken af als die van hen ontbreekt.

In Magento kun je betaalmethoden beperken tot specifieke landen, en onze checkouts respecteren die instellingen. We testen elke betaalmethode end-to-end in elke markt waar die actief is, inclusief de terugkeer van de betaalprovider naar de bedankpagina.

Verzending vraagt dezelfde zorg. Tarieven, levertijden en namen van vervoerders moeten passen bij het gekozen land, en de totalen moeten direct bijwerken zodra het adres verandert.

Heeft een betaalextensie geen Hyvä-ondersteuning, dan bepaalt de extensie-audit de route. Je kunt hem porten, een alternatief zoeken of voorlopig een Luma-checkout gebruiken. Ons artikel over extensies zonder Hyvä-compatibiliteitsmodule behandelt die opties.

Vertalingen en store views

Onze demowebshop draait Engelse en Duitse store views met een taalkeuzemenu met vlaggen. Vertalingen per store view waren een van de valkuilen waar we tegenaan liepen.

Checkoutteksten komen uit verschillende bronnen tegelijk: het thema, de checkoutmodule, betaalmodules, e-mailtemplates en de bedankpagina. Een tekst die op de ene plek vertaald is, kan via een andere bron nog steeds in het Engels verschijnen.

Onze regel: plaats vóór de livegang in elke store view een volledige testbestelling. We lezen elk label, elke foutmelding en elke e-mail in die taal, niet alleen de hoofdstappen.

Security-headers in de checkout

Magento gebruikt een Content Security Policy om te bepalen welke scripts en frames een pagina mag laden. In de checkout is dat het belangrijkst, omdat betaalproviders hun eigen scripts en iframes laden.

CSP-regels in Hyvä Checkout waren een andere valkuil op ons lijstje. Een betaalwidget die op een testpagina werkt, kan in de checkout ongemerkt falen als het domein niet is toegestaan.

We voegen de benodigde domeinen toe in het bestand csp_whitelist.xml van een module en testen elke betaalmethode met de browserconsole open. Een geblokkeerd script zie je daar al lang voordat een klant het meldt.

De bedankpagina hoort bij de checkout

Elke checkouttemplate die we aanbieden, heeft een eigen bedankpagina. De bestelling is geplaatst, maar de klant let nog steeds op.

Een goede bedankpagina bevestigt de bestelling duidelijk, legt uit wat er nu gebeurt en biedt aan om van een gastbestelling een account te maken. Hier vuurt ook de tracking van aankopen, dus testen we deze pagina net zo zorgvuldig als de betaalstap.

Testbestellingen uit de weg houden

Vier layouts in twee talen testen levert veel bestellingen op. Op de demowebshop ruimt een nachtelijke taak testbestellingen automatisch op, zodat rapporten en voorraad realistisch blijven.

Op een live webshop verwijder je geen bestellingen, maar het idee blijft hetzelfde. Gebruik een stagingomgeving om de checkout te testen en zet uitgaande e-mail daar uit, zodat testklanten nooit iets ontvangen.

Veelgestelde vragen

Welke checkout-layout converteert het best?

Daar is geen universeel antwoord op, want het hangt af van de orderwaarde, de doelgroep en de markt. We beginnen met de layout die past bij de webshop en de producten, en vergelijken varianten na de livegang met echte data.

Kan één webshop per land een andere checkout-layout gebruiken?

De checkout volgt de store view, dus verschillende store views kunnen verschillende instellingen en content gebruiken. Of een aparte layout per land het extra testwerk waard is, is een zakelijke beslissing die we met elke klant bespreken.

Heb je Hyvä Checkout nodig om een Hyvä-thema te gebruiken?

Nee. Een Hyvä-thema werkt met Hyvä Checkout, met een Luma-checkout of met een maatwerkcheckout. De juiste keuze hangt vooral af van je betaal- en verzendextensies.

Plan je een Hyvä-checkout voor meerdere markten? Bekijk al onze Hyvä-checkoutopties, of neem contact met ons op om je landen en betaalmethoden te bespreken.