Payment Terms Block

How It Works

1. This block (and technically any other block on Paywall) contains HTML code that can be used to show properties of a selected Price
2. The content is updated when the user selects a price
3. It shows/hides content conditionally based on whether values exist

HTML elements Data Attributes

data-price-fill="property" – Fill this element with Price property

Populates the element's HTML content with the specified property value.

<span data-price-fill="priceCurrentCurrency">$9.99</span>
<span data-price-fill="period_name">month</span>

data-price-fill-toggle="property"– Show this element only if property has value

Shows the element only if the property has a value (truthy).

<span data-price-fill-toggle="freePeriodDescr">
  You have a <span data-price-fill="freePeriodDescr">7 days free</span> trial
</span>

data-price-fill-toggle-not="property"– Hide this element only if property has value

Shows the element only if the property has no value (falsy).

<span data-price-fill-toggle-not="freePeriodDescr">
  No free trial available
</span>

Available Properties

These properties are filled into [data-price-fill] elements when the user selects a price. Values use the active currency (auto-detected or the price’s primary currency). Empty values hide both the fill element and any data-price-fill-toggle wrapper.

Price amounts

Comparison (per day / week / month / year)

The comparison period comes from the paywall comparison period setting. Typical use: show a yearly plan as “just $X per month”.

Discounts and special offers

Trial and billing period

Currency and plan

Snake_case aliases

The same values are also exposed under these names (handy in templates that use snake_case):

Every field of the selected price itself is available too (for example id, amount, amount_real, currency, period, period_interval, discount_percent, trial_free_period_length_in_days).

Paywall price overrides (custom old price, title, checkout discount label) are applied on top of these values before the HTML is filled. Each property is also available with an _original suffix (priceOld_original, …), which holds the value before overrides.

Usage Examples

Basic Payment Terms

<div class="payment-terms">
  <p>
    You will be charged <span data-price-fill="priceCurrentCurrency">$9.99</span> 
    every <span data-price-fill="period_name">month</span> until you cancel.
  </p>
</div>

With Free Trial

<div class="payment-terms">
  <p>
    <span data-price-fill-toggle="freePeriodDescr">
      Start your <span data-price-fill="freePeriodDescr">7 days free</span> trial, 
      then 
    </span>
    <span data-price-fill="priceCurrentCurrency">$9.99</span> 
    per <span data-price-fill="period_name">month</span>.
  </p>
</div>

With Discount Information

<div class="payment-terms">
  <p>
    <span data-price-fill-toggle="priceOld">
      <s data-price-fill="priceOld">$19.99</s> 
    </span>
    <span data-price-fill="priceCurrentCurrency">$9.99</span>
    <span data-price-fill-toggle="priceDiffPositive">
      (Save <span data-price-fill="priceDiffPositive">$10.00</span>)
    </span>
    per <span data-price-fill="period_name">month</span>
  </p>
</div>

Complete Terms Example

<div class="payment-terms">
  <p>
    Without cancellation,
    
    <span data-price-fill-toggle="freePeriodDescr">
      before the <span data-price-fill="freePeriodDescr">7 days free</span> trial ends,
    </span>
    
    <span data-price-fill-toggle-not="freePeriodDescr">
      before the selected discounted intro plan ends,
    </span>
    
    I accept that the service will automatically charge 
    <span data-price-fill="priceCurrentCurrency">$9.99</span> 
    every <span data-price-fill="period_name">month</span> 
    until I cancel.
    
    <span data-price-fill-toggle="next_charge_date">
      Next charge: <span data-price-fill="next_charge_date">15 December 2024</span>
    </span>
  </p>
</div>

Comparison Pricing

<div class="payment-terms">
  <p>
    <span data-price-fill="priceCurrentCurrency">$29.99</span> per year
    <span data-price-fill-toggle="priceCurrentComparison">
      (Just <span data-price-fill="currency_symbol">$</span><span data-price-fill="priceCurrentComparison">2.50</span> per month)
    </span>
  </p>
</div>

Positive savings amount (no minus in the value)

priceDiff is already prefixed with -. If you need to control the sign in HTML, use priceDiffPositive:

<div class="payment-terms">
  <p>
    You save <span data-price-fill="priceDiffPositive">$10.00</span>
    (<span data-price-fill="discountPercentNegative">-50</span>%)
  </p>
</div>

Intro / paid trial then regular price

<div class="payment-terms">
  <p>
    Pay <span data-price-fill="priceCurrentCurrency">$29.99</span>
    today, then <span data-price-fill="priceBase">$59.99</span>
    starting <span data-price-fill="next_charge_date">15 December 2024</span>
    per <span data-price-fill="mainPeriodName">month</span>.
  </p>
</div>

Implementation Notes

1. Automatic Updates: The content updates automatically when users select different pricing plans.
2. Conditional Display: Use toggle attributes to show/hide content based on plan features. Empty values ("", 0) hide [data-price-fill] elements as well — so priceCurrent of 0 during a free trial hides that element. Prefer priceCurrentCurrency ($0) or wrap trial copy in data-price-fill-toggle="freePeriodDescr".
3. Localization: Trial and period labels (7 days free, period names, One-time payment) are localized.
4. Currency Support: Amounts with a *Currency suffix include the active currency symbol (currency_symbol / currency_code).
5. Trial Handling: Free trials set freePeriodDescr, trialPeriodInDays, priceCurrent to 0, and next_charge_date to today + trial days.
6. Paid intro offers: price_has_paid_trial is 1, priceCurrent / priceCurrentCurrency hold the intro amount, priceOld and priceBase hold the regular price, and next_charge_date is today plus the intro period.
7. period_number: Empty whenever the plan period name contains 1 (including 1 month and 12 months). Use period_name when you need the full label.