Accept payments with Square using Next.js App Router

This guide walks through building an end-to-end payment flow in a Next.js App Router application using Square's payment SDK.

• •Install react-square-web-payments-sdk to access PaymentForm and CreditCard components that simplify payment form setup
• •PaymentForm requires three props: applicationId, locationId, and cardTokenizeResponseReceived callback
• •Next.js 14 Server Actions replace traditional API Routes, allowing server-side functions to be called directly from React components
• •The Square Node.js SDK is used server-side to call paymentsApi.createPayment with an idempotencyKey and the tokenized sourceId
• •A BigInt serialization error must be patched by overriding BigInt.prototype.toJSON to return a string