## useElements

To safely pass the payment information collected by the Payment Element to the Stripe API,
access the `Elements` instance so that you can use it with `stripe.confirmPayment`.

If you need to access an Element from a class component, use [ElementsConsumer](/react_stripe_js/elements/elements_consumer.md) instead.

### Return value

- `result` (Elements | null) **required**
  Returns the current `Elements` instance or `null` while the provider is still loading.

### Call useElements

```jsx
import React from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

export const PaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!stripe || !elements) {
      return;
    }

    await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || !elements}>
        Pay now
      </button>
    </form>
  );
};
```