The Void Label Element enables a user to void a specific shipping label.
import { VoidLabel, ElementsProvider } from '@shipengine/elements';
import { themeConfig } from '../themeConfig';
const tokenPath = '/path/to/token/endpoint';
const Foo = ({ labelId }) => {
const getToken = useCallback(() => {
return fetch(tokenPath).then((res) => res.text());
}, []);
return (
<ElementsProvider
getToken={getToken}
themeConfig={themeConfig}
onError={handleError}
>
<VoidLabel.Element
labelId={labelId}
onComplete={() => {
console.log('Label Voided');
}}
onViewShipment={() => {
console.log('Go back to shipment');
}}
/>
</ElementsProvider>
);
};// 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 voidLabel = elements.create('voidLabel', {
labelId: 'se-44356221134',
onComplete: () => console.log('Label Voided'),
onViewShipment: () => console.log('Go back to shipment'),
});| Args/Props | Required? | Description |
|---|---|---|
labelId | required | string, The unique identifier for the label you wish to void. |
onComplete | required | function, (request: SE.VoidRequest, shipment: SE.SalesOrderShipment) => void A callback function that will be invoked when the request to void a given shipping label is completed. |
onSuccess | optional | function, (label: SE.Label, shipment: SE.SalesOrderShipment) => void A callback function that will be invoked when the request to void a given shipping label is successful. |
onViewShipment | required | function, (shipment: SE.SalesOrderShipment) => void;A callback function that will be invoked when the user clicks the View Shipment button. We recommend using this callback to render the Shipment Summary Element. |