Choose a version:

useMoney

The useMoney hook takes a MoneyV2 object and returns a default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by Intl.NumberFormat.

Anchor to useMoney
useMoney(
money
)

useMoney must be a descendent of a ShopifyProvider component.

Anchor to useMoney-parametersParameters

Anchor to money money required

Anchor to useMoney-returnsReturns

UseMoneyValue

amount string: The localized amount, without any currency symbols or non-number types from the Intl.NumberFormat.formatToParts parts.
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.
original: 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-07, but Storefront API doesn't support USDC in 2025-07). This union type ensures useMoney works with data from either API.

StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2

UseMoneyValue

amount
The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.
```
string
```
currencyCode
The currency code from the `MoneyV2` object.
```
CurrencyCode
```
currencyName
The name for the currency code, returned by `Intl.NumberFormat`.
```
string
```
currencyNarrowSymbol
The currency narrow symbol returned by `Intl.NumberFormat`.
```
string
```
currencySymbol
The currency symbol returned by `Intl.NumberFormat`.
```
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).
```
string
```
original
The `MoneyV2` object provided as an argument to the hook.
```
MoneyV2
```
parts
All parts returned by `Intl.NumberFormat.formatToParts`.
```
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`.
```
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`.
```
string
```

{
  /**
   * The currency code from the `MoneyV2` object.
   */
  currencyCode: CurrencyCode;
  /**
   * The name for the currency code, returned by `Intl.NumberFormat`.
   */
  currencyName?: string;
  /**
   * The currency symbol returned by `Intl.NumberFormat`.
   */
  currencySymbol?: string;
  /**
   * The currency narrow symbol returned by `Intl.NumberFormat`.
   */
  currencyNarrowSymbol?: string;
  /**
   * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.
   */
  amount: string;
  /**
   * All parts returned by `Intl.NumberFormat.formatToParts`.
   */
  parts: Intl.NumberFormatPart[];
  /**
   * 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).
   */
  localizedString: string;
  /**
   * The `MoneyV2` object provided as an argument to the hook.
   */
  original: MoneyV2;
  /**
   * 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`.
   */
  withoutTrailingZeros: 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`.
   */
  withoutTrailingZerosAndCurrency: 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-07, but Storefront API doesn't support USDC in 2025-07). This union type ensures useMoney works with data from either API.

StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode

Examples

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

export function App() {

return (

</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>

</>

);

}

Examples

Example code

Description

I am the default example

JavaScript

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

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