Skip to Content

Stripe

Setup

  1. In the src/server/serverConsts.ts, set the paymentProcessor to "stripe".
  2. Create your Stripe account  if you don’t have one yet.
  3. In the Stripe’s dashboard, copy the Secret key and run: bunx vercel env add STRIPE_SECRET_KEY and when prompted, paste the key to add that key to the production env. Select Production. As this production secret can only be viewed once, you might want to also store this secret in a password manager.
  4. Turn on the Test mode in the Stripe dashboard, copy the Secret key, and run: bunx vercel env add STRIPE_SECRET_KEY and paste the key when prompted. Select Preview and Development.
  5. Still in the Test Mode, create your product.
  6. As you created it in the Test Mode, now easily copy it to the Live Mode by using the 3-dots menu in the top right of the product page.
  7. On the list, click the three dots on the created price and click Copy price ID. Paste this ID in the ./lib/productAndPlans.ts file in the plans object.
    • The priceId is different for the Live Mode and Test Mode. Use the pattern isDevelopment ? "price_<testPriceId>" : "price_<livePriceId>".
  8. Setup Ngrok by following our guide. Ngrok is better than the Stripe CLI as Ngrok ensures a constant URL and no changes to the webhook secret.

Webhooks

Do these steps both for Test mode and Live mode. Webhooks are how Stripe communicates with your server.

  1. Access https://dashboard.stripe.com/workbench/webhooks/create 
  2. Add the following events: checkout.session.completed, customer.subscription.updated, customer.subscription.deleted, charge.refunded.
  3. Press continue, then keep Webhook endpoint selected and press continue again.
  4. For the Endpoint URL:
    • For the Test mode, paste the Ngrok URL with /api/webhook/stripe at the end. Ensure the https:// at the beginning.
    • For the Live mode, paste your production URL with /api/webhook/stripe at the end. Ensure the https:// at the beginning.
  5. Submit and copy the Signing secret.
  6. Run bunx vercel env add STRIPE_WEBHOOK_SECRET and paste the secret when prompted.
    • For the Test mode, select Preview and Development.
    • For the Live mode, select Production.

Portal page

The portal page is the page where users can manage and cancel their subscriptions, get invoices, and further actions. It’s accessible when the user is logged in, by opening the Account Menu in the top right of the page and pressing Billing. To set it up:

  1. Access https://dashboard.stripe.com/settings/billing/portal . Open each accordion and set the options you want, if any. Press Save Changes even if you didn’t change anything, so it can be enabled.
  2. Change to the Test Mode by clicking on the switch in the top right and repeat the previous step.
  3. To try it, access /app in your app and press the Billing button in the menu in top right. You should be redirected to the Stripe Portal.

Testing Payments

To test a payment in the local environment, you can use the card of number 4242 4242 4242 4242 with any expiration date and any CVC.

International Taxes

When using Stripe instead of a Merchant of Record (MoR) such as Polar  for international sales, you are responsible for handling international taxes.

Stripe Tax

Stripe provides a built-in solution called Stripe Tax to manage taxes. To enable it:

  • Go to the Stripe Dashboard Setup . In the Tax section, click Enable. If it’s not available in your country, check Quaderno below.
  • Set the stripeTaxEnabled flag to true in the src/server/serverConsts.ts file.

Quaderno

If Stripe Tax is unavailable in your country, Quaderno  is a good alternative for tax calculation and compliance.

Affiliate Program

Affiliates are a great way to have your customers to help spread your product by giving them a percentage.

They get you paying customers and for each user that uses their link or cupom code, they get some percentage of them.

To use the same Affiliate platform as Polar, Affonso  is recommended.

Some alternatives are Rewardful  and Tolt .

Resources

Last updated on