Needling Perl Mongers

    @stripe/react-stripe-js
    TypeScript icon, indicating that this package has built-in type declarations

    1.10.0 • Public • Published

    React Stripe.js

    React components for Stripe.js and Elements.

    build status npm version

    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.

    Getting started

    Documentation

    Minimal example

    First, install React Stripe.js and Stripe.js.

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

    Using hooks

    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();
    
        if (elements == null) {
          return;
        }
    
        const {error, paymentMethod} = await stripe.createPaymentMethod({
          type: 'card',
          card: elements.getElement(CardElement),
        });
      };
    
      return (
        <form onSubmit={handleSubmit}>
          <CardElement />
          <button type="submit" disabled={!stripe || !elements}>
            Pay
          </button>
        </form>
      );
    };
    
    const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
    
    const App = () => (
      <Elements stripe={stripePromise}>
        <CheckoutForm />
      </Elements>
    );
    
    ReactDOM.render(<App />, document.body);

    Using class components

    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;
    
        if (elements == null) {
          return;
        }
    
        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);

    TypeScript support

    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.

    Contributing

    If you would like to contribute to React Stripe.js, please make sure to read our contributor guidelines.

    Install

    npm i @stripe/react-stripe-js

    DownloadsWeekly Downloads

    695,347

    Version

    1.10.0

    License

    MIT

    Unpacked Size

    292 kB

    Total Files

    33

    Last publish

    Collaborators

    • arashn-stripe
    • bmathews-stripe
    • jackieosborn-stripe
    • samridh-stripe
    • christopher-stripe
    • cyuen-stripe
    • bsharon-stripe
    • rado-stripe
    • tylersmith-stripe
    • graceg-stripe
    • dweedon-stripe