Full-Stack React Projects - Second Edition

Using Stripe Card Elements

In order to use Stripe's CardElement component from react-stripe-elements to add the credit card field to the PlaceOrder component, we need to wrap the PlaceOrder component using the injectStripe higher-order component (HOC) from Stripe.

This is because the CardElement component needs to be part of a payment form component that is built with injectStripe and also wrapped with the Elements component. So, when we create a component called PlaceOrder, we will wrap it with injectStripe before exporting it, as shown in the following code.

mern-marketplace/client/cart/PlaceOrder.js:

const PlaceOrder = (props) => { … } PlaceOrder.propTypes = {  checkoutDetails: PropTypes.object.isRequired}export default injectStripe(PlaceOrder) ...