## useStripe hook

The `useStripe` hook returns the initialized [Stripe.js](/js/initializing.md) instance from the `Elements` provider.
Use it to [confirm payments](/js/payment_intents/confirm_payment.md) and call other Stripe.js methods from inside
your React components.

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

### Return value

- `result` (Stripe | null) **required**
  Returns the `Stripe` instance configured on the [provider](/js/elements/elements_provider.md), or `null` while it is still loading.

### Call useStripe

```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;
    }

    // Use the `Stripe` instance to confirm the payment
    await stripe.confirmPayment({
      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>
  );
};
```