## useElements

The `useElements` hook returns the `Elements` instance so that you can safely pass the payment information collected by the Payment Element to the Stripe API. If you need to access an Element from a class component, use [ElementsConsumer](https://docs.stripe.com/js/react_stripe_js/elements/elements_consumer.md) instead.

### Return value

- `result` Returns the current `Elements` instance or `null` while the provider is still loading.

### Example

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

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

  const handleSubmit = async (event) => {
    // Block native form submission.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js has not yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    // Get a reference to a mounted Element.
    const cardElement = elements.getElement(CardElement);

    // Use your card Element with other elements or form data
    // to confirm your PaymentIntent.
    const {error, paymentIntent} = await stripe.confirmCardPayment(
      clientSecret,
      {
        payment_method: {
          card: cardElement,
          billing_details: {
            name: 'Jenny Rosen',
          },
        },
      }
    );

    if (error) {
      // Show error to your customer (for example, invalid card details)
      console.log(error);
    } else {
      // The payment has been processed!
      if (paymentIntent.status === 'succeeded') {
        // Show a success message to your customer
      }
    }
  };

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