Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Set Up Stripe Payment in Chrome Extension (Plasmo & Next.js)
534 students

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

Build a Chrome Extension starting with the Stripe payment demo project from Plasmo.
Created byMarco Tsang
Last updated 11/2025
English
English

What you'll learn

  • Set up the with-stripe demo project from Plasmo.
  • Combine a project with the with-stripe demo project.
  • Deploy an extension to production.
  • Publish it to the Chrome Web Store.

Course content

4 sections • 12 lectures • 48m total length

  • Set Up The with-stripe Demo Project - Part 12:35

    Set up a Chrome extension with the with-stripe template using Plasmo, install pnpm via Homebrew, create the project, and configure environment variables for Stripe integration; this is part 1.

  • Set Up a Monthly Payment Product and Get a Stripe Product Link3:40

    Set up a Stripe product link, create live and test monthly products, and paste the test payment link and test secret key into .env.development.

  • Accessing Chrome Identity API1:27

    Access the Chrome identity API by creating a Google Cloud project, configuring OAuth credentials, and setting up the consent screen for a Chrome extension, including external production considerations.

  • Set Up Fixed Extension ID For Development5:03

    Set up fixed extension id for development by generating private and public keys, updating .env.development, running the dev server, loading unpacked extension, and resolving OAuth client id in the manifest.

  • Set Up The with-stripe Demo Project - Part 25:24

    Continue setting up the with-stripe demo project by installing Tailwind CSS for the extension, configuring Tailwind and PostCSS, importing styles, and defining popup height and width.

Requirements

  • Beginner React.js / Next.js programming experience needed. I will walk you through all the steps from development to production.

Description

*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.

Who this course is for:

  • Beginner React.js / Next.js Programmer who wishes to create a Chrome Extension with the Stripe payment system embedded.

Report abuse