Build your React SaaS starter with Altogic and Stripe

Stripe is a payment processing platform helps you to easily accept payments, manage customers, handle recurring subscriptions, and more. By completing this tutorial, you will be able to build a React app that can take payment for specific product and manage user's subscriptions.

Introduction

Here we are going to add pricing to our application and complete a payment integration with Altogic and Stripe and build SaaS starter app with React. With the power of Stripe we can manage payments and subscriptions easily and can focus on the business value rather than invoice and billing flows. Thanks to Stripe.👏🏻

Set up your Stripe account

Let's create an account from the Stripe official website to use the Stripe management screen. After creating an account, there might be pop-ups related to company information. You can ignore it. We will use test mode for this tutorial.

Create Stripe secret key

To integrate Stripe with the Altogic, we should get the Secret key. So, let’s visit the Developers → API keys view of the Stripe Dashboard and copy the Secret key by clicking the Reveal test key button.

Then, open Altogic Designer and visit the Parameters view of the Settings to create a new application parameter for the Secret key as STRIPE_SECRET_KEY.

Create Product in Stripe

Let's create a new product with different pricing options in Stripe, so visit Products and click the + New product button.

Here is the list of price for the product as seen in the screenshot. Creator will be 19 USD/mo. Maker will be 49 USD/mo. Pro will be 99 USD/mo. Pro plus will be 199 USD/mo.

tip

You can set a nickname(Creator, Maker, Pro, Pro plus) to prices by clicking Additional options in the price configuration by adding the Price description property. You can also edit existing prices to change the nickname of the plan.

At the top right of the page, we can display the product id. Let's copy the id and add a new application parameter STRIPE_PRODUCT_KEY to Altogic.

So the configuration of the parameters has been completed. Let's start creating our services to make payments and manage the user.

Integration Stripe with Altogic

To integrate Altogic with Stripe, we will use Altogic Marketplace nodes to create and extend our services. And also, to manage users, we will use the Altogic authentication service. So, let's go. Let's make the integration clear, and look at which services we will build with Altogic.

• Get list of prices
• Create subscription to a price
• Update user data with subscription (Webhook)
  • Uptade user model
  • Create web hook
• Get list of subscriptions
• Get list of invoices
• Cancel subscription
• Create user portal session
• Cancel subscription
• Get customer info

Get list of prices

Let's create an endpoint and a service to get a list of prices. So let's visit the Endpoints view of the Altogic Designer and click the + New button.

note

In the routed service section, there is an option to create a new service, so click Add new service and name it like Get list of price service.

Open the Get list of price service and design the service like the following. To find Stripe nodes click the Marketplace section of the Nodes Library, find the List All Prices node and drag it to the designer. To complete the service, let's find the Return Response node from the Core nodes section and, after dropping it to the designer, connect the inputs to the output as shown on the screen below.

Now, we are able to get the list of price information let's visit the Altogic Tester or open the Postman and send request to the endpoint like the following.

Here we can see that we can receive our previously created prices. That's awesome! To make a subscription, we need to create a customer in Stripe, so let's update the user model to store the customerId, subscriptionId, and plan for the users.

Update user data with subscription

Updating users model

Let's open the users model and add customerId, subscriptionId as a text field, and plan as an option list. And for the option list, add previously specified nicknames as specific properties.

Create webhook in Stripe

Visit Developers → Webhooks view of the Stripe Dashboard and create a new webhook by clicking + Add endpoint button.

So now we need an endpoint URL, let's create an Update user plan endpoint with the POST method.

After creating the endpoint, copy the endpoint path by clicking the copy icon like following and enter the Endpoint URL.

Click +Select events button and select customer.subscription.created event for webhook and click Add events button and click Add Endpoint button to complete the webhook. Alright, the first part of our webhook is ready, now let's create subscription service to see events for the web hook.

Create a subscription

Let's take a look at how Stripe subscription flow works and when webhook is triggered with the flow diagram below. When we send a subscription request to a price, Altogic returns the url in response to checkout. When the user checkout successfully, as seen below the diagram, the webhook will trigger to the /update/userPlan endpoint, and we will design that endpoint to update user fields.

Let's design the subscription service to subscribe to one of the selected price from the list. So, click on the + New button from the Endpoints page and complete selection as screen below.

note

In the routed service section, there is an option to create a new service, so click Add new service and name it like Create a subscription.

Open the Create a subscription and design the service like following by dragging nodes. This is the overview of the Create a subscription service.

After you have completed the service design.

1. Select the Start node and add priceId as a query string parameter.

2. Select Get Single Object by Id node, specify the user model, and specify the userId from the session object.

3. Select If-Else condition node, and for the condition, check whether the customerId is EMPTY or not. Regarding the result, we will create a customer or session to checkout operations.

4. Select Create a Session node and fill in the configurations as given below. Also, you can define application parameters for the Success URL and Cancel URL. For now, let's ignore it.

5. Select Create Customer node, define API Key from application parameters, and set the customer email address from input object.

6. Select Update Object Fields by Id node and configure the Object id to be updated in the database. In the Field value updates section, click Manage updates and select the customerId, the method of the update will be SET, and open the expression editor and select createdCustomer.id to update the database.

Alright! Let's test it, open Altogic Tester, and click the Create subscription endpoint.

This endpoint is the session required to send the session token click the Header and paste your token to the Session field.

Fantastic, we get a result from Stripe. Now let's scroll down the response, find the url key, and copy the value to the address bar to checkout.

Hereafter making payment successfully, it navigates the web page to https://localhost:3000/success as we defined before. Also, payment event should trigger our webhook now.

It triggered, and here are errors because we didn't define the service for that webhook. Let's copy the Request and create a new model by selecting Model from JSON in the Altogic Designer.

So now we can use this hook to update the customerId, subscriptionId, and plan fields.

Updating user object

Let's open the Update user plan service and design the service like the following to get and store the subscriptionId of the user and nickname of the subscribed plan when the webhook is triggered.

After you have complete the service design and connected the connectors.

1. Select the Start node, set the request body structure to Single model and select the customerSubscription model.

2. Select Get Single Object by Query node and the retrieved object model will be users and the query will be like the following.

this.customerId == inputObject.body.data.object.customer;

3. Select If-Else condition node and set ISEMPTY(found.subscriptionId) as a condition.

4. Select Cancel a Subscription node, and set STRIPE_SECRET_KEY and SubscriptionID as following. In this specific scenario, we allow users to subscribe to more than one plan.

5. Select Update object fields node, and the updated object will be a users object, and object id will be the found._id and here, with the Field value updates, we are setting plan and subscriptionId, which is received from the webhook.

Alright! Alright! We're done with this part. Let's test it. Open Altogic Tester, and run Create subscription service again to subscribe a price with priceId. When we check the webhook after making a payment, it seems like everything is fine.

Also, let's check the user's records for subscriptionId, customerId, and plan. You can check with Altogic Navigator quickly.

Here we can see the plan field is changed in the Altogic database according to subscribed plan.

Get list of subscriptions

Now, let's design the Get list of subscriptions service to return the active subscriptions of the user. So, click on the + New button from the Endpoints page and complete the selection as shown on the screen below.

Open the Get list of subscription service and design the service like the following to get the user's subscriptions.

After you have complete the service design and connected the connectors.

1. Select the Get Single Object by Id node and the retrieved object model will be users and the query will be like the following.

inputObject.session.userId;

2. Select If-else condition node and set ISEMPTY(found.customerId) as a condition. Here we add If-else condition node to check the customerId field. According to the service flow, if the customerId field is empty, returning an error response, or else gets list of subscriptions by using the customerId field.

3. Select List subscriptions node and Customer ID will be like the following.

input.customerId;

Now, we are able to get the list of subscriptions. Let's visit the Altogic Tester or open the Postman and send request to the endpoint like the following.

Get list of invoices

Let's design the Get list of invoices service to return the invoices of the user. So, click on the + New button from the Endpoints page and complete the selection as shown on the screen below.

Open the Get list of invoices service and design the service like the following to get the user's invoices.

It is almost similar to the Get list of subscriptions service. We add If-else condition node to check the customerId field. According to the service flow, if customerId is an empty returning error response, else getting list of invoices by using customerId field.

Now, we are also able to get the list of invoices. Let's visit the Altogic Tester or open the Postman and send request to the endpoint like the following.

Cancel subscription

The last part is canceling the user's subscription. So, click on the + New button from the Endpoints page and complete the selection as screen below.

Open the Cancel subscription service and design the service like the following to cancel the user's subscription.

In that specific scenario, we are updating the user's plan field to 'Free plan' and removing the value from subscriptionId field. With Cancel subscription node, you can also make different selections for invoice and proration.

We are ready to test the Cancel subscription service. Let's visit the Altogic Tester and click the service and after setting the Session header, hit the send button.

In the response, we can identify the plan is changed to the 'Free plan' and subscriptionId field is removed. It seems like working properly.

Conclusion

We have completed the essential part of the payment processing. Now we are able to collect payments from the users, manage their payments, and add new roles to the users, let's build the user interface to see how it works. So let's continue with the part-2