# @stripe/react-stripe-js
> React components for Stripe.js and Stripe Elements
Latest version **6.10.0** (published 2026-09-10) · MIT license · 0 weekly downloads
## Install
```sh
npm install @stripe/react-stripe-js
pnpm add @stripe/react-stripe-js
yarn add @stripe/react-stripe-js
bun add @stripe/react-stripe-js
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 6.10.0 |
| Published | 2026-09-10 |
| First published | 2020-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 798.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2042 |
| Author | Stripe |
| Maintainers | rado-stripe, bmathews-stripe, cbala-stripe, dodgez-stripe, alaycock-stripe, kdeland-stripe, bdaily-stripe, rvolyar-stripe, tjliu-stripe, alic-stripe |
| Keywords | React, Stripe, Elements |
## Links
- npm: https://www.npmjs.com/package/@stripe/react-stripe-js
- Repository: https://github.com/stripe/react-stripe-js
- npm.io page: https://npm.io/package/@stripe/react-stripe-js
## Dependencies (1)
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 6.10.0 (latest) — 2026-09-10
- 6.0.0-rc.2 (rc) — 2026-03-24
- 3.11.0 — 2026-09-10
- 6.9.0 — 2026-09-03
- 6.8.2 — 2026-08-20
- 6.8.1 — 2026-08-10
- 6.8.0 — 2026-07-15
- 6.7.0 — 2026-07-01
- 6.6.0 — 2026-06-02
- 6.5.0 — 2026-05-29
- 6.4.0 — 2026-05-18
- 6.3.0 — 2026-04-27
- 6.2.0 — 2026-04-14
- 6.1.0 — 2026-03-30
- 6.0.0 — 2026-03-26
- … 92 more at https://npm.io/package/@stripe/react-stripe-js/versions
## README
# React Stripe.js
React components for
[Stripe.js and Elements](https://stripe.com/docs/stripe-js).
[](https://www.npmjs.com/package/@stripe/react-stripe-js)
## Requirements
The minimum supported version of React is v16.8. If you use an older version,
upgrade React to use this library. If you prefer not to upgrade your React
version, we recommend using legacy
[`react-stripe-elements`](https://github.com/stripe/react-stripe-elements).
## Getting started
- [Build a custom checkout page using the Checkout Sessions API](https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout)
- [Add React Stripe.js to your React app](https://stripe.com/docs/stripe-js/react#setup)
- [Try it out using CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark)
## Documentation
- [React Stripe.js reference](https://stripe.com/docs/stripe-js/react)
- [Migrate from `react-stripe-elements`](docs/migrating.md)
- [Legacy `react-stripe-elements` docs](https://github.com/stripe/react-stripe-elements/#react-stripe-elements)
- [Examples](examples)
## Build a custom checkout page
For a new custom checkout page, we recommend the
[Checkout Sessions API](https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout)
with `ui_mode: 'elements'`. This lets you combine Stripe Elements with your own
React layout while Checkout Sessions manages the checkout state. If you want to
own every part of your checkout, the lower-level
[Payment Intents API](https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=payment-intents)
provides more fine-grained control, but requires significantly more code and
ongoing maintenance.
First, install React Stripe.js and
[Stripe.js](https://github.com/stripe/stripe-js).
```sh
npm install @stripe/react-stripe-js @stripe/stripe-js
```
Create a Checkout Session on your server using trusted product and pricing data,
then return its client secret:
```js
// POST /create-checkout-session
const session = await stripe.checkout.sessions.create({
ui_mode: 'elements',
mode: 'payment',
return_url: 'https://example.com/order/123/complete',
line_items: [
{
price_data: {
currency: 'usd',
product_data: {name: 'T-shirt'},
unit_amount: 1099,
},
quantity: 1,
},
],
});
if (!session.client_secret) {
throw new Error('Checkout Session is missing a client secret.');
}
res.json({clientSecret: session.client_secret});
```
Client:
```jsx
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {loadStripe} from '@stripe/stripe-js';
import {
PaymentElement,
CheckoutElementsProvider,
useCheckoutElements,
} from '@stripe/react-stripe-js/checkout';
const CheckoutForm = () => {
const result = useCheckoutElements();
const [errorMessage, setErrorMessage] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = async (event) => {
event.preventDefault();
if (result.type !== 'success' || !result.checkout.canConfirm) {
return;
}
setIsSubmitting(true);
setErrorMessage(null);
try {
const confirmResult = await result.checkout.confirm({
returnUrl: 'https://example.com/order/123/complete',
});
if (confirmResult.type === 'error') {
setErrorMessage(confirmResult.error.message);
}
} catch (error) {
setErrorMessage(
error instanceof Error ? error.message : 'An unexpected error occurred.'
);
} finally {
setIsSubmitting(false);
}
};
if (result.type === 'loading') {
return Loading checkout...
;
}
if (result.type === 'error') {
return {result.error.message}
;
}
const {checkout} = result;
return (
<>
{checkout.lineItems.map((lineItem) => (
-
{lineItem.name}: {lineItem.total.amount}
))}
Total: {checkout.total.total.amount}
);
};
// Use the publishable key for the same account that created the Checkout Session.
const stripePromise = loadStripe('pk_test_...');
const clientSecretPromise = fetch('/create-checkout-session', {
method: 'POST',
}).then(async (response) => {
const body = await response.json();
if (!response.ok) {
throw new Error(body.error ?? 'Unable to create a Checkout Session.');
}
return body.clientSecret;
});
const options = {
clientSecret: clientSecretPromise,
elementsOptions: {
appearance: {
theme: 'stripe',
},
},
};
const App = () => (
);
createRoot(document.getElementById('root')).render();
```
### TypeScript support
React Stripe.js is packaged with TypeScript declarations. Some types are pulled
from [`@stripe/stripe-js`](https://github.com/stripe/stripe-js)—be sure to add
`@stripe/stripe-js` as a dependency to your project for full TypeScript support.
Typings in React Stripe.js follow the same
[versioning policy](https://github.com/stripe/stripe-js#typescript-support) as
`@stripe/stripe-js`.
### Contributing
This project is maintained by Stripe and does not accept external pull requests.
If you have feedback or ideas, please
[open an issue](https://github.com/stripe/react-stripe-js/issues/new).
---
_Source: https://npm.io/package/@stripe/react-stripe-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._