Full-Stack React Projects - Second Edition

The CardElement component

Stripe's CardElement is self-contained, so we can just add it to the PlaceOrder component, then incorporate styles as desired, and the card detail input will be taken care of. We will add the CardElement component to PlaceOrder as follows.

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

<CardElement className={classes.StripeElement}      {...{style: {      base: {        color: '#424770',        letterSpacing: '0.025em',        '::placeholder': {          color: '#aab7c4',        },      },      invalid: {        color: '#9e2146',      },    }}}/>

This will render the credit card details field in the checkout form view. In the next section, we will learn how to securely validate and store the credit card details that are entered in this field when the user clicks on a button to place an ...