Elements - Manage Funding

Manage Funding Element

The Manage Funding Element allows users to enhance their shipping operations by enabling auto-funding and establishing funding rules tailored to their specific shipping volumes. This helps streamline shipping processes, ensuring adequate funds based on predefined criteria.

This can be used as a stand-alone Element and/or utilized within the Carrier Services Element.

React Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { ManageFunding, 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}
    >
      <ManageFunding.Element />
    </ElementsProvider>
  );
};

SDK

1
2
3
4
5
6
7
8
// Creates a new instance of the Elements SDK.
const elements = new ElementsSDK(getToken, {
  onError: (err: Error) => console.error(err),
  themeConfig: themeConfig,
  locale: 'en-US',
});

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

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 Manage Funding Element, which requires an onboarded seller. We recommend using this callback to display the Onboarding Element.