react-stripe-elements-universal

Exactly the same as Stripe's official react-stripe-elements, but doesn't choke when rendering on the server

> React components for Stripe.js and Stripe Elements

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).

Table of Contents

- Demo
- Installation
- First, install react-stripe-elements.
- Then, load Stripe.js in your application:
- Getting started
- The Stripe context (StripeProvider)
- Element groups (Elements)
- Setting up your payment form (injectStripe)
- Using individual *Element components
- Using the PaymentRequestButtonElement
- Component reference
-
- Props shape
-
- Props shape
- <*Element> components
- Available components
- Props shape
- injectStripe HOC
- Example
- Troubleshooting
- Development

Demo

The fastest way to start playing around with react-stripe-elements is with
this JSFiddle: .

You can also play around with the demo locally. The source code is in
demo/. To run it:

``shell
git clone https://github.com/stripe/react-stripe-elements
cd react-stripe-elements

(make sure you have yarn installed: https://yarnpkg.com/)

yarn install
yarn run demo
`

Now go to to try it out!

!Screenshot of the demo running

Installation

$3

Install with yarn:

`
yarn add react-stripe-elements
`

OR with npm:

`
npm install --save react-stripe-elements
`

OR using UMD build (exports a global ReactStripeElements object);

`html

`

$3

`html

`

Getting started

$3

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

`js
// index.js
import React from 'react';
import {render} from 'react-dom';
import {StripeProvider} from 'react-stripe-elements';

import MyStoreCheckout from './MyStoreCheckout';

const App = () => {
return (



);
};

render(, document.getElementById('root'));
`

$3

Next, when you're building components for your checkout form, you'll want to wrap the Elements component around your form.
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.

`js
// MyStoreCheckout.js
import React from 'react';
import {Elements} from 'react-stripe-elements';

import CheckoutForm from './CheckoutForm';

class MyStoreCheckout extends React.Component {
render() {
return (



);
}
}

export default MyStoreCheckout;
`

$3

Use the injectStripe [Higher-Order Component][hoc] (HOC) to build your payment
form components in the Elements tree. The [Higher-Order Component][hoc]
pattern in React can be unfamiliar to those who've never seen it before, so
consider reading up before continuing. The injectStripe HOC provides the
this.props.stripe property that manages your Elements groups. You can call
this.props.stripe.createToken within a component that has been injected to
submit payment data to Stripe.

[hoc]: https://facebook.github.io/react/docs/higher-order-components.html

> :warning: NOTE injectStripe cannot be used on the same element that renders
> the Elements component; it must be used on the child component of
> Elements. injectStripe returns a wrapped component that needs to sit
> under but above any code where you'd like to access
> this.props.stripe.

`js
// 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({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', name: 'Jenny Rosen'});
}

render() {
return (


export default injectStripe(CheckoutForm);
`

$3

Now, you can use individual *Element components, such as CardElement, to build your form.

`js
// CardSection.js
import React from 'react';
import {CardElement} from 'react-stripe-elements';

class CardSection extends React.Component {
render() {
return (

Card details


);
}
};

export default CardSection;
`

$3

The Payment Request Button lets you collect payment and address information from your customers using Apple Pay and the Payment Request API.

To use the PaymentRequestButtonElement you need to first create a PaymentRequest object. You can then conditionally render the PaymentRequestButtonElement based on the result of paymentRequest.canMakePayment and pass the PaymentRequest Object as a prop.

`js
class PaymentRequestForm extends React.Component {
constructor(props) {
super(props);

// For full documentation of the available paymentRequest options, see:
// https://stripe.com/docs/stripe.js#the-payment-request-object
const paymentRequest = props.stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1000,
},
});

paymentRequest.on('token', ({complete, token, ...data}) => {
console.log('Received Stripe token: ', token);
console.log('Received customer information: ', data);
complete('success');
});

paymentRequest.canMakePayment().then(result => {
this.setState({canMakePayment: !!result});
});

this.state = {
canMakePayment: false,
paymentRequest,
};
}

render() {
return this.state.canMakePayment ? (
paymentRequest={this.state.paymentRequest}
className="PaymentRequestButton"
style={{
// For more details on how to style the Payment Request Button, see:
// https://stripe.com/docs/elements/payment-request-button#styling-the-element
paymentRequestButton: {
theme: 'light',
height: '64px',
},
}}
/>
) : null;
}
}
export default injectStripe(PaymentRequestForm);
`

Component reference

$3

All applications using react-stripe-elements must use the component, which sets up the Stripe context for a component tree.
react-stripe-elements uses the provider pattern (which is also adopted by tools like react-redux and react-intl) to scope a Stripe context to a tree of components. This allows configuration like your API key to be provided at the root of a component tree. This context is then made available to the component and individual <*Element> components that we provide.

An integration usually wraps the around the application’s root component. This way, your entire application has the configured Stripe context.

#### Props shape

This component accepts all options that can be passed into Stripe(apiKey, options) as props.

`js
type StripeProviderProps = {
apiKey: string,
};
`

$3

The Elements component wraps groups of Elements that belong together. In most cases, you want to wrap this around your checkout form.

#### Props shape

This component accepts all options that can be passed into stripe.elements(options) as props.

`js
type ElementsProps = {
locale?: string,
fonts?: Array