Making a Payment Using a Credit Card

The previous lesson taught us how to set up Stripe integration by generating a payment intent from Stripe. Let’s pick up from where we left off. Open the imports/ui/MakePayment.jsx file. On lines 2–6, we import useStripe, useElements, and PaymentElement from @stripe/react-stripe-js. The useStripe hook is used to load Stripe into the component, while useElements is used to load a Stripe Elements tag. The MakePaments component must be wrapped by a Stripe Elements tag because we’ll use a Stripe PaymentElement.

The PaymentElement component

The PaymentElement is a component from Stripe that displays a form on the page so that users to enter their credit card details for processing. The component in which the PaymentElement is contained should be wrapped with a Stripe Elements tag so that it has access to the Stripe library and client secret.

Open App.jsx to see how Elements is used to wrap the MakePayment component. On lines 84–88, the Element component from Stripe is used to wrap MakePayment. If a user navigates to ...