# 토스페이먼츠

20개의 포스트
post-thumbnail

Promise 실전에서 사용해보기

이 포스트는 토스비즈니스피드에서도 읽을 수 있습니다. 비동기 작업이란 특정 코드의 로직이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 것이에요. 웹사이트 개발에는 비동기 작업을 자주 사용해요. 서버에서 데이터를 불러올 때 오래 걸릴 수도 있는데, 그동안 다른 코드를 실행하지 않고 가만히 기다리면 웹 사이트를 로딩하는 게 굉장히 오래 걸리기 때문이죠. 하지만 순서대로 불러야 하는 코드가 있으면 어떤 일이 일어날까요? 예를 들어, 연산이 끝나기도 전에 연산 결과를 파라미터로 사용하는 함수를 실행하면 에러가 나겠죠. 그래서 이런 비동기 작업을 순차적으로 실행하기 위해 JavaScript에서는 콜백 함수를 사용해요. 콜백 함수는 특정 로직이 끝났을 때 원하는 코드를 실행할 수 있어요. 하지만 콜백에 또 콜백을 계속 호출하게 되면 코드가 복잡해지고 에러도 처리하기 어려워요. 이런 단점은

2023년 9월 13일
·
8개의 댓글
·
post-thumbnail

iOS 앱에 결제위젯 연동하기

이 포스트는 토스비즈니스피드에서도 읽을 수 있습니다. 고객의 결제 경험은 매출과 연결되기 때문에 앱의 매우 중요한 부분이죠. 결제를 웹뷰로 연동할 수도 있지만, 웹뷰는 속도가 비교적 느리고 UI가 제한적이에요. 모바일 앱에서 결제를 빠르고 간편하게 연동하고 싶다면 토스페이먼츠 Native SDK를 사용해보세요. 지난번에는 Android에서 결제위젯을 연동해봤는데요. 오늘은 UIKit, SwiftUI 프레임워크의 차이점을 알아보고 iOS 앱애 결제위젯을 연동해볼게요. SwiftUI vs UIKit, 뭘 사용해야 돼요? 토스페이먼츠 SwiftUI vs UIKit Swift 개발자라면 UIKit

2023년 8월 2일
·
3개의 댓글
·
post-thumbnail

토스페이먼츠 결제 위젯 연동하기

들어가며, 우리 회사 서비스는 현재 국내에서 서비스하고 있는데 글로벌 런칭 준비중이라 그에 맞춰 결제 서비스도 해외결제가 가능하도록 바꾸는 스프린트가 진행됐다💪 해외결제는 토스페이먼츠를 붙히면 됐고 거의 다 완성되어갈 즈음.. 국내결제도 토스페이먼츠로 변경해야한다는 것을 알았다..😳😳(지금은 아임포트..) 구현했던 컴포넌트를 공통으로 사용하고자 코드를 수정하고.. 아임포트에서 점진적으로 토스페이먼츠로 전환하는 코드를 추가하고.. 그 과정에서 해외결제에 페이팔 + 해외카드를 추가하는 과정이.. 생각보다 순탄하지는 않았던..🫠🫠(이 과정에서 토스페이먼츠에서 운영하는 디코에서 많은 도움을 받았다!!👍👍) 어찌저찌 QA까지 진행했으나.. 가장 중요한 계약이 완료되지 않아.. 결국 완성된 코드는.. PR만 올라가있는 상태다..😕 (계약 시작한건 5월말인데.. 8월초인 지금도.. 이 코드를 질질 끌고 가고 있..😮‍💨😮‍💨) 일단, 여기까지 진행한 내용을

2023년 7월 30일
·
1개의 댓글
·
post-thumbnail

[Nest.js] 토스 페이먼츠 결제 - 백엔드 혼자 구현해보기

프로젝트 결제 기능을 구현 하기 위해 토스페이먼츠 결제 연동을 사용했다. 백엔드 기준에서 작성된 글입니다. 나중에 제가 다시 보려고 기록합니다! 🔹 토스페이먼츠 결제 연동 토스페이먼츠 결제 연동은 FE / BE 크게 두 부분으로 나눌 수 있다. 1. FE (프론트엔드) - 결제 요청 인증 위젯 연동하기 결제창을 띄우고 성공시 successUrl / 실패시 failureUrl 로 이동한다. 성공하면 successUrl에 paymentKey, orderId, amount 값이 포함되어 있다. 2. BE (백엔드) - 결제 승인 API 연동하기 FE가 넘겨준 payment, orderId, amount 값으로 토스 서버에 결제 승인 요청 보낸다. 📌 1

2023년 7월 20일
·
0개의 댓글
·
post-thumbnail

Apple Pay를 연동하는 세 가지 방법

3월 21일, 국내 iPhone 유저들이 오랫동안 기다려온 애플페이가 한국에 도착했는데요. 첫날에만 17만 명이나 가입했다는 소식도 있었죠. 앞으로 애플페이 사용자는 점점 늘어날 것으로 보여요. 단말기 제약이 있는 오프라인과 달리, 온라인에는 바로 애플페이를 연동할 수 있어요. 이번 포스트에서는 토스페이먼츠로 내 쇼핑몰에 애플페이를 연동할 수 있는 세 가지 방법을 알아볼게요. 애플페이 사용할 때 주의하세요 먼저, 애플페이를 연동할 때 다음 주의점을 기억해주세요. ❗️Safari, iOS 환경에서 사용하세요 PC 환경에서는 Safari만, 모바일 환경에서는 iOS만 애플페이를 사용할 수 있어요. Google Chrome 등 다른 웹 브라우저에서 애플페이를 연동하면 아래와 같은 에러를 받을 수도 있어요. 결제 연동에 어려움을 겪고 있다면 반드시 개발 환경을 다시 살펴보세요. ![애플페이 미지원 OS/브라우입니다 에러](https://velog.velcdn.c

2023년 4월 17일
·
0개의 댓글
·
post-thumbnail

결제 요청, 인증, 승인… 이게 다 뭔가요?

결제 연동할 때, 이런 의문 가져보신 적 없으세요? 결제창을 띄워서 결제 요청에 성공했는데, 여기서 끝난 게 아니라 ‘승인 요청’까지 해야 결제 완료라고 하네요. 결제 요청과 승인은 어떻게 다르고, 왜 따로 처리해줘야 하는 걸까요? 결제 요청 과정 쪼개보기: 요청-인증-승인 결제 흐름.png PG사 입장에서 결제 요청은 구매자가 사려는 상품 정보, 구매자 정보 등을 전달해 결제창을 띄우고 이 정보를 제출하는 과정까지에요. 토스페이먼츠 결제창으로 생각해보면, 카드사를 선택하고 ”다음” 버튼을 선택해 카드사 창이 뜰 때 결제 요청이 된다고 볼 수 있죠. 요청 후에는 두 가지 과정이 차례로 진행되어야 하는데요. 카드사의 결제 인증 처리, 그리고 가맹점의 결제 승인 요청이에요. 각 단계에 대해 자세히 알아볼게요. 1-1. 결제 요청

2023년 4월 5일
·
0개의 댓글
·
post-thumbnail

Android, iOS 웹뷰에서 딥링크 열기

딥링크, 커스텀 링크, App Link… 이게 다 뭔가요? 네이티브 앱 개발자라면 한 번쯤 들어봤을 용어인데요. 이번 포스트에서는 각 딥링크 유형의 특징과 차이점을 자세히 알아보고, Android와 iOS 웹뷰에서 딥링크로 국내 카드앱·은행앱으로 이동하는 예시를 살펴볼게요. 딥링크란? 딥링크란? 웹링크가 사용자를 특정 웹사이트로 이동시키듯이, 딥링크는 사용자를 특정 앱으로 이동시켜서 원하는 화면을 보여주거나, 사용자 액션을 유도해요. 예를 들어, 사용자가 온라인 쇼핑몰에서 결제 수단으로 토스페이를 선택해요. 그럼 위 그림에 있는 왼쪽 화면이 나오고 ‘다음’을 누르면 토스 앱의 결제 페이지로 이동하죠. 딥링크를 사용했어요! 앱의 사용자를 늘리거나 마케팅 캠페인에 굉장히 유용해요. 사용

2023년 3월 27일
·
5개의 댓글
·
post-thumbnail

React로 결제 페이지 개발하기 (ft. 결제위젯)

안녕하세요! 결제 페이지 개발하기 포스트에서 받은 뜨거운 반응에 힘을 입어 React 버전으로 돌아왔어요. 이번에도 많은 관심 부탁드려요. 🤗 오늘은 결제 연동을 쉽게 풀어 주는 결제위젯 React 프로젝트를 소개해요! 결제위젯은 한 번 연동하면 다양한

2023년 3월 6일
·
12개의 댓글
·
post-thumbnail

30분 안에 결제 페이지 개발하기 (ft. 결제위젯)

결제 페이지는 개발할 요소가 많아요. 제품 정보, 결제 금액, 결제 수단, 이용약관 모두 하나부터 열까지 디자인하고 개발해야 돼요. 특히 여러 결제 수단을 연동하고 있다면, 각 수단의 결제창을 따로 연동해야 돼요. 이렇게 어려운 결제 연동, 토스페이먼츠가 결제위젯으로 쉽게 풀어드려요! 😊 결제위젯은 한 번 연동하면 다양한 결제 수단과 커스텀 디자인을 노코드(No-code)로 제공하는 서비스입니다. 이번 포스트에는 결제위젯으로 간단한 온라인 결제 페이지를 만들어볼게요. 마지막에 토스페이먼츠 결제전담팀을 빌려갈 수 있는 이벤트도 있으니, 끝까지 읽어주세요. SDK 추가 결제 페이지의 ``

2023년 2월 14일
·
2개의 댓글
·
post-thumbnail

Basic 인증과 Bearer 인증의 모든 것

HTTP 인증(Authorization)은 웹 서버의 비밀번호 같은 역할을 해줘요. 비밀번호로 이메일 계정의 권한을 확인하는 것 처럼, HTTP 인증으로 서버에 접근하는 클라이언트의 권한을 확인해요. 이번 포스트에는 HTTP 인증 프레임워크와 Basic, Bearer 인증 방법을 알아볼게요. HTTP 통신 방법 HTTP 통신은 요청(Request)과 응답(Response)으로 HTML 문서 및 웹 리소스를 불러와요. 요청과 응답은 클라이언트-서버 간에 이루어져요. 클라이언트(보통 웹브라우저)가 서버에 요청을 보내면, 서버는 요청한 리소스를 보내줘요. HTTP 통신에는 인증이 왜 필요할까요? 예를 들어 블로그 포스트를 하나 작성했다고 가정해볼게요. 내가 작성한 블로그 포스트, 나만 수정할 수 있어야 겠죠. 블로그 포스트, 이메일과 같이 보호된 서버 리소스를 접근하는 클라이언트의 인증 정보(Credentials)를 확인해요. [HTTP 인증 프레임워크](https://dev

2023년 1월 26일
·
7개의 댓글
·
post-thumbnail

멱등성이 뭔가요?

멱등(Idempotent)하다는 것 생소한 표현이지만 알고 보면 쉬워요. 컴퓨터 과학에서 멱등하다는 것은 첫 번째 수행을 한 뒤 여러 차례 적용해도 결과를 변경시키지 않는 작업 또는 기능의 속성을 뜻해요. 즉, 멱등한 작업의 결과는 한 번 수행하든 여러 번 수행하든 같습니다. 예를 들어, 어떤 숫자에 1을 곱하는 연산은 여러 번 수행해도 처음 1을 곱한 것과 같은 숫자가 되기 때문에 멱등해요. 마찬가지로 숫자의 절대값을 계산하는 절대값 함수는 같은 값에 대해 여러 번 수행해도 처음과 항상 같은 숫자가 돌아오기 때문에 멱등 함수라고 불러요. HTTP 메서드의 멱등성 HTTP 메서드에도 멱등성이 있어요. 예를 들어 GET은

2023년 1월 11일
·
8개의 댓글
·
post-thumbnail

[React+DRF] 토스 페이먼츠 결제 구현 2. 정기 결제

정기결제도 사실 그냥 API로 제공해주는줄 알았는데, 알고보니 pg사 쪽에서는 정기결제에 사용할 빌링키만 제공하고 별도로 정기 결제가 이루어지도록 서버를 구축해야했다. 0. 클라이언트단 정기결제는 다음과 같은 프로세스를 통해 진행된다. 일단 유저가 프론트단에서 토스페이먼츠 API를 이용한 결제창을 띄워 카드 정보를 등록한다. 해당 버튼을 눌러 카드 정보를 올바르게 입력한 경우 url로 리다이렉트된다. 그럼 해당 리다이렉트된 페이지에서 customerKey와 authKey를 받아 백단으로 전달해준다. 이렇게 발급받은 customerKey와 authKey을 가지고 백단에서 billingKey를 발급받을 수 있다. billingKey는 결제를 하는데 이용하며, 그럼 이렇게 발급받은 billingK

2022년 12월 15일
·
0개의 댓글
·
post-thumbnail

[React+DRF] 토스 페이먼츠 결제 구현 1. 일반 결제

기존에 결제 시스템은 아임포트를 이용하고 있었다. 예전에 등록해놓고 관련 서비스가 활성화되지 않아서 방치해 놓고 있었는데 최근에 다시 결제 모듈이 필요해서 들어가보니 뭐가 잔뜩 바뀌고 전에 신청해놓은것도 다 사라져서 결국 pg사 연동부터 다시 해야했다... 이번에는 일반결제+정기결제를 해야했는데 어차피 새로 pg사 연동부터 다 새로 해야하는거.. 굳이 아임포트 안쓰고 한 pg사꺼 써서 커스텀을 더 풍부하게 해보자 하는 생각으로 아임포트를 버렸다. 그리고 선택한 pg사는 토스페이먼츠. 큰 이유는 없다. 그냥 결제 모듈 ui가 깔끔해서임. 기존에는 kg이니시스를 사용했는데, 뭔가 내 과거기억/경험상 kg이니시스의 ui가 상당히 촌스럽다는 어떤 편견아닌 편견이 있었다... 주로 쓰는 곳도 약간 업데이트가 느린 정부기관에서 쓰는 느낌적인 느낌....ㅎ 쨌든 상당히 단순한 이유로 토스페이먼츠를 선택했다. 1-1. 토스페이먼츠 가입 및 신청 https://www.tosspayme

2022년 12월 13일
·
2개의 댓글
·
post-thumbnail

버전 2022-11-16 업데이트 소식

토스페이먼츠 버전 2022-11-16이 나왔어요! 약 4개월 만의 버전 업데이트인 만큼 많은 변화가 있는데요, 어떤 변화가 왜 있었는지 알려드려요. 숫자 기관 코드 이번 릴리즈에 가장 큰 변화는 은행, 카드사 필드에 있어요. 필드 값의 한글·영어 코드를 숫자 코드로 대체했어요. 왜 숫자 코드를 사용해요? 1️⃣ 응답 일관성 API의 Accept-Language 헤더, 브라우저 환경에 따라 응답이 한글 또는 영어로 왔어요. 응답 언어를 예측하기 어려워서 상점에서 두 언어를 모두 대응해야 하는 불편함이 있었어요. 상점에서 API 응답을 더 쉽게 대응할 수 있도록 다국어 환경에서 일관성 있게 돌아오는 숫자 코드를 사용하기로 했어요. 2️⃣ 기관 코드 관리 제일은행을 기억하시나요? 외환위기 이후 SC제일은행이 되었죠. 은행이나 카드사 이름은 언제든 바뀔 수 있는데, 한글·영어 코드는 한 번 설정하면 토스페이먼츠에서 변경하기 어려워요. 토스페이먼

2022년 11월 29일
·
1개의 댓글
·
post-thumbnail

토스페이먼츠 기술 블로그에 오신 것을 환영해요

커버 이미지 온라인 비즈니스를 하려면 PG 연동이 꼭 필요합니다. 하지만 그 과정은 개발자들에게 고통스럽고 복잡했어요. 토스페이먼츠는 PG를 연동하는 개발자 경험을 수호하고 완전히 새로운 경험을 드리기 위해 직관적인 API, 편리한 개발자센터, 읽기 쉬운 문서를 만들고 있어요. 개발자 경험을 수호하는 활동의 일환으로 기술 블로그를 시작하려고 해요. 좀 더 쉽고 재밌는 컨텐츠로 결제 연동을 학습할 수 있도록 도울게요. 이런 주제들을 다룰 예정이에요. 버전 업데이트 소식 새 기능 소개 기술 & 금융 개념 소개 Open API 이해하기 가맹점 연동 사례 및 인터뷰 테크니컬 라이팅 소개 기술적으로 딥다이브하는 주제도 있겠지만, 기술 뿐만 아니라 결제 연동 과정에 필요한 다양한 정보

2022년 11월 29일
·
3개의 댓글
·
post-thumbnail

[Flutter] Toss Payments 연결(업데이트 1)

0. 참고자료 플러터 라이브러리 : toss_payment | Flutter Package 토스 개발자센터 : 시작하기 | 토스페이먼츠 개발자센터 1. 사용법 1.1. OS별 환경세팅 1.1.1. 안드로이드 세팅 min SDK 20이상 설정 android/app/build.gradle AndroidManifest 의 scheme와 권한 설정 AndroidManifest.xml에서 수정한다. 👉🏻 안드로이드 권한은 AndroidManifest.xml에서 uses-permission 태그를 사용해서 부여한다.

2022년 11월 11일
·
0개의 댓글
·
post-thumbnail

[D+240] 리액트로 토스페이 이용하기

토스페이먼츠를 활용하여 카드, 가상계좌, 계좌이체로 결제하는 코드를 기록해 보려 한다. 먼저 결제에 있어서 필요한 페이지는 3개가 있다. >1. 결제 요청 페이지 (프론트-토스) 결제 요청 성공 페이지 (프론트-백) 결제 요청 실패 페이지 (프론트-백) 먼저 토스페이먼츠에 로그인한 후 클라이언트키(프론트)와 시크릿키(백) 이 필요하다. 결제 요청 페이지 결제 요청이 토스페이먼츠로 전송되고 성공했을 때 url로 orderId, paymentKey, amount가 나오는데 그 값들을 백엔드에게 넘겨줘야한다. 결제 성공 페이지 백엔드와 method 그리고 데이터를 바디에 담을건지 쿼리스트링으로 담을건지 약속하고 실험을 해보면 될 것이

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

토스 결제 모듈 구현하기 - 2(Nest.js)

실제 코드로 결제 토스 api 사용하기 이전 글에서 발급받은 api키를 가지고 실제로 코드로 api를 사용해 보도록 하겠습니다. 먼저, 토스 깃허브에 올라온 예시코드를 한번 보면 토스 예시 코드 토스 서버에 보낼 정보로 헤더에 secretKey**(이전 글에서 발급받은 키 값)와 paymentKey* , 그리고 json으로 **orderId, amount* 를 보내줘야 한다고 보여주고 있습니다. >여기서 paymentKey** , orderId, **amount 는 각각 주문키, 주문번호, 주문수량 으로 프론트에서 카드 인증 후, 결제를 진행 할 때 가맹점 서버(여기서는 우리가 만든 서버)로 전달 받은 정보로 벡엔드는 단지 이것을 알맞은 형식에 맞춰 토스 서버에 보내주기만 하면 됩니다. 위의 코드를 조금 수정해서 nest.js로 구현해보도록 하겠습니다. >구현하기 전에 위에서 언급한 대로 프론트에서

2022년 6월 8일
·
1개의 댓글
·
post-thumbnail

토스 결제 모듈 구현하기 - 1(Nest.js)

지난 글에서는 PG 사들이 어떤식으로 결제를 진행하는 지 구조를 알아봤다면 이번에는 토스 페이먼츠에서 제공하는 api들을 연동해서 직접 결제를 구현해 보도록 하겠습니다. (이 글에서는 Nest.js를 통한 벡엔드 구현 부분만 다룰 예정입니다.) 연동 준비 시작하기 토스페이먼츠 api 연동준비 링크 결제를 시작하기 전에 먼저 준비 사항이 필요합니다. 토스페이먼츠 문서에 들어가 보면 SDK 준비 파트가 있고 복잡하게 있지만 이건 프론트에서 사용하는 것이므로 스킵하고~ 벡엔드는 바로 API 연동 준비 탭으로 넘어가 줍니다. api 키 발급받기 ![토스 API 연동하기 문서 캡쳐](https://velog.velcdn.com/images/jonghyun3668/post/b56c6017-51eb-4

2022년 6월 8일
·
0개의 댓글
·
post-thumbnail

결제 과정 이해하기(PG사 연동)

쇼핑몰 프로젝트를 진행하던 중에 결제 기능을 구현하게 되어 공부했던 내용을 정리하기 위한 글입니다. 결제는 어떻게 이루어 지는걸까? 결제 기능을 구현하려면 우선 결제가 어떻게 이루어 지는지 부터 알아야 한다. 우리가 쇼핑몰에서 어떤 물품을 살때를 생각해 보자. 우리가 고른 상품을 결제하기를 누르면 다음과 같은 창이 나타나서 결제를 진행할 수 있게 도와주었을 것이다. 토스 결제창 이 창에서 결제하고 싶은 항목을 선택해서 결제 했던 경험 누구나 한번쯤 있을 것이다. 그렇다면, 왜 항상 위의 창으로 결제를 하는걸까? 우리가 직접 결제를 구현하고 카드사 연동을 하려고 하면, 각 카드사마다 코드를 직접 짜줘야하고 연동도 해줘야한다. 그럴려면 크나큰 부담으로 작용하는게 사실이다. 이거 말고도

2022년 6월 7일
·
1개의 댓글
·