Stipe with React/Node.js
so i was stuck in integrate stripe with REACT and Node.js to pay from card and since i have integrated it successfully i decided to write a artical on it to make it easy for others.
First you have to install these two libraries in react
- @stripe/stripe-js
- @stripe/react-stripe-js
import Elements from @stripe/react-stripe-js
and then wrap your payment component with Elements , import loadStripe from @stripe/stripe-js
this will load your strip account with the form you created for payment now make a variable with any name i did as stripePromise and use loadStripe() method this method will take your account publishableKey which you can get it from your stripe account dashboard .
Elements tag has a option name stripe pass the loadStripe method response in this props like i did in picture and then we are good to go on form side
now on paymentComponent, i just simple import some tag from react-stripe-js
CardElement is our form/input element in which user will fill the details of his/her card , like card number, expiry and cvv.
If you are taking zipcode separately from user then create options object with key value {hidePostalCode : true} and pass this object to option props of CardElement it will hide the zip code filed , see picture
now move to last part which is payment function
here i created two bodies variables one for my request which will go to my node.js server and one for card payment which will handle stripe server
body variable have some data like price, name, email and so on , and cardbody have some fields which don’t have price key value , why ? let me tell you the reason
our flow is , i ll make a request to our server which will initiate the payment process and on successfully initiate the process it will return me a key of particular payment which i ll use in stripe.confirmCardPayment method
so let see on server which is happing there
on node.js server install stripe library and import it on second() tell stripe your stripe account secrete key which will be available on your stripe account dashboard , and on payment initiate method call the stripe method stripe.paymentIntents.create with param amount and currency.
and on successfully intent it will return you some info which also have the client_secret key for your payment confirmation now all part done on server lets go back to front end REACT app
on request success i create CardElement reference which we define in our form, see the pic-2 payment method in response.status if block ,
and with that card element i simple call the stripe.createPaymentMethod with params , type: “card” , card:CardElemet and billing_details: cardBody ,this method in return give you uniqe id for each payment billing on last call the function confirmCardPayment , pass the client secrete key which we got from api response in first param and the payment billing uniqe id as object payment_method: uniqe id in second param this method will return some info with status , if the status is succeed the your payment is confirm and paid ,
fact: When you defining a price for payment , stripe take your payment as the least amount of currency like if you are defining 1 in your amount and your currency is USD then 1 means stripe take this as 1 cent , so if you want to pay 1 dollar you have to do this 1*100 so it become 100 cent = 1 dollar , if you see my node.js server method i did the same ,
Hope it will help you , please also LIKE and SUBSCRIBE to my youtube channel ,thankyou
