Skip to main content
Solved

How do I configure free trial text on the paywall


Forum|alt.badge.img+1

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}

Best answer by Justin Handley

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.

View original
Did this post help you find an answer to your question?

2 replies

cody
RevenueCat Staff
Forum|alt.badge.img+8
  • RevenueCat Staff
  • 492 replies
  • November 5, 2021

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.


Forum|alt.badge.img+1
  • Author
  • Helper
  • 2 replies
  • Answer
  • November 5, 2021

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings