During checkout, to collect credit card details from the user, we will use Stripe's Card Elements to add the credit card field in the checkout form. To integrate the Card Elements with our React interface, we will utilize the react-stripe-elements npm module:
npm install --save react-stripe-elements
We will also need to inject the Stripe.js code in template.js to access Stripe in the frontend code:
<script id="stripe-js" src="https://js.stripe.com/v3/" async></script>
For MERN Marketplace, Stripe will only be required in the Cart view, where the Checkout component needs it to render the Card Elements and process card detail input. Hence, we will initialize the Stripe instance with the application's Stripe ...