The credit card field will be added to the checkout form using Stripe's CardElement component from react-stripe-elements.
The CardElement component must be part of a payment form component that is built with the injectStripe higher-order component (HOC) and wrapped with the Elements component. So we will create a component called PlaceOrder with injectStripe, and it will contain Stripe's CardElement and the PlaceOrder button.
mern-marketplace/client/cart/PlaceOrder.js:
class PlaceOrder extends Component { … } export default injectStripe(withStyles(styles)(PlaceOrder))
Then we will add this PlaceOrder component in the Checkout form, pass it the checkoutDetails object as a prop, and wrap it with the Elements component ...
