페이 스테이션을 PlayFab 인증과 함께 사용하는 방법

애플리케이션에서 PlayFab을 사용하여 사용자 인증을 이미 구현한 경우 PlayFab에서 결제 토큰을 생성한 다음 이를 애플리케이션의 클라이언트 측에 전달하여 결제 UI를 열 수 있습니다.

이 연동 옵션을 사용하는 경우 구매 시 비용을 지불하는 사용자의 국가 및 통화를 결정하는 로직을 독립적으로 구현해야 합니다.

연동 절차:

1. 프로젝트를 생성합니다.

1. 관리자 페이지에 등록한 후 새 프로젝트를 생성합니다. 이후 단계에서 생성하는 프로젝트의 ID가 필요합니다.

2. 카탈로그 설정 방법:
   • 엑솔라 측에서 아이템 카탈로그를 생성합니다. 아이템을 수동으로 추가하거나 Google Play 또는 PlayFab에서 가져올 수 있습니다.
   • SDK를 사용하여 애플리케이션의 클라이언트 측에서 카탈로그 가져오기 및 표시를 구현합니다.

3. 아이템 구매 설정 방법:
   • PlayFab 클라우드 스크립트를 사용하여 애플리케이션의 클라이언트 측에서 사용자 및 아이템 데이터로 주문을 생성합니다.
   • SDK를 사용하여 애플리케이션의 클라이언트 측에서 결제 UI 열기를 구현합니다.

4. 주문 상태 추적을 설정합니다.

프로젝트 생성

관리자 페이지에 등록하기

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

등록할 때 지정한 회사 및 애플리케이션에 대한 데이터는 엑솔라와의 라이선스 계약 초안을 생성하고 적합한 솔루션 추천을 생성하는 데 사용됩니다. 나중에 해당 데이터를 변경할 수 있지만 등록할 때 올바른 데이터를 제공하면 라이선스 계약 체결 프로세스가 빨라집니다.

등록하려면 관리자 페이지로 이동한 후 계정을 생성합니다.

관리자 페이지에서 프로젝트 생성

애플리케이션이 여러 개 있는 경우 각 애플리케이션에 대한 별도의 프로젝트를 생성하는 것이 좋습니다. 프로젝트 생성 시 지정한 데이터를 기반으로 엑솔라는 적합한 솔루션에 대한 권장 사항을 생성합니다.

새 프로젝트를 생성하는 방법:

1. 관리자 페이지를 엽니다.
2. 사이드 메뉴에서 새 프로젝트 만들기를 클릭합니다.

3. 프로젝트 이름을 영문으로 입력합니다(필수).

4. 게임을 출시하는 플랫폼을 하나 또는 여러 개 선택합니다(필수).
5. 게임 링크를 추가합니다. 게임에 아직 웹사이트가 없는 경우 게임에 대한 정보가 포함된 소스 링크를 추가합니다(필수).
6. 게임 엔진을 선택합니다.
7. 사용 중이거나 사용할 예정인 수익화 옵션을 선택합니다.
8. 게임이 이미 출시되었는지 여부를 지정합니다. 게임이 아직 출시되지 않은 경우 출시 예정일을 지정합니다.
9. 프로젝트 생성을 클릭합니다. 추천하는 엑솔라 제품이 있는 페이지가 표시됩니다.

연동을 처리하는 동안 프로젝트 이름 옆의 관리자 페이지에서 확인할 수 있는 프로젝트 ID를 제공해야 합니다.

카탈로그 설정하기

관리자 페이지에서 아이템 생성하기

카탈로그에 기본 설정이 있는 가상 아이템을 추가하는 방법:

1. 관리자 페이지에서 프로젝트를 엽니다.
2. 사이드 메뉴에서 스토어를 클릭합니다.
3. 가상 아이템 창에서 연결을 클릭합니다.
4. 드롭다운 메뉴에서 아이템 생성을 선택합니다.

5. 다음 필드에서 아이템의 기본 설정을 설정합니다.
   • 이미지(선택 사항)
   • SKU(아이템 고유 ID)
   • 아이템 이름
   • 설명(선택 사항)

6. 아이템 가격 지정:
   1. 실제 통화 가격 토글을 온으로 설정합니다.
   2. 기본 통화 필드에서 통화를 변경하고(선택 사항) 아이템 가격을 지정합니다.
   3. 기본 통화 필드에서 통화를 변경한 경우 실제 통화 가격 필드에서 동일한 통화를 선택합니다.

7. 아이템 상태를 사용 가능으로 변경합니다.

8. 아이템 생성을 클릭합니다.

SDK 설치 및 설정

1. Epic Games 런처를 다운로드합니다.
2. 새 언리얼 엔진 프로젝트를 생성합니다.

3. SDK 다운로드 및 설치:
   1. 언리얼 엔진 마켓플레이스에서 SDK를 다운로드하고 설치하는 방법:
      1. 언리얼 엔진 마켓플레이스의 SDK 페이지로 이동합니다.
      2. Open in Launcher를 클릭합니다.

1. 1. 3. Epic Games 런처로 이동합니다.

1. 1. 4. Install to Engine을 클릭합니다.
      5. 언리얼 에디터에서 언리얼 엔진 프로젝트를 엽니다.
      6. Settings > Plugins > Installed > Xsolla SDK 섹션으로 이동합니다. Enabled 확인란을 선택 표시하고 Restart Now를 클릭하여 설정을 저장하고 언리얼 에디터를 다시 로드합니다.

1. 2. GitHub에서 SDK를 다운로드하고 설치하는 방법:
      1. 엔진 버전에 맞는 SDK가 포함된 패키지를 다운로드합니다.
      2. 패키지의 압축을 해제합니다.
      3. SDK 폴더를 언리얼 엔진 프로젝트의 루트에 있는 plugins 디렉터리로 이동합니다.

4. Settings > Project Settings > Plugins > Xsolla Settings > General로 이동합니다.
5. Project ID 필드에서 프로젝트 이름 옆의 관리자 페이지에서 찾을 수 있는 프로젝트 ID를 지정합니다.

애플리케이션의 클라이언트 측에 카탈로그 표시하기

카탈로그 아이템용 클래스 생성

1. Content Browser에서 Content 디렉터리로 이동합니다.
2. 컨텍스트 메뉴를 호출하고 Blueprint Class를 선택합니다.

3. All Classes 섹션에서 Object를 선택하고 Select를 클릭합니다.

4. 클래스 이름으로 StoreItemData를 지정합니다.
5. 생성된 클래스의 청사진을 엽니다.
6. My Blueprint 패널에서 Add New를 클릭하고 Variable를 선택합니다.
7. Details 패널에서:

1. 1. Variable Type 필드에서 StoreItem을 지정합니다.
   2. Instance Editable 및 Expose on Spawn 확인란을 선택합니다.

8. 저장하고 StoreItemData 청사진을 닫습니다.

카탈로그 아이템용 위젯 생성

1. Content Browser에서 Content 디렉터리로 이동합니다. 컨텍스트 메뉴를 호출하고 User Interface > Widget Blueprint을 선택합니다.
2. 청사진 이름으로 StoreItem을 지정합니다.
3. 생성된 청사진을 엽니다.
4. Hierarchy 패널에서 CanvasPanel 요소에 맞는 컨텍스트 메뉴를 호출합니다. Replace With > Overlay를 선택합니다.

5. 아래 그림과 같이 Palette 패널에서 UI 기본 요소를 배치합니다. 아이템의 이미지, 제목 및 설명을 보려면 Details 패널에서 Is Variable 확인란을 선택합니다.

6. Graph 보기를 엽니다.
7. Class settings을 클릭합니다.
8. Details 패널에서 Interfaces > Implemented Interfaces로 이동합니다.
9. Add를 클릭하고 UserObjectListEntry를 선택합니다. 이는 UI 기본이 목록 요소에 대한 기본 동작 구현할 수 있게 하는 표준 UE 인터페이스입니다.

10. OnListItemObjectSet 이벤트에 로직을 추가하는 방법:
    1. My Blueprint 패널에서 Interfaces 섹션의 컨텍스트 메뉴를 호출하고 Implement event를 선택합니다.

1. 2. 아래와 같이 노드를 추가합니다.

11. 저장하고 StoreItem 청사진을 닫습니다.

카탈로그 페이지용 위젯 생성

1. Content Browser에서 Content 디렉터리로 이동하여 User Interface > Widget Blueprint를 선택합니다.
2. 청사진 이름으로 WBP_Store를 지정합니다.
3. 생성된 청사진을 엽니다.
4. 아이템 표시 영역에서 List View 요소를 추가하고 이름을 StoreListView로 지정합니다.

5. Details 패널과 Entry Widget Class 필드에서 아이템에 대해 이전에 생성한 클래스(StoreItem)를 선택합니다.
6. Graph 보기로 이동합니다.
7. 아래 그림과 같이 GetVirtualItems SDK 메소드 호출을 EventConstruct 노드에 바인딩합니다.

8. My Blueprint 패널에서 Add New를 클릭하고 Variable를 선택합니다.
9. Details 패널에서:
   1. Variable Type 필드에서 String을 선택합니다.
   2. Instance Editable 및 Expose on Spawn 확인란을 선택합니다.
   3. 이름으로 PlayFabId를 지정합니다.

10. 저장하고 WBP_Store 위젯을 닫습니다.
11. 디렉터리 표시 로직을 추가합니다. 다음은 사용자 인증 성공 후 디렉터리 표시를 구현한 예시입니다.

아이템 구매 설정하기

엑솔라 측에서 사용자 및 아이템 데이터로 주문을 생성하려면 구매용 결제 토큰 생성 API 호출을 사용하는 클라우드 함수를 프로젝트에 추가합니다. 이 호출은 결제 UI를 열고 구매를 하는 데 필요한 결제 토큰을 반환합니다.

제한 사항:

• 결제 토큰을 요청할 때 사용자 국가 또는 사용자의 IP 주소를 전달해야 합니다.
• 토큰에서 통화를 전달하지 않으면 국가에 따라 결정됩니다.
• 토큰에서 통화를 전달하면 사용자가 이 통화로 결제합니다.

프로젝트에 클라우드 스크립트 추가하기

1. Visual Studio Code를 열고 Azure 탭으로 이동합니다.
2. Workspace 섹션에서 + 아이콘을 클릭한 후 Create Function을 선택합니다.

3. 새 프로젝트 디렉터리를 선택합니다. 설정 선택과 함께 새 프로젝트를 생성하는 메뉴가 나타납니다.

4. 새 프로젝트 설정을 지정하는 방법:
   1. 함수 프로젝트 언어로 JavaScript를 선택합니다.
   2. JavaScript 프로그래밍 모델로 model V4를 선택합니다.
   3. 프로젝트의 첫 번째 함수 템플릿으로 HTTP trigger를 선택합니다.
   4. 함수 이름으로 getXsollaPaymentToken을 입력합니다.
   5. 프로젝트 열기 방식으로 Open in current window를 선택합니다.

1. 그러면 Visual Studio Code가 JS 프로젝트를 생성하고 생성된 getXsollaPaymentToken.js 파일을 엽니다.

5. getXsollaPaymentToken.js 파일 수정 방법:

const { app } = require('@azure/functions');

const projectId = ""; //your xsolla project id from publisher account
const apiKey = ""; your api key from publisher account

app.http('getXsollaPaymentToken', {
    methods: ['POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {

      var body = await request.json();

      const userId = body.uid;
      const email = body.email;
      const sku = body.sku;
      const returnUrl = body.returnUrl;

        if (!userId) {
          return {status: 400, body: 'Request body is missing' };
        }

        const payload = {
            user: {
              id: {value: userId},
              name: {
                value: email
              },
              email: {
                value: email
              },
              country: {
                value: 'US',
                allow_modify: false
              }
            },
            purchase: {
              items: [
                {
                  sku: sku,
                  quantity: 1
                }
              ]
            },
            sandbox: true,
            settings: {
              language: 'en',
              currency: 'USD',
              return_url: returnUrl,
              ui: {
                theme: '63295aab2e47fab76f7708e3'
              }
            }
          }

        let url = "https://store.xsolla.com/api/v2/project/" + projectId.toString() + "/admin/payment/token";

        return fetch(
            url,
            {
                method: "POST",
                headers: {
                'Content-Type': 'application/json',
                Authorization: 'Basic ' + btoa(`${projectId}:${apiKey}`)
                },
                body: JSON.stringify(payload)
            },
            )
            .then(xsollaRes => {
            // Handle the response data
                if (xsollaRes.ok) {
                    return xsollaRes.json();
                } else {
                    return { status: 400, body: `HTTP request failed with error: ${xsollaRes.statusText}` };
                }
            })
            .then(data => {
                return { status: 200, body: JSON.stringify(data) };
            })
            .catch(error => {
                return { status: 501, body: `Error = ${error}` };
            });
        }
});

1. 스크립트에서 상수 값을 지정합니다.

1. • PROJECT_ID - 프로젝트 이름 옆의 관리자 페이지에서 확인할 수 있는 프로젝트 ID입니다.

1. • API_KEY - API 키입니다. 생성할 때 한 번만 관리자 페이지에 표시되며 따로 저장하고 관리해야 합니다. 다음 섹션에서 새 키를 생성할 수 있습니다.
     • 회사 설정 > API 키
     • 프로젝트 설정 > API 키

클라우드 스크립트를 추가한 후 로컬에서 getXsollaPaymentToken 함수의 호출을 테스트할 수 있습니다.

클라우드 스크립트 배포

1. Visual Studio Code에서 Azure > Resources 섹션으로 이동한 후 + 아이콘을 클릭합니다.
2. 리소스로 Create Function App in Azure를 선택합니다. 설정 선택과 함께 새 애플리케이션을 생성하는 메뉴가 나타납니다.
3. 애플리케이션 설정을 설정하는 방법:

1. 1. 새 함수 이름을 XsollaFunctions로 입력합니다.
   2. 런타입 스택으로 .NET 8 Isolated를 선택합니다.
   3. 새 리소스의 위치를 선택합니다(원하는 옵션 선택 가능).

1. 리소스 그룹이 생성될 때까지 기다립니다.

4. 리소스 목록에서 XsollaFunctions를 선택하고 컨텍스트 메뉴를 호출한 후 Deply to Function App을 선택합니다.

클라우드 스크립트를 추가한 후 원격으로 getXsollaPaymentToken 함수의 호출을 테스트할 수 있습니다.

클라우드 스크립트 테스트

클라우드 스크립트를 로컬 또는 원격으로 테스트하려면 Postman 또는 다른 도구를 사용하여 getXsollaPaymentToken 함수를 호출합니다. 수행 방법:

1. Visual Studio Code에서 Azure > Workspace > Local Project > Functions 섹션으로 이동한 후 Start debugging to update this list를 클릭합니다.
2. 함수의 컨텍스트 메뉴를 호출한 후 Copy Function Url을 선택합니다. 로컬에서 테스트하는 경우 URL은 http://localhost:7071/api/getXsollaPaymentToken와 같이 표시됩니다. 원격으로 테스트하는 경우에는 https://xsollafunctions.azurewebsites.net/api/GetXsollaPaymentToken으로 표시됩니다.

3. 복사한 URL을 사용하여 지정된 매개 변수로 함수를 호출합니다. Postman에서 함수를 호출하는 방법:
   1. 새 GET 요청을 생성합니다.
   2. 2단계에서 복사한 URL을 제공합니다.
   3. Body 탭으로 이동하여 요청 매개 변수를 지정합니다.

요청 본문 예시:

{

 "FunctionArgument": {

   "uid": "1D384D9EF12EAB8B",

   "sku": "booster_max_1",

   "returnUrl": "https://login.xsolla.com/api/blank"

 }

}

4. Send를 클릭합니다. 응답으로 다음 매개 변수와 함께 JSON을 수신해야 합니다.
   • token - 결제 토큰입니다. 결제 UI를 열 때 필요합니다.
   • order_id - 생성된 주문의 ID입니다. 주문 상태를 추적할 때 필요합니다.

응답 본문 예시:

{"token":"xsnpCF8tS4ox7quoibgTgPFVFxG9gTvS_lc_en_bg_2C2640_tb_6E7BF7","order_id":90288613}

PlayFab에서 결제 토큰을 받는 함수 등록하기

1. PlayFab에서 프로젝트를 엽니다.
2. 사이드 메뉴에서 Automation을 클릭합니다.
3. Register New Cloud Script Function 섹션에서 Register Function을 클릭합니다.
4. 함수 이름으로 GetXsollaPaymentToken을 입력합니다.
5. Visual Code Studio로 복사한 함수 URL을 입력합니다(클라우드 스크립트 테스트의 1-2단계 참조).

언리얼 엔진 프로젝트에서 주문 생성 및 결제 UI 열기

1. 언리얼 엔진 프로젝트를 엽니다.
2. WBP_Store 위젯을 엽니다.
3. Hierarchy 패널에서 StoreListView를 선택합니다.
4. Details 패널에서 On Clicked 이벤트 옆의 + 아이콘을 클릭합니다.

5. Graph 보기로 이동합니다.
6. 다음과 같이 PlayfabJsonObject 개체를 생성하고 데이터를 전달하여 OnItemClicked 노드에 주문을 생성하기 위한 로직을 추가합니다.

7. ExecuteFunction 메소드에 호출을 추가합니다. functionName = getXsollaPaymentToken 및 FunctionParameter = PlayfabJsonObject 매개 변수를 전달합니다.

주문 상태 추적 설정하기

주문 상태 추적은 결제가 성공적으로 이루어졌는지 확인하고 사용자에게 아이템을 제공할 때 필요합니다.

클라이언트 측에서 주문 상태 가져오기

작업 상태의 변경 사항을 추적하려면 애플리케이션의 클라이언트 측에서 CheckPendingOrder SDK 메소드를 사용합니다. 메소드에는 다음 매개변수를 전달합니다.

• AuthToken - 사용자 인증 토큰
• OrderId - 장바구니를 통한 구매, 원클릭 구매 또는 인게임 재화로 구매에서 받은 주문 ID
• SuccessCallback - 주문이 완료 상태로 전환되는 경우의 콜백
• ErrorCallback - 엑솔라 서버가 오류를 반환하는 경우의 콜백

메소드 작동 방식에 대한 자세한 내용은 주문 상태 추적 섹션을 참조해 주세요.

서버 측에서 주문 상태 가져오기

엑솔라 측에서 웹훅을 구성하는 방법:

1. 관리자 페이지에서 프로젝트를 엽니다.
2. 사이드 메뉴에서 프로젝트 설정을 클릭하고 웹훅 섹션으로 이동합니다.
3. 웹훅 서버 필드에서 엑솔라가 웹훅을 전송할 URL을 입력합니다.

4. 비밀 키 필드의 값을 복사하여 저장합니다. 이 키는 기본값으로 생성되며 웹훅 서명에 사용됩니다. 변경하려면 업데이트 아이콘을 클릭합니다.
5. 웹훅 사용을 클릭합니다.