How to use a Gatsby Static Site to Manage Paid Subscriptions

Photo by on Unsplash Felix Mittermeier In this article, I will show you how you can extend a Gatsby static-site to manage memberships and paid subscriptions using Netlify and Paddle, with Fauna’s cloud API as the glue that keeps everything together. We will be covering the following: Setting up a basic Gatsby site Configuring and deploying to Netlify Membership management using Netlify Identity Adding login and signup modals using React hooks Adding Gatsby private routes Creating subscription plans using Paddle Subscription management from members’ accounts using Fauna You can find all of the finished code for the project along with a . here working demo here Before we get started, let’s do a quick visual tour of what we will building: Creating Your Gatsby Site To begin with, we need a basic Gatsby site to build from. We will start by installing the Gatsby CLI (Command Line Interface) by running the command: npm install -g gatsby-cli Next, we will spin up a Gatsby instance using their default starter. To do this, just go to the folder you want to install in and run: Gatsby Starter Blog gatsby new https://github.com/gatsbyjs/gatsby-starter-blog Now if you run you can navigate to in your browser and see your site running on a development server. gatsby develop http://localhost:8000/ Deploying to Netlify With our Gatsby site up and running our next step is to deploy it to Netlify so that we can take advantage of Netlify’s serverless functions and identity storage. (if you don’t yet have a Netlify account ). you can create one for free here We will be deploying on Netlify directly from Github, so now is a good time to initialize your repository if you haven’t yet already. Now we will add a short file in our root directory that will tell Netlify where we are going to be keeping our serverless functions: netlify.toml [build] command = "NODE_ENV=production gatsby build" publish = "public/" functions = "./functions"

[[redirects]] from = "/api/*" to = "/.netlify/functions/:splat" status = 200 Here we are simply telling Netlify that on the build, any serverless functions we create will be in the folder and they will be served from the endpoint . ./functions www.mysite/api/ Now if we follow the Netlify instructions to link our Git repository, you will have a fully deployed site on Netlify that will be automatically rebuilt on any new commits and will be ready for the serverless functions that we will create in a little while. While we are in Netlify, let’s also enable Netlify Identity which we will also be using soon. To do this, go to the Netlify dashboard and select the site that we just created. Then go to Identity and click “Enable Identity.” Finally, we will install the that will handle some configuration automatically for us when it comes to our private routes. To do that we will simply run and add it to our file. Netlify plugin for Gatsby npm install --save gatsby-plugin-netlify gatsby-config.js With that, we are all done with our Netlify configuration. Note, from now on, if we use the command instead of , we will be able to see changes to our serverless functions in real-time. So I recommend that you use that as you are following along. netlify dev gatsby develop Member Management with Netlify Identity Let’s now move on to how we can use Netlify’s Identity to manage our members. To help us with this, we will use a Gatsby plugin called which is a wrapper for another package called . gatsby-plugin-netlify-identity-gotrue react-netlify-identity-gotrue is an open-source API maintained by Netlify that allows you to access Netlify’s identity membership signup and login features. These two packages directly integrate GoTrue into React and Gatsby allow us to easily use Netlify Identity in our project. GoTrue Let’s start by getting both of these installed with: npm install --save gatsby-plugin-netlify-identity-gotrue react-netlify-identity-gotrue. Next, let’s add the plugin to our gatsby-config.js: { resolve: `gatsby-plugin-netlify-identity-gotrue`, options: { url: `https://YOUR-NETLIFY-APP-URL` } }, Now we have access to a variety of helpful functions along with the identity context of any logged in user. Let’s start using them by creating our user login process, beginning with some login buttons that will control our signup modals using React Hooks. First, we will create a simple component in : button.js src/components import React from 'react';

import { handleKeyDown } from '../utils/utils';

const Button = ({ children, showPopup, setShowPopup }) => {

const handleLoginClick = () => { setShowPopup(!showPopup); }

const handleLoginKeyDown = (e) => { handleKeyDown(e, showPopup, setShowPopup); }

return ( handleLoginClick() } onKeyDown={ (e) => handleLoginKeyDown(e) } >{children}

) }

export default Button; And then in a new folder we will create a file called and add this: src/utils utils.js export const handleKeyDown = (ev, showPopup, setShowPopup) => { if (ev.keyCode === 13 && !showPopup) { // enter to open setShowPopup(true); } else if (ev.keyCode === 27 && showPopup) { // escape to close setShowPopup(false); } } In the component we are adding the ability for the button to control React Hooks that we will pass into it in order to determine whether or not our Signup/Login modal will be displayed. While the the function is checking for keyboard enter and escape events and setting to or respectively. We put the function into a separate file since we will be using the same function later when we create our modal in order to let users close the modal using the escape key. handleKeyDown showPopup true false handleKeyDown utills.js Next, let’s move on to create a new component file src/components/loginButtons.js: import React from 'react'; import { Link } from "gatsby"; import { useIdentityContext } from 'react-netlify-identity-gotrue';

import Button from './button';

const LoginButtons = ({ children, showRegisterPopup, setShowRegisterPopup, showLoginPopup, setShowLoginPopup }) => {

const identity = useIdentityContext();

return ( <> {!identity.user && <> Sign Up Login

} {identity.user && <> Profile Logout } )

} export default LoginButtons; At the same time, we will also make a few additions to our file: src/components/layout.js import React, { useState } from 'react'; import { Link } from "gatsby"

import LoginButtons from './loginButtons';

const Layout = ({ location, title, children }) => { const rootPath = `${__PATH_PREFIX__}/`; const isRootPath = location.pathname === rootPath let header

const[showRegisterPopup, setShowRegisterPopup] = useState(false); const[showLoginPopup, setShowLoginPopup] = useState(false);

if (isRootPath) { header = ( <> {title} ) } else { header = ( <> {title} ) } In our component, we are initializing our Netlify Identity context helper. With this we can check if a user is logged in by checking if exists. If it doesn’t, we will show two buttons: one for signing up and one for logging in. identity.user These buttons will toggle the state that is controlled in the file using the React Hooks and . We will manage this state from the Layout component since we will also have to pass these hooks into the modals themselves so we can close them. layout.js showRegisterPopup showLoginPopup When a user is logged in, we will show him a link to his profile page (we will create this a bit later using Gatsby private routes), as well as the option to log out. Using our Netlify Identity context helper we can simply call which will handle all the backend of the logout process for us. identity.logout Now we need to create our actual modal, which we will do in two parts: First, the popup itself in a new component called and after that the form component that we will call which will be served through the popup and will be used to collect sign-up and login information. popup.js registerForm.js Let’s look at the popup modal first: import React from 'react'; import { X } from 'react-feather';

import { handleKeyDown } from '../utils/utils';

import './styles/popup.css';

const Popup = ( { children, showPopup, setShowPopup } ) => {

return ( <> {showPopup ? ( setShowPopup(false) } onKeyDown={ (e) => handleKeyDown(e, showPopup, setShowPopup) } tabIndex={0} aria-label="Toggle Popup" role="button" > setShowPopup(false) } onKeyDown={ (e) => handleKeyDown(e, showPopup, setShowPopup) } tabIndex={0} aria-label="Toggle Popup" role="button" /> {children} ) : null} ) } export default Popup; First, note that we are importing a custom styles file here as well as the icons package . You can find the CSS file in the source code for the example and simply copy and paste it into your project, while can be installed with: react-feather here react-feather npm install --save react-feather Styling aside, you will see that we are passing in the React hook which will control whether or not anything is actually returned. showPopup Then you will see that if someone clicks (or presses the escape key) on either the background overlay of the modal or the X icon, will be set to false and the modal will be hidden again. Finally, you will see that we pass in children to allow us to display our form inside the popup. showPopup Let’s create the component for that form in : src/components/registerForm.js import React, { useState } from 'react'; import { useIdentityContext } from 'react-netlify-identity-gotrue';

const RegisterForm = ({ children, loginType, setShowPopup }) => { const identity = useIdentityContext();

const [formValues, setFormValues] = useState({ email: '', password: '' });

const handleEmailInputChange = (event) => { setFormValues((values) => ({ ...values, email: event.target.value, })); };

const handlePasswordInputChange = (event) => { setFormValues((values) => ({ ...values, password: event.target.value, })); };

const handleSubmit = (e) => { e.preventDefault(); if (loginType === 'login') { handleLogin(formValues); } else { handleSignup(formValues); }

}

const handleSignup = async ( formValues ) => { let newUser = { email: formValues.email, password: formValues.password }

await identity.signup(newUser) .then(() => { console.log('registration successful'); setShowPopup(false); }) .catch((e) => { console.log(e); });

}

}

return (

Email Password

{loginType ==='login' ? 'Login' : 'Register'} )

}

export default RegisterForm; Here we are using helper functions from our Netlify Identity context in order to submit our form data. Let’s leave those to the side for a minute while we see how the form itself is actually working. We have a React hook called which is initiated with empty values for “email” and “password.” Whenever one of the inputs on the form changes, these values are updated via which is called from both and . formValues setFormValues handleEmailInputChange handlePasswordInputChange Finally, when the form is submitted the function is called which checks to see whether this is a signup or login form based on the property we have passed in called handleSubmit loginType. Now let’s look at where we use the Netlify helper functions. First, we can see in that we are getting the form values and storing them in an object that has an “email” and a “password” key. handleSignup Then we simply need to provide this object to and Netlify automatically logs the user in for us. (as well as creating a cookie that persists the login state) We use here so that when the function returns successfully we can close the popup modal automatically by calling . identity.signup() await setShowPopup(false) If we look at , we see that it is very similar. The only difference is that now we are calling instead. One thing to note is that since we are using , both of these functions need to be functions. handleLogin identity.login() await async Finally, we just need to wire up our popup modal and form in our file. Here’s the updated version: layout.js import React, { useState } from 'react'; import { Link } from "gatsby"

import Popup from './popup'; import RegisterForm from './registerForm'; import LoginButtons from './loginButtons';

const Layout = ({ location, title, children }) => { const rootPath = `${__PATH_PREFIX__}/`; const isRootPath = location.pathname === rootPath let header

const[showRegisterPopup, setShowRegisterPopup] = useState(false); const[showLoginPopup, setShowLoginPopup] = useState(false);

header = ( <> {isRootPath ? {title} : {title} } Join now Sign in to access your account )

return ( {header} {children} © {new Date().getFullYear()}, Built with {` `} Gatsby ) }

export default Layout; First, note that I’ve refactored the code of the original template in order to avoid duplication in the header component. Instead of the previous statement, I’ve put a conditional statement directly in the HTML to control what is displayed when is true. If / else isRootPath Then after that we simply import our Popup and RegisterForm components and pass in the React hooks for signing up and logging in, as well as a title for each popup. Our finished popup will now look like this: Gatsby Private Routes Next we will set up private routes in Gatsby that will allow us to have a private account management section of the site for each user. Essentially, a private route in Gatsby is a route that is only generated on client-side when certain conditions are met. (rather than the majority of a Gatsby site, or any other static site for that matter, that will be generated in advance on the server side). This prevents someone who is not entitled to see some content from being served it along with all of the other resources of a site. You can . read more about it here There’s also a great tutorial on how to get this setup using Auth0 instead of Netlify Identity over on the . (Credit to the author , as a lot of the following code, was adapted from his examples). Auth0 blog Sam Julien To get this set up, we first need to edit our file in the root of our project. We will be adding the following code to what’s already there: gatsby-node.js exports.onCreatePage = async ({ page, actions }) => { const { createPage } = actions

if (page.path.match(/^\/account/)) { page.matchPath = "/account/*"

createPage(page) } } What this is doing is it is telling Gatsby to look for any pages that fall under the path and that these pages should be rendered on the client-side only. (rather than generated as static content on the server side. /account/ With that done, we can now create our account page as a new file in the page directory called : account.js import React from "react" import { Link, graphql } from "gatsby" import { Router } from "@reach/router" import Layout from "../components/layout" import Profile from "../components/profile" import PrivateRoute from "../components/privateRoute"

const Account = ({ data, location }) => { const siteTitle = data.site.siteMetadata?.title || `Title`

return ( ) }

export default Account

export const pageQuery = graphql` query { site { siteMetadata { title } } allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { nodes { excerpt fields { slug } frontmatter { date(formatString: "MMMM DD, YYYY") title description } } } } ` Most of this is boilerplate and copied from our page, including the GraphQL query and the metadata that is passed into our Layout component. The important thing to notice here is that we are using Router imported from (no NPM install required since it comes by default with Gatsby) to wrap a new component called PrivateRoute that we will create now. index.js @reach/router So let’s create a new file in our components folder called : privateRoute.js import React from "react"; import { useIdentityContext } from 'react-netlify-identity-gotrue';

const PrivateRoute = ({ component: Component, path, ...rest }) => { const identity = useIdentityContext();

return identity.user ? : null; }

export default PrivateRoute; This is a super simple and straight to the point component. We are importing our Netlify Identity context and then using that, we are returning a component if a user is logged in and null if they are not. So essentially this component serves as a wrapper for another component that we specify and only serves that component if a user is logged in. If you scroll back up to our page, you will see that the component we are wrapping here is called Profile. So let’s create a new component file called and in it we will put: account.js profile.js import React from "react" import { useIdentityContext } from 'react-netlify-identity-gotrue';

const Profile = () => { const identity = useIdentityContext();

if (!identity.user) { return Loading... ; } return( <> Account Details Email: {identity.user.email}

) }

export default Profile; This component is the actual content that will be served to a logged in user browsing to . Here we are using our Identity context to check if a user’s details are available, if not they are shown a simple loading message. Then once the logged in user’s details have been loaded, the profile page simply displays their email address. (which is the only information we have collected from them in this simple example) /account/profile/ And with that, we have a basic but fully functioning member sign up and login flow. Let’s look at how we can add paid subscriptions to that next using Paddle and Fauna. Creating Subscription Plans Using Paddle Next we will look at how we can let our users manage subscription plans using their account profiles that we just created. To manage our subscriptions, we will use a service called Paddle. Essentially Paddle takes care of all of the billing and invoicing issues that come with selling a SaaS product and it has an easy-to-use dashboard as well as lots of API functionality that makes it very developer friendly. For the purposes of our example, we will . create a new Paddle sandbox account here Once we have our account, we will create a new Subscription Plan by going to Catalog > Subscription Plans. Create a new plan and give it whatever name and price you like - just take note of the Plan ID that is generated once you create the plan. Now let’s get Paddle connected to our Gatsby build. There is a helpful plugin called that injects Paddle’s script into your site automatically, but unfortunately it doesn’t support Paddle’s sandbox environment. So instead of using the plugin, I have taken the code from this plugin, modified it slightly and we will use it directly in our project. gatsby-plugin-paddle To do that, we will create a new file in our root folder called and inside it we will paste: gatsby-ssr.js const React = require(`react`);

exports.onRenderBody = ({ setPostBodyComponents }) => { if (process.env.NODE_ENV === `production`) { return setPostBodyComponents([ , ]); } else { return setPostBodyComponents([ , ]); } }; We will also need to create a file in our root directory and put inside of that: .env.development PADDLE_ID=YOUR_VENDOR_ID PADDLE_PRODUCT_ID=YOUR_PADDLE_PRODUCT_ID The file is hooking into Gatsby’s build process and every time a page is generated it injects Paddle’s script into the body of that page. The Paddle script requires your Vendor ID which you can find in the Paddle dashboard under Developer Tools > Authentication. We are storing that as an .env variable since it should be kept secret and not logged into your source control. gatsby-ssr.js The original plugin only added the Paddle script to production builds, so I modified the code to set Paddle to sandbox mode if you are not running in production. This way, you could create an file and put your Paddle production Vendor ID there and be able to simultaneously test with the sandbox while you are in dev mode and then deploy smoothly to production. .env.production With that configuration out of the way, let’s look at how we can actually use Paddle in our site. Let’s open up our file and add the following: utils.js export const openPaddleCheckout = (user) => {

let options = {product: process.env.PADDLE_PRODUCT_ID}; if(user && user.email) { options.email = user.email; } let Paddle = window['Paddle']; if (Paddle) { Paddle.Checkout.open(options); }

} Here we are creating a utility function that we can call from anywhere in our app, that will open up a new Paddle checkout session and serve it as an overlay to our site. Using Paddle’s helper functions that were set up with our script injection previously, we just need to define some options and pass these into . Paddle.Checkout.open() For the options, we are pulling the Paddle Production ID from our file and then we are checking if we have an email passed in with our user object comes from Netlify Identity. If we have an email, this will be passed into our options which tells Paddle to pre-populate the email address so the user doesn’t have to type it in again. .env.development Finally, we will check that the Paddle script is available and loaded using before we actually call it. window['Paddle'] Now let’s go back to our index.js file in order to use our Paddle checkout. First, we will make some additions to the top half of the code: import React, { useState, useEffect } from 'react'; import { Link, graphql } from "gatsby"; import { useIdentityContext } from 'react-netlify-identity-gotrue';

import Bio from "../components/bio"; import Layout from "../components/layout"; import Seo from "../components/seo"; import Button from "../components/button"; import Popup from "../components/popup"; import RegisterForm from "../components/registerForm"; import { openPaddleCheckout } from "../utils/utils";

const BlogIndex = ({ data, location }) => { const siteTitle = data.site.siteMetadata?.title || `Title`; const posts = data.allMarkdownRemark.nodes; const identity = useIdentityContext();

const[showPaddleCheckout, setShowPaddleCheckout] = useState(false);

useEffect(() => { if (identity.user && showPaddleCheckout) { openPaddleCheckout(identity.user); setShowPaddleCheckout(false); } }, [identity.user, showPaddleCheckout])

… Here we are importing our function as well as React’s . We will also create a React hook called openPaddleCheckout useEffect showPaddleCheckout. Next, we will create a that checks if there is a logged in user and if our hook is set to true. If both of these are the case, then we will call our function while passing in our user object from Netlify Identity. Finally, we will call and set it to false, so that we don’t initiate another checkout session if the page is refreshed. useEffect showPaddleCheckout openPaddleCheckout setShowPaddleCheckout Note that we have passed an array of dependencies to our that includes and . This means that if the value of either of these two dependencies changes the will be called again. useEffect identity.user showPaddleCheckout useEffect Now we just have to add a button where we can set the value of our hook. Let’s add it right beneath where we are showing all of our blog posts on the page: showPaddleCheckout index.js return ( {posts.map(post => { const title = post.frontmatter.title || post.fields.slug

return ( {title} {post.frontmatter.date} ) })} { identity.user && <> Add Subscription Subscribe }

) After the list of posts, we are checking if a user is logged in then simply serving a button with some header text. Notice though that we will need to update our component to handle this new case of adding a subscription. So we will modify our code to the following: button.js import React from 'react';

import { handleKeyDown } from '../utils/utils';

const Button = ({ children, showPopup, setShowPopup, showPaddleCheckout, setShowPaddleCheckout, user }) => {

const handleLoginClick = () => { if (!user) { setShowPopup(!showPopup); } if (setShowPaddleCheckout && !showPaddleCheckout) { setShowPaddleCheckout(true); } }

const handleLoginKeyDown = (e) => { if (!user) { handleKeyDown(e, showPopup, setShowPopup); } if (setShowPaddleCheckout && !showPaddleCheckout) { setShowPaddleCheckout(true); } }

return ( handleLoginClick() } onKeyDown={ (e) => handleLoginKeyDown(e) } >{children}

) }

export default Button; We are now passing in , and our Netlify as props. In both and we are first checking if we have a prop for and that is not already set to true. Then we are calling which will then trigger our to serve our Paddle checkout. showPaddleCheckout setShowPaddleCheckout user handleLoginClick handleLoginKeyDown setShowPaddleCheckout showPaddleCheckout setShowPaddleCheckout(true) useEffect Subscription Management from Member Accounts Using Fauna Finally, let’s tie everything together using Fauna. Credit to and that formed the basis of a lot of the following code. Jason Lengstorf his great article on connecting Stripe to Netlify using Fauna If you haven’t yet already, head over to and get signed up for a free account. Then you will need to create a new database, give it whatever name you want. fauna.com Once you have the database created, we will need to define its schema. I’m following Jason’s advice here and storing our schema in a new folder in our project’s root directory. Call this file and paste in the following: db schema.gql type User { netlifyID: ID! paddleSubID: ID! }

type Query { getUserByNetlifyID(netlifyID: ID!): User! } This is telling our Fauna instance that our database will have a data type of that will have two ID types: and . We are also defining one query that will expect a and will return the object. User netlifyID paddleSubID netlifyID User Now we will upload this into Fauna by going to GraphQL > Import Schema. Next we need to generate a Server Key from Fauna that we can use to connect from our Gatsby site. On the left-hand menu go to Security and then New Key. Now we will save this key in our file: .env.development PADDLE_ID=YOUR_VENDOR_ID PADDLE_PRODUCT_ID=YOUR_PADDLE_PRODUCT_ID FAUNA_SERVER_KEY=YOUR_SERVER_KEY As a last configuration step, we will install the package to our project so that we can use fetch in our Netlify Serverless functions. We will need to use Serverless functions to connect to our Fauna instance, since we don’t want to expose our secret key in our client-side code. node-fetch So we will run: npm install --save node-fetch Now with that set up, we will start writing our Netlify serverless functions. Let’s start with a new file in : functions/utils/fauna.js const fetch = require('node-fetch');

exports.faunaFetch = async ({ query, variables }) => { return await fetch('https://graphql.fauna.com/graphql', { method: 'POST', headers: { Authorization: `Bearer ${process.env.FAUNA_SERVER_KEY}`, }, body: JSON.stringify({ query, variables, }), }) .then((res) => res.json()) .catch((err) => console.error(JSON.stringify(err, null, 2))); }; Credit to Jason again, as this was his creation in his tutorial. Here we are just creating a boilerplate fetch function that we will be able to reuse in order to access our Fauna instance. Note that the function expects query and variables objects and then converts these into JSON in the body of the request. Also note we are pulling our Fauna Server Key from our file. .env.development Now let’s use our utility function in a new file : faunaFetch functions/addSub.js const { faunaFetch } = require('./utils/fauna');

exports.handler = async (event) => { // Only allow POST if (event.httpMethod !== 'POST') { return { statusCode: 200, body: JSON.stringify('Method not allowed')}; }

const { netlifyID, paddleSubID } = JSON.parse(event.body);

// link the Netlify and Paddle Sub IDs in Fauna await faunaFetch({ query: ` mutation ($netlifyID: ID!, $paddleSubID: ID!) { createUser(data: { netlifyID: $netlifyID, paddleSubID: $paddleSubID }) { netlifyID paddleSubID } } `, variables: { netlifyID: netlifyID, paddleSubID: paddleSubID, }, });

return { statusCode: 200, body: JSON.stringify('Sub Added') }; }; In order to create a new record in our Fauna we will specify our mutation query that expects both a Netlify User ID and a Paddle Subscription ID. We will then be storing both of those in our Fauna database so we can link one to the other. That way, we can fetch our users by their subscription ID and vice versa. Now we need to create a function on the client-side to call our serverless function to add a new user. Let’s go back to our file and add the following: src/utils/utils.js const addPaddleSubscription = ( netlifyID, paddleSubID ) => { async function postData(url) { const response = await fetch(url, { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({netlifyID: netlifyID, paddleSubID: paddleSubID}) }); return response.json(); } postData('/api/addSub/') .then(data => { console.log("Success: ", data); }) .catch((error) => { console.log('Error: ', JSON.stringify(error)); }); } Here we are creating an async function that will call our serverless function at passing our Netlify ID and Paddle Subscription ID’s into the body. /api/addSub/ Now we will just need to modify our function in our same file: openPaddleCheckout export const openPaddleCheckout = (user) => {

const checkoutComplete = (data) => { var checkoutId = data.checkout.id;

Paddle.Order.details(checkoutId, function(data) { addPaddleSubscription(user.id, data.order.subscription_id) }); } let options = {product: process.env.PADDLE_PRODUCT_ID, successCallback: checkoutComplete}; if(user && user.email) { options.email = user.email; } let Paddle = window['Paddle']; if (Paddle) { Paddle.Checkout.open(options); }

} Here we are adding an additional option to our called which runs after a payment is made successfully. Paddle.Checkout.open successCallback In our function we get the checkout ID that is passed to the callback as . Then with this ID, we can get further details from Paddle by calling . Finally, this function also has a callback function where we will call while passing in our Netlify User ID and the Paddle Subscription ID that we just accessed from the details via . checkoutComplete data.checkout.id Paddle.Order.details(checkoutId) addPaddleSubscription() data.order.subscription_id Now that we’ve linked our Netlify ID’s with Paddle subscriptions using Fauna, let’s build a way to display a Paddle subscription in a user’s profile. To do this, we will need to create another serverless function and accompanying client-side API call to get a subscription ID by Netlify user ID. Let’s start with our serverless function we will create in a new file at : functions/getSub.js const { faunaFetch } = require('./utils/fauna');

exports.handler = async (event) => { // Only allow POST if (event.httpMethod !== 'POST') { return { statusCode: 200, body: JSON.stringify('Method not allowed')}; }

try { const { netlifyID } = JSON.parse(event.body);

const result = await faunaFetch({ query: ` query ($netlifyID: ID!) { getUserByNetlifyID(netlifyID: $netlifyID) { netlifyID paddleSubID _id } } `, variables: { netlifyID: netlifyID, }, });

return { statusCode: 200, body: JSON.stringify({subs: true, data: result.data.getUserByNetlifyID}), };

} catch (err) { console.log(err); // output to netlify function log return { statusCode: 200, body: JSON.stringify({subs: false, data: {} }), }; } }; Most of this function is the same as , we are just passing in different data and using a different Fauna query. Here we are parsing the Netlify ID via the body of our POST call and then using that in a Fauna query (rather than a mutation). We are calling the query that we previously defined in our schema ( ) and we are asking that query to return the as well as which is the Fauna ID for the record in the database. (we will use this a bit later when we want to delete records) addSub getUserByNetlifyID paddleSubID _id Note the structure of the data that we are returning. We are returning an object that has a key “subs” that will either be true or false, depending on if any subs currently exist for that user ID and then we are returning the actual data under the key “data.” Now that we have our query and serverless function ready, let’s create our POST request in by adding the following: src/utils/utils.js export const getPaddleSubscription = async ( netlifyID ) => { async function postData(url) { const response = await fetch(url, { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({netlifyID: netlifyID}) }); return response.json(); } return await postData('/api/getSub/'); } This is a very straight-forward function that simply calls our new serverless function while passing in the Netlify ID and returns the response, which will be the Netlify ID, Paddle Subscription ID and Fauna ID. Now let’s use this data in our user profile component. We will replace our with the following: src/components/profile.js import React, { useState, useEffect } from 'react'; import { useIdentityContext } from 'react-netlify-identity-gotrue'; import { getPaddleSubscription } from '../utils/utils';

const Profile = () => { const identity = useIdentityContext();

const [loadingSubscription, setLoadingSubscription] = useState(true); const [subscription, setSubscription] = useState(null);

useEffect(() => { if (loadingSubscription) { getPaddleSubscription(identity.user.id) .then(newSub => { if (newSub.subs) { setSubscription(newSub.data); } setLoadingSubscription(false); }) .catch(err => { setLoadingSubscription(false); }) } }, [loadingSubscription, setSubscription, setLoadingSubscription, subscription, identity.user.id])

if (!identity.user) { return Loading... ; } return( <> Account Details Email: {identity.user.email}

Subscriptions {loadingSubscription && Loading Subscriptions

} {!loadingSubscription && subscription !== null && Test Subscription: {subscription.paddleSubID}

} {!loadingSubscription && subscription === null && No current subscriptions

}

) }

export default Profile; Here we have two React Hooks that are controlling the action: and . By default, is set to which will cause our to be triggered when the component is initially loaded. In the , we then call our function passing in our user ID from our Netlify Identity context. loadingSubscription subscription loadingSubscription true useEffect useEffect getPaddleSubscription() Once that is returned, we will check if any subscription was found by checking if is , then we set the subscription ID that is returned using . Finally, whether a subscription was found or not, we will set to . subs true setSubscription() loadingSubscription false Note that we have the following as dependencies in our : . So if any of these change our will run again, although it will not actually fetch new data unless is set to . useEffect subscription, setSubscription, loadingSubscription, setLoadingSubscription, identity.user.id useEffect loadingSubscription true Then to display our data, we are using a few conditionals in our HTML. If is , we are simply displaying a message that says “Loading Subscriptions.” Then once is complete and set to , we have two options: loadingSubscription true loadingSubscription false If a subscription is found, it will be displayed with it’s Paddle ID. (You could do a lot more here by displaying other subscription data to your user, but for the purpose of this example we will just show the ID) If no subscription is found, it simply says “No current subscriptions” Finally, let’s take things one step further and let our user’s cancel their subscription from their account profile. First, we will need an API key from Paddle which you can find in the Paddle Dashboard under Developer Tools > Authentication, then you can just use the Default API Key and press Reveal Auth Code. Paste this code into your file: .env.development PADDLE_ID=YOUR_VENDOR_ID PADDLE_PRODUCT_ID=YOUR_PADDLE_PRODUCT_ID FAUNA_SERVER_KEY=YOUR_SERVER_KEY PADDLE_AUTH_CODE=YOUR_PADDLE_API_KEY Now let’s create a new serverless utility function in functions/utils called : paddleCancel.js const fetch = require('node-fetch');

exports.paddleCancel = async (subID) => { return await fetch('https://sandbox-vendors.paddle.com/api/2.0/subscription/users_cancel', { method: 'POST', body: new URLSearchParams({ 'vendor_id': process.env.PADDLE_ID, 'vendor_auth_code': process.env.PADDLE_AUTH_CODE, 'subscription_id': subID }) }) .then((res) => res.json()) .catch((err) => console.error(JSON.stringify(err, null, 2))); }; Here we are calling the Paddle API ( ) using fetch and passing in form encoded data in the body with three items: and simply come from our file while will be provided as an argument to our function. more details here vendor_id vendor_auth_code .env subscription_id Now let’s use this utility function in a new serverless function : functions/deleteSub.js const { faunaFetch } = require('./utils/fauna'); const { paddleCancel } = require('./utils/paddleCancel');

exports.handler = async (event) => { // Only allow POST if (event.httpMethod !== 'POST') { return { statusCode: 200, body: JSON.stringify('Method not allowed')}; }

const { netlifyID } = JSON.parse(event.body);

const result = await faunaFetch({ query: ` query ($netlifyID: ID!) { getUserByNetlifyID(netlifyID: $netlifyID) { netlifyID paddleSubID _id } } `, variables: { netlifyID: netlifyID, }, });

const paddleResult = await paddleCancel(result.data.getUserByNetlifyID.paddleSubID); console.log(paddleResult);

await faunaFetch({ query: ` mutation ($faunaID: ID!) { deleteUser(id: $faunaID) { netlifyID paddleSubID } } `, variables: { faunaID: result.data.getUserByNetlifyID._id, }, });

return { statusCode: 200, body: JSON.stringify('Sub Deleted'), }; }; In this function we have three important things happening one after the other: First, we are querying Fauna by Netlify ID and returning the Paddle Subscription ID as well as the Fauna ID. (same as we did in ) getSub.js Then we are using that Paddle Subscription ID to call our function. (we are just logging the response from Paddle in the example) paddleCancel After that, we are calling Fauna with a new mutation that deletes our User data item Note, this is why we needed to return our Fauna before, since it is required in order to delete the item. _id As with all of our serverless functions, we need to add an accompanying client-side API call, so let’s add that to our file: src/utils/utils.js export const cancelPaddleSubscription = ( netlifyID ) => { async function postData(url) { const response = await fetch(url, { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({netlifyID: netlifyID }) }); return response.json(); } postData('/api/deleteSub/') .then(data => { console.log("Success: ", data); }) .catch((error) => { console.log('Error: ', JSON.stringify(error)); }); } Again, very straightforward - we are just passing our Netlify ID into the body and calling with a POST request. /api/deleteSub/ Finally to get all this online we just need to update our UI, so let’s go back to our and make a couple of quick changes: src/components/profile.js import { getPaddleSubscription, cancelPaddleSubscription } from '../utils/utils'; … return( <> Account Details Email: {identity.user.email}

Subscriptions {loadingSubscription && Loading Subscriptions

} {!loadingSubscription && subscription !== null && Test Subscription: {subscription.paddleSubID} {cancelPaddleSubscription(identity.user.id); setSubscription(null); }}>Cancel

} {!loadingSubscription && subscription === null && No current subscriptions

}

) We are adding our new to our imports and then we are using it in the HTML that is served when a user has a subscription. cancelPaddleSubscription Then we have put a simple button inside a span next to the Paddle Subscription ID which when clicked will call with the Netlify User ID as an argument. It will also set back to so the subscription will disappear as soon as the button is clicked. cancelPaddleSubscription subscription null And that’s it! We’ve now got a fully functioning account management service that lets our users subscribe and cancel subscriptions on their own. Summary In this post, you learned how to: Set up a basic Gatsby site Configure and deploy it to Netlify Manage memberships using Netlify Identity Add login and signup modals using React hooks Add private member areas using Gatsby private routes Create subscription plans using Paddle Manage subscriptions from users’ accounts using Fauna This post gives you the basic flow of how you can incorporate memberships and subscriptions into your static site and how a simple and flexible database like Fauna can help you pull it all together. You can get even more ideas of what you can do with them together by checking out more of my work at where I am building technology for local news and other small online publishers using this same tech stack to manage my memberships and SaaS subscriptions. Epilocal Written in connection with the . Write with Fauna Program