Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stripe/react-stripe-js
React components for Stripe.js and Stripe Elements
https://github.com/stripe/react-stripe-js
Last synced: about 2 months ago
JSON representation
React components for Stripe.js and Stripe Elements
- Host: GitHub
- URL: https://github.com/stripe/react-stripe-js
- Owner: stripe
- License: mit
- Created: 2019-11-12T18:03:34.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-02T17:44:49.000Z (3 months ago)
- Last Synced: 2024-07-23T05:08:06.132Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://stripe.com/docs/stripe-js/react
- Size: 2.46 MB
- Stars: 1,702
- Watchers: 44
- Forks: 260
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Stripe.js
React components for
[Stripe.js and Elements](https://stripe.com/docs/stripe-js).
[](https://travis-ci.org/stripe/react-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
- [Learn how to accept a payment](https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements)
- [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)
### Minimal example
First, install React Stripe.js and
[Stripe.js](https://github.com/stripe/stripe-js).
```sh
npm install @stripe/react-stripe-js @stripe/stripe-js
```
#### Using hooks
```jsx
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {
PaymentElement,
Elements,
useStripe,
useElements,
} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState(null);
const handleSubmit = async (event) => {
event.preventDefault();
if (elements == null) {
return;
}
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
// Show error to your customer
setErrorMessage(submitError.message);
return;
}
// Create the PaymentIntent and obtain clientSecret from your server endpoint
const res = await fetch('/create-intent', {
method: 'POST',
});
const {client_secret: clientSecret} = await res.json();
const {error} = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
setErrorMessage(error.message);
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
};
return (
Pay
{/* Show error message to your customers */}
{errorMessage &&
{errorMessage}}
);
};
const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
const options = {
mode: 'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {
/*...*/
},
};
const App = () => (
);
ReactDOM.render(, document.body);
```
#### Using class components
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {
PaymentElement,
Elements,
ElementsConsumer,
} from '@stripe/react-stripe-js';
class CheckoutForm extends React.Component {
handleSubmit = async (event) => {
event.preventDefault();
const {stripe, elements} = this.props;
if (elements == null) {
return;
}
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
// Show error to your customer
return;
}
// Create the PaymentIntent and obtain clientSecret
const res = await fetch('/create-intent', {
method: 'POST',
});
const {client_secret: clientSecret} = await res.json();
const {error} = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
};
render() {
const {stripe} = this.props;
return (
Pay
);
}
}
const InjectedCheckoutForm = () => (
{({stripe, elements}) => (
)}
);
const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
const options = {
mode: 'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {
/*...*/
},
};
const App = () => (
);
ReactDOM.render(, document.body);
```
### 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
If you would like to contribute to React Stripe.js, please make sure to read our
[contributor guidelines](CONTRIBUTING.md).