Frontend Blocks typescript Intermediate

Stripe.js Payment Element

Render a Stripe Payment Element in React and confirm the payment on submit.

typescript

import { useStripe, useElements, PaymentElement } from "@stripe/react-stripe-js";

export function CheckoutForm({ clientSecret }: { clientSecret: string }) {
  const stripe   = useStripe();
  const elements = useElements();

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!stripe || !elements) return;
    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: { return_url: window.location.origin + "/thanks" },
    });
    if (error) console.error(error.message);
  };
  return (
    <form onSubmit={submit}>
      <PaymentElement />
      <button type="submit">Pay</button>
    </form>
  );
}