Site Logo

🎉 ShipEngine is becoming ShipStation API 🎉

Over the next few months you'll notice the ShipEngine website, documentation portal, and dashboard being rebranded as ShipStation API. For our ShipEngine customers, you don't need to take any action or change any of your integrations in any way. All endpoints will remain the same and continue to function as they always have.

To learn more about what's coming, review our New ShipStation API page.

Manage External Carriers Element

The Manage External Carriers Element allows users to manage their carrier accounts by displaying connected carriers and providing a list of available shipping carriers for connecting pre-configured accounts within ShipEngine Elements.

For more information about External Carrier Connections, refer to the full carrier connection documentation.

This can be used as a stand-alone Element and/or utilized within the Account Settings Element via the External Carriers section.

Configuring Carriers

To enable external carrier connections, you must explicitly list them in the globalFeatures.enabledExternalCarriers array within the features prop when initializing Elements.

DANGER: If you exclude the globalFeatures.enabledExternalCarriers property, or set the value to an empty array without including any supported carrier codes, users will not be able to view and connect External Carriers in the Account Settings Element or the Manage External Carriers Element

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

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
26
27
28
29
30
31
32
33
34
35
36
37
import { ManageExternalCarriers, 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: {
          // The list of all ShipEngine carriers available to be activated
          enabledShipEngineCarriers: ['stamps_com', 'dhl_express_worldwide'],
          // The list of external carriers that are available to be activated
          enabledExternalCarriers: [
            'apc',
            'asendia',
            'better_trucks',
            'courierpost',
            'dpd',
            'seko',
            'ups',
            'yodel',
          ],
        },
      }}
    >
      <ManageExternalCarriers.Element isModalFullScreen={true} />
    </ElementsProvider>
  );
};

SDK

 
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
26
27
// 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 all ShipEngine carriers available to be activated
      enabledShipEngineCarriers: ['stamps_com', 'dhl_express_worldwide'],
      // The list of external carriers that are available to be activated
      enabledExternalCarriers: [
        'apc',
        'asendia',
        'better_trucks',
        'courierpost',
        'dpd',
        'seko',
        'ups',
        'yodel',
      ],
    },
  },
});


const manageExternalCarriers = elements.create('manageExternalCarriers', {
  isModalFullScreen: true,
});
Args/PropsDescription
isModalFullSceenboolean, optional If true the connect carrier form modal will take up the whole screen. Defaults to false.
onCarrierConnectedfunction, optional An optional callback function to be invoked after the successful connection of a carrier account.