Question

How to show annual subscription price per month?

  • 20 August 2022
  • 9 replies
  • 985 views

Badge +4

Sorry if it was asked before, I searched but couldn’t find anything :(

What is the best way to calculate the price for annual subscription per month/week? I want to show user, how much he/she will pay for an annual subscription each month or week.

I see that there is a pricePerMonth property on StoreProduct and it calculates correctly, but it shows only the numbers, without currency symbols such as $.

Thank you!


9 replies

Userlevel 5
Badge +7

You will want to use the number formatting methods of the respective platform you are using, e.g., NSNumberFormatter on iOS or NumberFormat on Android. (If you are using a hybrid toolkit such as React Native or Flutter, they have methods / packages for this as well).

Badge +2

Is it possible to get Locale for StoreProduct? (on iOS)

Userlevel 5
Badge +7

You should be able to get the NumberFormatter from the StoreProduct, and you can get the locale from the NumberFormatter.

Badge +1

Isn’t this such a often used feature? I think it’s kind of cumbersome, that there is a localizedPriceString but for this I need to use a custom formatter.

Userlevel 5
Badge +8

@michst if you need to use a custom formatter, my advice would be to either: 

  • Get the locale from the formatter like Jens mentioned, and then create a formatter with the locale like we do here, or
  • Start with your formatter, and just set the locale and currency, again like in the example code. 

So in general the options are to either use the pricePerMonth with the priceFormatter provided in StoreProduct, or use the pricePerMonth with your own formatter, using the locale in the formatter within StoreProduct. 

 

Badge +2

Hi there, just to show some code related to what @Andy mentioned. For iOS, I achieved it the following way:

let formattedPrice: String
if package.packageType == .annual {
if
let pricePerMonth = package.storeProduct.pricePerMonth,
let priceFormatter = package.storeProduct.priceFormatter,
let localizedPricePerMonth = priceFormatter.string(from: pricePerMonth)
{
formattedPrice = "\(package.localizedPriceString) (\(localizedPricePerMonth)/month)"
} else {
formattedPrice = "\(package.localizedPriceString)"
}
} else {
formattedPrice = "\(package.localizedPriceString)/month"
}
Badge +2

Is it possible to get Locale for StoreProduct? (on iOS)

you can get the Locale from storeProduct by calling “storeProduct.priceFormatter.locale”

 

And it is not a good idea to read locale from the device or in any other way. My project is written in Objective-C and the following method would be helpful to get the pricePerMonth value with the storeProduct’s currency for annual package.

 

-(NSString *)getFormattedPriceValue:(RCPackage *)thePackage

{

    NSNumberFormatter *numberFormatter = [[NSNumberFormatter alloc] init];

    [numberFormatter setFormatterBehavior:NSNumberFormatterBehavior10_4];

    [numberFormatter setNumberStyle:NSNumberFormatterCurrencyStyle];

    [numberFormatter setLocale:thePackage.storeProduct.priceFormatter.locale];

    NSString *formattedMonthlyPrice = [numberFormatter stringFromNumber:thePackage.storeProduct.pricePerMonth];

    

    return formattedMonthlyPrice;

}

Badge +4

You will want to use the number formatting methods of the respective platform you are using, e.g., NSNumberFormatter on iOS or NumberFormat on Android. (If you are using a hybrid toolkit such as React Native or Flutter, they have methods / packages for this as well).

We’re using React Native, but would love to be able to use the exact same price formatter that you’re using in order to make sure it’s as expected. The alternative would be to use something like Intl but as someone mentioned:

...it is not a good idea to read locale from the device or in any other way.

So ideally, I would want a formatter available as part of `react-native-purchases` or to have the user locale available from the package, such as on the customer object.

I would like access to this priceFormatter in Dart as well. The Dart SDK only seems to provide the currency code (eg. “USD”). The NumberFormat class in Dart does not accept currency codes, only locale. In order format a calculated price in Dart one must translate the currency code to locale, or use an alternative formatter that accepts currency code.

Reply