LogoMkSaaS Docs
LogoMkSaaS Docs
HomepageIntroductionCodebaseVideo TutorialsGetting StartedEnvironment Setup
Configuration

Integrations

DatabaseAuthenticationEmailNewsletterStorage
Payment
CreditsCron JobsAIAnalyticsNotificationCaptchaChatboxAffiliates

Customization

MetadataFontsThemesImagesi18nBlogDocsComponentsCustom PagesLanding PageUser ManagementAPI Key Management

Codebase

IDE SetupProject StructureFormatting & LintingUpdating the Codebase
X (Twitter)

Payment

Learn how to set up and use payment providers in MkSaaS

MkSaaS supports multiple payment providers, allowing you to choose the best payment solution for your needs.

Payment Providers

Stripe

The most popular global payment platform, supporting one-time payments and subscriptions

Creem

Payment platform for indie developers with built-in tax compliance and subscription management

Custom Payment Provider

MkSaaS supports extending with new payment providers:

  1. Create a new file in the src/payment/provider directory
  2. Implement the PaymentProvider interface from types.ts
  3. Update the payment provider selection logic in index.ts

Example implementation:

src/payment/provider/my-provider.ts
import {
  PaymentProvider,
  CreateCheckoutParams,
  CheckoutResult,
  CreatePortalParams,
  PortalResult,
  Subscription,
  getSubscriptionsParams
} from '@/payment/types';

export class MyProvider implements PaymentProvider {
  constructor() {
    // Initialize your payment provider
  }

  public async createCheckout(params: CreateCheckoutParams): Promise<CheckoutResult> {
    // Implementation for creating a checkout session
  }

  public async createCustomerPortal(params: CreatePortalParams): Promise<PortalResult> {
    // Implementation for creating a customer portal
  }

  public async handleWebhookEvent(payload: string, signature: string): Promise<void> {
    // Implementation for handling webhook events
  }
}

Then update the payment provider selection in index.ts:

src/payment/index.ts
import { MyProvider } from './provider/my-provider';

export const initializePaymentProvider = (): PaymentProvider => {
  if (!paymentProvider) {
    if (websiteConfig.payment.provider === 'stripe') {
      paymentProvider = new StripeProvider();
    } else if (websiteConfig.payment.provider === 'creem') {
      paymentProvider = new CreemProvider();
    } else if (websiteConfig.payment.provider === 'my-provider') {
      paymentProvider = new MyProvider();
    } else {
      throw new Error(
        `Unsupported payment provider: ${websiteConfig.payment.provider}`
      );
    }
  }

  return paymentProvider;
};

Table of Contents

Payment Providers
Custom Payment Provider