Building an app with @reactjs? Accept payments with our new React components that help you quickly add @stripe! βš›οΈπŸš€βœ¨

  • React components that help you quickly add Stripe Elements to your React app.
  • Then, load Stripe.js in your application:

    In order for your application to have access to the Stripe object, let’s add to our root React App component:

    Next, when you’re building components for your checkout form, you’ll want to wrap the component around your .

  • All applications using must use the component, which sets up the Stripe context for a component tree.
  • uses the provider pattern (which is also adopted by tools like and ) to scope a Stripe context to a tree of components.
  • Components that need to initiate Source or Token creations (e.g. a checkout form component) can access via props of any component returned by the HOC factory.

react-stripe-elements – React components for Stripe.js and Stripe Elements

@romainhuet: Building an app with @reactjs? Accept payments with our new React components that help you quickly add @stripe! βš›οΈπŸš€βœ¨

React components that help you quickly add Stripe Elements to your React app.

This project is a thin React wrapper around Stripe.js and Stripe Elements. It allows you to add Elements to any React app, and manages the state and lifecycle of Elements for you.

The Stripe.js / Stripe Elements API reference goes into more detail on the various customization options for Elements (e.g. styles, fonts).

Using yarn:

Using npm:

Then, load Stripe.js in your application:

You’re good to go!

to our root React App component:

// index.js import React from ‘react’; import {StripeProvider} from ‘react-stripe-elements’; import MyStoreCheckout from ‘./MyStoreCheckout’; const App = () => { return ( < /StripeProvider> ); }; ReactDOM.render(, document.getElementById(‘root’));

. This groups the set of Stripe Elements you’re using together, so that we’re able to pull data from groups of Elements when you’re tokenizing.

// MyStoreCheckout.js import React from ‘react’; import {Elements} from ‘react-stripe-elements’; import CheckoutForm from ‘./CheckoutForm’; class MyStoreCheckout extends React.Component { render() { return ( < /Elements> ); } } export default MyStoreCheckout;

instance to submit payment data to Stripe.

// CheckoutForm.js import React from ‘react’; import {injectStripe} from ‘react-stripe-elements’; import AddressSection from ‘./AddressSection’; import CardSection from ‘./CardSection’; class CheckoutForm extends React.Component { handleSubmit = (ev) => { // We don’t want to let default form submission happen here, which would refresh the page. ev.preventDefault(); // Within the context of `Elements`, this call to createToken knows which Element to // tokenize, since there’s only one in this group. this.props.stripe.createToken({owner: {name: ‘Jenny Rosen’}}).then(({token}) => { console.log(‘Received Stripe token:’, token); }); // However, this line of code will do the same thing: // this.props.stripe.createToken({type: ‘card’, owner: {name: ‘Jenny Rosen’}}); } render() { return (

GitHub