> Shopify Plus:
> [Checkout UI extensions](/docs/api/checkout-ui-extensions) that render on the information and shipping and payment steps in checkout are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan.




In this tutorial, you'll use [checkout UI extensions](/docs/api/checkout-ui-extensions) to create a custom B2B checkout experience that renders the content of a banner based on the customer type (B2B or D2C), company metafields, and whether completing the checkout results in submitting a draft order.

## What you'll learn

In this tutorial, you'll learn how to do the following tasks:

- Use the [`usePurchasingCompany`](/docs/api/checkout-ui-extensions/unstable/react-hooks/buyer-identity/usepurchasingcompany) hook to identify business customers.

- Use the [`useCheckoutSettings`](/docs/api/checkout-ui-extensions/unstable/react-hooks/metadata/usecheckoutsettings) hook to identify draft order checkouts.

- Get familiar with using `Company` and `CompanyLocation` metafields.

- Deploy your extension code to Shopify.

## Requirements

- You've created a [Partner account](https://www.shopify.com/partners).

- You've created a new [development store](/docs/api/development-stores) with the following:
    - [Generated test data](/docs/api/development-stores/generated-test-data)
    - [Checkout and Customer Accounts Extensibility](/docs/api/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview) developer preview enabled

- You've [created an app that uses Shopify CLI 3.0 or higher](/docs/apps/build/scaffold-app).


- You've requested access to [protected customer data](/docs/apps/launch/protected-customer-data#request-access-to-protected-customer-data).

## Sample code

The sample code imports API hooks that provide b2b context to customize the checkout.

You can copy and paste the following code into your `index` file and add a few example values to get the extension to render in the browser. 
The rest of the tutorial walks through this sample code step-by-step.



```jsx
import React from "react";
import {
  Banner,
  BlockStack,
  useCustomer,
  useAppMetafields,
  usePurchasingCompany,
  useCheckoutSettings,
} from "@shopify/ui-extensions-react/checkout";

export function App() {

  const metafields = useAppMetafields();
  const isHighValueClient = metafields.some(entry =>
    entry.target.type === 'company' &&
    entry.metafield.key === 'high_value' &&
    entry.metafield.value === 'true'
  );

  const customer = useCustomer();
  const checkoutSettings = useCheckoutSettings();
  const purchasingCompany = usePurchasingCompany();

  // If there isn't a purchasing company, then Shopify handles a D2C buyer checkout.
  // In this case, you don't want to render anything.
  if(!purchasingCompany) {
    return null;
  }

  if(checkoutSettings.orderSubmission === 'ORDER') {
   return null;
  }

  if(checkoutSettings.orderSubmission === 'DRAFT_ORDER') {
    const message = isHighValueClient ?
      `${customer.firstName}, even during the holidays we will serve ${purchasingCompany.company.name} promptly, expect the usual turnaround time of 2-3 business days.` :
      `Sorry ${customer.firstName}, there will be delays in draft order reviews during this holiday season. Expect a turnaround time of 5-10 business days.`
    const status = isHighValueClient ? 'info' : 'warning';

    return (
      <Banner status={status} title="Holiday impacts on draft orders">{message}</Banner>
    );
  }

  return null;
}
```



## Step 1: Create a checkout UI extension

> Note:
> If you already have a checkout UI extension that you want to add a custom banner to, then you can skip to [step 2](#step-2-import-components).

To create a checkout UI extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.

1. Navigate to your app directory:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTcd <directory>
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


1. Run the following command to create a new checkout UI extension:

    <p>
        <div class="react-code-block" data-preset="terminal">
        <div class="react-code-block-preload ThemeMode-dim">
        <div class="react-code-block-preload-bar "></div>
        <div class="react-code-block-preload-placeholder-container">
        <div class="react-code-block-preload-code-container">
        <div class="react-code-block-preload-codeline-number"></div>
        <div class="react-code-block-preload-codeline"></div>
        </div>

        </div>
        </div>


        <script type="text/plain" data-language="bash">
        RAW_MD_CONTENTshopify app generate extension --template checkout_ui --name my-checkout-ui-extension
        END_RAW_MD_CONTENT</script>

        </div>
        </p>


1. Select a language for your extension. You can choose from TypeScript, JavaScript, TypeScript React, or JavaScript React.

    > Tip:
    > TypeScript or JavaScript is suitable for smaller projects that require a more straightforward API. TypeScript React or JavaScript React is suitable when you want an easy model for mapping state updates to UI updates. With JavaScript or TypeScript, you need to map state updates yourself. This process is similar to writing an application targeting the DOM, versus using `react-dom`.

    You should now have a new extension directory in your app's directory. The extension directory includes the extension script at `src/index.{file-extension}`. The following is an example directory structure:

    <p>
    <div class="react-code-block" data-preset="file">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>

    <script data-option="filename" data-value="Checkout UI extension file structure"></script>

    <script type="text/plain" data-language="none">
    RAW_MD_CONTENT└── my-app
      └── extensions
        └── my-checkout-ui-extension
            ├── src
            │   └── Checkout.jsx OR Checkout.js // The index page of the checkout UI extension
            ├── locales
            │   ├── en.default.json // The default locale for the checkout UI extension
            │   └── fr.json // The locale file for non-regional French translations
            ├── shopify.extension.toml // The config file for the checkout UI extension
            └── package.json
    END_RAW_MD_CONTENT</script>

    </div>
    </p>




1. Start your development server to build and preview your app:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTshopify app dev 
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


    To learn about the processes that are executed when you run `dev`, refer to the [Shopify CLI command reference](/docs/api/shopify-cli/app/app-dev).

1. Press `p` to open the developer console. In the developer console page, click on the preview link for your extension.


## Step 2: Import components

In the `index` file, import the components from the [Checkout UI extensions API](/docs/api/checkout-ui-extensions#ui-components) that you need to build the extension:


```jsx?title: 'src/index.jsx'
import React from "react";
import {
  Banner,
  BlockStack,
  useCustomer,
  useAppMetafields,
  usePurchasingCompany,
  useCheckoutSettings,
} from "@shopify/ui-extensions-react/checkout";
```

```js?title: 'src/index.js'
import {
  extension,
  Banner,
  BlockStack,
} from "@shopify/ui-extensions/checkout";
```



## Step 3: Set up the targets

The [`purchase.checkout.block.render`](/docs/api/checkout-ui-extensions/latest/apis/extensiontargets) target enables merchants to control where the extension is rendered in checkout. In the following example, the `ORDER_SUMMARY4` placement is used so that the extension appears after the order summary:


```jsx?title: 'src/Checkout.jsx'
// Set up the entry point for the extension
export default reactExtension("purchase.checkout.block.render", () => <App />);
```

```js?title: 'src/Checkout.js'
// Set up the entry point for the extension
export default extension("purchase.checkout.block.render", (root, { metafields, purchasingCompany, checkoutSettings }) => {
  // App logic goes here
})
```



> Tip:
> You can adjust where dynamic targets display in checkout by appending `?placement-reference={name}` to the checkout URL that's outputted by Shopify CLI. `{name}` represents a [supported location](/docs/api/checkout-ui-extensions/latest/extension-targets-overview#dynamic-extension-targets) for dynamic targets. For example, `?placement-reference=ORDER_SUMMARY4`.



## Step 4: Configure the metafields

Now that you've set up extension points, you can make metafields available by configuring [shopify.extension.toml](/docs/api/checkout-ui-extensions/checkout/configuration#metafields) to access the `customer`, `company`, `companyLocation` metafields in the extension.


```toml

...
# The metafields for the extension
[[extensions.metafields]]
namespace = "custom"
key = "high_value"

...

```



In the following example, the extension reads the merchant configured `company` metafield from [`appMetafields`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-appmetafields) to determine whether the company has spent a certain amount of money (`high_value`).



```jsx?title:'src/index.jsx'

...

export function App() {

  // Use the merchant-defined metafields
  const metafields = useAppMetafields();
  const isHighValueClient = metafields.some(entry =>
    entry.target.type === 'company' &&
    entry.metafield.key === 'high_value' &&
    entry.metafield.value === 'true'
  );
  ...
}

```

```js?title:'src/index.js'
...
function renderApp(root, { metafields }) {
  // Use the merchant-defined metafields

  const isHighValueClient = metafields.some(entry =>
    entry.target.type === 'company' &&
    entry.metafield.key === 'high_value' &&
    entry.metafield.value === 'true'
  );
  ...
}
```




## Step 5: Identify a business customer

You can use the [`usePurchasingCompany`](/docs/api/checkout-ui-extensions/unstable/react-hooks/buyer-identity/usepurchasingcompany) hook to identify whether a checkout is a B2B checkout. The `usePurchasingCompany` hook enables you to display tailored messages to B2B customers or hide information from D2C customers.


```jsx?title:'src/index.jsx'
...
function App() {
  ...
  const purchasingCompany = usePurchasingCompany();

  if(!purchasingCompany) {
    return null;
  }

  ...

  // Render the banner
  return (
    <Banner status={status} title="Holiday impacts on draft orders">{message}</Banner>
  );
}
```

```js?title:'src/index.js'
...
function renderApp(root, { purchasingCompany }) {
  ...

  if(!purchasingCompany) {
    return null;
  }

  // Render the banner
  const app = root.createComponent(
    Banner,
    {
      "Holiday impacts on draft orders",
      status,
    },
    [message]
  );

  root.appendChild(app);
}
```



## Step 6: Identify a draft order checkout
You can use the [`useCheckoutSettings`](/docs/api/checkout-ui-extensions/unstable/react-hooks/metadata/usecheckoutsettings) hook to identify whether a checkout is a draft order checkout. Draft orders require merchant review, so you can inform the B2B buyers with a customized message about the type of checkout they're on.


```jsx?title:'src/index.jsx'
...
function App() {
  ...

  const checkoutSettings = useCheckoutSettings();

  if(checkoutSettings.orderSubmission === 'ORDER') {
   return null;
  }

  if(checkoutSettings.orderSubmission === 'DRAFT_ORDER') {
    const message = isHighValueClient ?
      `${customer.firstName}, even during the holidays we will serve ${purchasingCompany.company.name} promptly, expect the usual turnaround time of 2-3 business days.` :
      `Sorry ${customer.firstName}, there will be delays in draft order reviews during this holiday season. Expect a turnaround time of 5-10 business days.`
    const status = isHighValueClient ? 'info' : 'warning';

  ...

  // Render the banner
  return (
    <Banner status={status} title="Holiday impacts on draft orders">{message}</Banner>
  );
}
```

```js?title:'src/index.js'
...
function renderApp(root, { checkoutSettings, purchasingCompany }) {
  ...

  if(checkoutSettings.orderSubmission === 'ORDER') {
   return null;
  }

  if(checkoutSettings.orderSubmission === 'DRAFT_ORDER') {
    const message = isHighValueClient ?
      `${customer.firstName}, even during the holidays we will serve ${purchasingCompany.company.name} promptly, expect the usual turnaround time of 2-3 business days.` :
      `Sorry ${customer.firstName}, there will be delays in draft order reviews during this holiday season. Expect a turnaround time of 5-10 business days.`
    const status = isHighValueClient ? 'info' : 'warning';

  // Render the banner
  const app = root.createComponent(
    Banner,
    {
      "Holiday impacts on draft orders",
      status,
    },
    [message]
  );

  root.appendChild(app);
}
```




## Step 7: Deploy the UI extension

When you're ready to release your changes to users, you can create and release an [app version](/docs/apps/launch/deployment/app-versions). An app version is a snapshot of your app configuration and all extensions.

 You can have up to 50 checkout UI extensions in an app version.



1. Navigate to your app directory.
2. Run the following command.

    Optionally, you can provide a name or message for the version using the `--version` and `--message` flags.

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTshopify app deploy 
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.



> Tip:
> If you want to create a version, but avoid releasing it to users, then run the `deploy` command with a `--no-release` flag.
>
> You can release the unreleased app version using Shopify CLI's [`release`](/docs/api/shopify-cli/app/app-release) command, or through the Partner Dashboard.



## Troubleshooting

This section describes how to solve some potential errors when you run `dev` for an app that contains a checkout UI extension.

### Property token error

If you receive the error `ShopifyCLI:AdminAPI requires the property token to be set`, then you'll need to use the [`--checkout-cart-url` flag](/docs/api/shopify-cli/app/app-dev#flags) to direct Shopify CLI to open a checkout session for you.

  <p>
  <div class="react-code-block" data-preset="terminal">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar "></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>


  <script type="text/plain" data-language="bash">
  RAW_MD_CONTENTshopify app dev --checkout-cart-url cart/{product_variant_id}:{quantity}
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


### Missing checkout link

If you don't receive the test checkout URL when you run `dev`, then verify the following:

- You have a development store populated with products.

- You're logged in to the correct Partners organization and development store. To verify, check your app info using the following command:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTshopify app info 
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


Otherwise, you can manually create a checkout with the following steps:

1. From your development store's storefront, add some products to your cart.

1. From the cart, click **Checkout**.

1. From directory of the app that contains your extension, run `dev` to preview your app:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTshopify app dev 
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


1. On the checkout page for your store, change the URL by appending the `?dev=https://{tunnel_url}/extensions` query string and reload the page. The `tunnel_url` parameter allows your app to be accessed using a unique HTTPS URL.

    You should now see a rendered order note that corresponds to the code in your project template.


## Next steps

- Learn about [the components that are available in checkout UI extensions](/docs/api/checkout-ui-extensions/components).
- Consult the API reference for [checkout UI targets](/docs/api/checkout-ui-extensions/latest/apis/extensiontargets) and their respective types.