Guides & tutorials

How to build a membership site with PrestaShop

Table of contents

Building a subscription business with PrestaShop? Learn how to easily create a form to allow users to sign up and pay for the subscription, using the Arengu plugin and Stripe.

Previous requirements

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

What are we going to build?

A form with two steps. The first one will ask the user for an email, a password and to choose a subscription plan. The second step will ask the user for the payment details.

Download and install the module

To start using Arengu’s module, simply download it from Arengu's GitHub account and follow these instructions:

  1. Open your PrestaShop account and click on ‘Improve’ on the left-side menu. 
  2. Then, under ‘Improve’, click on ‘Modules’
  3. Click on ‘Upload a module’ and drag and drop the downloaded file.

Here you will also find the secret API key. We will need it later to configure the form.

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 three steps and the following settings.

In the first step of the form, include two Text fields (one for the name and another one for the last name), an Email field and a Password field. Configure them as follows:

  • ID: change them to ‘name’, ‘lastname’, ‘email’ and ‘password’.
  • Required: enable this option in each case to set them as mandatory.

In the second step, add 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 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 third 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 PrestaShop 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 PrestaShop account.
  • API key: paste the API key of your PrestaShop 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 PrestaShop Sign up action with the following settings:

  • ID: change it to ‘signUp’ to simplify it.
  • Base URL: paste the base URL of your PrestaShop account.
  • API key: paste the API key of your PrestaShop account.
  • Email: reference the {{input.body.email}} variable from the form.
  • Password: reference the {{input.body.password}} variable from the form too.
  • Name: reference the {{input.body.name}} variable from the form.
  • Last name: reference the {{input.body.lastname}} variable from the form.
  • 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. You can check if everything has worked correctly in the Executions tab of each flow.

Here you can check the inputs, outputs and errors of each action in each execution 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.

You might like to read

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.