# Carrier Services Element

The Carrier Services Element functions as a workflow that provides a basic UI wrapper around a collection of smaller Elements to manage your ShipEngine Carrier Services.

ShipEngine Carrier Services include setting auto funding rules, managing ShipEngine carrier connections, updating your payment method, and viewing transaction history (beta, for UK ShipEngine Carriers).

This can be used as a stand-alone Element and/or utilized within the [Account Settings Element](/apis/shipengine/docs/elements/account-settings/account-settings) via the ShipEngine Carriers section.

Below is a list of child Elements contained in the Carrier Services Element.

> **NOTE:**
It is recommended to initialize a workflow Element as a whole; however, all nested Elements can be instantiated individually.


- [Manage Funding Element](/apis/shipengine/docs/elements/account-settings/manage-funding)
- [Manage Carriers Element](/apis/shipengine/docs/elements/account-settings/manage-carriers)
- [Payment Method Element](/apis/shipengine/docs/elements/account-settings/payment-method)
- [Transaction History](/apis/shipengine/docs/elements/account-settings/transaction-history)


## Configuring Carriers

The Carrier Services Element is designed to integrate with the leading global shipping carriers. Check out the complete [carriers documentation](/apis/shipengine/docs/carriers/setup) to learn more about ShipEngine carriers.

If you wish to view and manage ShipEngine carrier accounts in the Carrier Services 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](/apis/shipengine/docs/elements/elements-react#configuring-elements-features) or the [Elements SDK](/apis/shipengine/docs/elements/elements-sdk#configuring-elements-features) 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 Carrier Services.


### 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


```jsx
import { CarrierServices, 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'],
          enabledExternalCarriers: [
            'apc',
            'asendia',
            'better_trucks',
            'courierpost',
            'dpd',
            'seko',
            'ups',
            'yodel',
          ],
        },
      }}
    >
      <CarrierServices.Element
        enableFunding={true}
        onRedirectToOnboarding={() => navigateToOnboarding()}
      />
    </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: {
    globalFeatures: {
      enabledShipEngineCarriers: ['ups', 'stamps_com'],
      enabledExternalCarriers: [
        'apc',
        'asendia',
        'better_trucks',
        'courierpost',
        'dpd',
        'seko',
        'ups',
        'yodel',
      ],
    },
  },
});

const carrierServices = elements.create('carrierServices', {
  enableFunding: true,
  onRedirectToOnboarding: () => navigateToOnboarding(),
});
```

> **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](/apis/shipengine/docs/elements/onboarding/onboarding).


| Args/Props | Description |
|  --- | --- |
| `enableFunding` | boolean, **optional** An optional boolean that enables the Manage Funding section of Carrier Services. |
| `onRedirectToOnboarding` | *function*, **optional** An optional callback that is triggered when the "Complete Onboarding" button is clicked. This button appears when a user who hasn't completed onboarding tries to access the Carrier Services Element, which requires an onboarded seller. We recommend using this callback to display the [Onboarding Element](/apis/shipengine/docs/elements/onboarding/onboarding). |