맞춤형 결제를 통한 구매 버튼 활성화

중요한 이유

최근 특정 지역 내 Apple 정책의 업데이트에 따라, 이제 개발자는 사용자가 앱에서 외부 웹 사이트로 이동하여 가상 아이템을 결제하도록 유도할 수 있습니다.

Apple의 규정 위반이나 단속 위험 없이 클릭 한 번으로 사용자를 게임에서 안전 브라우저 기반의 체크아웃(웹샵 솔루션 또는 결제 UI)으로 바로 이동시켜 아이템을 구매할 수 있게 돕는 버튼, 배너, 메시지 및 기타 콜 투 액션을 추가할 수 있습니다.

나만의 맞춤형 결제 UI를 만들고 특별한 사용자 경험을 제공하려는 경우 헤드리스 체크아웃으로 직접 판매를 연동하는 것이 이상적입니다. 이 연동 옵션을 사용하면 사용자에게 게임에서 브라우저로 원활하게 이동하여 Apply Pay를 통한 원클릭 결제를 비롯한 다양한 결제 수단을 이용하는 익숙한 모바일 결제 경험을 제공할 수 있습니다.

헤드리스 체크아웃은 헤드리스 애플리케이션 아키텍처를 기반으로 하는 결제 승인 솔루션으로, API를 통해 기능에 액세스할 수 있습니다. 이 접근 방식은 백엔드와 비즈니스 로직을 UI에서 분리합니다.

iOS 게임 애플리케이션에 헤드리스 결제를 사용하는 방법:

1. 자신의 스토어를 생성합니다.
2. 스토어에 헤드리스 결제를 통합합니다.
3. 게임에서 사용자를 스토어로 안내하는 링크를 추가합니다.

가장 빠른 로우코드 연동 옵션을 찾는다면 웹샵 기반 연동을 확인해 보세요.

엑솔라 웹 사이트 빌더로 구축되지 않은 사용자 정의 웹 스토어를 사용하고 있으며 게임에 이미 만들어진 결제 UI를 연동하려면 엑솔라 모바일 SDK를 통해 연동을 확인해 주세요.

작동 방식

사용자 절차:

1. 사용자가 iOS에서 게임 애플리케이션을 엽니다.
2. 사용자가 원하는 아이템 바로 옆에 있는 구매 버튼을 클릭합니다.
3. 웹 브라우저에서 스토어가 열립니다. 원활한 사용자 환경을 보장하려면 엔드투엔드 인증을 구현하세요.
4. 사용자가 스토어를 떠나지 않고 아이템을 선택하고 구매를 진행합니다.
5. 거래가 성공한 후 사용자는 게임 애플리케이션으로 리디렉션됩니다.
6. 애플리케이션은 웹훅을 통해 구매 확인을 받습니다.

통합 절차

1. 관리자 페이지에서 프로젝트 생성 및 엑솔라와 라이선스 계약 체결.
2. 카탈로드 생성.
3. 백엔드 상호작용 구현: 토큰 생성 및 웹훅 설정.
4. SDK 설치.
5. 애플리케이션 측에서 SDK 통합.
6. 헤드리스 결제가 통합된 스토어로 사용자를 안내하는 링크를 게임에 추가하세요.

프로젝트 생성 및 라이선스 계약 체결

관리자 페이지는 엑솔라 기능을 구성하고 분석과 트랜잭션 작업에 사용하는 기본 도구입니다.

가입하려면 관리자 페이지로 이동하여 계정을 생성합니다. 프로젝트를 만들려면 사이드 메뉴에서 프로젝트 생성을 클릭하고 필요한 정보를 입력합니다. 설정은 나중에 수정할 수 있습니다.

라이선스 계약에 서명하려면 계약 및 세금 > 계약 섹션으로 이동하여 계약 양식을 작성합니다.

품목 카탈로그 생성

인앱 구매(IAP) 제품은 엑솔라 생태계에서 가상 아이템을 통해 표시됩니다. 가상 아이템에는 이름, 설명, SKU, 가격이 있습니다. IAP SKU 제품 카탈로그를 설정하려면 다음과 같이 하세요:

1. JSON 파일 업로드를 클릭하면 관리자 페이지에 카탈로그를 빠르게 추가할 수 있습니다.
2. 가상 아이템 및 인게임 재화 > 관리자 문서 섹션에서 API 호출을 사용하여 아이템 카탈로그를 생성합니다.

백엔드 상호 작용 구현

토큰 생성

웹훅 구성

웹훅 활성화 방법:

1. 관리자 페이지의 프로젝트에서 프로젝트 설정 > 웹훅 솔루션 섹션으로 이동합니다.
2. 웹훅 서버 필드에서 https://example.com 형식으로 웹훅을 수신할 서버 URL을 지정합니다. 웹훅 테스트용 도구에서 찾은 URL을 지정할 수도 있습니다.
3. 프로젝트 웹훅에 서명하기 위한 비밀 키가 기본적으로 생성됩니다. 새 비밀 키를 생성하려면 새로 고침 아이콘을 클릭합니다.
4. 웹훅 사용을 클릭합니다.

인게임 스토어 및 결제 관리를 제대로 운영하려면 메인 웹훅 처리를 구현해야 합니다.

SDK 설치

1. 다음 명령을 실행하여 SDK를 npm 패키지로 설치합니다:

1npm install --save @xsolla/pay-station-sdk

2. 환경 매개 변수를 전달하여 SDK를 초기화합니다:

1import { headlessCheckout } from '@xsolla/pay-station-sdk';
2
3await headlessCheckout.init({
4  sandbox: true,
5});

3. 초기화된 SDK에 대한 결제 토큰을 전달합니다:

1await headlessCheckout.setToken(accessToken);

SDK를 애플리케이션 측에 통합

SDK 설치 및 초기화 후:

1. 결제 방법 ID를 지정하여 결제 UI를 초기화합니다. headlessCheckout.form.init 메서드는 결제 UI와의 추가 상호 작용에 사용되는 개체를 반환합니다.

1await headlessCheckout.form.init({
2  paymentMethodId: 3175, // Apple Pay payment ID
3});

2. 추가 필드 표시를 위한 show_fields 이벤트의 처리를 추가합니다.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'show_fields':
4      this.handleShowFieldsAction(nextAction);
5  }
6});

3. 결제 UI의 HTML 마크업에 다음 구성 요소 추가:
   • 필수 구성 요소:
     • psdk-legal - 법률 문서에 대한 정보 표시.
     • psdk-total - 총 구매 금액 표시.
   • 결제 양식 구성 요소. 기본 제공 psdk-payment-form 구성 요소를 사용하거나 사용 준비 구성 요소를 사용하여 결제 UI 요소를 수동으로 생성할 수 있습니다.
   • 결제 버튼 구성 요소 - psdk-apple-pay. 이미 psdk-apple-pay를 포함하고 있는 psdk-submit-button 구성 요소도 사용할 수 있습니다.

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<psdk-apple-pay text="Apple Pay"></psdk-apple-pay>

4. 결제 상태 변경에 대한 check_status 이벤트 처리를 추가합니다.

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

5. 결제 UI의 HTML 마크업에 psdk-status 구성 요소를 추가하여 결제 상태를 표시합니다.

1@if (showStatus) {
2  <psdk-status></psdk-status>
3}

iOS 스토어프론트를 감지하는 방법

현재 iOS 스토어프론트를 판별하고 지역에 따라 SDK 기능을 조정하려면 다음 코드 스니펫을 사용하세요.

1[SKPaymentQueue loadCurrentStorefrontCountryCodeWithCompletion:^(NSString* _Nullable countryCode) {
2    settings.enablePayments = countryCode && [countryCode isEqualToString:@"USA"];
3
4    [[SKPaymentQueue defaultQueue] startWithSettings:settings];
5}];

1SKPaymentQueue.loadCurrentStorefrontCountryCode { countryCode in
2    settings.enablePayments = countryCode == "USA"
3
4    SKPaymentQueue.default().start(settings)
5}

loadCurrentStorefrontCountryCode 메서드는 현재 스토어프론트의 세 글자 국가 코드를 비동기적으로 검색합니다. 이 정보를 사용하여 특정 지역에 대한 SDK 기능을 활성화하거나 비활성화할 수 있습니다.

또는 아래에 제시되어 있는 바와 같이 Apple의 기본 스토어front를 직접 사용할 수도 있습니다:

1let storefront = await Storefront.current   
2let countryCode = storefront?.countryCode
3
4settings.enablePayments = countryCode == "USA"
5
6SKPaymentQueue.default().start(settings)

Apply Pay를 통한 원클릭 결제

원클릭 결제를 통해 사용자는 지원되는 장치에서 친숙하고 안전한 기본 결제 수단인 Apple Pay로 결제할 수 있습니다. 원클릭 결제를 구성하는 방법:

1. 이 옵션을 사용하도록 설정하려면 요청을 생성합니다. 이렇게 하려면 다음과 같이 진행하십시오:

   a. 관리자 페이지에서 프로젝트를 열고 지원 허브 섹션으로 이동합니다.

   b. 요청 제출을 클릭합니다.

   

   c. 창이 열리면 입력란을 기입합니다:

   • 요약. 예를 들어, Apple Pay 원클릭 결제 설정.
   • 설명. 결제 UI를 여는 데 사용되는 도메인(예: amazing.Store.com)을 지정합니다.
   • 프로젝트 ID. 드롭다운 목록에서 프로젝트 ID를 선택합니다. 여러 프로젝트에 대해 일회성 결제 옵션을 구성하려면 설명 필드에 해당 프로젝트의 ID를 지정하십시오.

   d. 전송을 클릭합니다.

2. 도메인 연결 파일을 기다립니다. 이 단계는 엑솔라에서 수행합니다:
   1. 엑솔라가 도메인을 Apple에 등록합니다.
   2. 엑솔라가 Apple로부터 도메인 연결 파일을 수신합니다.
   3. 엑솔라는 도메인 연결 파일을 이메일로 전송하고 업로드 위치에 대한 지침을 제공합니다.

3. 아래에 제시되어 있는 바와 같이 SDK 초기화 스크립트를 업데이트합니다.

1const config: InitialOptions = {
2  isWebview: false,
3  theme: 'default',
4  language: parameters.language,
5  topLevelDomain: 'amazing.store.com',
6  isApplePayInstantFlowEnabled: true
7};
8
9await initHeadlessCheckoutLib(config);