Paazl-checkoutwidget stap voor stap integreren

Dit artikel biedt gedetailleerde uitleg over de verschillende stappen die komen kijken bij het implementeren van de Paazl checkout-widget. Over de Paazl checkout-widget geeft een overzicht van deze stappen.

Omgevingsvariabelen (Environment variables)

Bij het integreren van de Paazl Checkout-widget wil je mogelijk specifieke omgevingsvariabelen instellen tijdens runtime voor lokale ontwikkeldoeleinden.

Aangepaste API-URL

Dit is de URL van de REST API-server van Paazl.

npm run dev --env.apiUrl=http://localhost:8082

Aangepaste resource-URL

Dit is de URL van de widget-server van Paazl. De widget gebruikt deze URL om CSS- en afbeeldingbestanden op te halen.

npm run dev --env.resourceUrl=http://localhost:3000

Google Maps API-key

De Paazl Checkout-widget heeft een Google Maps API-key nodig voor de kaarten van afhaallocaties en winkel定位es. Er is een aparte API-key voor elke omgeving, dus je moet de sleutel opgeven die hoort bij jouw ontwikkelomgeving.

npm run dev --env.googleMapApiKey="AIzaSyCVWGcx8iXWEgjyV_nDMuIKYVsq11ZPXIA"

Stap 1. Paazl autorisatieverzoek implementeren

Een voorbeeld van de Curl-code voor het verzoek is:

curl -X POST "https://api-acc.paazl.com/v1/checkout/token" -H "accept: application/json;charset=UTF-8" -H "Authorization: Bearer 8ZNFYdd8gFUrgiyoIEeXpTsPB:cFBgHQ8h3CxBchF31Wa3Ba2pkmhbph2BG4tTYn9PZpKFv1z4tC" -H "Content-Type: application/json;charset=UTF-8" -d "{ \"reference\": \"200000150\"}"

Voorbeeld van een JSON response is:

{
    "token": "fb5371ba-76bf-416e-b3fe-5da9a9721063"
}

Stap 2. HTML-code toevoegen om de widget te laden

Voeg een van de volgende codefragmenten toe aan de <head>-sectie van je checkout-pagina.

Acceptatie-omgeving (Staging)

<script type="text/javascript" src="https://widget-acc.paazl.com/v1/checkout.js"></script>

Productie-omgeving

<script type="text/javascript" src="https://widget.paazl.com/v1/checkout.js"></script>

Stap 3. HTML-code toevoegen om de widget te initialiseren

Voeg het onderstaande initialisatie-codefragment toe aan de <head>-sectie van je checkout-pagina. Als alternatief kun je het script ook in een apart JavaScript-bestand (.js) opslaan.

Zie De Paazl checkout-widget initialiseren voor een uitleg van de verschillende parameters die in het codefragment worden gebruikt.

Zodra de widget is geïnitialiseerd, vraagt Paazl direct verzendopties op basis van de waarde die je aan consigneeCountryCode toekent. Het land kan worden bepaald aan de hand van het account van je klant of via het IP-adres van zijn/her browser.

De parameters waarvoor je verplicht een waarde moet opgeven zijn: apiKey, token, consigneeCountryCode en consigneePostalCode.

Alle andere parameters zijn optioneel. In het onderstaande codefragment hebben de optionele parameters voorbeeldwaarden gekregen.

<script type="text/javascript">
   PaazlCheckout.init({
      mountElementId: "paazl-checkout",

      apiKey: "12345",
      token: "0a9g8ddhkj883kgfs890sh7s7gg",
      loadPaazlBasedData: true,
      loadCarrierBasedData: false,
      availableTabs: ["DELIVERY", "PICKUP", "STORE"],
      defaultTab: "DELIVERY",
      headerTabType: ["BUTTON","TAB"],
      style: "GREEN",
      nominatedDateEnabled: false,

      consigneeCountryCode: "NL",
      consignorCountryCode: "NL",
      consigneePostalCode: "1019HD",
      consignorPostalCode: "1020HD",

      customerNumber: 123456789,

      numberOfProcessingDays: 5,
      tags: ["CASH_ON_DELIVERY"],

      deliveryDateOptions: {
         startDate: "2018-10-25",
         numberOfDays: 5
      },

      language: "eng",
      currency: "EUR",
      isPricingEnabled: true,
      isShowAsExtraCost: true,
      deliveryRangeFormat: "DATE",
      deliveryOptionDateFormat: "ddd DD MMM",
      deliveryEstimateDateFormat: "dddd DD MMMM",
      pickupOptionDateFormat: "ddd DD MMM",
      pickupEstimateDateFormat: "dddd DD MMMM",

      sortingModel: {
         orderBy: "PRICE",
         sortOrder: "ASC",
         distributor: "TNT",
      },

      shipmentParameters: {
         totalWeight: 3.14,
         totalVolume: 100,
         totalPrice: 14.77,
         numberOfGoods: 2,
         startMatrix: "AA",
         goods: [
            {
               quantity: 2,
               weight: 3.1,
               length: 12,
               width: 10,
               height: 88,
               volume: 1.33,
               price: 213.14
            },
            {
               quantity: 1,
               weight: 3.1,
               length: 12,
               width: 10,
               price: 113.14
            }
         ]
      },

      shippingOptionsLimit: 3,
      pickupLocationsPageLimit: 10,
      pickupLocationsLimit: 20,
      initialPickupLocations: 3
   });
</script>

Stap 4. HTML-code toevoegen om de widget te tonen

Ken een id-attribuut met de waarde "paazl-checkout" toe aan een leeg blokelement op de plek waar je de widget wilt tonen op je checkout-pagina. Bijvoorbeeld:

<div id="paazl-checkout"></div>

Je kunt ook de initialisatieparameter mountElementId gebruiken om het desbetreffende blokelement te identificeren.

Stap 5. (Optioneel) HTML-code toevoegen om de widget te stylen

Pas de look-and-feel van de widget aan door het volgende codefragment toe te voegen aan de <head>-sectie van je checkout-pagina. Zie De Paazl checkout-widget stylen voor voorbeelden van hoe elke parameter in het fragment het uiterlijk van je widget beïnvloedt. De waarden die je aan elke parameter geeft, zijn hetzelfde als de waarden die je voor CSS-eigenschappen gebruikt.

<style>
 :root {
   /* Global */
   --brand-global-radius: 20px;
   /* Colors */
   --brand-color-background: #FFF;
   --brand-color-secondary: #e9e9ef;
   --brand-color-border: #282364;
   --brand-color-body: #222;
   --brand-color-primary: #ff463c;
   --brand-color-focus: #282364;
   /* Fonts */
   --brand-font-family-title: "Quicksand", sans-serif;
   --brand-font-family-body: "Quicksand", sans-serif;
   --brand-font-weight-regular: 400;
   --brand-font-weight-bold: 700;
   /* Title */
   --brand-title-weight: 700;
   --brand-title-transform: uppercase;
   --brand-title-spacing: 0;
   /* Input */
   --brand-input-border-width: 1px;
   --brand-input-border-color: #282364;
   /* Button */
   --brand-button-radius: 20px;
   --brand-button-border-size: 0;
   --brand-button-border-color: transparent;
   --brand-button-font-color: #FFF;
   --brand-button-font-size: 14px;
   --brand-button-font-weight: 400;
   --brand-button-font-transform: uppercase;
   --brand-button-font-spacing: 1px;
   --brand-button-method-background: #FFF;
   --brand-button-background: #FFF;
 }
</style>

Stap 6. Widget-methoden implementeren

De Paazl checkout-widget biedt een aantal methoden die je kunt aanroepen wanneer je klant gegevens wijzigt, zoals het land, de plaats of de postcode. Deze methoden retourneren nieuwe verzendopties naar de widget, die ze vervolgens automatisch weergeeft.

Een voorbeeld van zo'n aanroep, waarmee het land van het afleveradres wordt ingesteld, is:

PaazlCheckout.setConsigneeCountryCode("GB");

Zie Paazl checkout-widget-methoden gebruiken voor een volledige lijst van de methoden die tot je beschikking staan.

Stap 7. Checkout-gegevens ophalen

Om de bezorgopties en tarieven aan een klant in je checkout te tonen, wil je de meest recente bezorggegevens van de aankoop van die klant ophalen bij Paazl. De Paazl REST API biedt de GET checkout-methode om deze gegevens op te vragen.

De Curl-code voor het verzoek is:

curl -X GET "https://api-acc.paazl.com/v1/checkout?reference=200000150" -H "accept: application/json;charset=UTF-8" -H "Authorization: Bearer 8ZNFYdd8gFUrgiyoIEeXpTsPB:cFBgHQ8h3CxBchF31Wa3Ba2pkmhbph2BG4tTYn9PZpKFv1z4tC"

Waarbij "200000150" de bestellingsreferentie is.

Een voorbeeld van de JSON-response is:

{
    "consigneeCountryCode": "NL",
    "consigneePostalCode": "1018PE",
    "deliveryType": "HOME",
    "notificationEmailAddress": "fred@grint.com",
    "notificationPhoneNumber": "+31(0)201234567",
    "pickupDate": "01-04-2019",
    "preferredDeliveryDate": "07-04-2019",
    "reference": "200000150",
    "selectedPickupLocation": {
        "accountNumber": "XX123",
        "address": {
            "city": "Amsterdam",
            "country": "NL",
            "postalCode": "8813XZ",
            "province": "Noord-Holland",
            "street": "Weteringschans",
            "streetNumber": 1,
            "streetNumberSuffix": "bg"
        },
        "code": "SIRGALAHAD",
        "coordinates": {
            "latitude": 52.234,
            "longitude": 04.123
        },
        "distance": 0.1,
        "name": "Afhaal Xpress",
        "openingTimes": [{
            "alwaysOpen": true,
            "businessHours": [{
                "from": "08:30",
                "to": "18:00"
            }],
            "day": "MONDAY"
        }]
    },
    "selectedShippingOption": {
        "carrier": {
            "description": "PostNL",
            "name": "AVG"
        },
        "description": "PostNL",
        "identifier": "431359",
        "name": "AVG",
        "rate": 5,
        "tags": ["ID_CHECK"]
    },
    "token": "fb5371ba-76bf-416e-b3fe-5da9a9721063",
    "webshopId": 804
}

Stap 8. (Optioneel) Tabblad "Winkels" configureren

Als je de fysieke winkels van je bedrijf wilt laten zien waar je webshopklanten hun aankopen kunnen ophalen, moet je configureren hoe de Checkout-widget de desbetreffende winkels weergeeft. Zie Winkels configureren voor een uitleg over hoe je dit tabblad configureert.