# Connect External Carrier Element

The Connect External Carrier Element allows users to connect their own existing external carrier account.

For more information about External Carrier Connections, refer to the [full carrier connection documentation](/apis/shipengine/docs/carriers/connect).

To view and manage previously connected accounts, and to add additional external carrier accounts, we recommend instantiating the [Manage External Carriers Element](/apis/shipengine/docs/elements/account-settings/manage-external-carriers).

## Configuring Carriers

By providing a value to the `carrierName` prop, the Connect External Carrier Element will populate a form with the required fields relevant to the carrier specified.

If `carrierName` is not provided, users will be able to select a carrier to connect from a list of carriers specified within the `globalFeatures.enabledExternalCarriers` array within the features prop.

> **DANGER:**
If you do not pass a value to `carrierName` **and** 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.


For an in depth overview of the global `features` object, please review the Configuring Elements Features step in either the [ElementsProvider](/apis/shipengine/docs/elements/elements-react#configuring-elements-features) or the [Elements SDK](/apis/shipengine/docs/elements/elements-sdk#configuring-elements-features) 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


```jsx
import { ConnectExternalCarrier, 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={{
        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',
        ],
      }}
    >
      <ConnectExternalCarrier.Element
        carrierName="ups"
        onCarrierConnected={() => console.log('carrier successfully connected')}
      />
    </ElementsProvider>
  );
};
```

## SDK


```js
// 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: {
    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 connectExternalCarrier = elements.create('connectExternalCarrier', {
  carrierName: 'ups',
  onCarrierConnected: () => console.log('carrier successfully connected'),
});
```

| Args/Props | Description |
|  --- | --- |
| `carrierName` | *string*, **optional** The carrier name to show the connection form for (ie. ups, usps, fedex, etc.). If no carrier is provided, the user may select from a list of carriers specified in the `enabledExternalCarriers` array. |
| `onCancel` | *function*, **optional** An optional callback function that will be invoked when a carrierName was provided and the form is cancelled. Otherwise the user will again be presented with the list of available carriers to connect. |
| `onCarrierConnected` | *function*, **optional** An optional callback function to be invoked after the successful connection of a carrier account. |