Showcase / Bestellen en service

Een eigen checkout op Hyvä

De standaardcheckout van Magento is een winkel in de winkel, met eigen opmaak en eigen techniek. Een extra veld of een andere volgorde is daardoor een klus, en na elke update moet je nakijken of alles nog werkt. In onze demowinkel is afrekenen drie stappen in het thema zelf, gemaakt met dezelfde onderdelen als de rest van de winkel.

Stap 1 van de checkout in de demowinkel: e-mailadres, naam, adres, postcode, plaats, land en telefoonnummer, met rechts het overzicht van de bestelling — Stap 1: contactgegevens en adres, met het overzicht van de bestelling ernaast

Stap 2 van de checkout: twee verzendopties, Flat Rate en PostNL standaard bezorging, allebei 4,95 euro — Stap 2: de verzendopties die bij het ingevulde adres horen, met de prijs erbij

Stap 3 van de checkout: de betaalmethode, het vinkje voor hetzelfde factuuradres en de totalen met verzendkosten en btw — Stap 3: betaalmethode, factuuradres en de totalen met de btw-regel

Magento 2 · Hyvä · Checkout · GraphQL

Wat het doet

Drie stappen op één pagina

Adres, verzending en betaling volgen elkaar op. De balk bovenaan laat zien waar je bent, en een stap die je al hebt gehad, klik je terug om iets te wijzigen.

Elke stap meteen vastgelegd

Wat de klant invult, gaat per stap direct naar de winkel: adres, verzendmethode, factuuradres, betaalmethode en de bestelling zelf. Dat loopt over dezelfde koppeling die Magento ook voor apps en andere systemen gebruikt, dus er zit geen eigen tussenlaag die stuk kan gaan.

Afrekenen zonder account

Een klant hoeft geen account aan te maken, ook niet om de bevestiging te zien. Wie wel ingelogd is, ziet zijn e-mailadres alvast ingevuld staan.

Zakelijk in dezelfde stap

Een vinkje bij Ik bestel zakelijk klapt de velden voor bedrijfsnaam, btw-nummer, inkoopordernummer en een notitie open. Ze komen mee op de bestelling.

Budget en goedkeuring ingebouwd

Voor een ingelogde inkoper haalt de checkout het resterende budget op en toont dat boven de stappen. Ligt de bestelling erboven, dan wordt de knop een aanvraag ter goedkeuring.

Voor wie

Shops die aan hun afrekenproces willen kunnen sleutelen. Een extra veld, een andere volgorde of een eigen regel over wie wat te zien krijgt, is hier een aanpassing in het thema. In de standaardcheckout kom je daar nauwelijks bij.

Het helpt ook als de shop zowel consumenten als bedrijven bedient. Beide groepen lopen door dezelfde drie stappen; wat verschilt, zijn de velden en de betaalmethodes die zichtbaar worden.

Zelf bekijken

Leg in de demowinkel een product in de winkelwagen en ga naar afrekenen. Je komt zonder in te loggen tot en met de betaalstap; vul bij het adres gerust verzonnen gegevens in.

In de demowinkel staat één offline betaalmethode aan, zodat de laatste stap werkt zonder betaaldienst erachter.

Open de winkelwagen in de demowinkel

Voor developers

De checkout is één Alpine-component in het thema. De server geeft alleen de gemaskeerde winkelwagen-id mee, het standaardland en het e-mailadres van een ingelogde klant.
Alle stappen lopen over de GraphQL-API van Magento, op de gemaskeerde winkelwagen-id. Stap 1 roept setGuestEmailOnCart en setShippingAddressesOnCart aan, stap 2 setShippingMethodsOnCart, die meteen de beschikbare betaalmethodes teruggeeft, stap 3 setBillingAddressOnCart, setPaymentMethodOnCart en placeOrder.
Validatie zit per veld in de component en wordt pas getoond als je een veld verlaat. De knop naar de volgende stap blijft uit zolang er iets ontbreekt.
De verzendmethodes komen uit de gewone verzendmodules van Magento. Wat daar aanstaat, verschijnt in stap twee zonder extra code in de checkout.
De betaalmethodes komen uit de winkel zelf. In de demowinkel staat een offline methode aan; Mollie is voorbereid met iDEAL en creditcard en wacht op een sleutel.
Het budgetblok en de goedkeuringsknop hangen aan de B2B-modules en vragen de stand op bij de server. Voor een gast of consument komt dat blok niet in beeld.

De checkout draait op Hyvä, de frontend waar we de meeste shops naartoe brengen.

De verzendstap laat ook de opties van PostNL zien. De totalen volgen de regels uit btw en prijzen, en voor bedrijven komt daar betalen op rekening bij.

Terug naar alle onderdelen in de showcase.

Kun je in jouw checkout nog iets wijzigen?

In een kennismaking van een kwartier kijken we naar je afrekenproces.

Plan een kennismaking

Jasper van Tellingen, e-commerce architect