Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@christopher-stripe/react-stripe-js
Advanced tools
React components for Stripe.js and Stripe Elements
React components for Stripe.js and Stripe Elements.
Please contact us at stripejs-feedback@stripe.com and provide your Stripe account ID for access to new documentation!
First, install React Stripe.js and Stripe.js.
npm install @stripe/react-stripe-js @stripe/stripe-js
import React from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {
CardElement,
Elements,
useStripe,
useElements,
} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error, paymentMethod} = await stripe.createPaymentMethod({
type: 'card',
card: elements.getElement(CardElement),
});
};
return (
<form onSubmit={handleSubmit}>
<CardElement />
<button type="submit" disabled={!stripe}>
Pay
</button>
</form>
);
};
const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
const App = () => (
<Elements stripe={stripePromise}>
<CheckoutForm />
</Elements>
);
ReactDOM.render(<App />, document.body);
import React from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {CardElement, Elements, ElementsConsumer} from '@stripe/react-stripe-js';
class CheckoutForm extends React.Component {
handleSubmit = async (event) => {
event.preventDefault();
const {stripe, elements} = this.props;
const {error, paymentMethod} = await stripe.createPaymentMethod({
type: 'card',
card: elements.getElement(CardElement),
});
};
render() {
const {stripe} = this.props;
return (
<form onSubmit={this.handleSubmit}>
<CardElement />
<button type="submit" disabled={!stripe}>
Pay
</button>
</form>
);
}
}
const InjectedCheckoutForm = () => (
<ElementsConsumer>
{({stripe, elements}) => (
<CheckoutForm stripe={stripe} elements={elements} />
)}
</ElementsConsumer>
);
const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
const App = () => (
<Elements stripe={stripePromise}>
<InjectedCheckoutForm />
</Elements>
);
ReactDOM.render(<App />, document.body);
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
.
React Stripe.js is packaged with TypeScript declarations. Some types are pulled
from @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 as
@stripe/stripe-js
.
If you would like to contribute to React Stripe.js, please make sure to read our contributor guidelines.
FAQs
React components for Stripe.js and Stripe Elements
The npm package @christopher-stripe/react-stripe-js receives a total of 0 weekly downloads. As such, @christopher-stripe/react-stripe-js popularity was classified as not popular.
We found that @christopher-stripe/react-stripe-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.