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 via the ShipEngine Carriers section.

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

Configuring Carriers

The Carrier Services 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 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 or the Elements SDK guides.

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

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