Overview

This guide will show you how to set up payments for testing and local development with the following payment processors:

• Stripe
• Lemon Squeezy
• Polar
• Paddle

Which should I choose?

Stripe is the industry standard, is more configurable, and has cheaper fees. Lemon Squeezy, Polar, and Paddle act as a Merchant of Record. This means they take care of paying taxes in multiple countries for you, but charge higher fees per transaction.

Important First Steps

First, go to /src/payment/paymentProcessor.ts and choose which payment processor you’d like to use:

src/payment/paymentProcessor.ts

import { stripePaymentProcessor } from './stripe/paymentProcessor';
import { lemonSqueezyPaymentProcessor } from './lemonSqueezy/paymentProcessor';
import { polarPaymentProcessor } from './polar/paymentProcessor';
import { paddlePaymentProcessor } from './paddle/paymentProcessor';

// ...

export const paymentProcessor: PaymentProcessor = stripePaymentProcessor;
// or
export const paymentProcessor: PaymentProcessor = lemonSqueezyPaymentProcessor;
// or
export const paymentProcessor: PaymentProcessor = polarPaymentProcessor;
// or
export const paymentProcessor: PaymentProcessor = paddlePaymentProcessor;

Next, go to /src/payment/paymentProcessorClient.ts and choose the same payment processor there. This is the part of the payment processor that runs in the browser, e.g. it redirects users to the checkout page. If the two don’t match, your app will show an error when a user tries to buy a plan.

src/payment/paymentProcessorClient.ts

import { stripePaymentProcessorClient } from './stripe/paymentProcessorClient';
import { lemonSqueezyPaymentProcessorClient } from './lemonSqueezy/paymentProcessorClient';
import { polarPaymentProcessorClient } from './polar/paymentProcessorClient';
import { paddlePaymentProcessorClient } from './paddle/paymentProcessorClient';

// ...

export const paymentProcessorClient: PaymentProcessorClient = stripePaymentProcessorClient;
// or
export const paymentProcessorClient: PaymentProcessorClient = lemonSqueezyPaymentProcessorClient;
// or
export const paymentProcessorClient: PaymentProcessorClient = polarPaymentProcessorClient;
// or
export const paymentProcessorClient: PaymentProcessorClient = paddlePaymentProcessorClient;

Then you should delete:

• The unused payment processor directories at /src/payment/<unused-provider>.
• Any unused environment variables from .env.server (they will be prefixed with the name of the provider you are not using):
  • E.g. STRIPE_API_KEY, LEMONSQUEEZY_API_KEY, POLAR_ORGANIZATION_ACCESS_TOKEN.
• Update src/env.ts to remove the env schema imports and .merge() calls for the providers you removed.
• Make sure to also run npm uninstall for providers you didn’t use:
  • Stripe: npm uninstall stripe
  • Polar: npm uninstall @polar-sh/sdk
  • Lemon Squeezy: npm uninstall @lemonsqueezy/lemonsqueezy.js
  • Paddle: npm uninstall @paddle/paddle-node-sdk @paddle/paddle-js
• If you are not using Paddle, remove REACT_APP_PADDLE_CLIENT_TOKEN and REACT_APP_PADDLE_SANDBOX_MODE from .env.client, and the paddleClientEnvSchema from clientEnvValidationSchema in src/env.ts.
• If you are not using Lemon Squeezy remove the lemonSqueezyCustomerPortalUrl field from the User model in the schema.prisma file.

Now your code is ready to go with your preferred payment processor and it’s time to configure your payment processor’s API keys, products, and other settings.

Follow the steps for your selected processor:

• Stripe
• Lemon Squeezy
• Polar
• Paddle

Deploying

Once you’re ready to deploy your app, follow the steps from the deploying guide to set up the production settings for your payment provider.