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:

<button role="link" data-members-plan="Monthly">Monthly plan</button>

<button role="link" data-members-plan="Yearly">Yearly plan</button>

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

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

<button data-members-plan="Monthly" class="loading">Monthly plan</button>

<button data-members-plan="Monthly" class="success">Monthly plan</button>

<button data-members-plan="Monthly" class="error">Monthly plan</button>

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:

<button role="link"
  data-members-plan="Monthly"
  data-members-success="/payment-success/"
  data-members-cancel="/payment-cancel/"
>Monthly plan</button>

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 a <button> element:

<button role="link" data-members-signout>Sign out</button>

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 <button> element with the attribute data-members-error.

Example

<button data-members-plan="Monthly">
  Monthly plan
  <p data-members-error><!-- error message will appear here --></p>
</button>

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.