---
title: useMoney
description: The useMoney hook takes a MoneyV2 object and returns a
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/latest/hooks/usemoney'
  md: 'https://shopify.dev/docs/api/hydrogen-react/latest/hooks/usemoney.md'
api_name: hydrogen-react
---

# use​Money

The `useMoney` hook takes a [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) and returns a default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

## use​Money(**[money](#props-propertydetail-money)**​)

The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2) or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat). Uses `locale` from `ShopifyProvider`  

### Parameters

* **money**

  **MoneyV2**

  **required**

### Returns

* **UseMoneyValue**

### 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
```

### UseMoneyValue

* amount

  The localized amount, without any currency symbols or non-number types from the \`Intl.NumberFormat.formatToParts\` parts.

  ```ts
  string
  ```

* currencyCode

  The currency code from the \`MoneyV2\` object.

  ```ts
  CurrencyCode
  ```

* currencyName

  The name for the currency code, returned by \`Intl.NumberFormat\`.

  ```ts
  string
  ```

* currencyNarrowSymbol

  The currency narrow symbol returned by \`Intl.NumberFormat\`.

  ```ts
  string
  ```

* currencySymbol

  The currency symbol returned by \`Intl.NumberFormat\`.

  ```ts
  string
  ```

* localizedString

  A string returned by \`new Intl.NumberFormat\` for the amount and currency code, using the \`locale\` value in the \[\`LocalizationProvider\` component]\(https://shopify.dev/api/hydrogen/components/localization/localizationprovider).

  ```ts
  string
  ```

* original

  The \`MoneyV2\` object provided as an argument to the hook.

  ```ts
  MoneyV2
  ```

* parts

  All parts returned by \`Intl.NumberFormat.formatToParts\`.

  ```ts
  Intl.NumberFormatPart[]
  ```

* withoutTrailingZeros

  A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains. For example, \`$640.00\` turns into \`$640\`. \`$640.42\` remains \`$640.42\`.

  ```ts
  string
  ```

* withoutTrailingZerosAndCurrency

  A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains. For example, \`$640.00\` turns into \`640\`. \`$640.42\` turns into \`640.42\`.

  ```ts
  string
  ```

### CurrencyCode

Supports CurrencyCode 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 useMoney works with data from either API.

```ts
StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode
```

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {useMoney, ShopifyProvider} from '@shopify/hydrogen-react';

  export function App() {
    return (
      <ShopifyProvider languageIsoCode="EN" countryIsoCode="US">
        <UsingMoney />
      </ShopifyProvider>
    );
  }

  function UsingMoney() {
    const myMoney = {amount: '100', currencyCode: 'USD'};
    const money = useMoney(myMoney);
    return (
      <>
        <div>Localized money: {money.localizedString}</div>
        <div>Money without trailing zeros: {money.withoutTrailingZeros}</div>
      </>
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {useMoney, ShopifyProvider} from '@shopify/hydrogen-react';
  import type {MoneyV2} from '@shopify/hydrogen-react/storefront-api-types';

  export function App() {
    return (
      // @ts-expect-error intentionally missing the rest of the props
      <ShopifyProvider countryIsoCode="US" languageIsoCode="EN">
        <UsingMoney />
      </ShopifyProvider>
    );
  }

  function UsingMoney() {
    const myMoney = {amount: '100', currencyCode: 'USD'} satisfies MoneyV2;
    const money = useMoney(myMoney);
    return (
      <>
        <div>Localized money: {money.localizedString}</div>
        <div>Money without trailing zeros: {money.withoutTrailingZeros}</div>
      </>
    );
  }
  ```

***

## Related

[Money](https://shopify.dev/docs/api/hydrogen-react/2026-04/components/money)

***