Setup & Settings

Stripe Tap to Pay — iPhone 15 Pro setup guide

How Tap to Pay Works

  1. Staff builds order in this web app (runs in Safari)
  2. Tap "Charge" → app creates a payment on Stripe's servers
  3. Open Stripe Dashboard iOS app → enter amount → charge
  4. Customer holds card or Apple Pay to back of iPhone 15 Pro
  5. Web app automatically detects the tap and shows the receipt ✓

No M2 reader · No Bluetooth · No reader registration · Just the iPhone's built-in NFC chip

🔑 Stripe Credentials Setup

Only 2 keys needed — no terminal location, no reader registration. Add them to .env.local on the server.

1

Open your Stripe Dashboard

Go to dashboard.stripe.com and sign in.

2

Enable Tap to Pay

Go to Settings → In-person payments → enable Tap to Pay.

Accept the Tap to Pay Terms of Service when prompted.

3

Get your API keys

Go to Developers → API Keys.

Copy your Secret key (sk_live_...) and Publishable key (pk_live_...).

⚠️ Use Test mode keys (sk_test_) during setup, switch to live on tournament day.

4

Create the .env.local file

On the server running this app, edit .env.local:

cp .env.local.example .env.local && nano .env.local

# Stripe Secret (server-side only — never exposed to browser)

STRIPE_SECRET_KEY=sk_live_...

# Publishable key (safe for browser)

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...

5

Restart the app

npm run build && npm start

Or in dev mode: npm run dev

6

Install Stripe Dashboard iOS app on iPhone 15 Pro

Download the free Stripe Dashboard app from the App Store.

Stripe Dashboard on App Store

Sign in → verify Tap to Pay shows under Payments → Charge.

7

Tournament day checklist

  • Live keys in .env.local (sk_live_, pk_live_)
  • Tap to Pay enabled in Stripe Dashboard settings
  • Stripe Dashboard iOS app installed and signed in
  • Web app added to iPhone home screen (Share → Add to Home Screen)
  • iPhone 15 Pro on same Wi-Fi as server (or use ngrok/Vercel for HTTPS)
  • Run a $0.50 test charge before doors open
  • iPhone battery >80% — NFC uses power 🔋

Network Setup

The web app needs to reach the server to create payments and detect completion. Options:

  • Local Wi-Fi: Open http://[server-ip]:3000 in Safari
  • Hotspot: Connect iPhone and server to same hotspot
  • Vercel / HTTPS: npx vercel --prod → works anywhere (recommended)
  • ngrok: npx ngrok http 3000 → use the HTTPS URL

💾 Data Storage

Items and transactions are stored in localStorage on this device. They persist across page refreshes but are tied to this browser. Export from the Dashboard tab before clearing browser data. Do not use private/incognito mode during the tournament.