Manage External Carriers Element

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

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.

Supported External Carrier Accounts

• access_worldwide
• amazon_shipping
• amazon_shipping_uk
• an_post
• apc
• apc_overnight
• apicode-dpd-local
• aramex
• asendia
• asendia_uk
• australia_post_mypost_business
• axlehire
• b2c_europe
• better_trucks
• bring_parcels
• brt_it
• canpar
• castle_parcels
• chronopost
• colis_prive
• colissimo
• couriers_please
• dai
• delivengo
• deutsche_post_cross_border
• deutsche_post_dhl
• dhl_ecommerce_au
• dhl_ecommerce_uk
• dhl_express
• dhl_express_australia
• dhl_express_mydhl
• dhl_global_mail
• dhl_parcel_uk
• direct_freight
• direct_link
• doordash_us
• dpd
• dpd_france
• dpd_germany
• dpd_nl
• dpd_poland
• dropoff
• dx
• envialia
• estafeta_mexico
• fairsenden
• fastway_au
• fastway_nz
• fedex
• fedex_uk
• flashbox
• fleet_optics
• gls_france
• gls_germany
• gls_us
• gophr
• grupo_ampm
• hermes_germany
• hermescorp
• inpost
• inpost_it
• intelcom_ca
• intelliquick_delivery
• landmark_global
• lasership
• lettre_suivie
• linex
• loomis_express
• lso
• metroland
• mondial_relay
• n9minutos
• nationex
• netparcel
• new_zealand_couriers
• newgistics
• ninja_van
• now_couriers
• ontrac
• packeta
• packfleet
• parcelforce
• parcll
• parxl
• post_haste
• posta_slovenije
• poste_italiane
• postnl
• purolator_ca
• quantium
• redpack
• rr_donnelley
• seko
• seko_ltl_walleted
• shipx
• skypostal
• speedy
• star_track
• starlinks
• swyft
• the_delivery_group_uk
• tnt_australia
• tnt_uk
• toll_ipec
• toll_priority
• yamato
• yodel

React Component

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

// 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,
});