---
title: Money
description: The Money component renders a string of the Storefront API's MoneyV2 object according to the locale in the ShopifyProvider component.
api_version: 2026-04
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/2024-01/components/money
  md: https://shopify.dev/docs/api/hydrogen/2024-01/components/money.md
---

# Money

The `Money` component renders a string of the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the `locale` in the [`ShopifyProvider` component](https://shopify.dev/api/hydrogen/components/global/shopifyprovider). The component outputs a `<div>`. You can [customize this component](https://api/hydrogen/components#customizing-hydrogen-components) using passthrough props.

#### Props

* **data**

  **PartialDeep\<MoneyV2, {recurseIntoArrays: true}>**

  **required**

  An object with fields that correspond to the [Storefront API's MoneyV2 object](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2) or [Customer Account API's MoneyV2 object](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2).

* **as**

  **ComponentGeneric**

  An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.

* **measurement**

  **PartialDeep\<UnitPriceMeasurement, {recurseIntoArrays: true}>**

  A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2026-04/objects/unitpricemeasurement).

* **measurementSeparator**

  **ReactNode**

  Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`.

* **withoutCurrency**

  **boolean**

  Whether to remove the currency symbol from the output.

* **withoutTrailingZeros**

  **boolean**

  Whether to remove trailing zeros (fractional money) from the output.

### MoneyV2

Supports MoneyV2 from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10). This union type ensures Money component works with data from either API.

```ts
StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2
```

Examples

### Examples

* #### Example code

  ##### JavaScript

  ```jsx
  import {Money} from '@shopify/hydrogen';

  export default function ProductMoney({product}) {
    const price = product.variants.nodes[0].price;

    return <Money data={price} />;
  }
  ```

  ##### TypeScript

  ```tsx
  import {Money} from '@shopify/hydrogen';
  import type {Product} from '@shopify/hydrogen/storefront-api-types';

  export default function ProductMoney({product}: {product: Product}) {
    const price = product.variants.nodes[0].price;

    return <Money data={price} />;
  }
  ```

***

## Related

[- useMoney](https://shopify.dev/docs/api/hydrogen/2026-04/hooks/usemoney)

***