Introduction
Clients utilizing Subscription Management + Billing have the ability to update the verbiage or copy of text displayed in the System templates during checkout directly in templates by adding their desired text to the relevant parts of the template.
In some cases, however, you are utilizing pre-defined variables in these templates, that contain information about terms, prices, or currencies of the individual offers shown during checkout.
In these cases, the copy and order of the text are the same for all Piano applications and thus can't be adjusted for example in the Localization dashboard for an individual application's language.
You can, however, utilize the replace and slice JavaScript methods to adjust the wording as needed.
The replace() method returns a new string with the value(s) replaced.
The slice() method selects elements in an array from a given start, up to a (not inclusive) given end.
Below you can find a few examples of how this can be done.
Modifying the term price variable
The out-of-the-box price variable for a term in your offer looks like this in the Checkout template:
{{terms[0].price}}
Now, if you have a term set up with a 10 USD per month billing period, the price would be displayed as $10.
To change the price display to contain USD instead of $, you would need to replace {{terms[0].price}} with the following code in the Checkout template:
{{terms[0].price.replace('$', 'USD ')}}
If you'd like to show the price without the currency, you can replace {{terms[0].price}} with the following:
{{terms[0].price.slice(1)}}
If you'd like to display USD instead of $ and have the decimal symbol changed from a dot to a comma, you would need to use this:
{{terms[0].price.replace('$', 'USD ').replace('.', ',')}}
If you'd like to change the order of the currency and the price amount displayed (i.e. you will see 10$ instead of $10 in our example), you can do so by using:
{{terms[0].price.replace('$', '')}} {{terms[0].chargeCurrency}}
If you'd like to use only the currency symbol, you can utilize:
{{terms[0].billingPlanTable[0].currency}}
Modifying the interval duration variable
Similarly, the following variable may be adjusted:
{{interval.duration}}
If the variable should contain "access" instead of "of access" (e.g. 7 days access instead of 7 days of access), you would need to replace it with this code:
{{interval.duration.replace('of access','access')}}
Modifying the interval price variable
If you'd like to change the wording for the interval price, you can do so by editing this variable:
{{interval.price)}}
If the variable should contain "transaction" instead of "payment", remove the word "one", and contain EUR instead of €, you will need to use:
{{interval.price.replace('payment','transaction').replace('one','').replace('EUR','€ ')}}
Please note, that as shown above you can utilize multiple replace and slice functions for one variable string.