# Payment Method Settings

The Payment Method Settings Element enables users to view and update their payment method.

This can be used as a stand-alone Element and/or utilized within the [Carrier Services Element](/apis/shipengine/docs/elements/account-settings/carrier-services).

## React Component


```jsx
import { PaymentMethodSettings, 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}
    >
      <PaymentMethodSettings.Element />
    </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',
});

const paymentMethodSettings = elements.create('paymentMethodSettings');
```

> **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 |
|  --- | --- |
| `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 Payment Method Element, which requires an onboarded seller. We recommend using this callback to display the [Onboarding Element](/apis/shipengine/docs/elements/onboarding/onboarding). |