Does Stripe Work With Cloudflare Pages?
Stripe integrates seamlessly with Cloudflare Pages for processing payments in modern JAMstack applications.
Quick Facts
How Stripe Works With Cloudflare Pages
Stripe works excellently with Cloudflare Pages because Pages supports serverless functions (Cloudflare Workers) which handle sensitive payment operations server-side. The typical architecture has your static frontend hosted on Pages making client-side API calls to Stripe.js, while backend payment logic (creating payment intents, confirming charges, webhook handling) runs in Cloudflare Workers functions. This keeps your API keys secure and PCI-compliant. The developer experience is streamlined: you build your React/Vue/Next.js frontend on Pages, use Stripe's official SDKs on both client and server, and leverage Workers KV for storing payment metadata if needed. Webhook handling is straightforward—you configure Stripe webhooks to point to a Worker function endpoint, and Cloudflare's global network ensures low-latency processing worldwide. The main consideration is that Pages functions have a 30-second timeout, which is sufficient for most Stripe operations, but long-polling scenarios should use asynchronous processing. You'll also want to manage environment variables carefully for your publishable and secret keys.
Best Use Cases
Stripe Payment Intent with Cloudflare Worker
npm install stripe wrangler// worker.ts - Handle payment intent creation
import Stripe from 'stripe';
export interface Env {
STRIPE_SECRET_KEY: string;
}
export default {
async fetch(request: Request, env: Env) {
if (request.method !== 'POST') return new Response('Method not allowed', { status: 405 });
const stripe = new Stripe(env.STRIPE_SECRET_KEY);
const { amount, currency, email } = await request.json();
try {
const paymentIntent = await stripe.paymentIntents.create({
amount: Math.round(amount * 100), // Convert to cents
currency,
receipt_email: email,
metadata: { timestamp: new Date().toISOString() },
});
return new Response(
JSON.stringify({
clientSecret: paymentIntent.client_secret,
id: paymentIntent.id,
}),
{ headers: { 'Content-Type': 'application/json' } }
);
} catch (error) {
return new Response(JSON.stringify({ error: error.message }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
},
};Known Issues & Gotchas
Stripe webhook endpoints must handle retries and idempotency since network conditions vary globally
Fix: Implement idempotency keys in your webhook handler and store processed event IDs in KV to prevent duplicate processing
Pages functions have a 30-second execution timeout which may cause issues with slow Stripe API calls
Fix: Use background job queues for non-critical operations or implement timeouts with graceful degradation
Environment variables for Stripe keys must be bound as secrets in wrangler.toml, not hardcoded
Fix: Use Cloudflare's secrets management: `wrangler secret put STRIPE_SECRET_KEY` and access via env.STRIPE_SECRET_KEY
CORS issues when calling Stripe API from Workers if not configured properly
Fix: Call Stripe server-to-server from Workers (not client-side from Pages). Stripe SDKs handle CORS correctly in Workers context
Alternatives
- •Supabase (PostgreSQL backend) + Stripe for a full-stack solution with built-in auth
- •Firebase Functions + Stripe for event-driven payment processing with real-time database
- •Netlify Functions + Stripe as an alternative JAMstack deployment platform
Resources
Related Compatibility Guides
Explore more compatibility guides