Checkout Widget

The Checkout widget is used in the checkout section to offer customers a choice of delivery windows and enable them to pick one. It displays a matrix view of the available delivery windows. It is also possible for customers to enter a comment for the courier or specify if the order may be left at their doorstep instead of being handed over personally.

The available delivery windows must be fetched beforehand using the Porterbuddy API.

Background data

Usage

Add the configuration and script tag anywhere in HEAD or BODY

<link href="https://widget.porterbuddy.com/porterbuddy-widget.css" rel="stylesheet" type="text/css"/>
<script async src="https://widget.porterbuddy.com/porterbuddy-widget.js"></script>

The async attribute is optional, but recommended for better performance

Configure the widget to show the "checkout" view by defining the global variable "window.porterbuddy" in a script tag. If window.porterbuddy is not defined when the script loads it will delay execution for up to 10 seconds until it finds the configuration

<script>
  window.porterbuddy = {
    token: 'y3wt37LqBsiLo62Jkx284XEdi4LzdX6pihZFwqYX',
    view: 'checkout',
    availabilityResponse:
    {
      deliveryWindows: [
        {
          product: 'delivery',
          start: '2019-03-14T17:30:00+01:00',
          end: '2019-03-14T19:30:00+01:00',
          expiresAt: '2019-03-14T14:30:00+01:00',
          price: {
            fractionalDenomination: 14900,
            currency: 'NOK'
          }
        },
      // ...
      ],
      destinationResolvedAdress: {
        postalCode: '0153',
        // ...
      }
    }, // from API call
    onComment: function (comment) {
      // display comment
    },
    onLeaveAtDoorstep: function (leaveAtDoorstep) {
      // get leave at doorstep value
    },
    onSelectDeliveryWindow: function (window) {
      // show selected delivery window
    },
    onSetCallbacks: function (callbacks) {
      // store the function reference to unselect the delivery window when selecting
      // another delivery option
      window.unselectDeliveryWindow = callbacks.unselectDeliveryWindow;
    }
  }
</script>

Add a DIV in BODY with the id porterbuddy-widget where you want the widget to appear on the page

<div id="porterbuddy-widget"></div>