Core Providers and Hooks

/**
 * React context provider for Stripe Elements
 * @param props - Elements configuration props
 * @returns JSX element wrapping child components with Elements context
 */
function Elements(props: ElementsProps): JSX.Element;

interface ElementsProps {
  /** Stripe instance or Promise resolving to Stripe instance */
  stripe: PromiseLike<Stripe | null> | Stripe | null;
  /** Configuration options for Elements */
  options?: StripeElementsOptions;
  /** Child components that will have access to Elements context */
  children: ReactNode;
}

interface StripeElementsOptions {
  /** Client secret for the payment intent or setup intent */
  clientSecret?: string;
  /** Appearance customization options */
  appearance?: StripeElementsAppearance;
  /** Custom fonts configuration */
  fonts?: StripeElementsFonts;
  /** Locale for displaying text */
  locale?: string;
  /** Controls when Elements are loaded */
  loader?: 'auto' | 'never' | 'always';
}

import React from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe('pk_test_...');

// Basic usage
const App = () => (
  <Elements stripe={stripePromise}>
    <PaymentForm />
  </Elements>
);

// With options
const AppWithOptions = () => (
  <Elements 
    stripe={stripePromise}
    options={{
      clientSecret: 'pi_...',
      appearance: {
        theme: 'stripe',
        variables: {
          colorPrimary: '#0570de',
        },
      },
      locale: 'en'
    }}
  >
    <PaymentForm />
  </Elements>
);

// SSR-safe with null stripe
const SSRApp = () => (
  <Elements stripe={null}>
    <PaymentForm />
  </Elements>
);

/**
 * Hook to access Stripe instance from Elements context
 * @returns Stripe instance or null if not available
 */
function useStripe(): Stripe | null;

import React from 'react';
import { useStripe } from '@stripe/react-stripe-js';

const PaymentComponent = () => {
  const stripe = useStripe();

  const handlePayment = async () => {
    if (!stripe) {
      console.error('Stripe has not loaded yet.');
      return;
    }

    // Use stripe instance for payment operations
    const {error, paymentIntent} = await stripe.confirmCardPayment(
      clientSecret,
      {
        payment_method: {
          card: cardElement,
          billing_details: {
            name: 'Jenny Rosen',
          },
        }
      }
    );
  };

  return (
    <button onClick={handlePayment} disabled={!stripe}>
      Pay Now
    </button>
  );
};

/**
 * Hook to access Elements instance from Elements context
 * @returns StripeElements instance or null if not available
 */
function useElements(): StripeElements | null;

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

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

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!stripe || !elements) {
      return;
    }

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      console.error(submitError.message);
      return;
    }

    // Confirm payment
    const {error} = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: 'https://example.com/complete',
      },
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe || !elements}>
        Submit
      </button>
    </form>
  );
};

/**
 * Render prop component for accessing Elements context
 * @param props - Consumer props with children render function
 * @returns Rendered result of children function
 */
function ElementsConsumer(props: ElementsConsumerProps): ReactNode;

interface ElementsConsumerProps {
  /** Render function receiving Elements context value */
  children: (props: ElementsContextValue) => ReactNode;
}

interface ElementsContextValue {
  /** Elements instance */
  elements: StripeElements | null;
  /** Stripe instance */
  stripe: Stripe | null;
}

import React from 'react';
import { ElementsConsumer } from '@stripe/react-stripe-js';

class PaymentForm extends React.Component {
  render() {
    return (
      <ElementsConsumer>
        {({stripe, elements}) => (
          <form onSubmit={(e) => this.handleSubmit(e, stripe, elements)}>
            <PaymentElement />
            <button disabled={!stripe}>
              Pay Now
            </button>
          </form>
        )}
      </ElementsConsumer>
    );
  }

  handleSubmit = async (event, stripe, elements) => {
    event.preventDefault();
    
    if (!stripe || !elements) return;
    
    const {error} = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: 'https://example.com/complete',
      },
    });
    
    if (error) {
      console.error(error.message);
    }
  };
}

// This will throw an error
const MyComponent = () => {
  const stripe = useStripe(); // Error: Could not find Elements context
  return <div>Component</div>;
};

// Correct usage
const App = () => (
  <Elements stripe={stripePromise}>
    <MyComponent /> {/* Now useStripe() will work */}
  </Elements>
);

import { Stripe, StripeElements } from '@stripe/stripe-js';

const PaymentComponent: React.FC = () => {
  // These are properly typed
  const stripe: Stripe | null = useStripe();
  const elements: StripeElements | null = useElements();
  
  return <div>Payment Component</div>;
};