Let op
Als je hulp nodig hebt bij het configureren van Paazl Perfect, neem dan gerust contact op met de Paazl Customer Support. Vanwege snel veranderende technologieën is de Paazl-technologie "Paazl Perfect" "End of Life". Dit betekent dat we bestaande klanten die Paazl Perfect gebruiken blijven ondersteunen, maar dat deze oplossing geen updates of verbeteringen meer zal ontvangen. In plaats daarvan raden we je aan om te kijken naar onze Paazl checkout-widget.
Dit artikel legt uit hoe je Paazl Perfect integreert in de checkout van jouw webshop.
Om een Paazl Perfect-sessie aan te maken in de checkout van jouw webshop, moet je drie dingen doen:
- Een Paazl Perfect-sessie aanvragen
- De Paazl Perfect-sessie vullen met checkout-gegevens
- De geselecteerde leveringsoptie terugsturen naar jouw checkout
De details voor het uitvoeren van deze stappen worden hieronder uitgelegd.
1. Een Paazl Perfect-sessie aanvragen
- Maak een nieuwe openstaande bestelling (pending order) aan met de orderRequest webservice call
- Start een Paazl Perfect-sessie met de checkoutRequest webservice call. Deze call bevat een verwijzing naar de openstaande bestelling
- Laad het URL-script dat door de checkoutResponse webservice-respons wordt geretourneerd in jouw checkout
<script type="text/javascript" src="https://ost.paazl.com/checkout/a34cb32d-d75c-4aab-8166-f4dd272c106a/loader.js"></script>
2. De Paazl Perfect-sessie vullen met checkout-gegevens
Gebruik de JavaScript-functie PaazlCheckoutModuleLoader.show() om checkout-gegevens naar Paazl te verzenden.
De functie PaazlCheckoutModuleLoader.show() moet toegang kunnen krijgen tot de waarden van de velden in Tabel 1. Er zijn twee manieren om de functie toegang te geven tot deze waarden:
- als veld-waardeparen in een JSON-object, bijvoorbeeld:
PaazlCheckoutModuleLoader.show({consigneeCountryCode: "NL", consigneePostalCode: "1019HD"}); - als naam/data-pcm-input attribuutparen in jouw HTML-code, bijvoorbeeld:
<select name="country" data-pcm-input="consigneeCountryCode">...</select>
of<input type="text" name="postal_code" data-pcm-input="consigneePostalCode"/>
Tabel 1: Paazl Perfect checkout-velden
| Veld | Type | Verplicht | Beschrijving |
|---|---|---|---|
| locale | String(2) | N | De ISO 639-1-code van de taal waarin je Paazl Perfect wilt weergeven (standaard: NL) |
| consigneeCountryCode | String(2) | N | De ISO 3166-1-landcode van het afleveradres |
| consigneePostalCode | String(255) | N | De postcode van het afleveradres Belangrijk! Hoewel dit veld niet verplicht is voor Paazl, raden we je ten zeerste aan om het verplicht te maken op jouw checkout-pagina. |
| deliveryType | Enum | N | Bepaalt het tabblad waarmee Paazl Perfect start. Kan een van de volgende waarden bevatten:
|
| servicePointBasePostalCode | String(255) | N | De postcode die wordt gebruikt om naar nabijgelegen afhaalpunten te zoeken. |
| preferredDeliveryDate | Date | N | De gewenste leverdatum van de klant |
| notificationEmailAddress | String(255) | N | Het e-mailadres voor meldingen van de vervoerder |
| notificationPhoneNumber | String(255) | N | Het mobiele telefoonnummer voor sms-notificaties van de vervoerder Let op! Om er zeker van te zijn dat elke vervoerder het mobiele nummerformaat accepteert, dien je alle spaties en symbolen die door de klant zijn ingevoerd te verwijderen. |
| servicepointAccountNumber | String(255) | N | Het accountnummer van de klant voor het openen van kluisjes (bijv. bij DHL Packstations) |
3. De geselecteerde leveringsoptie terugsturen naar jouw checkout
Nadat een klant een leveringsoptie heeft gekozen in Paazl Perfect, zijn er twee manieren waarop je deze informatie kunt opslaan en weergeven op de checkout-pagina van jouw webshop.
- Gebruik een JavaScript-callbackfunctie
- Gebruik Paazl's checkoutStatusRequest API-call
JavaScript-callbackfunctie
Let op
Hoewel deze optie de beste prestaties levert, zou een klant theoretisch zijn/haar browser kunnen gebruiken om te knoeien met de gegevens die naar jouw checkout worden teruggestuurd.
Wanneer een klant zijn/haar keuze bevestigt, voert jouw webshop het volgende uit:
PaazlCheckoutModuleLoader.show(myCallback);
waarbij myCallback een functie is die je zelf definieert en die je elke gewenste naam kunt geven.
Paazl geeft aan jouw callbackfunctie een HashMap door die de veld-waardeparen bevat uit Tabel 1 hierboven, evenals de paren uit Tabel 2 hieronder. Jouw functie leest vervolgens de waarden in de HashMap en manipuleert de gegevens op jouw checkout-pagina om de keuzes van jouw klant te verwerken.
Voorbeeld van een callbackfunctie
function myCallback(params) {
alert("User selected " + params.option + " delivery on " + params.preferredDeliveryDate);
}
PaazlCheckoutModuleLoader.show(myCallback, { deliveryType: "home" });Tabel 2: Aanvullende Paazl Perfect checkout-velden
| Veld | Type | Verplicht | Beschrijving |
|---|---|---|---|
| option | String(255) | N | Code of ID van de geselecteerde verzendoptie |
| deliveryFeatures | Enum | N | Kenmerken van de geselecteerde verzendoptie. Kan een of meer van de volgende waarden bevatten:
|
| rate | Decimal | N | Tarief van de geselecteerde verzendoptie |
| servicePointCode | String(255) | N | Code van de geselecteerde afhaallocatie |
| servicePointName | String(255) | N | Naam van de geselecteerde afhaallocatie |
| servicePointAddress | String(255) | N | Adres van de geselecteerde afhaallocatie |
| notificationType | Enum | N | Geselecteerde meldingsmethode. Kan een van beide of beide volgende waarden bevatten:
|
checkoutStatusRequest API-call
Je kunt ook de Paazl checkoutStatusRequest API-call gebruiken om de geselecteerde leveringsoptie op te halen en op te slaan wanneer je deze op jouw checkout-pagina weergeeft. Dit is de veiligste optie, maar het kan de prestaties iets vertragen omdat het een extra API-call en -respons vereist binnen jouw checkout.
Was dit artikel nuttig?
Dat is fantastisch!
Hartelijk dank voor uw beoordeling
Sorry dat we u niet konden helpen
Hartelijk dank voor uw beoordeling
Feedback verzonden
We stellen uw moeite op prijs en zullen proberen het artikel te verbeteren