# Shipment Summary Element

The Shipment Summary Element allows users to see all the essential information regarding the shipment and any labels attached to the shipment. It also includes post-purchase actions such as printing a label, voiding a label, and purchasing a label on an active shipment.

## React Component


```jsx
import { ShipmentSummary, ElementsProvider } from '@shipengine/elements';
import { themeConfig } from '../themeConfig';

const tokenPath = '/path/to/token/endpoint';

const Foo = ({
  shipmentId,
  label,
  order,
  printLabel,
  voidLabel,
  purchaseLabel,
}) => {
  const getToken = useCallback(() => {
    return fetch(tokenPath).then((res) => res.text());
  }, []);

  return (
    <ElementsProvider
      getToken={getToken}
      themeConfig={themeConfig}
      onError={handleError}
    >
      <ShipmentSummary.Element
        shipmentId={shipmentId}
        onClickPrintLabel={printLabel()}
        onClickVoidLabel={(label) => voidLabel(label)}
        onClickPurchaseLabel={(order) => purchaseLabel(order)}
      />
    </ElementsProvider>
  );
};
```

## SDK


```js
// Creates a new instance of the Elements SDK.
const elements = new ElementsSDK(getToken, {
  onError: (err: Error) => console.error(err),
  themeConfig: themeConfig,
  locale: 'en-US',
});

const shipmentSummary = elements.create('shipmentSummary', {
  onClickPrintLabel: () => printLabel(),
  onClickVoidLabel: (label) => voidLabel(label),
  onClickPurchaseLabel: (order) => purchaseLabel(order),
  shipmentId: 'se-103889776',
});
```

| Args/Props | Required? | Description |
|  --- | --- | --- |
| `shipmentId` | **required** | ***string***, The ShipEngine `shipment_id` of the shipment being viewed. |
| `onClickPrintLabel` | optional | ***function***, `() => void` An optional callback function that has no parameters, to be invoked with the onClick event of the 'Print Label' button. |
| `onClickPurchaseLabel` | optional | ***function***, `(shipment: SE.SalesOrderShipment order?: SE.SalesOrder) => void` An optional callback function with one required parameter, `shipment`, and one optional parameter, `order`. The `shipment` will be fetched and provided via the `shipmentId` prop provided, and the `order` will be provided if one is associated with the shipment. The `onClickPurchaseLabel` callback will be invoked with the onClick event of the 'Buy Another Label' button. The 'Buy Another Label' button is only available when active labels are available to print.We recommend using this callback to render the [Purchase Label Element](/apis/shipengine/docs/elements/label-workflow/purchase-label). |
| `onClickVoidLabel` | optional | ***function***, `(label: SE.Label) => void` An optional callback function with one required parameter: `label` which is the label that is intended to be voided. The onClickVoidLabel callback will be invoked with the onClick event of the 'Void Label' button.   *We recommend using this callback to render the* [Void Label Element](/apis/shipengine/docs/elements/label-workflow/void-label). |
| `onClickTrackingNumber` | optional | ***function***, `(labelId: string, trackingNumber: string, trackingUrl: string ) => void` An optional callback function with three required parameters: `labelId` which is the ID of the label, `trackingNumber` which is the tracking number of the shipment, and `trackingUrl` which is the URL to track the shipment. The `onClickTrackingNumber` callback will be invoked when the tracking number link is clicked. If not provided, the tracking number will open the tracking URL in a new tab. |
| `features` | optional | ***Object***, features are optional configuration keys used to customize the Shipment Summary experience. For a comprehensive list of feature keys. |


## Shipment Summary Features

| feature | Default | Description |
|  --- | --- | --- |
| `schedulePickup` | true | ***boolean***, Enables the `Schedule Pickup` feature in Shipment Summary which displays a link to Carrier Pick Up services if the label is eligible. |


For an in depth overview of the global `features` object, please review the Configuring Elements Features step in either the [ElementsProvider](/apis/shipengine/docs/elements/elements-react#configuring-elements-features) or the [Elements SDK](/apis/shipengine/docs/elements/elements-sdk#configuring-elements-features) guides.