Notification

MkSaaS supports sending notifications when users successfully complete a payment. This allows your team to receive real-time order alerts in their tools.

Currently Discord and Feishu are supported as notification channels, and it's easy to extend with more notification channels.

Setup

Enable Notification Channel

Configure the notification provider in src/config/website.tsx:

src/config/website.tsx

export const websiteConfig: WebsiteConfig = {
  // ...other config
  notification: {
    enable: true,
    provider: 'discord', // or 'feishu'
  },
  // ...other config
}

Configure Webhook URL

Based on the notification channel you selected, configure the corresponding Webhook URL:

Go to your Discord server and open the channel where you want to receive notifications
Click the gear icon to open Channel Settings
Select Integrations > Webhooks > New Webhook
Set a name and avatar for the webhook (optional)
Copy the Webhook URL and add it to your .env file:

.env

DISCORD_WEBHOOK_URL="https://discord.com/api/webhooks/..."

Go to your Feishu group chat
Click the group name > Group Settings > Bot Management
Add a new Custom Bot and enable Webhooks
Copy the generated Webhook URL and add it to your .env file:

.env

FEISHU_WEBHOOK_URL="https://open.feishu.cn/open-apis/bot/v2/hook/..."

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Environment Setup

Set up environment variables

Notification Message Examples

Discord Message

Discord notifications are sent as messages with green color and structured fields for easy reading.

Discord Message

Feishu Message

Feishu notifications are sent as plain text messages with all purchase information clearly displayed.

Feishu Message

Extending New Notification Channels

MkSaaS supports extending with new notification channels:

Create a new file in the src/notification directory (e.g., slack.ts).
Implement the notification function:

src/notification/slack.ts

export async function sendMessageToSlack(
  sessionId: string,
  customerId: string,
  userName: string,
  amount: number
): Promise<void> {
  try {
    const webhookUrl = process.env.SLACK_WEBHOOK_URL;
    if (!webhookUrl) {
      console.warn('SLACK_WEBHOOK_URL is not set, skipping Slack notification');
      return;
    }

    // Your Slack message implementation
    await fetch(webhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: `🎉 New Purchase\nUsername: ${userName}\nAmount: $${amount.toFixed(2)}`,
      }),
    });
  } catch (error) {
    console.error('Failed to send Slack notification:', error);
  }
}

Import and call this function in notification.ts:

src/notification/notification.ts

import { sendMessageToSlack } from './slack';

// Add to the sendNotification function
await sendMessageToSlack(sessionId, customerId, userName, amount);

References

Video Tutorial

Next Steps

Email

Configure email services

Authentication

Configure user authentication

Analytics

Configure analytics

Storage

Configure storage

Notification

Learn how to set up and use notifications in MkSaaS

MkSaaS supports sending notifications when users successfully complete a payment. This allows your team to receive real-time order alerts in their tools.

Currently Discord and Feishu are supported as notification channels, and it's easy to extend with more notification channels.

Setup

Enable Notification Channel

Configure the notification provider in src/config/website.tsx:

src/config/website.tsx

export const websiteConfig: WebsiteConfig = {
  // ...other config
  notification: {
    enable: true,
    provider: 'discord', // or 'feishu'
  },
  // ...other config
}

Configure Webhook URL

Based on the notification channel you selected, configure the corresponding Webhook URL:

Go to your Discord server and open the channel where you want to receive notifications
Click the gear icon to open Channel Settings
Select Integrations > Webhooks > New Webhook
Set a name and avatar for the webhook (optional)
Copy the Webhook URL and add it to your .env file:

.env

DISCORD_WEBHOOK_URL="https://discord.com/api/webhooks/..."

Go to your Feishu group chat
Click the group name > Group Settings > Bot Management
Add a new Custom Bot and enable Webhooks
Copy the generated Webhook URL and add it to your .env file:

.env

FEISHU_WEBHOOK_URL="https://open.feishu.cn/open-apis/bot/v2/hook/..."

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Create a new file in the src/notification directory (e.g., slack.ts).
Implement the notification function:

src/notification/slack.ts

export async function sendMessageToSlack(
  sessionId: string,
  customerId: string,
  userName: string,
  amount: number
): Promise<void> {
  try {
    const webhookUrl = process.env.SLACK_WEBHOOK_URL;
    if (!webhookUrl) {
      console.warn('SLACK_WEBHOOK_URL is not set, skipping Slack notification');
      return;
    }

    // Your Slack message implementation
    await fetch(webhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: `🎉 New Purchase\nUsername: ${userName}\nAmount: $${amount.toFixed(2)}`,
      }),
    });
  } catch (error) {
    console.error('Failed to send Slack notification:', error);
  }
}

Import and call this function in notification.ts:

src/notification/notification.ts

import { sendMessageToSlack } from './slack';

// Add to the sendNotification function
await sendMessageToSlack(sessionId, customerId, userName, amount);

Setup

Enable Notification Channel

Configure Webhook URL

Environment Setup

Notification Message Examples

Discord Message

Feishu Message

Extending New Notification Channels

References

Video Tutorial

Next Steps

Email

Authentication

Analytics

Storage

目次

Notification

Setup

Enable Notification Channel

Configure Webhook URL

Environment Setup

Notification Message Examples

Discord Message

Feishu Message

Extending New Notification Channels

References

Video Tutorial

Next Steps

Email

Authentication

Analytics

Storage

目次