Manage Carriers Element

The Manage Carriers Element allows users to view a list of their existing ShipEngine carrier connections or connect additional ShipEngine carriers.

This can be used as a stand-alone Element and/or utilized within the Carrier Services Element via the ShipEngine Carriers section.

Configuring Carriers

The Manage Carriers Element is designed to integrate with the leading global shipping carriers. Check out the complete carriers documentation to learn more about ShipEngine carriers.

If you wish to view and manage ShipEngine carrier accounts in the Manage Carriers Element, you must explicitly list them by carrier code in the globalFeatures.enabledShipEngineCarriers array, which is nested within the features prop of the ElementsProvider or ElementsSDK class constructor.

For an in depth overview of the features object, please review the Configuring Elements Features step in either the ElementsProvider or the Elements SDK guides.

Supported ShipEngine Carriers in Elements

➤

US Carrier Codes

• USPS: stamps_com
• DHL Express: dhl_express_worldwide

➤

GB Carrier Codes

• Yodel: yodel_walleted
• Evri: hermes
• DPD: dpdwallet

➤

CA Carrier Codes

• GlobalPost: globalpost

➤

AU Carrier Codes

• Aramex Australia: aramex_au_walleted
• Sendle: sendle_walleted

React Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { ManageCarriers, ElementsProvider } from '@shipengine/elements';
import { themeConfig } from '../themeConfig';

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

const Foo = () => {
  const getToken = useCallback(() => {
    return fetch(tokenPath).then((res) => res.text());
  }, []);

  return (
    <ElementsProvider
      getToken={getToken}
      themeConfig={themeConfig}
      onError={handleError}
      features={{
        globalFeatures: {
          enabledShipEngineCarriers: ['ups', 'stamps_com', 'yodel_walleted'],
        },
      }}
    >
      <ManageCarriers.Element />
    </ElementsProvider>
  );
};

SDK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Creates a new instance of the Elements SDK.
const elements = new ElementsSDK(getToken, {
  onError: (err: Error) => console.error(err),
  themeConfig: themeConfig,
  locale: 'en-US',
  features: {
    globalFeatures: {
      // The list of available ShipEngine carriers
      enabledShipEngineCarriers: ['stamps_com', 'yodel_walleted'],
    },
  },
});

const manageCarriers = elements.create('manageCarriers');