Checkout / My account templates

System templates are located under Manage → Templates → System and contain all of the templates that are used across your site. In contrast to offer templates, of which you can create an unlimited number and can be used in any place you want, there is only ever a single copy of system templates and they are used site-wide.

  • Default Offer - The default template shown if no templateId is passed to tp.offer.show
  • Checkout Style - Global CSS used during all of checkout
  • Checkout - Low-level checkout (must be enabled)
  • Checkout Components - Back button, next button, user header
  • Payment Components - Select a payment method, subscribe button
  • Promotion Components - Promo code input, apply button, remove button (must be enabled)
  • Provider Components - Low-level provider components
  • Term Components - Select which term to buy
  • Confirmation screen - Optionally shown immediately prior to completing checkout
  • Receipt - The receipt after completing checkout

There are also a few general system templates that you can customize as well:

  • Error screen - This is the error screen that displays if something went wrong; an invalid aid, UserRef, offer id, template id, etc.
  • Already has access - If the user is attempting to checkout and already has access to the resource, this screen displays.

Checkout

Checkout is comprised of several system templates and style, but fundamentally follows the same flow regardless of the offer or term or template on arrival. Once a user enters checkout, it follows this process.

Flow

Style

Checkout is used universally, and you can edit the style used throughout checkout by editing the Checkout Style template under Manage → Templates → System.

Per-Term Receipts

If you want to display different receipts to users based on the term that they purchased, you can use this approach using angular's ng-switch directive. The selectedTerm object is populated in the Receipt template, and you can perform the conditional logic based on the selectedTerm.termId.

<div ng-switch="selectedTerm.termId">
    <div ng-switch-when="TM7BZEBWZ1CF">
        Custom receipt
    </div>
    <div ng-switch-default>
        Default receipt
    </div>
</div>

Executing Javascript in the Receipt

If you want to execute arbitrary javascript in the Receipt template and only want it to fire after successful checkout, you can either register a complete callback following the instructions here, or you can leverage the flags.receiptActivated boolean.

<div ng-if="flags.receiptActivated" custom-script>
    // put this in the Receipt template
    // this will only execute after successful checkout
</div>

My Account

There are several system templates that control the layout and styling used for the My Account component.

  • My Account common components templates - Tabs, dropdown menu
  • My Account Help Components - Inquiries system if enabled
  • My Account Style - The global style used across My Account

Style

The My Account Style template can be modified to style the CSS used to style the entire My Account component.