A sample repo to create a Course selling website using Next.js, Shadcn, Tailwind, and BraidPay. This template provides a ready-to-use course selling platform with integrated payment processing through BraidPay.
- 🎨 Modern UI with Tailwind CSS and Shadcn components
- 💳 Secure payments with BraidPay integration
- 🔄 Real-time payment status updates
- 📱 Fully responsive design
- ⚡ Built with Next.js for optimal performance
- 🛠️ Easy to customize and extend
Before you begin, you'll need:
- A BraidPay account - Watch setup guide
- A BraidPay payment link - Watch creation guide
- Node.js 18+ installed
- Basic knowledge of React and Next.js
- Clone the repository:
git clone https://github.com/braidpay/Code-Sample-Turkish-Course
cd Code-Sample-Turkish-Course
- Install dependencies:
npm install
# or
yarn install
- Create a
.env
file in the root directory:
WEBHOOK_SECRET=your_braidpay_webhook_secret
- Update the payment link ID in
app/page.tsx
:
const PAYMENT_LINK_ID = "your_payment_link_id"
-
Update payment link in
app/page.tsx
, line 336 -
Run the development server:
npm run dev
# or
yarn dev
- Follow the account creation process shown in this video guide
- Complete the necessary KYC requirements
- Watch this tutorial to create your payment link
- Copy the payment link ID from the payment link page URL and update it in your code
BraidPay uses webhooks to notify your application about payment status changes. Read the webhook documentation for detailed setup instructions.
- Go to BraidPay Dashboard > Settings > Webhooks
- Add your webhook endpoint:
https://your-domain.com/api/webhook
- Copy the webhook secret and add it to your
.env
file - Test the webhook to ensure proper configuration
- Push your code to GitHub
- Click the "Deploy with Vercel" button above
- Follow Vercel's deployment process
- Add your environment variables in Vercel's dashboard
- Deploy and test your live site
Edit app/page.tsx
to update:
- Course title and description
- Pricing
- Features and benefits
- Teacher information
- Tailwind classes can be modified directly in the components
- Global styles are in
app/globals.css
- Theme configuration is in
tailwind.config.ts
The template uses Shadcn UI components, which can be customized in the components/ui
directory.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues or have questions:
- Open an issue in this repository
- Contact BraidPay support for payment-related queries
- Refer to the Next.js documentation