{"templateId":"markdown","versions":[{"version":"shipstation-v2","label":"ShipStation V2 API","link":"/apis/shipstation-v2/docs/elements/label-workflow/shipment-summary","default":true,"active":false,"folderId":"58c9a61d"},{"version":"shipengine","label":"ShipStation API (formerly ShipEngine)","link":"/apis/shipengine/docs/elements/label-workflow/shipment-summary","default":false,"active":true,"folderId":"58c9a61d"},{"version":"shipstation-v1","label":"ShipStation V1 API","link":"/apis/shipstation-v1/docs/elements/label-workflow/shipment-summary","default":false,"active":false,"folderId":"58c9a61d"}],"sharedDataIds":{"sidebar":"sidebar-apis/@shipengine/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Shipment Summary Element","keywords":"shipping, labels, shipstation, documentation, api","siteUrl":"https://docs.shipstation.com","lang":"en-US","llmstxt":{"hide":false,"title":"ShipStation API LLM Docs","description":"Find links and references to all markdown documentation for use with LLMs","excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"shipment-summary-element","__idx":0},"children":["Shipment Summary Element"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"react-component","__idx":1},"children":["React Component"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"jsx","header":{"controls":{"copy":{}}},"source":"import { ShipmentSummary, ElementsProvider } from '@shipengine/elements';\nimport { themeConfig } from '../themeConfig';\n\nconst tokenPath = '/path/to/token/endpoint';\n\nconst Foo = ({\n  shipmentId,\n  label,\n  order,\n  printLabel,\n  voidLabel,\n  purchaseLabel,\n}) => {\n  const getToken = useCallback(() => {\n    return fetch(tokenPath).then((res) => res.text());\n  }, []);\n\n  return (\n    <ElementsProvider\n      getToken={getToken}\n      themeConfig={themeConfig}\n      onError={handleError}\n    >\n      <ShipmentSummary.Element\n        shipmentId={shipmentId}\n        onClickPrintLabel={printLabel()}\n        onClickVoidLabel={(label) => voidLabel(label)}\n        onClickPurchaseLabel={(order) => purchaseLabel(order)}\n      />\n    </ElementsProvider>\n  );\n};\n","lang":"jsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"sdk","__idx":2},"children":["SDK"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"// Creates a new instance of the Elements SDK.\nconst elements = new ElementsSDK(getToken, {\n  onError: (err: Error) => console.error(err),\n  themeConfig: themeConfig,\n  locale: 'en-US',\n});\n\nconst shipmentSummary = elements.create('shipmentSummary', {\n  onClickPrintLabel: () => printLabel(),\n  onClickVoidLabel: (label) => voidLabel(label),\n  onClickPurchaseLabel: (order) => purchaseLabel(order),\n  shipmentId: 'se-103889776',\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Args/Props"},"children":["Args/Props"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required?"},"children":["Required?"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shipmentId"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["required"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["string"]}]},", The ShipEngine ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shipment_id"]}," of the shipment being viewed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClickPrintLabel"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["optional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["function"]}]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["() => void"]}," An optional callback function that has no parameters, to be invoked with the onClick event of the 'Print Label' button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClickPurchaseLabel"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["optional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["function"]}]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(shipment: SE.SalesOrderShipment order?: SE.SalesOrder) => void"]}," An optional callback function with one required parameter, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shipment"]},", and one optional parameter, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["order"]},". The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shipment"]}," will be fetched and provided via the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shipmentId"]}," prop provided, and the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["order"]}," will be provided if one is associated with the shipment. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"We recommend using this callback to render the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/apis/shipengine/docs/elements/label-workflow/purchase-label"},"children":["Purchase Label Element"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClickVoidLabel"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["optional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["function"]}]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(label: SE.Label) => void"]}," An optional callback function with one required parameter: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["We recommend using this callback to render the"]}," ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/apis/shipengine/docs/elements/label-workflow/void-label"},"children":["Void Label Element"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClickTrackingNumber"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["optional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["function"]}]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(labelId: string, trackingNumber: string, trackingUrl: string ) => void"]}," An optional callback function with three required parameters: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelId"]}," which is the ID of the label, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trackingNumber"]}," which is the tracking number of the shipment, and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trackingUrl"]}," which is the URL to track the shipment. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["features"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["optional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Object"]}]},", features are optional configuration keys used to customize the Shipment Summary experience. For a comprehensive list of feature keys."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"shipment-summary-features","__idx":3},"children":["Shipment Summary Features"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"feature"},"children":["feature"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["schedulePickup"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["true"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["boolean"]}]},", Enables the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Schedule Pickup"]}," feature in Shipment Summary which displays a link to Carrier Pick Up services if the label is eligible."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For an in depth overview of the global ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["features"]}," object, please review the Configuring Elements Features step in either the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/apis/shipengine/docs/elements/elements-react#configuring-elements-features"},"children":["ElementsProvider"]}," or the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/apis/shipengine/docs/elements/elements-sdk#configuring-elements-features"},"children":["Elements SDK"]}," guides."]}]},"headings":[{"value":"Shipment Summary Element","id":"shipment-summary-element","depth":1},{"value":"React Component","id":"react-component","depth":2},{"value":"SDK","id":"sdk","depth":2},{"value":"Shipment Summary Features","id":"shipment-summary-features","depth":2}],"frontmatter":{"seo":{"title":"Shipment Summary Element"}},"lastModified":"2026-04-08T10:47:45.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/apis/shipengine/docs/elements/label-workflow/shipment-summary","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}