Ingrid Delivery Checkout

Brink Commerce has an integration with the Transportation Management provider Ingrid.

Please provide Brink Commerce with the required credentials before starting. When you've received the response from the initialization call, you add the htmlSnippet to your checkout to render it.

How to handle updates to the cart

Every change to the cart requires a new call to get the available shipping options based on the current state of the cart.

How to handle shipping selection updates

Consumers can perform a number of actions that can affect your checkout, e.g. user changing the shipping option can cause a shipping price change. The moment the widget attaches itself to the page, it sets up a Javascript API available via window._sw where you can set up listeners for events.

Example:

const handleCreateSession = async () => {
  // ...call session create backend and add the snippet to the page

  // Update the shipping price any time option is changed
  window._sw(function (api) {
    api.on("data_changed", function (data, meta) {
      if (meta.price_changed) {
        updateCart(data.price);
      }
    });
  });
};

Available events

data_changed

Ingrid Delivery Checkout exposes one 'change' event and allows you to decide what data you care about. The callback receives two arguments

data: {
  delivery_type: 'delivery' | 'mailbox' | 'pickup' | 'instore';
  price: number;
  search_address: {
    country: string;
    postal_code: string;
    address_lines?: string[];
    city?: string;
    region?: string;
  };
  shipping_method: string;
  external_method_id?: string;
}

and

meta: {
  delivery_type_changed: boolean;
  external_method_id_changed: boolean;
  price_changed: boolean;
  search_address_changed: boolean;
  shipping_method_changed: boolean;
  initial_load: boolean;
}

Ingrid order result

An order is marked as completed in Ingrid when the order is successfully authorised from the payment provider

The order result contains extra information in the customerAttribute field.

{
  "customerAttribute": {
    "ingrid": {
      "external_method_id": "P19",
      "carrier": "PostNord",
      "product": "MyPack Collect",
      "id": "90bbe926-c1f1-471c-ad72-8a358b6a4f71",
      "category": "PostNord MyPack Collect",
      "shipping_method": "pnl-mpc",
      "delivery_type": "pickup",
      "tos_id": "01FQ1BMQ0WEVMHTR6YKGEB2P7S",
      "location_external_id": "588185" // Optional, only available if a pickup method was selected
    }
  }
}

The Ingrid result can be found in the order lines.

{
  "orderLines": [
    ...{
      "taxRate": 25,
      "totalAmount": 100,
      "quantity": 1,
      "productId": "external-shipping-option",
      "price": 100,
      "name": "PostNord: MyPack Collect",
      "id": "46fa0f35-c251-40a8-97bf-d8523799bece",
      "totalTaxAmount": 20,
      "type": "shipment",
      "totalAmountWithDiscount": 100
    }
  ]
}