Ghost provides a set of attributes that turn buttons into Stripe checkout flows. Allowing people to begin paying for your premium content on a monthly or yearly basis.

The following sections show how to use these HTML attributes and configure them to your needs.

Subscription plans

There are currently two types of member plans; Monthly and Yearly. These map respectively to monthly and yearly plans in your Stripe account. To find out how to connect a Stripe account check out our Taking payments documentation.

Once Stripe is properly configured with Ghost viewers can sign up to either of your plans via a single button. To enable the button add the attribute data-members-plan with a value of "Monthly" or "Yearly" to direct users to a unique Stripe payment form pre-filled with the selected plan:

<a href="javascript:" data-members-plan="Monthly">Monthly plan</a>

<a href="javascript:" data-members-plan="Yearly">Yearly plan</a>

That's it, your site can now accept paying members 🎉

The @price object

The @price helper exposes a series of attributes for displaying monthly and yearly plans set in Ghost admin:

• @price.monthly – The monthly plan price set
• @price.yearly – The yearly plan price set
• @price.currency – The currency set for plans as an ISO currency, currently supports USD, CAD, AUD, GBP and EUR
• @price.currency_symbol – The respective symbol for the currency set for plans (e.g. $, £, €)

A common use case would be to output the prices for member plans within the subscription plan buttons:

<a href="javascript:" data-members-plan="Monthly">
  Sign up for {{@price.currency_symbol}}{{@price.monthly}} ({{@price.currency}}) a month
</a>

<a href="javascript:" data-members-plan="Yearly">
  Sign up for {{@price.currency_symbol}}{{@price.yearly}} ({{@price.currency}}) a year
</a>

Button states

Whenever a subscription button is clicked it'll pass through a series of states, which are reflected in the HTML as classes. loading, success and error are applied when the Stripe token URL is loading, has been successfully generated or has hit an error.

Examples

<a href="javascript:" data-members-plan="Monthly" class="loading">Monthly plan</a>

<a href="javascript:" data-members-plan="Monthly" class="success">Monthly plan</a>

<a href="javascript:" data-members-plan="Monthly" class="error">Monthly plan</a>

Redirects

On top of directing prospective paying members to your monthly and yearly plans it's also possible to provide redirects depending on whether the payment is successful or cancelled.

Customising the flow of a transaction can enhance the experience for a newly paying member. People can be redirected to success and cancelled pages with data-members-success and data-members-cancel respectively:

<a href="javascript:"
  data-members-plan="Monthly"
  data-members-success="/payment-success/"
  data-members-cancel="/payment-cancel/"
>Monthly plan</a>

Signing out

Sometimes users want to ensure that their account is secure by signing out of their account after they finished viewing their members only content. Creating a sign out button can be done by applying a data attributed named data-members-signout to an <a> element:

<a href="javascript:" data-members-signout>Sign out</a>

Error messages

Error messages can be shown whenever a members form or subscription button causes an error. Showing the message can be done by adding a child element to the <form> or <a> element with the attribute data-members-error.

Example

<a href="javascript:" data-members-plan="Monthly">
  Monthly plan
  <p data-members-error><!-- error message will appear here --></p>
</a>

Next steps

For more information on setting up a Stripe account take a look at the requirements to launching a membership website with Ghost.

This concludes the theme development section in our Members guide. For full and extensive information about building themes for Ghost, head to the Handlebars themes docs. Next we'll take a look at some of the most popular integrations for Members in Ghost.