Coder Social home page Coder Social logo

Mini Woo: A Telegram Mini App for WooCommerce

Mini Woo is a project that allows you to create a mini app for Telegram, the messaging app with over 500 million active users, that connects to your WooCommerce website, the most popular e-commerce platform on the web.

Brief video

It uses Next.js, a React framework for building fast and scalable web applications, and the Telegram Bot API and the WooCommerce REST API to provide a seamless shopping experience for your customers on Telegram.

You can use this project as a template to customize your mini app with your own branding, products, and features, or modify the API to connect any other online store that supports RESTful web services. This project is open source and free to use. You can find the source code, documentation, and installation instructions here on GitHub.

Requirements

  • Telegram Bot
  • WooCommerce Website
  • NodeJs (Latest LTS version recommended)

Getting Started

  1. Prepare Environment Variables
  2. Deploy
  3. Init Telegram Bot API Webhook

Environment Variables

To use this project, you need to set the following environment variables:

  • NEXT_PUBLIC_BASE_PATH This is the base URL of your deployment. For example, if you are deploying on Vercel, it can be something like https://mini-woo-<your-username>.vercel.app.

  • TELEGRAM_BOT_TOKEN This is the access token that you get from @BotFather when you create your Telegram bot.

  • TELEGRAM_BOT_SECRET This is a password that you set to secure your APIs. It can be any string, such as my-pass or a randomly generated hash. Please make sure to keep it secret.

  • TELEGRAM_PAYMENT_PROVIDER_TOKEN This is telegram payment provider token. You can connect payment methods from BotFather. Payment Providers, Supported Currencies

  • WOOCOMMERCE_URL This is the URL of your WooCommerce website. For example, https://<your-super-cool-store>.com.

  • WOOCOMMERCE_CONSUMER_KEY WOOCOMMERCE_CONSUMER_SECRET These are the authentication key and secret that you obtain from WooCommerce settings. You can follow this instruction to generate them.

Deploy

You need to deploy your app on a platform or a server of your choice.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js. You need to fork this repository first.

Check out Next.js deployment documentation for more details.

Deploy on Server

If you prefer to deploy your app on your own server, you need to copy example.env to .env in the root of the project and fill the variables. Then, you need to run the following commands:

npm run build

npm run start

This will build and start your app on the port specified by the PORT variable in .env.

Run Locally for Development

Set environment variables then run:

npm run dev

you can use https://ngrok.com/

Init Telegram Bot API Webhook

This is the last step! You need to set up a webhook for your Telegram bot to receive updates from Telegram. To do this, you just need to make a POST request to the following URL:

curl -X POST https://<your-deployment-url>/api/telegram-hook/init?secret_hash=<the-secret-password-from-env-var>

Replace <your-deployment-url> with the base URL of your deployment and <the-secret-password-from-env-var> with the value of TELEGRAM_BOT_SECRET in your environment variables or .env.

Now your mini app is ready! You can test it by sending commands or messages to your Telegram bot. Enjoy! 😊

Features

  • Show products list
  • Filter by category
  • Register Order
  • Pay with telegram payment
  • Support variable items
  • Support search items
  • Support shipping methods
  • Support other payment methods
  • more...

Learn More

To learn more, take a look at the following resources:

Your feedback and contributions are welcome!

mini-woo's Projects

mini-woo icon mini-woo

Telegram mini app integration with WooCommerce

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.