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
)

The useMoney hook takes a MoneyV2 object from the Storefront API or a MoneyV2 object from the Customer Account API and returns a default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by Intl.NumberFormat. Uses locale from ShopifyProvider

Anchor to useMoney-parametersParameters

Anchor to money money required

Anchor to useMoney-returnsReturns

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.

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

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.

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

Anchor to RelatedRelated

Money

Was this page helpful?

Anchor to useMoneyuseMoney(moneymoney)

Anchor to useMoney-parametersParameters

Anchor to useMoney-returnsReturns

MoneyV2

UseMoneyValue

CurrencyCode

Examples

Example code

Description

JavaScript

TypeScript

Anchor to RelatedRelated

Anchor to useMoney
useMoney(
money
)