API Reference
Start typing to search…

Payment Terms Block

The Payment Terms block is a dynamic content component that displays subscription pricing information and terms. It automatically updates based on the selected pricing plan and uses data attributes to populate content and control visibility.


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 user selects the prices
  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

PropertyDescriptionExample Values
priceCurrentCurrent price amount (number)9.99, 0 (for trials)
priceCurrentCurrencyCurrent price with currency symbol$9.99, €12.50, £8.99
priceOldOriginal price (before discount)$19.99, "" (if no discount)
priceBaseBase price with currency$9.99
priceCurrentComparisonPrice for comparison period29.97 (for 3 months)
specialOfferTextSpecial offer description50% OFF, ""
pricePeriodDescrPrice description$9.99, One-time payment
freePeriodDescrFree trial description7 days free, 30 days free,
priceDiffPrice difference (savings)-$10.00, ""
discountPercentDiscount percentage50, 25, 0
period_nameBilling period namemonth, year, 3 months, 1 week
period_numberPeriod number only3, 12, "" (for single periods)
next_charge_dateNext billing date15 December 2024
mainPeriodNameOriginal period namemonth, year

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="discountPercent">
      (Save <span data-price-fill="discountPercent">50</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="priceCurrentComparison">$2.50</span> per 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
  3. Localization: All text content supports localization through the __() function
  4. Currency Support: Prices automatically include the appropriate currency symbol
  5. Trial Handling: Free trial periods are handled with freePeriodDescr and show $0 pricing during trial