Uploaded January 2022 | Updated September 2026, 2 days ago

---

React Square Web Payments SDK lets you easily create PCI-compliant inputs to accept payments online with the Square Payments API. In this tutorial, we walk you through how to set up the React Square Web Payments SDK inside of a Next.js application and create a backend API endpoint to process a payment. Finally, we show how you can extend your payment integration to easily add in additional payment types by just adding in payment components.

Next.JS Docs – nextjs.org/docs/getting-started
React Square Web Payments SDK – github.com/weareseeed/react-square-web-payments-sdk
Web Payments SDK – developer.squareup.com/docs/web-payments/overview

Chapters:
0:00 - Intro
0:29 - Scaffolding NextJS App
0:48 - Adding extra dependencies
1:16 - Setup NextJS App
2:09 - Import React Square Web Payments SDK
2:58 - Testing Web Payments SDK
3:15 - Backend Implementation
3:54 - Adding Backend API Endpoints
5:10 - Refactor Frontend to Connect to Backend
6:00 - Testing End to End Payment Flow
6:10 - Recap Implementation
6:21 - Adding ACH Payments
7:08 - Conclusion

Square Developer Forums – developer.squareup.com/forums
Square Developer Community – https://squ.re/slack
Square Developer Twitter – twitter.com/squaredev
Square Developer Blog – developer.squareup.com/blog