Replace Stripe checkout with Square Web Payments - #52
Open
benhalverson wants to merge 1 commit into
Open
Conversation
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The new Square checkout flow leaves shipping information edits unused and has a few robustness gaps (env validation, idempotency key generation, response parsing) that can break or misroute payments.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR migrates the frontend checkout flow from Stripe to Square Web Payments by removing Stripe pages/deps and embedding a Square card entry component directly in checkout, aligning the UI with the new /square-payment backend flow.
Changes:
- Removed Stripe checkout page/route and Stripe product/price fields and dependencies.
- Added a new
SquarePaymentFormcomponent that loads Square Web Payments, tokenizes card details in-browser, and posts a Square payment request to the backend. - Updated environment/config samples to use Square Application/Location IDs.
File summaries
| File | Description |
|---|---|
| src/pages/Product.tsx | Removes Stripe product fields from the Product interface. |
| src/pages/Payment.tsx | Deletes the Stripe Payment page implementation. |
| src/pages/Checkout.tsx | Replaces Stripe submit flow with embedded SquarePaymentForm. |
| src/pages/Checkout.test.tsx | Removes previous Checkout readiness/error test coverage. |
| src/config.ts | Adds Square env vars to validated config (needs env parity improvements). |
| src/components/SquarePaymentForm.tsx | New Square Web Payments embed + tokenize + backend payment call. |
| src/App.tsx | Removes the /payment route and lazy import. |
| package.json | Removes Stripe dependencies. |
| pnpm-lock.yaml | Removes Stripe lock entries and updates transitive deps. |
| .env.sample | Replaces Stripe key with Square env var samples. |
| .env.production | Replaces Stripe publishable key with Square placeholder config. |
Review details
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
- Files reviewed: 10/11 changed files
- Comments generated: 7
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+346
to
+352
| {localStorage.getItem("cartId") && ( | ||
| <SquarePaymentForm | ||
| cartId={localStorage.getItem("cartId") ?? ""} | ||
| customerEmail={profile?.email} | ||
| disabled={remoteCart.length === 0} | ||
| onError={setCheckoutError} | ||
| /> |
Comment on lines
+21
to
+24
| const SDK_URL = | ||
| import.meta.env.VITE_SQUARE_ENVIRONMENT === "production" | ||
| ? "https://web.squarecdn.com/v1/square.js" | ||
| : "https://sandbox.web.squarecdn.com/v1/square.js"; |
Comment on lines
+59
to
+62
| const navigate = useNavigate(); | ||
| const cardRef = useRef<SquareCard | null>(null); | ||
| const idempotencyKeyRef = useRef(crypto.randomUUID()); | ||
| const [ready, setReady] = useState(false); |
Comment on lines
+114
to
+116
| const payload = (await response.json()) as { error?: string; orderId?: string }; | ||
| if (!response.ok) throw new Error(payload.error ?? "Payment failed"); | ||
| navigate("/order/complete", { state: { orderId: payload.orderId } }); |
Comment on lines
3
to
8
| const zEnv = z.object({ | ||
| VITE_BASE_URL: z.string().url(), | ||
| VITE_DOMAIN: z.string().min(1).max(100), | ||
| VITE_SQUARE_APPLICATION_ID: z.string().min(1), | ||
| VITE_SQUARE_LOCATION_ID: z.string().min(1), | ||
| }); |
Comment on lines
12
to
+15
| export const BASE_URL = parsed.VITE_BASE_URL; | ||
| export const DOMAIN = parsed.VITE_DOMAIN; | ||
| export const SQUARE_APPLICATION_ID = parsed.VITE_SQUARE_APPLICATION_ID; | ||
| export const SQUARE_LOCATION_ID = parsed.VITE_SQUARE_LOCATION_ID; |
Comment on lines
+346
to
+352
| {localStorage.getItem("cartId") && ( | ||
| <SquarePaymentForm | ||
| cartId={localStorage.getItem("cartId") ?? ""} | ||
| customerEmail={profile?.email} | ||
| disabled={remoteCart.length === 0} | ||
| onError={setCheckoutError} | ||
| /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Verification
pnpm test -- --run(37 tests passed)pnpm exec tsc --noEmitpnpm buildRequired configuration
VITE_SQUARE_APPLICATION_IDVITE_SQUARE_LOCATION_IDVITE_SQUARE_ENVIRONMENT(sandboxorproduction)This PR expects the companion
3dprinter-farmSquare backend change.