---
title: Customer Account API
description: >-
  Create unique customer experiences with the Customer Account API. The API
  offers a full range of options making it possible for customers to view their
  orders, manage their profile and much more.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/account-apis/customer-account-api
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/account-apis/customer-account-api.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-10/upgrading-to-2025-10) to upgrade your extension.

# Customer Account API

Create unique customer experiences with the Customer Account API. The API offers a full range of options making it possible for customers to view their orders, manage their profile and much more.

Examples

### Examples

* #### Accessing the Customer Account API with fetch()

  ##### Description

  You can access the \[Customer Account GraphQL API]\(/docs/api/customer) using the global \`fetch()\`.

  ##### React

  ```jsx
  import React, { useEffect, useState } from "react";
  import {
    Banner,
    reactExtension,
    useTranslate,
  } from "@shopify/ui-extensions-react/customer-account";

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

  function BlockExtension() {
    const [customerName, setCustomerName] = useState("");
    const translate = useTranslate();
    const getCustomerNameQuery = {
      query: `query {
        customer {
          firstName
        }
      }`
    };

    useEffect(() => {
      fetch("shopify://customer-account/api/unstable/graphql.json",
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(getCustomerNameQuery),
        }).then((response) => response.json())
        .then(({data: { customer: {firstName}}}) => {
          setCustomerName(firstName)
        }).catch(console.error);
    });

    return customerName ? (
      <Banner>{translate('welcomeMsg', {name: customerName})}</Banner>
    ): null;
  }
  ```

  ##### JavaScript

  ```js
  import React from "react";
  import {
    Banner,
    extension,
  } from "@shopify/ui-extensions-react/customer-account";

  export default extension(
    "customer-account.order-status.block.render",
    (root, api) => {
    const getCustomerNameQuery = {
      query: `query {
        customer {
          firstName
        }
      }`
    };

    fetch("shopify://customer-account/api/unstable/graphql.json",
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(getCustomerNameQuery),
      }).then((response) => response.json())
      .then(({data: {customer: {firstName}}}) => {
        if (firstName) {
          root.appendChild(root.createComponent(Banner, {}, `${api.i18n.translate('welcomeMsg', {name: firstName})}` ));
        }
      }).catch(console.error);
  });
  ```

## Related

[Navigate to - GraphQL Customer Account API](https://shopify.dev/docs/api/customer)