Product
PublishingMembershipsIntegrationsThemesCustomersPricing
Developers
DocumentationInstall / SetupTheme DocsAPI Reference
Resources
About UsHelp CenterCommunity ForumProduct Updates

Members

Cancel links

Usage: {{cancel_link}}

Description

The {{cancel_link}} helper is designed to output links to cancel or continue a subscription, so that your members can manage their own subscriptions.

This helper wraps all of the internals needed to cancel an active subscription or to continue the subscription if it was previously canceled.

The helper must be used in the @member.subscriptions context, for example:

Usage Context
{{#foreach @member.subscriptions}} {{cancel_link}} {{/foreach}}

The HTML markup generated by this code looks like this:

Generated HTML
<a class="gh-subscription-cancel" data-members-cancel-subscription="sub_*****" href="javascript:">
    Cancel subscription
</a>
<span class="gh-error gh-error-subscription-cancel" data-members-error><!-- error message will appear here --></span>

Attributes

The {{cancel_link}} helper accepts a number of optional attributes:

  • class - defaults to gh-subscription-cancel
  • errorClass - defaults to gh-error gh-error-subscription-cancel
  • cancelLabel - defaults to Cancel subscription
  • continueLabel - defaults to Continue subscription

Here's an example of how you can use the helper with all of the attributes:

Usage
{{cancel_link
  class="cancel-link"
  errorClass="cancel-error"
  cancelLabel="Cancel!"
  continueLabel="Continue!"
}}

This would produce the following HTML for previously canceled subscription:

Generated HTML
<a class="cancel-link" data-members-continue-subscription="sub_*****" href="javascript:">
    Continue!
</a>
<span class="cancel-error" data-members-error><!-- error message will appear here --></span>

Here's an example of the {{cancel_link}} helper in use in the members-enabled theme Lyra within the account.hbs file.

It's used inside a {{#foreach @member.subscriptions}} loop which provides the helper the context needed to generate an appropriate link, and is surrounded by other useful information displayed to the member.

account.hbs
{{#foreach @member.subscriptions}}
    <div class="subscription">
        {{#if cancel_at_period_end}}
            <p>
                <strong class="subscription-expiration-warning">Your subscription will expire on {{date current_period_end format="DD MMM YYYY"}}.</strong> If you change your mind in the mean time you can turn auto-renew back on to continue your subscription.
            </p>
        {{else}}
            <p>
                Hey! You have an active {{@site.title}} account with access to all areas. Get in touch if have any problems or need some help getting things updated, and thanks for subscribing.
            </p>
        {{/if}}
        <div class="subscriber-details">
            <div class="subscriber-detail">
                <label class="subscriber-detail-label">Email address</label>
                <span class="subscriber-detail-content">{{@member.email}}</span>
            </div>
            <div class="subscriber-detail">
                <label class="subscriber-detail-label">Your plan</label>
                <span class="subscriber-detail-content">$<span class="plan-price">0</span>/{{plan.interval}}</span>
            </div>
            <div class="subscriber-detail">
                <label class="subscriber-detail-label">Card</label>
                <span class="subscriber-detail-content">**** **** **** {{default_payment_card_last4}}</span>
            </div>
            <div class="subscriber-detail">
                <label class="subscriber-detail-label">
                    {{#if cancel_at_period_end}}
                        Expires
                    {{else}}
                        Next bill date
                    {{/if}}
                </label>
                <span class="subscriber-detail-content">{{date current_period_end format="DD MMM YYYY"}}</span>
            </div>
            {{#contentFor "scripts"}}
            <script>
                $(document).ready(function () {
                    var planAmount = {{ plan.amount }} / 100;
                    $(".plan-price").html(planAmount);
                });
            </script>
            {{/contentFor}}
        </div>
        {{cancel_link}}
    </div>
{{/foreach}}
Theme Development

Member data

Theme Development

Recipes