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.

DANGER: If you exclude the globalFeatures.enabledShipEngineCarriers property in your global features, or set the value to an empty array without including any supported carrier codes, you will not be able to view and manage ShipEngine Carriers.

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

DANGER: If you exclude the globalFeatures.enabledShipEngineCarriers property in your global features, or set the value to an empty array without including any supported carrier codes, you will not be able to view and manage carriers in this Element.

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');

NOTE:

To access this Element, a seller must be onboarded with ShipEngine carrier account(s) and a valid payment method. These steps can be completed in the Onboarding Element.