chore: import stripe checkout demo

see: https://github.com/stripe-samples/checkout-one-time-payments
cloudflare · Nov 6, 2021 · e9cf732 · e9cf732
1 parent 3a25e7f
commit e9cf732
Show file tree

Hide file tree

Showing 10 changed files with 1,164 additions and 2 deletions.
diff --git a/functions/checkout.js b/functions/checkout.js
@@ -0,0 +1,71 @@
+import Stripe from 'stripe';
+
+const stripe = new Stripe(STRIPE_API_KEY, {
+	// Cloudflare Workers use the Fetch API for their API requests.
+	httpClient: Stripe.createFetchHttpClient()
+});
+
+function reply(message, status) {
+	return new Response(message, { status });
+}
+
+/**
+ * POST /api/checkout
+ */
+export async function onRequestPost({ request }) {
+	// Accomodates preview deployments AND custom domains
+	// @example "https://<hash>.<branch>.<project>.pages.dev"
+	const { origin } = new URL(request.url);
+
+	try {
+		// Create new Checkout Session for the order.
+		// Redirects the customer to s Stripe checkout page.
+		// @see https://stripe.com/docs/payments/accept-a-payment?integration=checkout
+		const session = await stripe.checkout.sessions.create({
+			payment_method_types: ['card'],
+			mode: 'payment',
+			line_items: [{
+				quantity: 1,
+				// Reference existing item:
+				//   price: PRICE_ID
+				// Or, inline price data:
+				price_data: {
+					currency: 'usd',
+					unit_amount: 2000,
+					product_data: {
+						name: 'T-shirt',
+					}
+				},
+			}],
+			// The `{CHECKOUT_SESSION_ID}` will be injected with the Stripe Session ID
+			success_url: `${origin}/success?session_id={CHECKOUT_SESSION_ID}`,
+			cancel_url: `${origin}/canceled`,
+		});
+
+		return Response.redirect(session.url, 303);
+	} catch (err) {
+		return reply('Error creating session', 500);
+	}
+}
+
+/**
+ * GET /api/checkout?sessionid=XYZ
+ */
+export async function onRequestGet({ request }) {
+	const { searchParams } = new URL(request.url);
+
+	const ident = searchParams.get('sessionid');
+	if (!ident) return reply('Missing "sessionid" parameter', 400);
+
+	try {
+		const session = await stripe.checkout.sessions.retrieve(ident);
+		const output = JSON.stringify(session, null, 2);
+		return new Response(output, {
+			headers: {
+				'content-type': 'application/json; charset=utf-8'
+			}
+		});
+	} catch (err) {
+		return reply('Error retrieving Session JSON data', 500);
+	}
+}
diff --git a/package.json b/package.json
@@ -1,4 +1,7 @@
 {
   "private": true,
-  "version": "0.0.0"
+  "version": "0.0.0",
+  "dependencies": {
+    "stripe": "8.186.1"
+  }
 }
diff --git a/pages-functions-beta.json b/pages-functions-beta.json
@@ -0,0 +1,4 @@
+{
+  "entrypoint": "/functions",
+  "baseURL": "/api"
+}
diff --git a/public/canceled.html b/public/canceled.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Stripe Checkout Sample</title>
+
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="/css/normalize.css" />
+    <link rel="stylesheet" href="/css/global.css" />
+  </head>
+
+  <body>
+    <div class="sr-root">
+      <div class="sr-main">
+        <header class="sr-header">
+          <div class="sr-header__logo"></div>
+        </header>
+        <div class="sr-payment-summary completed-view">
+          <h1>Your payment was canceled</h1>
+          <button onclick="window.location.href = '/';">Restart demo</button>
+        </div>
+      </div>
+      <div class="sr-content">
+        <div class="pasha-image-stack">
+          <img
+            src="https://picsum.photos/280/320?random=1"
+            width="140"
+            height="160"
+          />
+          <img
+            src="https://picsum.photos/280/320?random=2"
+            width="140"
+            height="160"
+          />
+          <img
+            src="https://picsum.photos/280/320?random=3"
+            width="140"
+            height="160"
+          />
+          <img
+            src="https://picsum.photos/280/320?random=4"
+            width="140"
+            height="160"
+          />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>