On this article, I’ll be explaining how I’ve used Gatsby Capabilities and the Stripe API to allow safe “Pay what you need” contributions that assist fund my open-source undertaking MDX Embed.
Observe: MDX Embed lets you simply embed widespread third-party media content material resembling YouTube movies, Tweets, Instagram posts, Egghead classes, Spotify, TikTok and plenty of extra straight into your .mdx — no import required.
Gatsby Serverless Capabilities
Gatsby Capabilities open up a complete new world for front-end builders as they supply a option to write and use server-side code with out the trouble of sustaining a server. Makes use of for Serverless Capabilities vary from E-newsletter signups with ConvertKit, sending an electronic mail utilizing SendGrid, saving knowledge in a database like Fauna, or on this case, accepting safe funds utilizing Stripe — the record is kind of frankly infinite!
Third-party providers like those talked about above will solely settle for requests which might be despatched server-side. There’s numerous causes for this however utilizing safe or personal keys is often one. Utilizing these keys server-side means they’re not uncovered to the consumer (browser) and might’t be abused, and it’s right here the place Gatsby’s Serverless Capabilities may also help.
Gatsby gives the identical logical method to Serverless Capabilities as they do with pages. For instance, web site pages are positioned in src/pages and Serverless Capabilities are positioned in src/api.
Naturally, there’s barely extra to it than that however Gatsby’s developer expertise is each logical and constant, and I for one completely love that!
Identical Origin Capabilities
9 instances out of ten when working with Serverless Capabilities you’ll be utilizing them the way in which they have been supposed for use, E.g, your web site makes use of its personal features. I name this utilization Identical Origin Capabilities or SOF’s for brief. On this state of affairs each the Entrance-end and the API are deployed to the identical origin, E.g www.my-website.com, and www.my-website.com/api, and communication between the 2 is each seamless and, after all, blazing quick!
Right here’s a diagram to assist illustrate what that appears like:
Cross-Origin Capabilities
There are, nevertheless, at the least two eventualities I’ve encountered the place I’ve wanted what I’ve been calling “Cross-Origin Capabilities” (or COF’s for brief). The 2 eventualities the place I’ve wanted COF’s are as follows:
I would like server-side capabilities however the origin web site can’t run Serverless Capabilities.
The Serverless Operate is utilized by multiple origin.
Observe: Utilizing Gatsby isn’t the one option to write Serverless Capabilities however extra on that in a second.
I first experimented with this method in November 2020 earlier than the discharge of Gatsby Capabilities and used Netlify Capabilities to supply server-to-server communications with the Twitter API and my Gatsby weblog and industrial portfolio. You’ll be able to examine this method right here: Use Netlify Capabilities and the Twitter API v2 as a CMS in your Gatsby weblog.
After the discharge of Gatsby Capabilities in June 2021 I refactored the above to work with Gatsby Capabilities and right here’s just a little extra details about how I went about it and why: Utilizing Gatsby Capabilities as an abstracted API.
Right here’s a diagram to raised illustrate the final method.
Within the above diagram website-1.com is constructed with Gatsby and may have used Serverless Capabilities (however doesn’t) and website-2.com is constructed utilizing one thing that has no Serverless Operate capabilities.
Observe: In each circumstances, they each want to make use of the identical third-party service so it is smart to summary this performance right into a standalone API.
The instance standalone API (my-api.com) can also be a Gatsby web site and has Serverless Operate capabilities, however extra importantly, it permits web sites from different origins to make use of its Serverless Capabilities.
I do know what you’re considering: CORS! Properly, sit tight. I’ll cowl this shortly.
💰 Monetizing MDX Embed
This was the scenario I discovered myself in with MDX Embed. The documentation web site for this undertaking is constructed utilizing Storybook. Storybook has no serverless capabilities however I actually wanted server-to-server communication. My answer? I created a standalone API known as Paulie API.
Paulie API
Paulie API (like the instance standalone API talked about above) can settle for requests from web sites of various origins and might connect with numerous totally different third-party providers, considered one of which is Stripe.
To allow Stripe funds from MDX Embed, I created an api/make-stripe-payment endpoint on Paulie API which may move the related info from MDX Embed by its personal Serverless Operate and on to the Stripe API to create a “checkout”. You’ll be able to see the src code right here.
As soon as a checkout has been efficiently created, the Stripe API returns a URL. This URL is handed again to MDX Embed which opens a brand new window within the browser the place “clients” can securely enter their fee particulars on a Stripe webpage… and growth! You receives a commission!
Right here’s a diagram that higher illustrates how this works:
This method is identical as talked about above the place https://mdx-embed.com sends requests to https://paulieapi.gatsbyjs.io which in flip connects to the Stripe API utilizing server-to-server communication. However earlier than we go an excessive amount of additional, it’s price explaining why I didn’t use react-stripe-js.
react-stripe-js
react-stripe-js is a client-side (browser) toolkit that lets you create Stripe checkouts and parts in your React undertaking. With react-stripe-js you may arrange a technique for accepting funds securely with out the necessity for server-side communication, however… and there’s a however. I wished to implement “Pay what you need” contributions. Enable me to elucidate.
Right here’s a screenshot of the MDX Embed “product” that I’ve arrange in my Stripe dashboard. Discover the value is $1.00.
If I’d used react-stripe-js to allow funds all “clients” can be requested to pay the identical quantity. On this case, it’s solely $1.00 and that’s not gonna pay the payments is it!
To allow “Pay what you need” (e.g. a nominal quantity chosen by a “buyer”), you must dive just a little deeper and use server-to-server communication and ship this quantity to the Stripe API utilizing a customized HTTP request. That is the place I am utilizing a Gatsby Operate and I move in a dynamic worth which is able to then be used to create the “checkout” expertise and overwrite the value outlined in my Stripe dashboard.
On MDX Embed, I’ve added an HTML <enter sort=”quantity” /> which permits “clients” to set an quantity somewhat than paying a predefined quantity — if solely all e-commerce have been like this!
Right here’s just a little video I made that exhibits how MDX Embed, Paulie API and the Stripe API all work collectively:
It’s best to see from the above diagram that http://paulie.dev additionally makes use of the Stripe endpoint. I’ve used the identical method as with MDX Embed to allow the “Pay what you need” performance. It’s a small factor, however because the make-stripe-payment endpoint is already written and dealing, I can re-use it and keep away from duplicating this performance.
The http://paulie.dev web site additionally has its personal Gatsby Serverless Capabilities which I exploit to submit person reactions to Fauna and seize E-newsletter signups. This performance is exclusive to this web site so I haven’t abstracted this but. Nevertheless, if I wished publication sign-ups on https://www.pauliescanlon.io, this may be the purpose the place I migrate the operate over to Paulie API.
Abstraction
This may appear to be a step backwards to summary your Serverless Capabilities. In any case, one of many coolest issues about going serverless is that each your entrance and back-end code are reside in the identical place. As I’ve proven, there are occasions the place abstracting is smart — to me anyway.
I’m definitely benefitting from utilizing this method and plan to additional develop my API to supply extra performance to numerous my very own web sites, but when getting cash from open-source is of curiosity to you and your web site isn’t constructed utilizing Gatsby, this method could be the reply you have been on the lookout for.
Wanna get began with Gatsby Capabilities? Try the Gatsby Capabilities docs to get going!
Additional Studying
In case you’re interested by studying extra about Serverless Capabilities I’d advocate:
Swizec Teller’s guide, “Serverless Handbook For Frontend Engineers”
Benedict’s Summer time Capabilities course
…and, after all, the Gatsby docs
FuncJam
From August 17 to September 30, the Gatsby people are working a neighborhood competitors with some completely mega prizes to be received. If there’s nonetheless time, then pop on over to FuncJam and take part. Additionally, try the Byte-size part of this weblog submit; it comprises useful movies and hyperlinks to numerous instance features.
Thanks for studying, and for those who’d like to debate something talked about on this article, go away a remark under or discover me on Twitter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!