Checkout

Overview

To start a checkout attempt, supply the desired capabilities available from the current session:

• Payment Provider
• Shipping Provider
• GiftCard Provider
• Voucher Provider

This will return a checkout containing a new token (JWT) and a snapshot of the current session items and evaluated discount rules.

---

Providers

Overview

Checkout capabilities are provided via the specific provider APIs, e.g., ShopperIngrid (Shipping), and ShopperKlarnaCheckout (Payment).

Recommendation

We recommend handling providers sequentially, meaning initiate shipping first and then payment to manage updates between different associated sessions.

Handling Shipping Providers

Example using Ingrid as the shipping provider. Make a POST call to /shopper-ingrid/sessions/create.

Handling Payment Providers

Example using Klarna as the payment provider. Make a POST call to /shopper-kco/orders.

---

Handling Checkout Updates

Since a checkout is immutable, any changes to items in the cart, or the addition/removal of discount codes will require initiating a new checkout. These changes should be made in the session first.

Example with React Context

To handle checkout changes smoothly, you can set up a React context to hold the checkout as a state. This will allow you to update the checkout state when, for example, shipping details are updated. This new state can then trigger any payment widgets to refresh with the updated checkout information.

import React, { createContext, useState, useEffect } from 'react';

// Create a context for the checkout
export const CheckoutContext = createContext();

// Provider component
export const CheckoutProvider = ({ children }) => {
  const [checkout, setCheckout] = useState(null);

  // Example function to update checkout state
  const updateCheckout = (newCheckout) => {
    setCheckout(newCheckout);
  };

  useEffect(() => {
    // Setup listeners on payment providers here
    // to update widgets with correct checkout information
  }, [checkout]);

  return (
    <CheckoutContext.Provider value={{ checkout, updateCheckout }}>
      {children}
    </CheckoutContext.Provider>
  );
};

Then, wrap your application with CheckoutProvider to have access to the checkout state anywhere in your component tree.

---

Updating Provider Widgets: Synchronization

Overview

When a consumer interacts with any provider, such as a payment gateway or shipping calculator (Klarna, Ingrid, etc.), changes to the checkout process can happen dynamically. For example, selecting a different shipping option can cause the total shipping price to change. Ensuring that these different widgets (Brink Checkout, Klarna Checkout, Shipping Widget) remain in sync is crucial for a seamless user experience.

Using JavaScript Listeners

To handle updates between providers and keep everything synchronized, JavaScript listeners need to be set up. Each provider has its own specific set of events that are emitted. You can refer to each provider's documentation (e.g., Nshift, Ingrid, Klarna Shipping Assistant) to understand these events in detail.

Example: Ingrid's shippingOptionUpdate Event

When a user changes the shipping option in Ingrid's Shipping Widget, an event named shippingOptionUpdate is emitted. You can set up a JavaScript listener for this event as follows:

document.addEventListener('shippingOptionUpdate', function(e) {
  // Fetch updated shipping data from event
  const updatedShippingData = e.detail;
  
  // Call Brink's /shopper-kco/sync endpoint
  syncBrinkCheckout(updatedShippingData);
});

In the listener's callback function, a call can be made to Brink's /shopper-kco/sync endpoint. This would trigger Brink Commerce to fetch the updated session data from the shipping provider.

The Synchronization API Call

The /shopper-kco/sync API call will update the Brink Checkout and Klarna Checkout to reflect the changes made in the shipping provider.

By successfully calling this endpoint, Brink will update both its internal Checkout and Klarna's Checkout to reflect the new changes. This ensures a consistent state across all touchpoints in the consumer journey.

Conclusion

Always be sure to refer to the respective provider documentation for a full understanding of the events that you can listen to. Synchronization is key to a smooth checkout experience, and setting up these listeners is vital for achieving that.