How to restrict Stripe API keys on frontend

1// PUBLISHABLE KEY (pk_test_ or pk_live_)
2// Safe for frontend. Can only:
3// - Create tokens / PaymentMethods
4// - Confirm PaymentIntents (client_secret required)
5// - Initialize Stripe.js / Elements
6const stripe = Stripe('pk_test_yourPublishableKey'); // Frontend OK
7
8// SECRET KEY (sk_test_ or sk_live_)
9// Server-only. Full account access:
10// - Create charges, refunds, customers
11// - Read all data, manage account
12const stripe = require('stripe')('sk_test_...'); // Server ONLY
13
14// RESTRICTED KEY (rk_test_ or rk_live_)
15// Server-only. Custom permissions:
16// - Only what you explicitly grant
17const stripe = require('stripe')('rk_test_...'); // Server ONLY

1// Example: Restricted key for a payment processing service
2// Permissions granted:
3//   - PaymentIntents: Write
4//   - Charges: Read
5//   - Customers: Read
6//   - Everything else: None
7
8// In your payment service:
9const stripePayments = require('stripe')(process.env.STRIPE_RESTRICTED_PAYMENTS_KEY);
10
11// This works — PaymentIntents Write is granted
12async function createPayment() {
13  return await stripePayments.paymentIntents.create({
14    amount: 5000,
15    currency: 'usd',
16    payment_method_types: ['card'],
17  });
18}
19
20// This would fail — Refunds permission not granted
21// await stripePayments.refunds.create({ charge: 'ch_123' }); // Error!

1// === FRONTEND (browser) ===
2// Only pk_ key here
3const stripe = Stripe('pk_test_yourPublishableKey');
4
5// Collect card details securely
6const { paymentMethod } = await stripe.createPaymentMethod({
7  type: 'card',
8  card: cardElement,
9});
10
11// Send token to server — NOT the card details
12const response = await fetch('/api/create-payment', {
13  method: 'POST',
14  headers: { 'Content-Type': 'application/json' },
15  body: JSON.stringify({
16    paymentMethodId: paymentMethod.id,
17    amount: 5000,
18  }),
19});
20
21// === SERVER (Node.js) ===
22// Secret or restricted key here
23const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
24
25app.post('/api/create-payment', async (req, res) => {
26  const paymentIntent = await stripe.paymentIntents.create({
27    amount: req.body.amount,
28    currency: 'usd',
29    payment_method: req.body.paymentMethodId,
30    confirm: true,
31    automatic_payment_methods: { enabled: true, allow_redirects: 'never' },
32  });
33  res.json({ status: paymentIntent.status });
34});

1// Add this check to your frontend build or startup
2// For React/Next.js apps:
3
4// In your frontend config, verify no sk_ keys leak through
5if (typeof window !== 'undefined') {
6  const allScripts = document.querySelectorAll('script');
7  // Your publishable key should start with pk_
8  const key = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
9  if (key && key.startsWith('sk_')) {
10    console.error('CRITICAL: Secret key exposed in frontend!');
11    throw new Error('Stripe secret key detected in client bundle');
12  }
13}
14
15// In Next.js, only NEXT_PUBLIC_ prefixed env vars are bundled
16// So use:
17//   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
18//   STRIPE_SECRET_KEY=sk_test_...  (server only, no prefix)