웹 결제 소개: 결제 요청 API로 더 쉽게 온라인 구매

특히 모바일에서 온라인으로 물건을 구매하는 것은 실망스러운 과정일 수 있습니다. 페이지가 잘 디자인되어 있더라도 연락처 정보, 배송 및 청구지 주소, 배송 옵션 및 카드 세부 정보와 같은 많은 정보가 필요합니다. 가끔 포기한 적이 있다면 대다수가 당신입니다.

Baymard Institute는 37개의 서로 다른 연구에서 평균을 취한 결과 장바구니의 69%가 버려진 것으로 나타났습니다.

당연히 수치는 모바일에서 더 나쁩니다. 더 작은 화면과 물리적 키보드의 부족으로 인해 입력이 느려질 수 있습니다. 모바일에서의 이탈률은 84% 이상일 수 있습니다! 최근 몇 년 동안 모바일 브라우징이 증가하고 증가함에 따라 전반적인 문제가 점점 더 악화되고 있음을 의미합니다. 전자 상거래 사이트의 경우 이러한 버려진 카트는 막대한 비용을 초래합니다. 비즈니스 인사이더(Business Insider)는 1년에 4조 달러 가치의 상품이 버려질 것으로 추정했습니다.

고맙게도 웹은 이 문제에 맞서 싸우고 있습니다. "웹 결제" W3C 워킹 그룹은 온라인 결제를 훨씬 쉽게 만드는 데 도움이 되는 새로운 표준을 개발 하면서 "웹 결제의 혁명" 을 위해 바쁘게 일하고 있습니다. "웹 결제"는 작업 그룹의 이름일 뿐만 아니라 본질적으로 이러한 새로운 최신 표준을 포괄하는 포괄적인 용어입니다.

결제 요청 API

이러한 표준 중 첫 번째인 Payment Request API 는 한 걸음 더 나아간 것입니다. 사용자에게 지불을 요청하고 브라우저가 이를 수락할 수 있는 사용자 인터페이스를 제공할 수 있는 기능을 제공합니다. 이미 크롬, 엣지, 삼성 인터넷에서 지원하고 있으며, 파이어폭스와 사파리에서 개발 중이다. New York Times, Washington Post, Monzo를 비롯한 많은 유명 기업에서 API를 채택하고 있습니다.

브라우저에서 이 정보를 요청하면 이러한 세부 정보가 이미 저장되어 있을 수 있으므로 즉시 주요 이점을 제공합니다. API를 사용하는 다른 웹사이트에 세부 정보를 입력하고 브라우저에서 이를 기억할 수만 있다면 브라우저에서 양식을 미리 채울 수 있으므로 훨씬 빠르게 확인할 수 있습니다.

이것은 표준 자동 완성보다 낫습니다. 브라우저가 입력 필드를 처리할 수 있도록 하면 입력 필드가 완전히 정확할 수 있으므로 잘못된 필드에 잘못된 정보를 미리 채우는 문제를 방지할 수 있습니다. 또한 자체 HTML 및 CSS를 작성할 필요 없이 모바일에 최적화된 단일 페이지 체크아웃 양식이 있음을 의미합니다.

이점은 모바일에서 더 느낄 수 있지만 결제 요청 API는 모바일 브라우저에 국한되지 않습니다. Chrome, Edge 및 DeX용 Samsung Internet의 데스크톱 버전에서 이미 지원됩니다. 데스크톱 Firefox 및 Safari에서도 나중에 지원이 제공될 것으로 예상할 수 있습니다(작성 ​​당시, 최근 Safari Technology Preview 44에서 기본적으로 활성화됨).

첫 번째 지불 요청

기본 예제를 통해 API 탐색을 시작해 보겠습니다. 우리는 사용자에게 카드 결제를 요청하고 다음과 같이 체크아웃할 수 있도록 할 것입니다.

위의 비디오에서 사용자가 지문으로 결제를 확인하는 것을 알 수 있습니다. 이것은 지불 요청 표준 자체의 일부가 아니라 지원되는 장치에서 삼성 인터넷 브라우저가 제공하는 보안 기능(홍채 스캔과 함께)입니다.

웹에서 생체 인증을 통합할 수 있는 추가 가능성에 관심이 있는 경우 곧 출시될 웹 인증 표준을 주시하는 것이 좋습니다.

먼저 평소와 같이 Progressive Enhancement를 채택하고 이 브라우저가 API를 지원하는지 확인해야 합니다.

 if (window.PaymentRequest) { // We can continue with the Payment Request API } else { // Here we could fall back to a legacy checkout form }

이제 우리가 수락할 지불 유형과 구매에 대해 표시할 세부 정보인 PaymentRequest에 대한 구성을 설정할 수 있습니다.

 var methodData = [{ // 'basic-card' means standard card payments - credit and debit cards supportedMethods: 'basic-card' }]; var details = { // If we are buying multiple items, each one can be included displayItems: [ { label: 'Some product that we are buying', amount: {currency: 'USD', value: '699.99'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '699.99'} } }; var paymentRequest = new PaymentRequest(methodData, details);

결제 UI를 표시하려면(예: 사용자가 "지금 구매"를 클릭할 때) show() 를 호출할 수 있습니다. 그런 다음 약속이 해결될 때 사용자가 제공한 데이터를 처리합니다.

 // show() makes it actually display the user interface paymentRequest.show() .then(function(paymentResponse) { // User has confirmed. paymentResponse contains the data entered. // Here we would process it server-side... processPaymentDetails(paymentResponse) .then(function(paymentResponse) { // ...Then when processed successfully, this will make the dialog indicate success & then close: paymentResponse.complete('success'); // We could also update the page here appropriately }); }) .catch(function(error) { // Handle error, eg if user clicks the 'cancel' button. });

이제 프런트 엔드에 UI 흐름이 설정되었습니다. 요구 사항에 맞게 추가로 구성할 수도 있습니다. 예를 들어 고객에게 추가 세부 정보를 요청하려는 경우 추가 options 을 PaymentRequest 생성자에 전달할 수 있습니다. 예를 들어, 사용자의 이름, 이메일 주소, 전화번호 및 배송 주소를 요청하려면:

 var options = { requestPayerName: true, requestPayerEmail: true, requestPayerPhone: true, requestShipping: true }; var paymentRequest = new PaymentRequest(methodData, details, options);

또한 여러 배송 옵션을 정의하고 고객 주소를 기반으로 동적으로 표시되는 옵션을 제어할 수도 있습니다. Glitch에서 이에 대한 예를 찾을 수 있습니다.

사용자 경험

지불 요청이 회사에 가져올 수 있는 이점에 대한 몇 가지 인상적인 통계를 보기 시작했습니다. Google은 최근 패션 브랜드인 J.Crew가 사용자의 50%가 지불 요청 절차를 거치고 거래 시간이 75% 단축된다는 사실을 발견했다고 공유했습니다!

지불 요청을 쇼핑 경험에 통합하는 방법은 귀하에게 달려 있지만 일반적인 방법은 고객이 먼저 로그인할 필요 없이 "빠른 결제" 또는 "지금 구매" 옵션을 제공하는 것입니다. 원하는 경우 결제 요청 UI를 사용하여 사용자의 연락처 세부 정보를 수집할 수 있으며 사용자가 구매를 완료하면 나중에 사용할 수 있도록 계정을 만들 수 있는 기회를 제공할 수 있습니다.

원하는 경우 결제 요청 UI를 제시하기 전에 고객이 이미 유효한 결제 수단을 설정했는지 먼저 확인할 수 있습니다. 이렇게 하려면 canMakePayment 를 호출할 수 있습니다.

 if (paymentRequest.canMakePayment) { paymentRequest.canMakePayment().then(function(result) { if (result) { // User has an active payment method } else { // No active payment method yet (but they could add one) } }).catch(function(error) { // Unable to determine }); }

백엔드 통합

지불을 받기 위한 사용자 인터페이스를 설정하는 방법을 살펴보았지만 실제로 백엔드에서 지불을 처리하는 방법은 무엇입니까?

대부분의 웹사이트는 지불 자체를 처리하지 않고(많은 주의와 PCI DSS 준수가 필요한 것) 제3자 지불 게이트웨이(PG) 또는 지불 서비스 제공업체(PSP)를 사용합니다. 많은 지불 게이트웨이가 이미 지불 요청 API에 대한 특정 지원을 도입했습니다. 그들은 귀하가 귀하의 페이지에 포함시킨 자체 스크립트를 통해 지불 요청을 시작할 수 있으므로 데이터가 안전하게 전송되고 귀하가 직접 처리할 필요가 없습니다. 또한 iFrame 또는 리디렉션 솔루션을 제공할 수도 있습니다. 진행하는 가장 좋은 방법은 지불 요청 통합을 권장하는 방법을 지불 게이트웨이에 확인하는 것입니다.

결제 앱 통합

지금까지 카드결제에 대해 알아보았습니다. 그러나 Payment Request API는 Samsung Pay, Pay with Google(Android Pay 통합) 및 Apple Pay와 같은 모바일 결제 앱도 지원합니다.

고객이 이러한 앱 중 하나로 결제할 수 있도록 하면 브라우저에 세부 정보를 처음으로 다시 입력할 필요 없이 앱에 저장한 카드를 사용할 수 있습니다. 또한 이러한 앱을 사용하면 고객이 카드 뒷면에서 CVC(Card Verification Code, CVV라고도 함)를 다시 입력할 필요가 없기 때문에 더 빠를 수 있습니다. 마지막으로, 원본 카드 세부 정보를 전송하지 않고 일회용 토큰만 전송하므로 잠재적인 가로채기 및 재생 공격으로부터 우리를 보호하기 때문에 추가적인 보안 이점을 가져올 수 있습니다.

고객이 선택한 결제 수단으로 결제 앱을 선택하면 브라우저가 앱에서 제공하는 결제 시트로 전환하여 결제를 확인합니다. 그러면 타사 앱은 일반적으로 장치가 지원하는 경우 결제를 확인하기 위해 고객의 지문 또는 홍채 스캔을 수락합니다.

각 결제 앱에는 고유한 지침이 있지만 일반적인 아이디어는 동일합니다. 고유한 특수 URL을 사용하여 잠재적인 결제 수단으로 식별하고 data 필드에 필요한 구성을 전달할 수 있습니다. 예를 들어 Samsung Pay를 지원하려면 methodData 배열에 다음과 같은 코드를 포함해야 합니다.

 var methodData = [ { supportedMethods: 'https://spay.samsung.com', data: { // Samsung Pay specific data here } }, … // Other payment methods ];

일반적으로 이러한 앱을 결제 게이트웨이와 통합하는 데는 "게이트웨이 토큰" 방법과 "네트워크 토큰" 방법의 두 가지 방법이 있습니다. 이를 지원하는 타사 서비스를 사용하는 경우 결제 앱 서비스가 사용자를 대신하여 결제 게이트웨이를 호출하는 게이트웨이 토큰 모드를 사용할 가능성이 큽니다. 또는 SDK를 사용하여 안전하게 지불 게이트웨이로 토큰을 보내는 것을 처리하는 네트워크 토큰 방법을 사용할 수 있습니다. 결제 게이트웨이 및/또는 결제 앱 제공업체에서 추가 세부정보를 제공할 수 있어야 합니다.

Google은 최근 Android Pay와 고객의 Google 계정에 저장된 카드를 통합하는 Google Payment API를 발표했습니다.

Apple Pay는 현재 자체 JavaScript 솔루션인 Apple Pay JS를 사용합니다. 그러나 Google의 개발자는 표준 지불 요청 API를 통해 사용할 수 있는 래퍼를 만들었습니다.

무엇 향후 계획?

Web Payments Working Group은 지불 요청 API에서 멈추지 않습니다. 웹 애플리케이션이 타사 결제 앱으로 작동할 수 있도록 하는 결제 처리기 API를 비롯한 다른 표준에 대한 작업도 진행 중입니다. 논의 중인 다른 주제에는 토큰화에 대한 가능한 표준화 및 기프트 카드와 같은 것을 지원하는 지불 요청 기능이 포함됩니다. 진행 상황을 확인하고 싶다면 공개 메일링 리스트가 있습니다. 우리가 함께 과거의 답답한 결제 경험을 해결하고 웹 결제 혁명의 비전을 달성할 수 있기를 바랍니다!

추가 리소스

• "W3C의 웹 결제 위키," GitHub
• "W3C의 결제 요청 API 개발자 정보" GitHub, FAQ도 참조
• "웹 결제 101: 짧은 결제 요청 코딩 튜토리얼", Glitch
• Google Developers, "Payment Request API 자세히 알아보기"
• "결제 요청 API 개발 가이드", Microsoft Edge
• "웹 결제를 사용하여 웹 사이트에서 Samsung Pay를 수락하는 방법", Winston Chen, Medium