Solved

How do I configure free trial text on the paywall

  • 25 October 2021
  • 2 replies
  • 52 views

Badge

In the revenuecat documentation, the image of the example app has a string of text about a free trial.  However, in the demo app, I don’t see anything that handles free trials.  I do see some fields passed to me that I could use, but I have two questions. 

1. Does revenuecat add text based on free trials automatically?  Since I can’t find anything about them in the docs but the image shows it, I just want to confirm it isn’t happening by default.

  1. If I have to handle it manually, does anyone have a good example?  I’m working in react native, so I’m thinking something like this but just want to verify the fields are what I think they are before I publish.
{intro_price ? <text>Includes {intro_price_period} {intro_price_period_unit} {intro_price > 0 ? intro_price_string : 'free'} trial.  Cancel before {intro_price_period} and nothing will be billed.</text> : null}
icon

Best answer by Justin Handley 5 November 2021, 15:33

View original

2 replies

Userlevel 4
Badge +8

Hey @Justin Handley!

RevenueCat won’t automatically add any kind of free trial text to your paywall - you’ll want to check the intro price properties to determine if the product has a free trial. For example, if introPrice is null, the product doesn’t have an associated introductory price (like free trial).

If it’s not null, you’ll want to check the actual price property. If it’s 0, you should be able to assume it’s a free trial.

Badge

If anyone else runs into this problem in react, I tried to solve it for all scenarios.  Here is where I landed.

 function subscriptionDurationText() {
switch (purchasePackage.packageType) {
case PACKAGE_TYPE.WEEKLY:
return 'weekly'
case PACKAGE_TYPE.MONTHLY:
return 'monthly'
case PACKAGE_TYPE.TWO_MONTH:
return 'every two months'
case PACKAGE_TYPE.THREE_MONTH:
return 'quarterly'
case PACKAGE_TYPE.SIX_MONTH:
return 'bi-annually'
case PACKAGE_TYPE.ANNUAL:
return 'annually'
default:
return null
}
}

return (<Text> {`First ${getPluralString(
introPrice.periodUnit.toLowerCase(),
introPrice.periodNumberOfUnits,
false,
false,
true,
)} ${introPrice.price > 0 ? `for just ${introPrice.priceString}` : 'free'}.`}
</Text>
<Text>
{`Cancel within ${getPluralString(
introPrice.periodUnit.toLowerCase(),
introPrice.periodNumberOfUnits,
)} and pay nothing.`}
</Text>


)

getPluralString looks like this:

export function getPluralString(
s: string,
n: number,
useParens?: boolean,
showNumberAfter?: boolean,
hideSingular?: boolean,
) {
if (!n) {
n = 0
}
const number = (useParens ? '(' : '') + n + (useParens ? ') ' : '')
const string = s + (n !== 1 || showNumberAfter ? 's' : '')
function numberString() {
if (hideSingular && number === '1') {
return ''
}
return showNumberAfter ? ` ${number}` : `${number} `
}
return showNumberAfter ? string + numberString() : numberString() + string
}

This returns something like 

First month free. 

Cancel within 1 month and pay nothing.

or

First 3 weeks for just $29.95.

Cancel within 3 weeks and pay nothing.

Reply