---
title: useMoney
description: |2-

      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).
    
api_version: 2026-01
api_name: hydrogen-react
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'
---

# 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)**​)

`useMoney` must be a descendent of a `ShopifyProvider` component.

### Parameters

* **money**

  **MoneyV2**

  **required**

### Returns

* **UseMoneyValue**

  ### ### UseMoneyValue

  * **amount**

    **string**

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

  * **currencyCode**

    **CurrencyCode**

    The currency code from the `MoneyV2` object.

  * **localizedString**

    **string**

    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).

  * **original**

    **MoneyV2**

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

  * **parts**

    **NumberFormatPart\[]**

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

  * **withoutTrailingZeros**

    **string**

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

  * **withoutTrailingZerosAndCurrency**

    **string**

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

  * **currencyName**

    **string**

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

  * **currencyNarrowSymbol**

    **string**

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

  * **currencySymbol**

    **string**

    The currency symbol returned by `Intl.NumberFormat`.

### 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 useMoney 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
  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/api/hydrogen-react/components/money)