Skip to content

SnowGlowedMountain/react-stripe.js

Repository files navigation

React Stripe.js

React components for Stripe.js and Stripe Elements.

build status npm version

Getting Started

Documentation

Minimal Example

import React from 'react';
import ReactDOM from 'react-dom';

import {
  CardElement,
  Elements,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

const stripe = window.Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

const MyCheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    ev.preventDefault();
    const {error, paymentMethod} = await stripe.createPaymentMethod({
      type: 'card',
      card: elements.getElement(CardElement),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button>Pay</button>
    </form>
  );
};

const App = () => {
  return (
    <Elements stripe={stripe}>
      <MyCheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.body);

Minimum Requirements

React Stripe.js depends on the React Hooks API. 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.

Contributing

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

Releases

No releases published

Packages

No packages published