Set Up Stripe Payment in Chrome Extension (Plasmo & Next.js)

*This course contains the use of artificial intelligence. Revoicer is used to generate audio from text. Windsurf is used to generate parts of the code for this course.

Have you tried embedding a payment system into your Chrome Extension, only to find it seems too hard to achieve? This course walks you through creating a Chrome Extension with a Stripe payment system, starting with a demo project from Plasmo.

In the first section, I will walk you through the official quickstart guide to set up the with-stripe demo project. You will learn how to get the with-stripe project from Plasmo, how to set up a monthly payment product in Stripe and obtain the Stripe payment link, how to access the Chrome Identity API, how to set up a fixed Extension ID for development, and how to use Tailwind CSS to adjust the popup window’s width and height.

In the second section, I will explain the code in my project that combines the with-stripe demo project. You will learn how a beginner-friendly Chrome Extension can be developed with Plasmo, how to combine an existing project with the with-stripe demo project, and how to set up a one-time payment product in Stripe and modify the code accordingly.

In the last section, I will demonstrate how to make the extension ready for production and publish it in the Chrome Web Store. You will learn how to deploy the API server on Vercel, how to switch from development to production keys, how to create a production zip bundle, and how to publish your extension in the Chrome Web Store.

You will get all the files and links I have worked on in this course.