Apple Pay 및 주문 관리 구현하기

안녕하세요 제 이름은 Katie입니다 Apple Pay 및 주문 추적 구현하기 세션을 시작하겠습니다 오늘 이야기할 주제를 살펴보겠습니다 먼저 Apple Pay를 시작하는 데 필요한 기본 사항을 안내하겠습니다 그런 다음 결제 요청을 생성하고 결제 시트의 변경 사항에 대응하는 법을 알려드리겠습니다 사용자가 주문을 추적하도록 결제 흐름의 마지막에 주문 세부 정보를 추가할 수도 있습니다 주문 세부 정보를 사용하면 지갑에서 주문한 패키지를 검색할 수 있게 빌드하는 방법을 보여 드리겠습니다 마지막으로 주문 업데이트 방법을 알려드리겠습니다 그럼 시작하겠습니다 Apple Pay는 간편하고, 안전하고, 안심되는 결제 방법입니다. 웹 사이트나 앱의 개발자라면 Apple Pay를 사용하여 전환율 및 사용자 경험을 개선할 수 있습니다 시작하려면 두 가지 필수 항목을 생성해야 합니다 첫 번째는 결제를 승인할 수 있는 가맹점임을 고유하게 식별하는 식별자입니다 생성하려면 Apple Developer 포털의 Identifier 섹션으로 이동해야 합니다 일반적인 형식은 ‘merchant’라는 단어로 시작하는 역방향 DNS입니다 새 가맹점 식별자를 사용하여 결제 처리 인증서를 생성하세요 간단히 말해 Apple Pay는 등록된 가맹점 식별자와 공개 인증서로 각 페이로드를 암호화합니다 그러면 개발자 측에서 이 페이로드를 해독하고 처리할 수 있습니다 그런 다음 결제의 성공 또는 실패를 반환할 수 있습니다 결제 처리에 대한 자세한 내용은 결제 서비스 제공업체에 문의하세요 앱과 웹 사이트 간에 Apple Pay를 설정하기 위한 여러 단계가 있습니다 앱에서 사용하기 위해 Apple Pay를 설정하려면 Xcode의 Signing & Capabilities 탭으로 이동하여 Apple Pay 기능 아래에 가맹점 식별자를 추가하면 됩니다 제작 중인 웹 사이트에 Apple Pay를 설정하려는 경우 몇 가지 추가 단계가 필요합니다 Apple Pay 거래를 처리할 도메인을 등록해야 하는데 이 작업은 Apple Developer 포털의 Identifier 섹션에서 완료할 수 있습니다 여기에서 이전에 만든 가맹점 식별자에 연결된 Apple Pay 가맹점 신원 인증서를 생성할 수 있습니다 이 인증서는 Apple Pay 서버에 대한 세션을 인증하는 데 사용됩니다 결제 통합 대상이 앱이든 웹이든 전자 상거래 플랫폼이나 결제 서비스 제공업체와 협력한다면 일부 단계를 간소화할 수 있으므로 해당 업체의 구체적인 지침을 확인하세요 이제 Apple Pay를 실제로 구현하는 방법을 살펴보겠습니다 Apple Pay 관련 콘텐츠를 표시하기 전에 사용자가 현재 구성으로 결제할 수 있는지 확인해야 합니다 capabilities는 3D Secure나 신용 또는 체크 카드 등 시트에서 현재 가능한 결제 유형을 나타냅니다 나중에 결제 요청을 구성할 때 가능한 capabilities를 지정합니다 현재 사용할 수 있는 카드가 없어도 사용자가 카드를 더 추가할 수 있음을 염두에 두고 사용자에게 이미 제공된 결제 네트워크를 확인할 수 있습니다 사용자가 결제할 수 있음을 파악했으므로 이제 Apple Pay 버튼을 표시할 순서입니다 사용자가 취해야 할 조치에 따라 최상의 콜투액션과 버튼 유형을 선택해야 합니다 Apple Pay 버튼을 스크롤하지 않고도 보이는 위치에 첫 번째 결제 옵션으로 눈에 잘 띄게 표시합니다 Apple Pay 버튼은 완전하게 현지화되었으며 사용자 설정에 맞게 적용할 수도 있습니다 UIKit을 사용하여 앱에 Apple Pay 버튼을 표시하려면 먼저 버튼의 유형과 스타일을 지정하는 PKPaymentButton을 생성하세요 type은 결제 유형입니다 ‘Apple Pay로 기부’ 또는 ‘Apple Pay로 계속’ 등을 사용할 수 있습니다 style을 제어하여 버튼을 밝은 색상 또는 어두운 색상으로 표시할 수 있습니다 버튼에 automatic 스타일을 사용하면 사용자 설정에 따라 동적으로 변경됩니다 웹에서는 JavaScript Apple Pay 버튼을 사용하세요 버튼을 추가하려면 먼저 콘텐츠 전송 네트워크의 웹 페이지에 버튼 스크립트를 로드합니다 JavaScript Apple Pay 버튼을 사용하면 유형, 스타일, 현지화를 지정할 수도 있습니다 또한 CSS를 사용하여 버튼의 크기를 추가로 맞춤화할 수 있습니다 예상되는 상황을 결제 시트에 알리기 위해 결제 요청을 생성해야 합니다 이를 위해 앱에서는 PKPaymentRequest를 생성합니다 필요에 따라 요청에 설정할 수 있는 많은 필드가 있지만 필수 필드로는 앞서 생성한 가맹점 식별자 사용 가능한 결제 유형 결제 국가 및 통화 코드가 있습니다 결제를 승인하는 결제 네트워크를 지정합니다 이때 선호하는 순서대로 지정해야 Apple Pay에서 공동 처리되는 카드의 선호 네트워크를 선택할 수 있습니다 마지막으로 요약 항목이 이 거래의 일부로 포함됩니다 요약 항목을 자세히 살펴보겠습니다 온라인 애완용품 쇼핑몰을 운영하면서 고객에게 Apple Pay로 주문을 결제하는 기능을 제공하려고 한다고 가정하겠습니다 이 요약 항목은 고객이 선택한 항목의 총 비용에서 할인을 뺀 값으로 구성되며 비용을 나누는 데 고객에게 도움이 되어야 합니다 마지막 요약 항목은 항상 합계이며 이 합계 레이블은 결제를 받는 회사가 되어야 합니다 여기 배열에 하나 이상의 항목 세트가 있어야 합니다 이제 결제 시트를 표시할 준비가 되었습니다 먼저 PKPayment AuthorizationViewController를 생성하여 조금 전에 설정한 요청을 보냅니다 반환되는 viewController를 제시할 책임은 개발자에게 있습니다 이번에는 여기에 설정하는 delegate를 살펴보겠습니다 PKPaymentAuthorization ViewControllerDelegate는 사용자가 새 이메일 주소를 선택하거나 거래를 승인할 때와 같이 시트에서 변경 사항을 전달하는 방법입니다 개발자는 적합한 변경 사항에 대응해야 합니다 그러나 결제 시트를 닫는 것은 항상 개발자의 책임이며 이를 처리하려면 paymentAuthorizationViewControll erDidFinish를 구현해야 합니다 문제를 해결하는 데 도움이 되는 유용한 설명과 함께 최대한 빨리 사용자에게 오류를 반환해야 합니다 예를 들어 사용자의 새 배송 주소에 문제가 있는 경우 PKPaymentRequest ShippingContactUpdate의 일부로 오류를 반환해야 합니다 didAuthorizePayment는 사용자가 세부 정보에 만족하고 Face ID, Touch ID 또는 암호를 사용하여 거래를 진행할 때 호출됩니다 개발자에게 전송된 PKPayment를 직접 처리하거나 결제 프로세서에 전달하여 처리해야 합니다 적절한 결과로 처리기를 호출해야 합니다 iOS 16에서는 SwiftUI에서 Apple Pay 버튼을 쉽게 생성하는 기능이 도입되었습니다 Apple Pay로 결제하기 버튼을 생성할 때 결제 요청을 전달하기만 하면 사용자가 버튼과 상호 작용할 때 결제 시트가 자동으로 표시됩니다 또한 버튼 유형과 선택적으로 스타일을 설정할 수 있습니다 결제 승인 변경은 이전 슬라이드에서 살펴본 delegate와 유사합니다 사용자 업데이트에 대응하는 방법을 살펴보겠습니다 사용자가 방금 결제를 승인했으며 결제 승인 단계 변경이 앱에 이 사실을 알리고 앱에서 결제 정보를 서버로 보내고 결제 처리를 요청합니다 서버 결과가 성공을 나타내는지 확인하고 서버에서 반환된 오류를 처리하여 계속 적절한 오류와 함께 결과 처리기를 호출하는지 확인합니다 서버 결과가 성공으로 표시되면 적절한 승인 결과로 결제를 완료합니다 반환하는 결과에는 결제 처리를 시도할 때 발생한 내용이 포함되어야 합니다 우편 주소가 유효하지 않은 경우가 예입니다 대부분의 경우 결제 결과는 성공 아니면 실패입니다 결제에 실패한 경우 중요도 순서로 정렬된 하나 이상의 오류를 반환할 수도 있습니다 이는 사용자가 다시 거래를 시도할 수 있도록 사용자에게 표시됩니다 이 승인 결과는 선택적으로 주문 세부 정보를 포함할 수 있으며 이에 대해 곧 살펴보겠습니다 이제 웹에서 이를 수행하는 방법을 살펴보겠습니다 W3C 결제 요청 API는 웹에서의 결제 처리를 지원하는 개방형 표준입니다 PaymentRequest 대상체를 생성한 후 Apple Pay를 사용할 수 있음을 명시하는 methods 총액 및 배송 방법 등 거래 관련 정보가 포함된 details 사용자가 제공해야 하는 정보를 지정하는 options로 채울 수 있습니다 서버에서 가맹점 확인을 완료해야 하므로 새 가맹점 세션을 생성하여 complete 함수에 전달합니다 네이티브와 마찬가지로 결제 시트에서의 사용자 동작에 대응할 수 있으며 사용자 인증 시 결제 응답도 처리해야 합니다 Apple Pay와 통합을 완료했으므로 이제 실제로 주문을 빌드할 수 있습니다 iOS 16에서는 주문 추적이 도입되었습니다 이제 고객이 지갑 앱 내에서 주문 세부 정보 및 추적 정보를 볼 수 있습니다 고객은 언제 주문을 픽업할 수 있는지 주문이 배송되었는지 문제가 있는지 알림을 받았는지 즉시 알 수 있습니다 애완용품 사업에 Apple Pay를 성공적으로 통합했으므로 이제 주문 추적을 추가할 차례입니다 방법을 알아보겠습니다 주문을 시작하는 방법은 Apple Pay 설정과 유사하다는 것을 알 수 있습니다 Developer 포털의 Identifier 섹션으로 다시 이동하여 주문 유형 식별자를 생성합니다 이 식별자는 해당 조직을 주문 정보를 제공하는 기관으로 식별합니다 가맹점 식별자와 마찬가지로 이번에는 ‘order’라는 단어를 앞에 추가하는 유사한 역방향 DNS 스타일 이름 지정 체계를 사용하는 것이 좋습니다 다음으로 Developer 포털의 Certificate 섹션에서 주문 유형 ID 인증서를 생성합니다 인증서를 사용하여 주문 패키지를 빌드하고 주문을 업데이트하고 알림을 보냅니다 설정이 완료되었으므로 이제 Apple Pay 구입 흐름 내에서 바로 지갑에 주문을 추가할 수 있습니다 이를 위해 앞서 살펴본 간단한 결제 처리 흐름을 다시 살펴보겠습니다 처리를 위해 개발자 서버에 결제 정보가 전송되었다는 것까지 살펴보았습니다 결제가 성공적으로 처리되면 서버에서 주문을 생성해야 합니다 반환하는 결과에서 주문 추적을 지원하려면 생성한 주문에 대한 일부 세부 정보도 포함해야 합니다 이러한 주문 세부 정보를 통해 기기에서 서버로부터 주문을 비동기적으로 요청할 수 있습니다 그런 다음 서버에서 주문 패키지를 기기로 반환하면 지갑에 표시됩니다 PKPayment 승인 결과의 일부로 반환해야 하는 주문 세부 정보를 자세히 살펴보겠습니다 주문 세부 정보는 4개의 필드로 구성됩니다 주문 유형 식별자는 앞서 생성한 식별자입니다 주문을 식별하는 방법을 생성해야 하지만 주문 유형 식별자 범위 내에서 고유해야 합니다 웹 서비스의 URL을 포함합니다 마지막으로 서버에서 보안 인증 토큰을 생성해야 합니다 이는 사용자의 기기와 서버 간에 공유하는 비밀입니다 기기에서 주문 패키지를 요청할 때 이 토큰을 사용하여 자신을 인증합니다 처음에 이 예는 앞서 본 일반적인 결제 승인 흐름과 매우 유사합니다 여기에 주문 세부 정보를 추가해 보겠습니다 먼저 주문 세부 정보를 serverResult에서 가져온 다음 주문 유형 ID 주문 ID, 웹 서비스 URL 및 인증 토큰을 설정하여 PKPaymentOrderDetails 대상체를 생성합니다 이를 PKPayment 승인 결과에 할당하세요 웹의 경우에도 W3C 결제 요청 API를 사용하여 주문 세부 정보를 간단히 추가할 수 있습니다 앞서 한 것처럼 서버 결과에서 주문 세부 정보를 추출합니다 이 주문 세부 정보와 결제를 완료한 데이터를 반환합니다 주문 세부 정보가 기기로 반환되면 해당 세부 정보가 각 사용자의 기기에서 동기화됩니다 각 기기에서 서버로부터 주문 패키지를 요청하여 주문 세부 정보를 제공합니다 주문 세부 정보와 함께 전송한 인증 토큰과 일치시켜 인증 토큰을 확인합니다 인증 토큰이 일치하면 주문 패키지를 기기로 반환합니다 이제 주문이 해당 기기의 지갑에 표시될 준비가 되었습니다 기기에서 요청하는 즉시 사용할 수 있도록 최대한 빨리 주문 복구를 시도해야 합니다 서버에서 주문 반환에 실패하면 기기에서 지수 백오프를 사용하여 여러 번 재시도합니다 지금까지 이 주문 패키지가 여러 번 참조되는 것을 보았는데 정확히 무엇으로 구성되어 있을까요? 주문은 주문 패키지로 배포됩니다 주문 패키지에는 주문을 사용자에게 표시하고 가맹점의 주문임을 증명하는 데 필요한 모든 것이 포함되어 있습니다 주문 패키지에는 주문을 설명하는 JSON 사전 로고와 같은 이미지 주문의 각 항목에 대한 인라인 이미지가 포함되어 있습니다 이미지 생성에 대한 지침은 Human Interface Guidelines와 참고 자료를 참조하세요 문자열 파일과 같은 지역화된 리소스도 있습니다 총 주문 크기에 주의하여 관련된 항목만 포함하세요 이 모든 콘텐츠는 ‘manifest’라는 또 다른 JSON 사전에 설명되어 있습니다 이를 목차라고 생각할 수 있으며 주문 패키지의 모든 파일에 대한 참조가 포함됩니다 항목의 키는 상대 파일 경로이고 값은 구문 분석에 사용되는 것과 다른 체크섬인 파일의 SHA256 체크섬입니다 이제 해야 할 일은 패키지에 서명하여 진위를 증명하는 것입니다 서명은 주문 패키지의 출처를 신뢰할 수 있음을 확인합니다 구문 분석과 동일한 매니페스트의 분리된 암호화 메시지 서명입니다 주문 유형 ID 인증서와 연결된 개인 키 및 Apple Worldwide Developer Relations 중간 인증서로 매니페스트에 서명하여 갱신된 인증서 버전을 사용 중임을 확인합니다 주문 빌드를 완료하려면 패키지를 압축하고 파일 확장자를 order로 변경하기만 하면 됩니다 이제 주문을 업데이트할 차례입니다 주문 정보는 시간이 지나면서 변경되는 경우가 많습니다 예를 들어 고객이 이전에 주문한 애완용품을 현재 진행 중입니다 자동 업데이트를 지원하면 이 업데이트를 고객에게 빠르고 안전하게 전달할 수 있습니다 이제 고객이 지갑에서 애완용품 주문을 볼 수 있으며 업데이트에 대한 지원이 주문에 표시되므로 기기가 웹 서비스에 등록됩니다 나중에 고객의 주문 배송이 시작되면 서버에서 등록 정보를 사용하여 등록된 모든 기기에 알립니다 고객의 기기에서 푸시 알림을 받으면 서버로부터 주문을 요청합니다 그런 다음 서버에서 업데이트된 주문 패키지를 기기로 반환합니다 기본 주문 흐름이 어떻게 작동하는지 알았으므로 이제 주문 업데이트를 지원하기 위해 수행해야 하는 정확한 단계를 나눠서 살펴보겠습니다 먼저 주문에 대한 업데이트를 지원한다고 표시합니다 업데이트를 지원하는 주문이라고 지갑에 알리는 것은 매우 쉽습니다 주문 패키지에 두 가지 정보만 포함하면 됩니다 order.json에서 원하는 webServiceURL을 추가합니다 주문 세부 정보에서 제공한 동일한 주소입니다 그리고 authenticationToken 필드를 추가합니다 이 필드는 지갑에서 주문 업데이트를 요청할 때 진위를 증명하는 데 사용합니다 기기에서 등록에 추가하거나 제거하도록 요청하는 시기를 관리해야 합니다 서버에서 등록 정보의 추가 또는 제거를 처리할 수 있어야 하며 주문 업데이트에 등록된 기기를 찾을 수 있어야 합니다 이렇게 하면 주문을 업데이트할 때 서버에서 해당 기기에 알릴 수 있습니다 또한 서버는 해당 기기와 관련된 업데이트된 주문을 서버가 알 수 있도록 기기에서 등록한 주문을 찾을 수 있어야 합니다 이 정보는 여러 가지 방법으로 구성할 수 있습니다 한 가지 방법은 두 개의 엔터티 즉, 기기용 엔터티 및 주문용 엔터티와 등록을 위한 다대다 관계를 갖춘 관계형 데이터베이스를 사용하는 것입니다 주문이 업데이트되면 서버에서 등록된 기기에 알려야 합니다 따라서 서버는 저장된 등록 정보를 기반으로 관련 기기를 파악한 다음 푸시 토큰을 사용하여 각 기기에 푸시 알림을 보내야 합니다 주문 유형 ID는 푸시 주제의 두 배가 되며 페이로드는 비어 있어야 합니다 주문 유형 ID 인증서를 사용하여 APNs와 통신할 수 있습니다 알림에 대해 주의해야 할 또 다른 사항은 주문 패키지에서 enum 속성 changeNotifications를 설정하여 주문 알림을 전달하는 방법을 맞춤화할 수 있다는 것입니다 사용 가능한 옵션은 enabled로 항상 주문 업데이트 알림을 보내는 기본값입니다 지갑에서 알림이 중복되지 않도록 하려면 주문 패키지에 나열된 앱을 사용자가 설치한 경우 알림을 보내지 않도록 disableIfAppInstalled를 설정하세요 등록된 기기는 각각 서버에서 제공할 새 주문 패키지를 요청합니다 기기에서 푸시 알림을 수신하면 푸시 알림이 비어 있기 때문에 어떤 주문이 변경되었는지 아직 알 수 없습니다 서버와 함께 기기는 주문을 마지막으로 요청한 이후 변경된 주문을 파악합니다 서버에 저장된 등록 정보를 사용하여 관련 주문을 찾은 다음 해당 ID를 반환합니다 업데이트 시간을 추적하고 응답에 수정 태그를 포함하여 향후 요청에서 반환되는 주문 ID의 수를 제한하세요 예를 들어 타임스탬프를 사용할 수 있습니다 이 값은 기기에 대해 불투명합니다 기기에서 다음에 변경을 요청할 때 수정 태그를 제공합니다 마지막으로 기기에서 서버에 업데이트되었다고 표시된 각 주문에 대해 최신 패키지를 요청합니다 오늘 많은 내용을 다루었습니다 최상의 고객 경험을 제공하려면 다음 사례를 따르세요 Apple Pay를 구현할 때는 제품 또는 장바구니 페이지에 Apple Pay 버튼을 표시하여 신속 결제 기능을 제공합니다 사용자는 결제 시트에서 바로 배송 옵션과 주소를 선택한 후 아무 입력 없이 결제할 수 있습니다 주문 추적을 구현할 때는 고객 선호도에 대한 지식을 사용하여 적절한 현지화만 제공합니다 또한 주문 패키지 크기를 작게 유지하기 위해 포함하는 애셋 수에 유의합니다 주문이 업데이트되면 업데이트를 위해 등록한 기기에 즉시 통보됩니다 지갑의 주문은 주문의 실제 상태와 일치해야 합니다 주문 추적 및 Apple Pay 버튼 표시 방법에 대한 Human Interface Guidelines도 참고하세요 오늘은 주문 빌드 및 업데이트를 통해 Apple Pay를 구현하는 방법을 알아보았습니다 이 비디오는 Apple Pay 및 주문 추적 구현을 소개하기 위한 것이며 자세한 내용을 알아보려면 세션 노트에 링크된 문서를 반드시 확인해야 합니다 최신 WWDC 비디오도 참조하실 수 있습니다 오늘 시간 내주셔서 감사드리며 남은 하루도 즐겁게 보내시길 바랍니다