| title | `usePaymentElement()` |
|---|---|
| description | Clerk's usePaymentElement() hook provides methods and state for interacting with a payment form. |
| sdk | nextjs, react |
The usePaymentElement() hook is used to control the payment form rendered by the <PaymentElement /> component. It provides the necessary state and methods to submit payment details to a payment provider like Stripe.
This hook must be used within a component that is a descendant of the <PaymentElementProvider /> component. It is typically used in a checkout flow that prompts a user to add a new payment method, or for adding a new payment method outside of a checkout.
usePaymentElement() doesn't accept any parameters. It derives its state and configuration from the nearest <PaymentElementProvider />.
usePaymentElement() returns an object with the following properties:
The usePaymentElement() hook works in conjunction with the <PaymentElementProvider /> and <PaymentElement /> components.
The <PaymentElementProvider /> component sets up the context for the payment element. It fetches all the necessary data from the payment provider (e.g., Stripe) and makes it available to its children.
This component renders the actual payment form from the provider (e.g., the Stripe Payment Element). It should be rendered as a child of <PaymentElementProvider />.
- Add a new payment method outside of a checkout flow
- Build a custom user interface that allows users to add a new payment method to their account.