결제 연동을 시작하려면 어떤 코드부터 작성해야 할까요? 결제 도메인에 대한 지식을 익히고 PG사가 제공하는 제품과 연동 방식을 이해하는 과정은 개발자에게 부담이 될 수 있어요.
이럴 때 토스페이먼츠 샌드박스를 활용하면 브라우저에서 결제 UI를 확인하고 테스트 결제를 진행할 수 있어요. 처음부터 코드를 작성하지 않아도 주문서부터 결제 완료 페이지까지 결제 연동의 전체 흐름을 살펴볼 수 있죠. 이번 글에서는 샌드박스에서 사용할 언어를 선택하는 방법부터 테스트 결제, 내 API 키로 테스트하는 방법까지 알아볼게요.
1. 토스페이먼츠 샌드박스에서는 무엇을 할 수 있나요?
토스페이먼츠 샌드박스는 실제 코드를 작성하기 전에 브라우저에서 결제 연동 과정을 실행하고 테스트할 수 있는 환경이에요. 결제 UI가 어떻게 표시되는지 확인하고, 테스트 결제를 진행한 다음 결제 승인 결과까지 살펴볼 수 있어요.
프론트엔드와 서버 코드를 함께 확인할 수 있어 결제 연동의 전체 흐름을 이해하는 데 도움이 돼요. 결제 연동을 처음 시작하는 개발자뿐 아니라 결제 UI를 구현하는 프론트엔드 개발자, 승인 API를 다루는 서버 개발자도 활용할 수 있어요.
2. 샌드박스에서 사용할 프로그래밍 언어는 어떻게 선택하나요?
샌드박스 왼쪽 상단의 언어 선택 영역에서 원하는 언어를 선택하면 돼요. 언어를 선택하면 해당 언어에 맞춰 필요한 파일과 관련 로직이 달라져요. 이를 통해 사용하는 기술 환경에 맞는 코드를 확인할 수 있어요. 다만 지원하는 언어와 프레임워크는 샌드박스의 현재 제공 범위에 따라 달라질 수 있으므로, 실제 사용 전에는 샌드박스에서 선택 가능한 항목을 확인해 주세요.
3. 결제 연동은 어떻게 테스트하나요?
오른쪽 Preview에서 결제 UI가 정상적으로 표시되는지 확인한 뒤, 원하는 결제수단을 선택해 테스트 결제를 진행하면 돼요. 샌드박스에서는 테스트 환경에서 결제 흐름을 확인할 수 있어요. 실제 결제가 발생하는 것은 아니므로 결제 UI와 연동 과정을 부담 없이 살펴볼 수 있죠.
테스트 결제는 다음 순서로 진행하면 돼요.
- Preview에서 결제 UI가 정상적으로 렌더링되는지 확인해요.
- 원하는 결제수단을 선택하고 테스트 결제를 진행해요.
- 결제 요청 결과를 확인해요.
- 요청에 성공했다면 마지막 결제 승인 단계까지 진행해요.
- 결제 완료 페이지와 터미널에 표시되는 승인 데이터를 확인해요.
결제 요청에 성공했는지는 어떻게 확인하나요?
테스트 결제 후 브라우저 주소창에 표시되는 리다이렉트 URL과 결과 메시지를 확인하면 돼요.
결제 요청이 성공하면 요청 성공 여부를 확인할 수 있고, 이후 승인 단계까지 진행할 수 있어요. 승인이 정상적으로 완료되면 결제 완료 페이지가 표시되고 터미널에서 승인된 결제 데이터를 확인할 수 있어요.
결제 요청부터 승인까지 각 단계에 대한 자세한 내용은 토스페이먼츠 개발자 문서에서 확인할 수 있어요.
4. 샌드박스에서 내 API 키로 테스트하려면 어떻게 하나요?
토스페이먼츠 개발자센터에 로그인하면 발급받은 테스트용 API 키로 결제 연동을 테스트할 수 있어요. 로그인하지 않은 상태에서도 샌드박스에서 기본적인 테스트를 진행할 수 있지만, 내 API 키를 사용하려면 로그인해야 해요.
내 API 키로 테스트하려면 다음 순서대로 진행해 보세요.
- 토스페이먼츠 개발자센터에 회원가입하고 로그인해요.
- 결제 완료 화면에서 ‘내 API 키로 테스트하기’를 선택하거나 개발자센터 우측 상단에서 로그인해요.
- 로그인 후 코드에 내 테스트용 API 키가 설정되어 있는지 확인해요.
- 테스트 결제를 진행해요.
- 개발자센터에서 내 테스트 결제내역을 확인해요.
회원가입만 해도 테스트용 API 키를 발급받을 수 있어요. 내 키로 테스트하면 개발자센터에서 테스트 결제내역을 확인할 수 있어 연동 결과를 살펴보기 편리해요.
5. 프론트엔드 개발자는 샌드박스를 어떻게 활용할 수 있나요?
프론트엔드 개발자는 샌드박스에서 주문서부터 결제 완료 페이지까지 결제 UI의 전체 흐름을 코드 작성 없이 먼저 확인할 수 있어요. 결제 UI를 개발하기 전에 화면이 어떻게 표시되는지, 고객이 결제수단을 선택하면 어떤 흐름으로 진행되는지 살펴볼 수 있죠. 로그인한 뒤에는 직접 결제 금액이나 결제 UI 종류를 바꿔가며 테스트할 수도 있어요. 실제 구현에 들어가기 전에 원하는 화면과 결제 흐름을 확인하면 개발 방향을 잡는 데 도움이 돼요.
6. 서버 개발자는 샌드박스를 어떻게 활용할 수 있나요?
서버 개발자는 프론트엔드 코드를 별도로 작성하거나 동료에게 요청하지 않고도 결제 승인에 필요한 데이터를 확인할 수 있어요. 샌드박스에서 테스트 결제를 진행하면 승인 API를 호출하는 단계까지 이어서 확인할 수 있어요. 승인 요청에 대한 응답 객체도 터미널에서 확인할 수 있어 서버 로직을 구현할 때 참고하기 좋아요. 원문에서 소개한 샌드박스는 서버 코드를 읽기 전용으로 제공하며, 로그인하면 시크릿 키가 자동으로 변경되는 방식이에요. 실제 사용 시에는 키가 올바르게 적용됐는지 확인하고, 시크릿 키가 외부에 노출되지 않도록 주의해야 해요.
7. 샌드박스 코드를 복사해서 바로 사용할 수 있나요?
샌드박스는 결제 연동 테스트 앱의 프로젝트 구조를 제공하므로 코드를 복사해 테스트 앱을 구성하는 데 활용할 수 있어요. 샌드박스에서 확인한 코드를 활용하면 프로젝트 구조와 결제 연동 흐름을 이해하는 데 도움이 돼요. 처음부터 테스트 코드를 모두 작성하는 데 드는 시간을 줄이고 실제 서비스 개발에 더 집중할 수 있죠.
8. 토스페이먼츠는 왜 개발자 경험을 중요하게 생각하나요?
결제 연동은 PG사를 도입할 때 반드시 거쳐야 하는 과정이기 때문에, 개발자가 얼마나 쉽고 직관적으로 연동을 시작할 수 있는지가 중요해요. 개발자가 결제 연동을 처음 시작할 때 문서를 읽고 필요한 설정을 모두 마친 뒤 실행하는 방식만 있는 것은 아니에요. 코드 작성 전에 결제 흐름을 직접 실행해 볼 수 있다면 제품과 연동 과정을 더 빠르게 이해할 수 있어요. 결제 연동에 드는 시간을 줄이고 개발자가 더 중요한 작업에 집중할 수 있도록 개발자 경험을 지속적으로 개선해 나가는 것이 목표예요.
결제 연동을 시작하기 전에 샌드박스를 활용해 보세요
결제 연동을 시작할 때 처음부터 모든 코드를 작성할 필요는 없어요. 샌드박스에서 결제 UI를 확인하고 테스트 결제부터 승인까지 진행해 보면 전체 흐름을 더 쉽게 이해할 수 있어요.
프론트엔드 개발자는 결제 화면과 사용자 흐름을 확인하고, 서버 개발자는 승인 API와 응답 데이터를 살펴보세요. 테스트 환경에서 먼저 확인한 뒤 실제 프로젝트에 적용하면 개발 과정에 도움이 될 수 있어요.
