Integrate Payments With Next.js, TailwindCSS and Razorpay
Blog: FreeCodeCamp: Integrate Payments With Razorpay, Next.js and TailwindCSS
- Make international and domestic payments on the fly.
- Responsive layout, works well on both Mobile and Desktop
- Customize popup according to your brand.
- Clear call to actions.
There's only 1 page
index.js that handles the entire flow. However there are three important components to the page:
Navbar- For the main navigation.
Hero- For the Hero section
Element- For the random elements that you see on the website.
The website is built in my favourite Tech Stack and deployed on Vercel
- Next.js for building React Components.
- tailwindcss for styling.
- Razorpay for Payment Gateway.
- Vercel for deployments and CI/CD.
- TailwindMasterKit for Landing Page.
- Clone the repository using
git clone https://github.com/manuarora700/integrate-payments.git
- Install all the modules by using
- Run the local development server by using
npm run devor
- Make the required edits and deploy to YOUR GitHub repo for CI/CD.
Deployment can be done in 3 easy steps.
- Login to Vercel or signup for an account if you don't have one.
- Create a
New Projectand select YOUR GitHub repository of the portfolio project.
- Wait for Vercel to deploy your project to production.
This template is completely open source and free to use. Use it for client projects or your own portfolio project. Give me credits at the footer (If you wish, it'll help me a lot :)).
Your support matters. It pushes me to do more Open Source contributions and give back to the community.
[ImgBot] Optimize images
Beep boop. Your images are optimized!
Your image file size has been reduced by 48% 🎉
| File | Before | After | Percent reduction | |:--|:--|:--|:--| | /demo/landing.png | 1,046.11kb | 503.49kb | 51.87% | | /demo/payment.png | 771.46kb | 399.51kb | 48.21% | | /public/payments.png | 65.26kb | 61.23kb | 6.19% | | /public/vercel.svg | 1.08kb | 1.06kb | 1.00% | | /public/payments.svg | 26.21kb | 26.18kb | 0.10% | | | | | | | Total : | 1,910.12kb | 991.48kb | 48.09% |
📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace
~Imgbot - Part of Optimole family