Skip to main content
The useCheckoutAction hook enables interactions with checkout actions in a type-safe manner, automatically updating the checkout session upon successful execution.

​
Action Types

The hook supports various action types including:
  • ADD_ITEMS - Add items to the cart
  • REMOVE_ITEMS - Remove items from the cart
  • UPDATE_COUPONS - Update coupon codes
  • UPDATE_CUSTOMER_DETAILS - Update customer information
  • UPDATE_ITEMS_QUANTITY - Update quantities of items in the cart
  • UPDATE_SHIPPING_PACKAGES - Update shipping packages
  • UPDATE_SHIPPING_ADDRESSES - Update shipping addresses
  • UPDATE_PAYMENT_METHODS - Update payment methods
  • CREATE_ORDER - Create a new order

​
Parameters

  • actionType: ActionType - The type of checkout action to perform (e.g., ADD_ITEMS, REMOVE_ITEMS, etc.)
  • callback?: object - Optional configuration callbacks
    • onSuccess?: (data?: CheckoutSession) => void - Called when action succeeds
    • onError?: ({ serverError, validationErrors }) => void - Called when action fails

​
Return Value

Returns an object with:
  • execute: (input: Input) => void - Function to dispatch the action with the appropriate payload
  • isPending: boolean - Boolean indicating if the action is currently processing
  • error?: object - Error information if the action failed
    • serverError?: ServerError - Error returned by the server
    • validationErrors?: ValidatorErrors<Input> - Input Validation errors

​
Input Parameters by Action Type

Each action type expects specific input parameters. Below are the details for each:
Navigate the tabs to see details of each action
  • ADD_ITEMS
  • REMOVE_ITEMS
  • UPDATE_COUPONS
  • UPDATE_CUSTOMER_DETAILS
  • UPDATE_ITEMS_QUANTITY
  • UPDATE_SHIPPING_PACKAGES
  • UPDATE_SHIPPING_ADDRESSES
  • UPDATE_PAYMENT_METHODS
  • CREATE_ORDER

​
ADD_ITEMS

type CartItemInput = {
  id: string;         // Id of the item on cartItems array inside the session
  quantity: number;   // Quantity to add
  sellerId?: string;  // Optional seller ID
};

// Usage
execute([{ id: "product123", quantity: 2 }]);

​

​
Example

​
Import

import { useCheckoutAction } from '@ollie-shop/sdk';

​
Usage

const { execute, isPending, error } = useCheckoutAction(
  actionType,
  {
    onSuccess: (data) => {
      // Handle success
    },
    onError: ({ serverError, validationErrors }) => {
      // Handle errors
    }
  }
);

// Execute the action
execute({ 
  // Input specific to the action type
});

​
Action

import { useCheckoutAction } from '@ollie-shop/sdk';

function AddToCartButton({ productId, quantity }) {
  const { execute, isPending } = useCheckoutAction('ADD_ITEMS', {
    onSuccess: () => {
      console.log('Item added successfully');
    },
    onError: ({ serverError }) => {
      console.error('Failed to add item', serverError?.message);
    }
  });

  return (
    <button 
      onClick={() => execute({ items: [{ id: productId, quantity }] })}
      disabled={isPending}
    >
      {isPending ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}