Payment Gateway Application with Next.js, Tailwind CSS, Midtrans, and Ngrok

About the Project

This project is a payment gateway application built using Next.js as the frontend framework, Tailwind CSS as the CSS framework, Midtrans as the payment gateway, and Ngrok as the tool for accessing the application online.

Features

• Payment processing using Midtrans
• Integration with Next.js for frontend
• Use of Tailwind CSS for styling
• Using Ngrok to access the application online using HTTPS

Installation

1. Clone this repository using Git
2. Install dependencies using npm or yarn
3. Run the application using npm start or yarn start
4. Access the application using Ngrok

Using Ngrok

Step 1: Install Ngrok

• Install Ngrok using npm or yarn with the command npm install ngrok or yarn add ngrok

Step 2: Run Ngrok

• Run Ngrok with the command ngrok http 3000 (default port is 3000, but you can change it as needed)

Step 3: Access the Application with Ngrok

• Access the application using the URL provided by Ngrok (e.g. http://localhost:8080)

Step 4: Configure the Application

• Configure the application to use the URL provided by Ngrok

Usage

1. Select the available payment method
2. Enter the desired payment amount
3. Click the "Pay" button to initiate the payment
4. Wait for the payment process to complete

Troubleshooting

• If an error occurs, please check the error log to determine the cause
• If there are issues with the payment, please contact Midtrans support