react-stripe-toolkit

react-stripe-toolkit

A lightweight React library that simplifies integrating Stripe Checkout into your application. This toolkit provides a custom hook, useStripeCheckout, that manages the loading state, errors, and redirection flow for you, making your Stripe integration clean and straightforward.

Live Demo

Installation

npm install react-stripe-toolkit

or

yarn add react-stripe-toolkit

Available Hooks

Hook	Description
useStripeCheckout	A hook to handle the entire Stripe Checkout redirection flow, including session creation and error handling.
useStripeSubscription	A hook to handle the Stripe Checkout flow for creating recurring subscriptions.
useStripeInvoices	A hook to fetch a list of invoices for a given Stripe Customer ID.
useStripeWebhook	A hook to process and handle Stripe webhook events with type safety.

Running the Demo Locally

To run the included example application on your machine:

• Clone the repository:

  git clone https://github.com/vlad-grigoryan/react-stripe-toolkit.git
  cd react-stripe-toolkit
  

• Install root dependencies:

  npm install
  

• Set up the example: Navigate to the example directory and create a .env file.

  cd example
  touch .env
  

• Add your Stripe keys to .env: You'll need your Stripe publishable key and secret key.

  VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...
  STRIPE_SECRET_KEY=sk_test_...
  

• Install example dependencies and run:

  npm install
  npm run dev
  

The demo will be available at http://localhost:5173.

Why react-stripe-toolkit?

The goal of this toolkit is to abstract away the boilerplate and complexity of setting up Stripe Checkout in a React application. By using the useStripeCheckout hook, you get:

• Simplified Logic: No need to write repetitive fetch requests or manage loading and error states manually.
• Serverless Ready: Designed to work seamlessly with serverless functions for creating checkout sessions.
• Easy to Use: A clean and minimal API that gets you up and running with Stripe in minutes.
• Lightweight: A small package with a focused purpose.

License

MIT

Installation

npm install react-stripe-toolkit @stripe/stripe-js

Requires React 17+, TypeScript optional.

Quick Start

import { useStripeCheckout } from 'react-stripe-toolkit';

export function PayButton() {
  const { redirect, loading, error } = useStripeCheckout({
    publishableKey: import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY,
  });

  return (
    <button
      disabled={loading}
      onClick={() => redirect(undefined, { priceId: '<your_price_id>' })}
    >
      {loading ? 'Redirecting…' : 'Pay with Stripe'}
    </button>
  );
}

redirect() accepts either an existing sessionId or payload for your backend to create one. See useStripeCheckout for full API.

Example App (local)

A complete Vite demo lives in example/.

git clone https://github.com/vlad-grigoryan/react-stripe-toolkit.git
cd react-stripe-toolkit

# create env file with your keys
cp example/.env.example example/.env
# edit example/.env
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx

npm install          # installs root + example deps
npm --prefix example run dev   # opens http://localhost:5173

Live Demo

The exact same demo is deployed on Netlify: https://coruscating-gumption-4ce6a7.netlify.app/.

Deploying Your Own Demo (Netlify)

• Copy this repo and push to GitHub.
• In Netlify → "Add new site" → "Import from GitHub".
• Add env vars VITE_STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY.
• Netlify picks up netlify.toml, builds example/, and deploys.

Contributing

Pull requests and issues are welcome! Please open an issue first to discuss major changes.

License

MIT © 2025 Vlad Grigoryan