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.

Related

• GraphQL Customer Account API

Examples

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.

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

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;
}

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);
});

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;
}

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);
});