## ElementsConsumer

`ElementsConsumer` exposes the same `Stripe` and `Elements` instances as the [hooks](/js/elements/use_stripe.md), but uses a render
prop instead of React hooks. This is useful when building class components or when you prefer the
render-prop pattern.

### Props

- `children` (({stripe: Stripe | null, elements: Elements | null}) => ReactNode) **required**
  A render prop that receives `{stripe, elements}`. Render your UI using these instances.

### Render ElementsConsumer

```JSX
import React from 'react';
import {ElementsConsumer, PaymentElement} from '@stripe/react-stripe-js';

class CheckoutForm extends React.Component {
  render() {
    const {stripe, elements} = this.props;

    return (
      <form>
        <PaymentElement />
        <button disabled={!stripe}>Pay</button>
      </form>
    );
  }
}

// Wrap your class component in ElementsConsumer to inject props
export default class WrappedCheckoutForm extends React.Component {
  render() {
    return (
      <ElementsConsumer>
        {({stripe, elements}) => (
          <CheckoutForm stripe={stripe} elements={elements} />
        )}
      </ElementsConsumer>
    );
  }
}
```