Paazl voor ontwikkelaars

Checkout widget

Initializing the Paazl Checkout widget

Dit artikel geeft een gedetailleerde uitleg van de parameters die worden gebruikt om de Paazl checkout widget te initialiseren. Als je de Paazl checkout widget in jouw webshop hebt geïntegreerd, wordt de widget geïnitialiseerd met behulp van de parameters in de onderstaande tabel. Dit gebeurt telkens wanneer een klant van jouw webshop op jouw checkoutpagina terechtkomt. De Paazl checkout widget stap voor stap integreren legt uit hoe je de styling van de widget initialiseert. Gebruik de onderstaande parameters om de lay-out, weergave en het gedrag van de widget te configureren.


Initialisatieparameters


ParameterVerplicht/OptioneelTypeUitleg
mountElementIdOptioneelString

Het id-attribuut van het blokelement waarin je de Paazl checkout widget wilt weergeven.

De standaardwaarde is "paazl-checkout".

Voorbeeld: mountElementId: "checkout-widget"

apiKeyVerplichtString

Een string die een publieke API-key bevat die is gegenereerd in de Paazl-webapp. Zie De REST-API configureren voor een uitleg over hoe je deze key genereert.

Voorbeeld: apiKey: "12345"

tokenVerplichtString

Het toegangstoken (access token) dat wordt geretourneerd door het token-eindpunt. Als je een waarde toekent aan token, registreert Paazl tijdelijk de sessiegegevens in haar database—inclusief de sessiereferentie die je hebt opgegeven bij het aanmaken van het token—om de keuzes van webshopklanten bij te houden.

Voorbeeld: token: "23o4587y-wsakfgh-3249-srljhtgl"

loadPaazlBasedDataOptioneelBoolean

Indien true, retourneert Paazl verzendopties die zijn afgeleid van jouw leveringsmatrix (delivery matrix).

Opmerking

Deze parameter heeft alleen invloed op verzendopties voor thuisbezorging. Als zowel loadPaazlBasedData als loadCarrierBasedData op true staan, haalt de widget eerst de Paazl-gegevens op omdat dit sneller is. Vervolgens worden de gegevens van de vervoerder opgevraagd. Als deze afwijken van de Paazl-gegevens, overschrijft de widget de Paazl-gegevens met de gegevens van de vervoerder. Als beide op false staan, worden er geen gegevens opgehaald.

De standaardwaarde is true.

Voorbeeld: loadPaazlBasedData: false

loadCarrierBasedDataOptioneelBoolean

Indien true, en de desbetreffende vervoerder dergelijke gegevens aanlevert, retourneert Paazl verzendopties die rechtstreeks van de vervoerder zelf zijn verkregen.

Opmerking

Deze parameter heeft alleen invloed op verzendopties voor thuisbezorging. Als zowel loadPaazlBasedData als loadCarrierBasedData op true staan, haalt de widget eerst de Paazl-gegevens op omdat dit sneller is. Vervolgens worden de gegevens van de vervoerder opgevraagd. Als deze afwijken van de Paazl-gegevens, overschrijft de widget de Paazl-gegevens met de gegevens van de vervoerder. Als beide op false staan, worden er geen gegevens opgehaald.

De standaardwaarde is false.

Voorbeeld: loadCarrierBasedData: true[cite: 1]

availableTabsOptioneelArray

De widget toont verzendopties in een aantal tabbladen, afhankelijk van het leveringstype[cite: 1]. De volgende waarden zijn beschikbaar[cite: 1]:

  • "DELIVERY" (verzendopties voor thuisbezorging)[cite: 1]
  • "STORE" (verzendopties voor click & collect-winkels)[cite: 1]
  • "PICKUP" (verzendopties voor afhaallocaties)[cite: 1]
  • "PARCEL_LOCKER" (verzendopties voor pakketautomaten)[cite: 1]

De standaardwaarde is ["DELIVERY", "STORE", "PICKUP"][cite: 1].

Opmerking

De tabbladen worden van links naar rechts weergegeven in de volgorde waarin je ze specificeert[cite: 1]. Tabbladen worden alleen getoond als ze daadwerkelijk verzendopties bevatten[cite: 1].

Voorbeeld: availableTabs: ["PICKUP", "DELIVERY"][cite: 1]

defaultTabOptioneelString

De naam van het tabblad dat standaard is geselecteerd[cite: 1]. De waarde die je hier invoert, moet een van de waarden uit availableTabs zijn[cite: 1].

De standaardwaarde is "DELIVERY"[cite: 1].

Voorbeeld: defaultTab: "PICKUP"[cite: 1]

headerTabTypeOptioneelString

Bepaalt of de tabbladen worden weergegeven als tabbladen (headerTabType: "TAB") of als knoppen (headerTabType: "BUTTON")[cite: 1].

De standaardwaarde is "TAB"[cite: 1].

styleOptioneelString

Paazl heeft een aantal vooraf gedefinieerde widget-stijlen die je kunt gebruiken om aan te sluiten bij de huisstijl van jouw webshop[cite: 1]. De volgende waarden zijn beschikbaar: "DEFAULT", "MINIMAL", "GREEN", "LIGHT_GREEN", "BROWN", "BLUE", "RED"[cite: 1].

De standaardwaarde is "DEFAULT", welke de standaardstyling van Paazl gebruikt[cite: 1].

Voorbeeld: style: "BLUE"[cite: 1]

nominatedDateEnabledOptioneelBoolean

Indien true, worden de verzendopties gegroepeerd op datum weergegeven[cite: 1]. Indien false, wordt de lijst weergegeven in oplopende volgorde van prijs, wat betekent dat de goedkoopste optie bovenaan staat[cite: 1].

De standaardwaarde is false[cite: 1].

Voorbeeld: nominatedDateEnabled: true[cite: 1]

consigneeCountryCodeVerplichtString

De ISO 3166-2-code voor het land waarnaar de zending wordt verzonden[cite: 1].

Voorbeeld: consigneeCountryCode: "NL"[cite: 1]

consignorCountryCodeOptioneelString

De ISO 3166-2-code voor het land van waaruit de zending wordt verzonden[cite: 1].

Als dit veld leeg wordt gelaten, gebruikt Paazl de standaardinstelling in jouw Paazl-webapp-account onder Instellingen > Mijn adresboek > Afzenderadres > Land[cite: 1].

Voorbeeld: consignorCountryCode: "NL"[cite: 1]

consigneePostalCodeVerplichtString

De postcode van het adres waarnaar de zending wordt verzonden[cite: 1]. De code wordt gebruikt om een nauwkeurigere lijst van beschikbare verzendopties op te halen[cite: 1].

Voorbeeld: consigneePostalCode: "1020HD"[cite: 1]

consignorPostalCodeOptioneelString

De postcode van het adres van waaruit de zending wordt verzonden[cite: 1]. De code wordt gebruikt om leveringsdata op te vragen bij vervoerders als zij deze service aanbieden[cite: 1].

Als dit veld leeg wordt gelaten, gebruikt Paazl de standaardinstelling in jouw Paazl-webapp-account onder Instellingen > Mijn adresboek > Afzenderadres > Postcode[cite: 1].

Voorbeeld: consignorPostalCode: "1019HD"[cite: 1]

customerNumberOptioneelString

Een individuele code die DHL aan klanten verstrekt, zodat zij zich kunnen identificeren bij een DHL PackStation[cite: 1].

Voorbeeld: customerNumber: XYZ1234[cite: 1]

numberOfProcessingDaysOptioneelNumber

Het aantal dagen dat een magazijn nodig heeft om een bestelling klaar te maken voor verzending door een vervoerder (verwerkingstijd)[cite: 1].

De standaardwaarde is 0[cite: 1]. Als je echter een waarde voor het aantal verwerkingsdagen hebt opgegeven in de leveringsmatrix van jouw webshop, zal die waarde numberOfProcessingDays overschrijven[cite: 1].

Minimale waarde: 0[cite: 1]. Maximale waarde: 99[cite: 1].

Voorbeeld: numberOfProcessingDays: 5[cite: 1]

tagsOptioneelArray

Codes die worden gebruikt om de geretourneerde verzendopties te filteren voor weergave[cite: 1]. Mogelijke waarden zijn onder andere: "PARCEL_LOCKER", "SAME_DAY", "FLEX_DELIVERY", "CASH_ON_DELIVERY", "INSURANCE", "SIGNATURE_REQUIRED", "AT_NEIGHBORS", "NOT_AT_NEIGHBORS", "RETURN_ON_FAILURE", "DATE_PREFERENCE", "TWENTYFOUR_SEVEN", "NOTIFY_RECEIVER", "SUNDAY_SORTING", "AGE_CHECK", "ID_CHECK", "CLIMATE_COMPENSATION", "DANGEROUS_GOODS", "RETURN_TO_SENDER", "NO_PROOF_OF_DELIVERY", "PERISHABLE"[cite: 1].

Voorbeeld: tags: ["CASH_ON_DELIVERY", "INSURANCE"][cite: 1]

deliveryDateOptionsOptioneelObject

Bevat opties die van invloed zijn op de leveringsdatum[cite: 1].

Voorbeeld: deliveryDateOptions: {"startDate": "2018-08-27", "numberOfDays": 5}[cite: 1]

startDateOptioneelString

Het startpunt van een reeks mogelijke leveringsdata[cite: 1].

Opmerking

Bij het berekenen van de startdatum voor een leveringsdatumbereik telt Paazl het aantal bezorgdagen en verwerkingsdagen op dat je hebt geconfigureerd in de leveringsmatrix van jouw webshop[cite: 1].

Formaat: "JJJJ-MM-DD"[cite: 1]. De standaardwaarde is de datum van vandaag[cite: 1].

Voorbeeld: startDate: "2018-08-27"[cite: 1]

numberOfDaysOptioneelNumber

De tijdsduur in dagen na de startDate waarvoor verzendopties worden geleverd[cite: 1].

De standaardwaarde is 7[cite: 1].

Voorbeeld: numberOfDays: 3[cite: 1]

languageOptioneelString

De ISO 639-1 of ISO 639-2-code voor de weergavetaal van de widget[cite: 1].

Opmerking

Als er een taalcode wordt gebruikt die Paazl nog niet ondersteunt, zal de weergavetaal van de widget Engels zijn[cite: 1].

De talen die momenteel worden ondersteund zijn: Chinees ("zh"/"zho"/"chi"), Nederlands ("nl"/"nld"), Engels ("en"/"eng"), Frans ("fr"/"fra"), Duits ("de"/"deu"/"ger"), Italiaans ("it"/"ita"), Japans ("ja"/"jpn"), Pools ("pl"/"pol"), Portugees ("pt"/"por"), Spaans ("es"/"spa")[cite: 1].

De standaardwaarde is "eng"[cite: 1].

Voorbeeld: language: "deu"[cite: 1]

currencyOptioneelString

De ISO 4217-code voor de desbetreffende valuta[cite: 1]. Deze parameter bepaalt het valutasymbool dat naast de verzendtarieven wordt weergegeven[cite: 1].

De standaardcode is "EUR"[cite: 1].

Voorbeeld: currency: "USD"[cite: 1]

isPricingEnabledOptioneelBoolean

Indien false, worden de verzendtarieven van de verschillende verzendopties niet weergegeven in de widget[cite: 1].

De standaardwaarde is true[cite: 1].

isShowAsExtraCostOptioneelBoolean

Indien true, worden de verzendkosten als een afzonderlijk bedrag weergegeven met een "plus"-teken[cite: 1]. Indien false, wordt er geen "plus"-teken weergegeven[cite: 1].

De standaardwaarde is false[cite: 1].

deliveryRangeFormatOptioneelString

Geeft aan of je datumbereiken op de regels van de verzendopties wilt weergeven als een aantal dagen of als een datumbereik[cite: 1]. Accepteert een van de volgende twee waarden: "DATE" of "NUMBER"[cite: 1].

Opmerking

Als je kiest voor "DATE", zijn de parameters voor de datumnotatie van toepassing[cite: 1].

De standaardwaarde is "DATE"[cite: 1].

Voorbeeld: deliveryRangeFormat: "NUMBER"[cite: 1]

deliveryOptionDateFormatOptioneelString

De notatie voor datums die worden weergegeven in de regels voor verzendopties van het tabblad "Delivery" (Bezorging) van de widget[cite: 1]. Maakt gebruik van de stringnotatie van de Javascript fecha-bibliotheek[cite: 1].

De standaardwaarde is "ddd DD MMM"[cite: 1].

Voorbeeld: deliveryOptionDateFormat: "DD-MM-YY"[cite: 1]

deliveryEstimateDateFormatOptioneelString

De notatie voor datums die worden weergegeven in de footer van het tabblad "Delivery" (Bezorging) van de widget[cite: 1]. Maakt gebruik van de stringnotatie van de Javascript fecha-bibliotheek[cite: 1].

De standaardwaarde is "dddd DD MMMM"[cite: 1].

Voorbeeld: deliveryEstimateDateFormat: "dddd, MMMM DD, YYYY"[cite: 1]

pickupOptionDateFormatOptioneelString

De notatie voor datums die worden weergegeven in de regels voor verzendopties van het tabblad "Pickup" (Afhalen) van de widget[cite: 1]. Maakt gebruik van de stringnotatie van de Javascript fecha-bibliotheek[cite: 1].

De standaardwaarde is "ddd DD MMM"[cite: 1].

Voorbeeld: pickupOptionDateFormat: "DD-MM-YY"[cite: 1]

pickupEstimateDateFormatOptioneelString

De notatie voor datums die worden weergegeven in de footer van het tabblad "Pickup" (Afhalen) van de widget[cite: 1]. Maakt gebruik van de stringnotatie van de Javascript fecha-bibliotheek[cite: 1].

De standaardwaarde is "dddd DD MMMM"[cite: 1].

Voorbeeld: pickupEstimateDateFormat: "dddd, MMMM DD, YYYY"[cite: 1]

separatorsFormatOptioneelString

Specificeert of de widget getallen moet weergeven met een punt als decimaalteken en een komma als duizendtal-scheidingsteken (zoals gebruikt in de VS en het VK) of vice versa[cite: 1]. Accepteert een van de volgende twee waarden: "DECIMAL_COMMA" of "DECIMAL_POINT"[cite: 1].

De standaardwaarde is "DECIMAL_COMMA"[cite: 1].

Voorbeeld: separatorsFormat: "DECIMAL_COMMA"[cite: 1]

sortingModelOptioneelObject

Bevat elementen die Paazl vertellen hoe de geretourneerde verzendopties en afhaallocaties gesorteerd moeten worden[cite: 1].

Voorbeeld: sortingModel: {orderBy: "PRICE", sortOrder: "DESC"}[cite: 1]

orderByOptioneelString

Geeft aan hoe de weergegeven verzendopties gesorteerd moeten worden[cite: 1]. Mogelijke waarden: "PRICE", "DATE", "CARRIER", "DISTANCE"[cite: 1].

De standaardwaarde voor thuisbezorging is "PRICE"[cite: 1]. De standaardwaarde voor afhalen (pickup) en winkels (store) is "DISTANCE"[cite: 1].

distributorVoorwaardelijkString

Geeft aan welke verzendopties van een vervoerder bovenaan de lijst met verzendopties moeten verschijnen[cite: 1]. Je vindt de beschikbare vervoerderscodes in jouw webapp-account onder Instellingen > Account > Overzicht van verzendopties[cite: 1].

Opmerking

Als orderBy de waarde "CARRIER" heeft, moet je distributor opnemen in het sortingModel-object, anders kun je dit weglaten[cite: 1].

Voorbeeld: distributor: "SELEKTVRACHT"[cite: 1]

sortOrderOptioneelString

Geeft de volgorde aan waarin verzendopties gesorteerd moeten worden[cite: 1]. Mogelijke waarden: "ASC" (oplopend) of "DESC" (aflopend)[cite: 1].

Opmerking

Als orderBy de waarde "CARRIER" heeft, wordt dit element genegeerd[cite: 1].

De standaardwaarde is "ASC"[cite: 1].

Voorbeeld: sortOrder: "DESC"[cite: 1]

shipmentParametersOptioneelObject

Bevat details van de bestelling van een klant[cite: 1].

Voorbeeld: shipmentParameters: {totalWeight: 3.14, startMatrix: "AA", goods: [{quantity: 2, weight: 3}, {width: 1, height: 5}]}[cite: 1]

totalWeightOptioneelNumber

Het totale gewicht in kilogram (kg) van een zending, inclusief verpakking[cite: 1].

Opmerking

Als je totalWeight een waarde geeft, worden de volumes van de afzonderlijke producten in de zending genegeerd[cite: 1].

Voorbeeld: totalWeight: 10[cite: 1]

totalVolumeOptioneelNumber

Het totale volume in kubieke meter (m³) van de desbetreffende zending, inclusief verpakking[cite: 1].

Opmerking

Als je totalVolume een waarde geeft, worden de volumes van de afzonderlijke goederen in de zending genegeerd[cite: 1].

Voorbeeld: totalVolume: 1[cite: 1]

totalPriceOptioneelNumber

De totale prijs van een zending[cite: 1]. Dit is een scalaire waarde[cite: 1]. De munteenheid wordt toegekend door de checkoutpagina van jouw webshop[cite: 1].

Opmerking

Als je totalPrice een waarde geeft, worden de prijzen van de afzonderlijke producten in de zending genegeerd[cite: 1].

Voorbeeld: totalPrice: 100[cite: 1]

numberOfGoodsOptioneelNumber

Het totale aantal pakketten of afzonderlijke goederen in een zending[cite: 1].

Opmerking

Als je numberOfGoods een waarde geeft, wordt het attribuut quantity van elk object in de goods-array genegeerd[cite: 1].

Voorbeeld: numberOfGoods: 8[cite: 1]

startMatrixOptioneelString

Een code van één of twee letters die de kolom van de leveringsmatrix identificeert waarmee moet worden gestart bij het bepalen van de juiste verzendoptie en het juiste tarief[cite: 1]. Zie Leveringsmatrices configureren voor een uitleg over hoe leveringsmatrices werken[cite: 1].

goodsOptioneelArray

Een array van variabelen die wordt gebruikt om de toepasselijke leveringsmatrix te bepalen[cite: 1]. Zie Leveringsmatrices configureren voor een uitleg over hoe leveringsmatrices werken[cite: 1].

Voorbeeld: goods: [{quantity: 2, weight: 3}, {width: 1, height: 5}][cite: 1]

quantityOptioneelNumberHet aantal artikelen van een specifiek producttype in een zending[cite: 1]. Voorbeeld: quantity: 7[cite: 1]
weightOptioneelNumberHet gewicht in kilogram (kg) van een product[cite: 1]. Voorbeeld: weight: 10.5[cite: 1]
lengthOptioneelInteger

De lengte in hele centimeters (cm) van een product[cite: 1]. De waarde moet een geheel getal (integer) zijn; getallen met decimalen (floating-point) worden afgebroken[cite: 1].

Voorbeeld: length: 170[cite: 1]

widthOptioneelInteger

De breedte in hele centimeters (cm) van een product[cite: 1]. De waarde moet een geheel getal (integer) zijn; getallen met decimalen (floating-point) worden afgebroken[cite: 1].

Voorbeeld: width: 30[cite: 1]

heightOptioneelInteger

De hoogte in hele centimeters (cm) van een product[cite: 1]. De waarde moet een geheel getal (integer) zijn; getallen met decimalen (floating-point) worden afgebroken[cite: 1].

Voorbeeld: height: 10[cite: 1]

volumeOptioneelNumberHet volume van een product in kubieke meter (m³), inclusief verpakking[cite: 1]. Voorbeeld: volume: 0.10[cite: 1]
priceOptioneelNumberDe prijs van een enkel artikel in een zending[cite: 1]. Dit is een scalaire waarde[cite: 1]. De munteenheid wordt toegekend door de checkoutpagina van jouw webshop[cite: 1].
startMatrixOptioneelStringEen code van één of twee letters die de kolom van de leveringsmatrix identificeert waarmee moet worden gestart bij het bepalen van de juiste verzendoptie en het juiste tarief[cite: 1]. Zie Leveringsmatrices configureren voor een uitleg over hoe leveringsmatrices werken[cite: 1].
shippingOptionsLimitOptioneelNumber

Beperkt het aantal verzendopties dat wordt weergegeven op het tabblad "Delivery" (Bezorging) van de widget[cite: 1].

De standaardwaarde is 10[cite: 1].

Voorbeeld: shippingOptionsLimit: 3[cite: 1]

initialPickupLocationsOptioneelNumber

Beperkt het aantal afhaallocaties dat wordt weergegeven op het tabblad "Pickup" (Afhalen) van de widget, en het aantal winkel-locaties op het tabblad "Store" (Winkel)[cite: 1].

De standaardwaarde is 3[cite: 1].

Voorbeeld: initialPickupLocations: 10[cite: 1]

pickupLocationsPageLimitOptioneelNumber

Specificeert het initiële aantal afhaallocaties dat wordt weergegeven op de kaart met afhaallocaties van de widget, en het initiële aantal winkels dat wordt weergegeven op de winkelkaart van de widget[cite: 1]. Het bepaalt ook het aantal afhaal- of winkellocaties dat wordt toegevoegd telkens wanneer je op "Meer" klikt op respectievelijk de tabbladen "Pickup" of "Store"[cite: 1].

De standaardwaarde is 10[cite: 1].

Voorbeeld: pickupLocationsPageLimit: 5[cite: 1]

pickupLocationsLimitOptioneelNumber

Beperkt het totale aantal afhaallocaties dat wordt weergegeven op de "Pickup"-kaart van de widget, en het totale aantal winkellocaties op de "Store"-kaart van de widget[cite: 1].

De standaardwaarde is 20[cite: 1].

Voorbeeld: pickupLocationsLimit: 10[cite: 1]


Datumnotatie van de widget aanpassen


De datumnotatie-strings die je gebruikt bij het initialiseren van de widget voldoen aan de ISO-8601-standaard[cite: 1]. Hier zijn een paar voorbeelden[cite: 1]:


Voorbeeld datumFormat string
Woensdag 9 september 2018"dddd, MMMM DD, YYYY"
Woe 9 sep 2018"ddd, D MMM YYYY"
9. September 2018"D. MMMM YYYY"
09-09-18"DD-MM-YY"

Alle beschikbare tokens voor datumnotatie[cite: 1]:


CategorieTokenOutput
MaandM1 2 ... 11 12
MM01 02 ... 11 12
MMMjan feb ... nov dec
MMMMjanuari februari ... november december
Dag van de maandD1 2 ... 30 31
Do1e 2e ... 30e 31e
DD01 02 ... 30 31
Dag van de weekd0 1 ... 5 6
dddzo ma ... vr za
ddddzondag maandag ... vrijdag zaterdag
JaarYY70 71 ... 29 30
YYYY1970 1971 ... 2029 2030
TijdzoneZZ-0700 -0600 ... +0600 +0700

Voor andere talen dan het Engels raden we je aan datums te formatteren zoals hieronder aangegeven, om problemen met naamvallen (naamvalsuitgangen) of hoofdlettergebruik in de labels van de widget te voorkomen[cite: 1].


TaalAanbevolen notatie
Chinees"YYYY-MM-DD"
Nederlands"DD-MM-YYYY"
Engels"DD/MM/YYYY" (VK) en "MM/DD/YYYY" (VS)
Frans"DD/MM/YYYY"
Duits"DD.MM.YYYY"
Italiaans"DD/MM/YYYY"
Pools"DD.MM.YYYY"
Portugees"DD/MM/YYYY"
Spaans"DD-MM-YYYY"
Zweeds"YYYY/MM/DD"

Was dit artikel nuttig?

Dat is fantastisch!

Hartelijk dank voor uw beoordeling

Sorry dat we u niet konden helpen

Hartelijk dank voor uw beoordeling

Laat ons weten hoe we dit artikel kunnen verbeteren!

Selecteer tenminste een van de redenen
CAPTCHA-verificatie is vereist.

Feedback verzonden

We stellen uw moeite op prijs en zullen proberen het artikel te verbeteren