How to build a membership site with WordPress

Willing to build a subscription business with WordPress? In this tutorial, learn how to easily create the form you need to allow users to register and pay for the subscription, using the Arengu plugin and a Stripe account to manage the payments.

Previous requirements

• A WordPress account, to register users.
• A Stripe account, to manage subscription plans.
• An Arengu account, to create the form and the server-side logic.

What are we going to build?

A two-step registration and subscription form. In the first step, we will ask the user for an email, password and to choose a subscription plan, and in the second, they will be able to pay for the subscription and redeem a discount coupon.

Install the plugin in WordPress

Go to your WordPress account 'Plugins' section, click on 'Add New', and write 'arengu' on the search bar. Then, click on 'Install Now'. That’s all!

Create the subscription plan

First, go to your Stripe account and create the subscription plan in the Products section. Just give it a name and set the price for each of the subscription options. When we configure the form, we will return to this page to get the ID of each of the prices.

Build the form in Arengu

Then go to the form editor and create a form with two steps and the following settings.

In the first step of the form, include an Email field, a Password field and a Choice or Cards field to allow the user to choose one of the pricing options. In this case, we have chosen the cards option. To configure the Email and Password fields:

• ID: change them to ‘email’ and ‘password’ to make them easier to reference.
• Required: enable this option in both cases to set them as mandatory.
  

To configure the Cards field:

• ID: change it to ‘cards’ to simplify it.
• Required: enable this option to make it mandatory too.
• Options: add as many options as prices your subscription plan has. Give each of them a name and click on each card to add an image by pasting its URL.
• Internal values: click on this option to open a window that will allow you to associate each card with a price. Simply copy the ID of each price in Stripe and paste it into the corresponding input.
  

In the second step of the form, include a Payment field with the following settings:

• Publishable key: copy it from your Stripe account and paste it in this field.
• Secret key: copy it from your Stripe account too and paste it in this field.
• Payment type: choose ‘Subscription’.
• Action: choose ‘Create subscription’.
• Price ID: reference the {{fields.cards}} variable. It will take the ID of the price that the user has chosen, from the internal values ​​of the Cards field.
• Customer action: choose ‘Create customer’.
• Customer email: reference the {{fields.email}} variable. You can get it from the variable selector by clicking the plus button.
  

If you want, you can also add a Text field to redeem coupons created in Stripe.

Go to the Flows tab on the light menu and create two flows. A flow linked to the first step of the form and another one to run after form submission. Then, publish the changes.

Flow 1: Check if the email is registered

To the fist step of the form, connect a flow with this structure to check if the email is already registered:

First, include a WordPress Check email action with the following settings:

• ID: change it to ‘checkEmail’ to make it easier to reference it.
• Base URL: paste the base URL of your WordPress account.
• API key: paste the API key of your WordPress account.
• Email: reference the {{input.body.email}} variable. You can get it from the variable selector by clicking the plus button.
  

Then add an If/then condition action configured as follows:

• Condition: reference the {{checkEmail.body.email_exists}} from the outputs of the previous action after an execution of the flow and select the ‘is true’ condition.
  

In the False branch, include a Show error message action and customize the error message that will be shown to users who are already registered.

In the True branch, include a Go the next form step action, that does not need to be configured, and publish the changes.

Flow 2: Sign-up and send a magic link

Create an after submission flow with this simple structure, to register the user and send an access link by email:

First, include a WordPress Sign up action with the following settings:

• ID: change it to ‘signUp’ to simplify it.
• Base URL: paste the base URL of your WordPress account.
• API key: paste the API key of your WordPress account.
• Email: reference the {{input.body.email}} variable from the form.
• Password: reference the {{input.body.password}} variable from the form too.
• JWT expiration time: we will leave the default expiration time of 5 minutes.
  

Finally, close this flow with a Send email action configured as follows:

• Recipient email: reference the {{input.body.email}} variable from the form.
• Subject: personalize the subject of the email.
• Content: write the message and include the {{signUp.body.login_url}} from the outputs of the previous action after an execution of the flow.

Then, simply publish the changes. You can use this action for testing, although Mailjet and Sengrid actions are also available for when you publish the flow.

Preview, test and debug it

Go back to the form editor and click on the Preview button to open it in a new tab and test it. Check if everything has worked correctly in the Executions tab of each of the flows.

Review the inputs, outputs and errors of each action to fix any possible bugs.

Do you want to try it by yourself? Sign up free or book a demo with our team. Still not sure about it? Take a look at the most common use cases.