Account Settings Element

The Account Settings Element is a workflow that provides a basic UI wrapper around a collection of smaller Elements to manage your ShipEngine account settings. Below is a list of nested Elements contained in the Account Settings Element.

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
38
39
40
import { AccountSettings, 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: ['ups', 'stamps_com'],
          // The list of external carriers that are available to be activated
          enabledExternalCarriers: [
            'apc',
            'asendia',
            'better_trucks',
            'courierpost',
            'dpd',
            'seko',
            'ups',
            'yodel',
          ],
        },
        accountSettingsFeatures: {
          showLabelLayout: false,
        },
      }}
    >
      <AccountSettings.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
24
25
26
27
28
// 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',
      ],
    },
    accountSettingsFeatures: {
      showLabelLayout: false,
    },
  },
});

const accountSettings = elements.create('accountSettings');

Args/Props	Description
`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 within AccountSettings, which requires an onboarded seller. We recommend using this callback to display the Onboarding Element.

Account Settings Features

Features are optional configuration keys used to customize the Account Settings experience.

feature	Description
`enableFunding`	boolean enabled by default Whether or not to display the Add Funds settings within the Carrier Services section.
`showCarrierServices`	boolean enabled by default Whether or not to display the ShipEngine Carriers section on the Account Settings element.
`showExternalCarriers`	boolean disabled by default Whether or not to display the External Carriers section on the Account Settings element.
`showManageWarehouses`	boolean enabled by default Whether or not to display the Ship From Locations section on the Account Settings element.
`showLabelLayout`	boolean enabled by default Whether or not to display the Shipping Label Layout section on the Account Settings element.
`showUnitSettings`	boolean enabled by default Whether or not to display the Units of Measure section on the Account Settings 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.