Sandbox 101: React Square Web Payments SDK

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 – https://nextjs.org/docs/getting-started React Square Web Payments SDK – https://github.com/weareseeed/react-square-web-payments-sdk Web Payments SDK – https://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 – https://developer.squareup.com/forums Square Developer Community – https://squ.re/slack Square Developer Twitter – https://twitter.com/squaredev Square Developer Blog – https://developer.squareup.com/blog