We’ve migrated our documentation to a new site, which means some URLs have changed.
Subscriptions

Can I Access Linked Term Custom Data in a Lightweight Template?

Yes. Linked Term custom data is exposed on the term object in Lightweight Templates. To access a custom data field, use the following path and replace customKey with the actual key name you defined on the Linked Term in the dashboard:

term.linkedTermData.customData.customKey

For example, if you have a custom data key called period storing the string "1 month", you would access it as term.linkedTermData.customData.period.

This pattern works for both flat values (strings, numbers) and nested objects. For example, a custom data entry called price stored as {"amount": 11.99, "currency": "USD"} can be unpacked directly:

term.linkedTermData.customData.price.currency
term.linkedTermData.customData.price.amount

Background — Linked Terms and Custom Data

Linked Terms allow Piano to mirror subscriptions managed by an external system, while still using Piano for access control, paywalls, and offer presentation. Each Linked Term in the Piano dashboard supports a Custom Data section where you can store arbitrary key-value pairs — pricing details, descriptions, upgrade IDs, or any other metadata your templates need to render.

Until now, this custom data was straightforward to access in Classic templates but the path for Lightweight Templates wasn't documented. The path above (term.linkedTermData.customData.customKey) is the equivalent for LWT and works the same way for both simple values and structured objects.

Example Template Snippet

The following Lightweight Template renders a term list where each term shows its name and the price (currency + amount) pulled from the Linked Term's custom data:

HTML
<For each={context.termList}>
  {(term, index) => (
    <li class="pn-offer-term">
      <div class="pn-offer-term-information">
        <span class="pn-offer-term-name">{term.name}</span><br/>
        <span class="pn-offer-term-name">
          {term.linkedTermData.customData.price.currency}
          &nbsp;
          {term.linkedTermData.customData.price.amount}
        </span>
      </div>
      <div class="pn-offer-term-actions">
        <PianoStartCheckoutButton
          term={term}
          class="pn-offer-term-actions-checkout"
          externalEventName={`offer-subscribe-${index()}`}
        >
          {context.getButtonText(term)}
        </PianoStartCheckoutButton>
      </div>
    </li>
  )}
</For>

Where the Custom Data Structure Is Defined

The structure of the custom data is determined by the keys you configure on the Linked Term itself in the Piano dashboard, under the term's Custom data section (Manual or Code tab). Whatever keys you define there — flat values, JSON objects, or arrays — become accessible at term.linkedTermData.customData.key in your Lightweight Template.

Key Points

  • Path: Always prefix with term.linkedTermData.customData., then append the custom data key.

  • Flat values: Accessed directly, e.g., term.linkedTermData.customData.period returns "1 month".

  • Nested objects: Accessed with dot notation, e.g., term.linkedTermData.customData.price.amount.

  • Arrays: Accessible too, but note that JSX rendering requires either iteration () or explicit indexing.

  • Only for Linked Terms: This path is specific to Linked Terms. Payment Terms and Dynamic Terms expose their own properties on term.* directly without the linkedTermData namespace.

Last updated: