Search for a command to run...
I'm Manuel and I work at NearForm as a Full Remote Software Developer from 🇮🇹 Italy. I'm one of the Fastify maintainers since 2019. Contributing to Open Source Software teaches me something new every day. You should join this extraordinary world.
No comments yet. Be the first to comment.
This series will take a deep dive into the Fastify world, its paradigms, and its ecosystem. We intend it to be a companion to the upcoming Fastify book written by us and published by Packt.
by Manuel Spigolon If you are using Fastify, you already know that it is the fastest Node.js web framework in town. But we know that a benchmark is something different from a real-world application. The benchmark has the fastest startup time possible...
How to stream React components to the browser using Fastify and reply.hijack()
Did you see the "Verified" badge on some GitHub commits and wonder how to get it for your own commits? Well,GitHub shows the ‘Verified’ badge when a commit has a valid signature from a trusted key (GPG, SSH, S/MIME, or GitHub’s own). In this article...
Part 0: From Instinct to System
We share smart strategies for ensuring a slow client doesn’t crash your server
I was looking at the Fastify plugin list and found myself asking, "What is this @fastify/request-context plugin?"So, I checked it out, and here I am, writing a post about it to share what it is and how it can be useful for you! What is AsyncLocalStor...
In this article, we will understand how to use Fastify and Stripe as a payment gateway! So, let's start!
Stripe is a payment gateway that allows you to accept payments on your website. Integrating Stripe with Fastify is easy, but you need some configuration before starting with the code.
First, you need to create a Stripe account and in a few seconds, you will get access to the Stripe test environment.
After that, you need to:
1) Copy-paste the Secret key from the home page of your Stripe account.
2) Create a test product accessing the Products tab in the Stripe dashboard.
3) Finally, get the price id from the product detail page.
Great! Now you can start using Stripe with Fastify.
What we are going to do is to create a simple payment gateway that will accept payments with Stripe. The flow will be:
0. User sees our product web page.
1. User clicks on the button to pay.
2. Fastify creates a Stripe session and redirects the user to the Stripe checkout page.
3. Stripe redirects the user to the callback URL.
4. Fastify receives the payment and sends a response to the user.
Since we are not focusing on the implementation of web pages, we will use the Stripe
test pages.
All the pages are stored in this GitHub repository: Eomm/fastify-discord-bot-demo or in the Stripe documentation.
To create an empty project, we need to create a new folder and run the following commands:
mkdir my-fastify-app-stripe
cd my-fastify-app-stripe
npm init --yes
Now we can install all the dependencies we need:
fastify: our favourite framework for building web applications.stripe: the official Stripe SDK.@fastify/static: the plugin that allows us to serve static files.@fastify/formbody: the plugin that allows us to parse the x-www-form-urlencoded body of the request.@fastify/env: the plugin that allows us to configure our application from the environment variables.Create a .env file where you can configure the following variables:
NODE_ENV=dev
PORT=3000
STRIPE_PRIVATE_KEY=--paste-stripe-private-key-here--
BASE_URL=http://localhost:3000
HOST=0.0.0.0
Finally, we must copy the test web pages into a new public/ folder. You should have downloaded those pages in the previous section.
We are ready to create a new app.js file to start writing our application.
Our first steps are:
@fastify/static plugin to serve the public/ web pages.@fastify/env plugin to read the .env file, and the schema option will warn us if we are missing some environment variables.'use strict'
const path = require('path')
const fastify = require('fastify')
const fastifyStatic = require('@fastify/static')
const env = require('@fastify/env')
async function buildApp () {
const app = fastify({
logger: true
})
app.register(fastifyStatic, {
root: path.join(__dirname, '/public')
})
await app.register(env, {
dotenv: true,
schema: {
type: 'object',
required: ['PORT', 'STRIPE_PRIVATE_KEY'],
properties: {
NODE_ENV: { type: 'string' },
PORT: { type: 'integer' },
STRIPE_PRIVATE_KEY: { type: 'string' },
HOST: { type: 'string', default: 'localhost' },
BASE_URL: { type: 'string', default: 'http://localhost:3000' }
}
}
})
return app
}
async function run () {
const app = await buildApp()
app.listen({
port: app.config.PORT,
host: app.config.HOST
})
}
run()
Now, running the node app.js command will start the application, and if you open a browser at http://localhost:3000/ you should see the product page.
Well done so far!
Right now, clicking on the button to pay will redirect the user to the Stripe checkout page, but it won't work because we don't have integrated Stripe yet.
So, let's create a new stripe-integration.js file with the following code:
'use strict'
const stripe = require('stripe')
module.exports = async function plugin (app, opts) {
const stripeClient = stripe(app.config.STRIPE_PRIVATE_KEY)
app.register(require('@fastify/formbody'))
app.post('/create-checkout-session', async (request, reply) => {
const session = await stripeClient.checkout.sessions.create({
line_items: [
{
// Provide the exact Price ID
price: 'price_1LRC97CHE57DZYK7ay4z2eGw',
quantity: 1
}
],
mode: 'payment',
success_url: `${app.config.BASE_URL}/success?id=${Math.random()}`,
cancel_url: `${app.config.BASE_URL}/cancel?id=${Math.random()}`
})
return reply.redirect(303, session.url)
})
app.get('/success', async (request, reply) => {
request.log.info('success callback from id %s', request.query.id)
return reply.sendFile('success.html')
})
app.get('/cancel', async (request, reply) => {
request.log.info('cancel callback from id %s', request.query.id)
return reply.sendFile('cancel.html')
})
}
This file is a Fastify plugin that manages the Stripe integration.
First, it instantiates the Stripe client with the STRIPE_PRIVATE_KEY environment variable.
Then, it registers the /create-checkout-session route that will create a new checkout session.
During the creation of the session, you will be able to control the price and the quantity of the product.
Now, for the test purposes, we copied and pasted the price ID we generated in the Stripe dashboard, but of course, you can dynamically load it based on the user input.
As explained in the What will do Fastify? Section, we have the success and cancel endpoints that will be reached the Stripe checkout page complete the payment.
In this case, we are just adding a random ID to the query string to mock that we can identify the callbacks to update some data.
The sendFile method will send the file located in the public/ folder and will show a feedback message to the users to let they know that they will receive the goodies they just payed.
Our last step is to register the stripe-integration plugin in the app.js file. So, we must add the following line just after the @fastify/env registration.
...
HOST: { type: 'string', default: 'localhost' },
BASE_URL: { type: 'string', default: 'http://localhost:3000' }
}
}
})
app.register(require('./stripe-integration'))
return app
}
Now, we can run the application and see the checkout page!
To complete the test payment, you can use the Stripe fake credit cards
After the payment, you will see the success page!
Congratulations! You have completed the Fastify with Stripe tutorial! Now, you can start improving this basic scaffolding to integrate your e-commerce with Stripe through Fastify.
The source code is available at stripe-integration
Remember to follow me on Twitter @Eomm to get more content! See you soon for the next article!