Uploaded May 2024 | Updated September 2026, 2 days ago

---

In this how to guide, we walk through the process of adding online payments to a Next.js application using the Square Web Payments SDK. This implementation utilizes all of the modern Next features such as the app router and server actions to create a seamless developer experience.

Chapters:
0:00 - Introduction
0:23 - Install React Square Web Payments SDK
0:40 - Create Frontend Payment Form
1:52 - Next.js Server Actions
2:18 - Create Server Action File
2:33 - Initialize Square Node.JS Client
3:07 - Process Payment with Server Action
3:44 - Connect Frontend and Backend
3:58 - Conclusion

Resources:
Github Repository: github.com/Square-Developers/corner-blog-examples/tree/main/squaredev-next-online-payments-example
React Square Web Payments SDK: react-square-payments.weareseeed.com/docs