Build A Subscription System With Stripe and Vue js.

By:

Denisse Abreu
Apr 18, 2022 12pm ET

Eng/Spa 5-min

# Set Up the Stripe Environment # Integrate Stripe into your Vue js App # Mount The Stripe Card Element

Hello 🖐🏼, in this guide, I will teach you how to build a subscription system with Vue js and Stripe. Our working environment is Vue js Options API, Vue Router, and Express js as a backend manager. For the UI/UX, I'm using Vuetify. If you are looking for the Vue 3 Composition API integration, check this tutorial: Create a subscription system with Vue 3, Vite, and Stripe. If you don't have a project, you can copy my Vue 2 repository here: Vue Stripe Subscriptions.

Set Up the Stripe Environment.

First, let's set up our environment. Copy in your env file your publishable key from the stripe dashboard; you can find this key in the developer's section of the dashboard. Create two products in the dashboard products section, the Basic plan for five dollars and the Premium plan for ten. Copy the products IDs in the env file.

Stripe Dashboard

Stripe Plan Dashboard

client/.env

Once you have opened your account with Stripe, copy the script tag into the head of index.html.

client/public/index.html

Integrate Stripe into your Vue js App.

Our first move to integrate Stripe into Vue js is making the on-click event when the customer wants to sign up for your subscription service. We are collecting the email and the customer's full name; in production, you should collect additional information, like the customer's address.

views/Home.vue

In this try and catch block, we are sending, to the backend, the customer personal information that we collected from the sign-up form. If we get a response, push the plan view with the customer id as a parameter. Check Vue Router Docs on how to set up passing parameters between views.

views/Home.vue

Create a file in the root of the src folder, the job of this file is to send http requests to the backend with Axios.

src/post-service.js

After receiving the response from the server with the customer id, Vue Router will push the second step; your customer needs to choose a plan. Make two buttons with two different on-click events. One is to subscribe to the five-dollar plan and the other to the ten-dollar plan.

views/Plan.vue

The create subscription function will receive the parameters of the plan that the customer chooses plus the props from step one. This function will send, to the backend, the customer id and the price id and create the subscription; If the response data is good, the checkout view will be pushed with parameters.

views/Plan.vue

Mount The Stripe Card Element.

This is the last step of the frontend integration, mount the card element and create the submit event.

views/Checkout.vue

Use the client secret to access the Stripe function "confirm card payment". Inside this function, send the payment method and the customer billing info; Check the list of parameters you can send to stripe . If the subscription is successful, push thank you view with the subscription id as a parameter.

views/Checkout.vue

Check the backend here: Subscription System With Stripe and Express