Build your React SaaS starter with Altogic and Stripe

Β· 12 min read
Deniz Γ‡olak

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.

Secret key screen

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.

Application parameter

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.

Create product and configure the prices

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.

Add product id as a application parameter

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.

Get list of prices endpoint
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.

Get list of prices endpoint

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.

Result of the prices endpoint

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.

Plan field added as an option list

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.

Create update user plan endpoint

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

Copying endpoint url
Stripe webhook for subscription created

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.

Webhook explained with flow diagram

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.

Create subscription endpoint
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.

Create subscription service

After you have completed the service design.

  1. Select the Start node and add priceId as a query string parameter.
Create subscription service
  1. Select Get Single Object by Id node, specify the user model, and specify the userId from the session object.
Create subscription service
  1. 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.
Create subscription service
  1. 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.
Create subscription service
  1. Select Create Customer node, define API Key from application parameters, and set the customer email address from input object.
Create subscription service
  1. 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.
Create subscription service

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.

Create subscription service

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.

Create subscription service

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.

Create subscription service

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.

Create a model from json

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.

Update user plan service

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.
Update user plan service
  1. 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;
Update user plan service
  1. Select If-Else condition node and set ISEMPTY(found.subscriptionId) as a condition.
Update user plan service
  1. 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.
Update user plan service
  1. 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.
Update user plan service

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.

Stripe webhook view

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

Stripe webhook view

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.

Get list of subscription endpoint

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

Get list of subscription service

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.

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 subscription service

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.

Get list of invoice endpoint

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

Get list of invoice service

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.

Get list of invoice service

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.

Cancel subscription endpoint

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

Cancel subscription service

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.

Cancel subscription tester

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