DEV Community: Boxcar Kits

I built a tested Stripe + Supabase starter so I'd never wire billing again

Boxcar Kits — Fri, 16 Oct 2026 18:42:12 +0000

Every paid app needs the same boring parts: sign-in, checkout, a webhook that turns access on and off, a billing page, and account deletion that doesn't leave a live subscription behind. I got tired of rebuilding them, so I packaged them up as Express Track.

What's inside: React 19, TypeScript and Vite. Supabase sign-in (email, magic link, Google) with row-level security. Stripe Checkout for monthly, yearly and lifetime plans. A signed webhook that ignores duplicate events. The Stripe customer portal. Deploy configs for Vercel and Netlify.

How it's tested: 186 unit tests, 43 database security tests and Playwright smoke tests, plus a full run in Stripe test mode (subscribe, cancel, refund, failed payment, duplicate events).

Lessons from testing against real Stripe: events can show up for users who were already deleted, and React StrictMode will quietly cancel your success-page polling. Both are fixed in the kit.

It's $79 with a 30-day refund: https://boxcarkits.gumroad.com/l/express-track. Questions welcome!

How I built a spreadsheet that does Etsy fee math (formulas inside)

Boxcar Kits — Thu, 15 Oct 2026 15:47:46 +0000

Etsy sellers ask "what do I actually keep from a sale?" all the time. The answer is a stack of fees, and some are charged on more than the item price. I built an Excel + Google Sheets workbook that answers it. Here is the formula logic, so you can copy it into your own sheet.

These are US fee rates I checked against Etsy's fee pages on Oct 13, 2026. Fees change, so put them in cells, not in formulas. None of this is tax or financial advice.

1. Put every rate in a Settings tab

Each rate gets its own cell:

Cell	Setting	US default
B3	Listing fee	$0.20
B4	Transaction fee	6.5%
B5	Payment processing %	3%
B6	Processing fixed fee	$0.25
B7	Offsite Ads fee	15% (12% for shops over $10k/yr)
B10	Avg sales tax rate	0%
B11	Regulatory operating fee	0% in US
B12	Offsite Ads cap per order	$100

If Etsy changes a fee, you edit one cell and every formula updates.

2. Order revenue

Etsy charges the transaction fee on item price plus shipping, so the base needs both:

Order revenue = price * qty + shipping
=B3*B5+B4

3. Each fee

Listing fee        =Settings!$B$3*B5
Transaction fee    =ROUND(B12*(Settings!$B$4+Settings!$B$11),2)
Payment processing =ROUND(B12*(1+Settings!$B$10)*Settings!$B$5+Settings!$B$6,2)
Offsite Ads        =IF(UPPER(B9)="Y",MIN(Settings!$B$12,ROUND(B12*Settings!$B$7,2)),0)

Some things I learned along the way:

Processing is charged on sales tax too. The buyer pays tax, but Etsy's 3% applies to the full total. The (1+B10) factor handles that. Leave it at 0% if you don't know your average.
Offsite Ads has a cap. MIN() stops the fee at $100 per order.
Round each fee on its own with ROUND(...,2), the way a statement does. Otherwise your totals drift a few cents from what Etsy shows.
UPPER() on the Y/N cell means "y" works as well as "Y".

4. Net profit and margin

Total fees  =SUM(B13:B16)
Costs       =B6*B5+B7+B8        (materials*qty + packaging + postage)
Net profit  =B12-B17-B18
Margin      =IFERROR(B19/B12,0)

Example: a $24 item with $4.99 shipping, $5.50 materials, $0.80 packaging and $4.50 postage, not from Offsite Ads. Fees come to $3.20: $0.20 listing, $1.88 transaction, $1.12 processing. Net profit is $14.99.

5. Working backwards: break-even and target price

This was the most useful part. Profit is zero when:

price*q + ship = costs + listing + fixed + (price*q + ship) * pct_fees

pct_fees is everything charged as a percentage: transaction, regulatory, processing (adjusted for tax) and Offsite Ads if it applies. Solve for price:

=ROUND(((B18+B13+Settings!$B$6)
  /(1-Settings!$B$4-Settings!$B$11-Settings!$B$5*(1+Settings!$B$10)
     -IF(UPPER(B9)="Y",Settings!$B$7,0))
  -B4)/B5,2)

For a target margin m, take m away from the denominator too (...-B10 in the sheet, where B10 is the target margin). Same example: break-even item price is $7.44, and a 35% margin needs $15.28.

One caveat: the closed form ignores the Offsite Ads cap. It only matters on orders over about $667, so I left it out.

6. Roll it up with SUMIFS (no dynamic arrays)

I wanted it to work in Excel 2010 as well as Google Sheets, so I skipped FILTER/LET. The Sales Log has a helper column Q holding YYYY-MM. The dashboard then uses:

Orders   =COUNTIFS('Sales Log'!$Q:$Q,A5)
Revenue  =SUMIFS('Sales Log'!$I:$I,'Sales Log'!$Q:$Q,A5)
Fees     =SUMIFS('Sales Log'!$N:$N,'Sales Log'!$Q:$Q,A5)

The Products tab works out each SKU's margin after fees and flags anything under 30%:

=IF(E2="","",IF(E2<0.3,"REVIEW PRICING","OK"))

7. Test the formulas outside Excel

I recalculated the workbook headless in LibreOffice (soffice --headless --convert-to xlsx), read the cached values back with Python's openpyxl (data_only=True), and checked them against a separate Python version of the same math. That caught a few real bugs before anyone bought anything. (Tip: on complex sheets, turn off LibreOffice's threaded calculation. It gave me wrong results once.)

Grab it

The finished workbook (Sales Log, Products, Dashboard, Fee Calculator) on Etsy: https://www.etsy.com/listing/4596086754/etsy-seller-profit-tracker-spreadsheet
My other templates (landlord, debt payoff, wedding, inventory, freelancer, job search): https://boxcarkits.gumroad.com

Or just copy the formulas above. That's why they're here.

Native Google sign-in with Supabase in a Capacitor Android app (and the bug that cost me a build)

Boxcar Kits — Thu, 15 Oct 2026 14:31:31 +0000

I wanted the normal Android Google sign-in for a Capacitor app: the system account picker, no browser tab, ending in a Supabase session. The flow is simple once it works. The picker gives you a Google ID token, and Supabase checks that token with signInWithIdToken.

Getting it working took longer than I expected. Most of the time went into Google Cloud setup, plus one bug in my own code that only showed up on a phone. Here's the setup that works, then the bug.

Stack: Capacitor 8, React, TypeScript, @supabase/supabase-js, and @capgo/capacitor-social-login 8.5.x.

1. Google Cloud: one Web client, and Android clients for each signing key

Put everything in one Google Cloud project.

OAuth consent screen. Choose External. While the app is in Testing mode, only accounts listed under Audience > Test users can sign in. If you test with a Google account that isn't on the list, sign-in fails. Add every account you plan to test with.

Web application client. This is the client the app actually uses, even on Android. Its client ID goes into your app config, and its secret goes only into Supabase. Add Supabase's callback URL (https://<project-ref>.supabase.co/auth/v1/callback) as a redirect URI if you also want the browser OAuth fallback for local dev.

Android clients. The app never sends these IDs anywhere. Google just checks that the installed app's package name and signing certificate are registered in the same project as the Web client. The catch is that you need one Android client per certificate that signs an install:

your debug keystore, for local builds (cd android && ./gradlew signingReport)
your upload key, for release builds you sideload (keytool -printcert -jarfile app-release.aab)
the Play app signing key, for anything installed from Google Play, including Internal testing. Google re-signs your bundle, so the upload key's SHA-1 doesn't cover these installs. You'll find this one in Play Console under App integrity.

Use the same package name for all of them. SHA-1 fingerprints are public, so it's fine to paste them anywhere.

2. Supabase: enable the Google provider

In Authentication > Sign In / Providers > Google:

Enable it, and enter the Web client ID and secret.
Make sure the Web client ID is in the authorized client IDs list. The ID token's audience is the Web client, and Supabase rejects tokens whose audience it doesn't know.
Leave Skip nonce check off. We'll send a nonce properly.

3. Initialize the plugin with the Web client ID

The plugin's online mode returns an ID token, which is what Supabase needs. Load the plugin lazily so that web builds don't pull it in:

import type { SocialLoginPlugin } from '@capgo/capacitor-social-login';

let pluginPromise: Promise<SocialLoginPlugin> | null = null;

function getPlugin(webClientId: string) {
  pluginPromise ??= import('@capgo/capacitor-social-login').then(async ({ SocialLogin }) => {
    // The WEB client ID, not the Android one.
    await SocialLogin.initialize({ google: { webClientId, mode: 'online' } });
    return SocialLogin;
  });
  return pluginPromise;
}

Passing the Android client ID here is a classic mistake. On Android, webClientId becomes the server client ID that Credential Manager requests a token for.

4. The nonce: hash for Google, raw for Supabase

Supabase checks the nonce to stop replayed ID tokens. The rule that tripped me up: Google gets the SHA-256 hex digest of the nonce, and Supabase gets the raw value. Supabase hashes the raw value itself and compares it with the nonce claim in the token.

const toHex = (bytes: Uint8Array) =>
  Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');

export async function createNoncePair() {
  const random = crypto.getRandomValues(new Uint8Array(32));
  const rawNonce = toHex(random);
  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(rawNonce));
  return { rawNonce, nonceDigest: toHex(new Uint8Array(digest)) };
}

If you send the same value to both, or send a nonce on only one side, Supabase rejects the sign-in with a nonce error.

5. Sign in

const { rawNonce, nonceDigest } = await createNoncePair();
const plugin = await getPlugin(WEB_CLIENT_ID);

const res = await plugin.login({
  provider: 'google',
  options: { nonce: nonceDigest }, // no scopes, see below
});
if (res.result.responseType !== 'online' || !res.result.idToken) {
  throw new Error('No ID token');
}

const { error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: res.result.idToken,
  nonce: rawNonce,
});
if (error) throw error;

Some errors deserve their own handling, so the user doesn't just see "something went wrong":

Cancellation. The user closed the picker. Treat it as a normal outcome and show no error.
[28444] Developer console is not set up correctly. This almost always means the package name or SHA-1 of the installed build isn't registered, or the clients are in different Google Cloud projects. Show a message pointing at the setup.
No credentials available. The phone has no Google account on it.

The bug that cost me a build

My first version of the login call looked like this:

await plugin.login({
  provider: 'google',
  options: { scopes: ['email', 'profile'], nonce: nonceDigest },
});

It looks harmless. You want the email and profile, so you ask for them. On a real phone, the app installed from Play Internal testing showed my generic "Something went wrong" message as soon as I tapped the button.

My first guess was SHA-1, since that's what usually breaks. But the Supabase auth logs showed no token request from the phone at all. So the failure happened before Supabase ever got involved.

The answer was in the plugin's Android source. If you pass a scopes array, the plugin checks whether your MainActivity implements ModifiedMainActivityForSocialLoginPlugin. If it doesn't, it rejects right away with:

You CANNOT use scopes without modifying the main activity. Please follow the docs!

That interface is meant for requesting extra Google API scopes through a separate authorization step. A plain sign-in doesn't need it. The plugin already adds openid, userinfo.email and userinfo.profile by default, and the ID token carries the email and name either way.

My error mapping only knew about cancellation, the 28444 setup error and the no-account case, so this message landed in the "unknown" bucket. Worse, my fallback logged only error.name, which threw away the one sentence that would have explained everything.

The fix was to drop scopes. I pulled the options into a tiny function so a test could guard it:

export function googleLoginOptions(nonceDigest: string) {
  return { nonce: nonceDigest };
}

it('sends no scopes (they make the Android plugin reject)', () => {
  expect(googleLoginOptions('abc')).not.toHaveProperty('scopes');
});

I also changed the unknown-error path to log the plugin's message, with emails and anything that looks like a token redacted and the length capped. The next surprise should take a minute to diagnose, not a rebuild and a re-upload.

Checklist

Consent screen: every testing account is listed as a test user.
One Web client. Its ID goes in the app and in Supabase, and its secret goes only in Supabase.
Android clients with the same package name for debug, upload key and Play app signing key.
webClientId is the Web client ID.
The SHA-256 hex nonce goes to Google, and the raw nonce goes to signInWithIdToken.
No scopes option unless you have actually changed MainActivity.
When a sign-in fails on a device, check the Supabase auth logs first. If no request ever reached Supabase, the problem is on the device or in your Google config, not in Supabase.
Log the plugin's error message, safely redacted, not just its name.

I packaged this setup (plus RevenueCat, AdMob, and Play release scripts) into a paid starter kit, First Track: https://boxcarkits.gumroad.com/l/first-track