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

2023년 4월 17일 ・ 읽는 시간 5분

3월 21일, 국내 iPhone 유저들이 오랫동안 기다려온 Apple Pay가 한국에 도착했는데요. 첫날에만 17만 명이나 가입했다는 소식도 있었죠. 앞으로 Apple Pay 사용자는 점점 늘어날 것으로 보여요. 단말기 제약이 있는 오프라인과 달리, 온라인에는 바로 Apple Pay를 연동할 수 있어요. 이번 포스트에서는 토스페이먼츠로 내 쇼핑몰에 Apple Pay를 연동할 수 있는 세 가지 방법을 알아볼게요.

먼저, Apple Pay를 연동할 때 다음 주의점을 기억해주세요.

Safari, iOS 환경에서 사용하세요

PC 환경에서는 Safari만, 모바일 환경에서는 iOS만 Apple Pay를 사용할 수 있어요. Google Chrome 등 다른 웹 브라우저에서 Apple Pay를 연동하면 아래와 같은 에러를 받을 수도 있어요. 결제 연동에 어려움을 겪고 있다면 반드시 개발 환경을 다시 살펴보세요.

해외 카드 결제는 안돼요

토스페이먼츠로 연동하는 Apple Pay는 국내 카드 결제만 지원해요. 해외 카드를 등록한 Apple Pay 결제는 정상적으로 작동하지 않아요. 만약에 해외 카드 결제를 받고 싶다면 글로벌 결제 서비스(Stripe, WorldPay, Adyen 등)로 Apple Pay를 연동하세요.

주의점을 모두 알아봤으니, 이제 본격적으로 Apple Pay를 연동할 수 있는 방법을 알아볼게요.

첫 번째 연동 방법은 토스페이먼츠 결제창이에요. 가장 연동하기 쉽고 개발 공수가 적어요. 하지만 고객 입장에서는 결제창에서 결제수단을 선택해야 하는 단계가 있어서 결제 경험이 길어져요. 프로모션 중인 결제수단을 강조하고 싶거나, 결제수단 순서를 바꾸는 등 특별한 요구사항이 없고 개발 인력이 적다면 이 방법을 추천드려요.

토스페이먼츠 결제창 연동하기 >

두 번째 연동 방법은 Apple Pay 직연동이에요. 토스페이먼츠 결제창을 거치지 않고 바로 Apple Pay 결제창을 열 수 있어요. 그래서 ‘자체창’이라고 부르기도 해요. 토스페이먼츠 결제창에 비해 결제 단계가 적고 고객 경험이 좋지만, 개발 공수가 더 많이 들어가요. User-Agent를 직접 읽어서 애플 미지원 환경을 파악해야 되고, 각 결제수단을 따로 연동해야 해요. 고객이 결제수단을 선택하는 상품 결제 페이지 UI를 직접 만들어야 되기 때문이죠.

자체창은 결제창 SDK로 호출할 수 있어요. 결제 요청 메서드의 flowMode 파라미터를 DIRECT로 설정하고 easyPay 파라미터를 애플페이로 설정해주세요. 그럼 토스페이먼츠 결제창이 아닌 Apple Pay 직연동 자체창이 생성됩니다.

Apple Pay 직연동하기 >

자체창처럼 결제 단계를 줄이고 고객 경험을 매끄럽게 하고 싶지만 회사에 개발자가 한 명밖에 없다면? 토스페이먼츠 결제위젯을 추천드려요. 결제위젯은 결제 페이지의 주문서 UI를 그려주는 서비스에요. 토스에서 연구한 최적의 결제 UI를 사용하고 개발, 디자인 리소스를 아낄 수 있어요. 게다가 토스페이먼츠 상점관리자에서 No-code로 결제위젯의 디자인, 설정을 바꿀 수 있고, 프로모션 배지, 이용약관도 커스터마이징할 수 있어요.

결제위젯은 Apple Pay 외에도 다양한 결제수단을 한 번에 연동할 수 있어요. 결제위젯을 렌더링하려면 아래 HTML코드를 사용하세요. 결제를 요청하고 연동을 완료하려면 GitHub 샘플 프로젝트를 참고하세요.

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

지금까지 Apple Pay를 연동할 수 있는 세 가지 방법을 알아봤어요. 각 방법의 장점과 단점을 아래 표에서 비교해보세요. 결제위젯이 개발 공수가 가장 적으면서 좋은 결제 경험을 제공하고 있어요.

Writer 박수연 Graphic 이은호, 이나눔

📍 함께 읽으면 좋을 콘텐츠

• 결재위젯 연동하기

• 결제창 연동하기