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.

sequenceDiagram Customer -->> FrontEnd: Go to checkout FrontEnd -->> BrinkCommerce: Get Shipping Widget note over FrontEnd, BrinkCommerce: POST integrationsv1/integrations/ingrid/delivery-checkout BrinkCommerce -->> Ingrid: Start Session note over BrinkCommerce, Ingrid: Including cart contents (Orderlines, Totals, Discounts etc.) Ingrid -->> BrinkCommerce: Response note over Ingrid, BrinkCommerce: HTML-snippet BrinkCommerce-->>FrontEnd: Response note over BrinkCommerce, FrontEnd: HTML-snippet FrontEnd-->>Customer: Display Ingrid Shipping Widget Customer -->> Ingrid: Select Shipping Option Ingrid -->> BrinkCommerce: Update session note over Ingrid, BrinkCommerce: Update session with selected shipping option FrontEnd-->>FrontEnd: JS Listener note over FrontEnd: Listen to JS Event "data_changed" <br> from Ingrid widget FrontEnd-->>BrinkCommerce: Get order note over FrontEnd, BrinkCommerce: Get order for display to end user

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;
}

Get Order

Based on the outcome of the event supplied by Ingrid, change in shipping/price, do a GET call for the cart (https://api.${env}.brinkcommerce.com/orderv1/carts/{id})

Remember

If the current cart has applied a discount rule that promises free shipping, the tag Brink:freeShipping will be sent from Brink to Ingrid. This offers merchants to make price rules in Ingrid with regard to this tag.

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
      "address": { // Optional, only available if a pickup method was selected
         "name": "Hemköp Linnegatan",
         "address_lines": ["Linnégatan 36A"],
         "city": "Göteborg",
         "postal_code": "41304",
         "country": "SE"
       }
    }
  }
}

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
    }
  ]
}