Choose a version:

Authenticated Account
API

The API for interacting with an account in which the customer is fully authenticated.

Anchor to standardapiStandardApi

The base API object provided to this and other customer-account extension targets.

Anchor to authenticatedAccount authenticatedAccount required: Information about the authenticated account.

Docs_Standard_AuthenticatedAccountApi

authenticatedAccount
Information about the authenticated account.
```
AuthenticatedAccount
```

export interface Docs_Standard_AuthenticatedAccountApi
  extends Pick<StandardApi<any>, 'authenticatedAccount'> {}

AuthenticatedAccount

customer
Provides the customer information of the authenticated customer.
```
StatefulRemoteSubscribable<Customer | undefined>
```
purchasingCompany
Provides the company info of the authenticated business customer. If the customer is not authenticated or is not a business customer, this value is `undefined`.
```
StatefulRemoteSubscribable<PurchasingCompany | undefined>
```

export interface AuthenticatedAccount {
  /**
   * Provides the company info of the authenticated business customer.
   * If the customer is not authenticated or is not a business customer, this value is `undefined`.
   */
  purchasingCompany: StatefulRemoteSubscribable<PurchasingCompany | undefined>;
  /**
   * Provides the customer information of the authenticated customer.
   */
  customer: StatefulRemoteSubscribable<Customer | undefined>;
}

Customer

Information about the authenticated customer. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).

id
Customer ID.
```
string
```

export interface Customer {
  /**
   * Customer ID.
   *
   * @example 'gid://shopify/Customer/123'
   */
  id: string;
}

PurchasingCompany

company
Include information of the company of the logged in business customer.
```
Company
```
location
Include information of the company location of the logged in business customer.
```
CompanyLocation
```

export interface PurchasingCompany {
  /**
   * Include information of the company of the logged in business customer.
   */
  company: Company;

  /**
   * Include information of the company location of the logged in business customer.
   */
  location?: CompanyLocation;
}

Company

id
Company ID.
```
string
```

export interface Company {
  /**
   * Company ID.
   */
  id: string;
}

CompanyLocation

id
Company location ID.
```
string
```

export interface CompanyLocation {
  /**
   * Company location ID.
   */
  id: string;
}

Was this section helpful?

Anchor to useAuthenticatedAccountCustomer
useAuthenticatedAccountCustomer()

Returns the current authenticated Customer. The value is undefined if the customer isn't authenticated.

Anchor to useAuthenticatedAccountCustomer-returnsReturns

| undefined

UseAuthenticatedAccountCustomerGeneratedType

Returns the current authenticated `Customer`. The value is `undefined` if the customer isn't authenticated.

Customer | undefined

Customer | undefined

export function useAuthenticatedAccountCustomer<
  Target extends RenderExtensionTarget,
>(): Customer | undefined {
  const account = useApi<Target>().authenticatedAccount;

  return useSubscription(account.customer);
}

Customer

Information about the authenticated customer. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).

id
Customer ID.
```
string
```

export interface Customer {
  /**
   * Customer ID.
   *
   * @example 'gid://shopify/Customer/123'
   */
  id: string;
}

Was this section helpful?

Anchor to useAuthenticatedAccountPurchasingCompany
useAuthenticatedAccountPurchasingCompany()

Provides information about the company of the authenticated business customer. The value is undefined if a business customer isn't authenticated.

Anchor to useAuthenticatedAccountPurchasingCompany-returnsReturns

| undefined

UseAuthenticatedAccountPurchasingCompanyGeneratedType

Provides information about the company of the authenticated business customer. The value is `undefined` if a business customer isn't authenticated.

PurchasingCompany | undefined

PurchasingCompany | undefined

export function useAuthenticatedAccountPurchasingCompany<
  Target extends RenderExtensionTarget,
>(): PurchasingCompany | undefined {
  const account = useApi<Target>().authenticatedAccount;

  return useSubscription(account.purchasingCompany);
}

PurchasingCompany

company
Include information of the company of the logged in business customer.
```
Company
```
location
Include information of the company location of the logged in business customer.
```
CompanyLocation
```

export interface PurchasingCompany {
  /**
   * Include information of the company of the logged in business customer.
   */
  company: Company;

  /**
   * Include information of the company location of the logged in business customer.
   */
  location?: CompanyLocation;
}

Company

id
Company ID.
```
string
```

export interface Company {
  /**
   * Company ID.
   */
  id: string;
}

CompanyLocation

id
Company location ID.
```
string
```

export interface CompanyLocation {
  /**
   * Company location ID.
   */
  id: string;
}

Was this section helpful?

Show Loyalty Banner

/* See the locales/en.default.json tab for the translation keys and values for this example */

import {

useAuthenticatedAccountCustomer,

useCustomer,

useI18n,

reactExtension,

} from '@shopify/ui-extensions-react/customer-account';

import {

Banner,

Link,

} from '@shopify/ui-extensions/customer-account';

export default reactExtension(

'customer-account.order-status.block.render',

() => <Extension />,

);

function Extension() {

const i18n = useI18n();

const authenticatedCustomer =

useAuthenticatedAccountCustomer();

const orderStatusCustomer = useCustomer();

if (

authenticatedCustomer?.id &&

orderStatusCustomer?.id?.endsWith(

authenticatedCustomer?.id,

)

) {

return (

<Link

to={'extension:manageLoyaltyPoints/'}

{i18n.translate('manageLoyaltyPoints')}

</Link>

</Banner>

);

}

return null;

}

examples

Show Loyalty Banner

React

/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  useAuthenticatedAccountCustomer,
  useCustomer,
  useI18n,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import {
  Banner,
  Link,
} from '@shopify/ui-extensions/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const authenticatedCustomer =
    useAuthenticatedAccountCustomer();
  const orderStatusCustomer = useCustomer();

  if (
    authenticatedCustomer?.id &&
    orderStatusCustomer?.id?.endsWith(
      authenticatedCustomer?.id,
    )
  ) {
    return (
      <Banner>
        <Link
          to={'extension:manageLoyaltyPoints/'}
        >
          {i18n.translate('manageLoyaltyPoints')}
        </Link>
      </Banner>
    );
  }
  return null;
}

JavaScript

/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  Link,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (
    root,
    {i18n, authenticatedAccount, buyerIdentity},
  ) => {
    const orderStatusCustomerId =
      buyerIdentity?.customer?.current?.id;

    const authenticatedCustomerId =
      authenticatedAccount?.customer?.current?.id;

    if (
      authenticatedCustomerId &&
      orderStatusCustomerId?.endsWith(
        authenticatedCustomerId,
      )
    ) {
      const link = root.createComponent(
        Link,
        {
          to: 'extension:manageLoyaltyPoints/',
        },
        i18n.translate('manageLoyaltyPoints'),
      );
      const app = root.createComponent(
        Banner,
        {},
        link,
      );
      root.appendChild(app);
    }
  },
);

locales/en.default.json

{
  "manageLoyaltyPoints": "Manage Loyalty Points"
}

Anchor to examplesExamples

Anchor to example-getting-the-company-and-location-of-the-customerGetting the company and location of the customer

You can access the company and location of the authenticated business customer to implement location specific logic.

Was this section helpful?

Getting the company and location of the customer

/* See the locales/en.default.json tab for the translation keys and values for this example */

import {

Banner,

extension,

} from '@shopify/ui-extensions/customer-account';

export default reactExtension(

'customer-account.order-index.block.render',

() => <Extension />,

);

function Extension() {

const i18n = useI18n();

const purchasingCompany =

useAuthenticatedAccountPurchasingCompany();

const companyLocationId =

purchasingCompany?.location?.id;

if (

companyLocationId &&

isLocationClosed(companyLocationId)

) {

return (

<Banner

status="warning"

title={i18n.translate(

'closedLocationMessage',

)}

);

}

return null;

}

function isLocationClosed(locationId: string) {

return true;

}

examples

Getting the company and location of the customer

description

You can access the company and location of the authenticated business customer to implement location specific logic.

React

/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default reactExtension(
  'customer-account.order-index.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const purchasingCompany =
    useAuthenticatedAccountPurchasingCompany();
  const companyLocationId =
    purchasingCompany?.location?.id;

  if (
    companyLocationId &&
    isLocationClosed(companyLocationId)
  ) {
    return (
      <Banner
        status="warning"
        title={i18n.translate(
          'closedLocationMessage',
        )}
      />
    );
  }
  return null;
}

function isLocationClosed(locationId: string) {
  return true;
}

JavaScript

/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
  Banner,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-index.block.render',
  (root, {i18n, authenticatedAccount}) => {
    const companyLocationId =
      authenticatedAccount?.purchasingCompany
        ?.current?.location?.id;

    if (
      companyLocationId &&
      isLocationClosed(companyLocationId)
    ) {
      const app = root.createComponent(Banner, {
        title: i18n.translate(
          'closedLocationMessage',
        ),
      });
      root.appendChild(app);
    }
  },
);

function isLocationClosed(locationId: string) {
  return true;
}

locales/en.default.json

{
  "closedLocationMessage": "This location is temporarily closed for inventory cleanup."
}

Authenticated AccountAPI

Anchor to standardapiStandardApi

Docs_Standard_AuthenticatedAccountApi

AuthenticatedAccount

Customer

PurchasingCompany

Company

CompanyLocation

Anchor to useAuthenticatedAccountCustomeruseAuthenticatedAccountCustomer()

Anchor to useAuthenticatedAccountCustomer-returnsReturns

UseAuthenticatedAccountCustomerGeneratedType

Customer

Anchor to useAuthenticatedAccountPurchasingCompanyuseAuthenticatedAccountPurchasingCompany()

Anchor to useAuthenticatedAccountPurchasingCompany-returnsReturns

UseAuthenticatedAccountPurchasingCompanyGeneratedType

PurchasingCompany

Company

CompanyLocation

examples

Show Loyalty Banner

React

JavaScript

locales/en.default.json

Anchor to examplesExamples

examples

Getting the company and location of the customer

description

React

JavaScript

locales/en.default.json

Authenticated Account
API

Anchor to useAuthenticatedAccountCustomer
useAuthenticatedAccountCustomer()

Anchor to useAuthenticatedAccountPurchasingCompany
useAuthenticatedAccountPurchasingCompany()