게임 키 판매 설정

구매 버튼을 사용하면 게임 웹사이트에서 게임 키를 실제 통화나 인게임 재화로 판매하여 게임에서 수익을 창출할 수 있습니다.

인증되지 않은 사용자와 인증된 사용자에게 게임 키를 판매할 수 있습니다.

인증되지 않은 사용자

구매 시 사용자에게 다음과 같은 제약 사항이 적용됩니다.

  • 자격 관리 시스템을 이용할 수 없습니다.
  • 결제 방식 및 엑솔라 잔액이 엑솔라 페이 스테이션에 저장되지 않습니다.

상품판매 방식
게임(게임 키) 사본 1개.다이렉트 링크 또는 위젯을 사용해보세요.
게임(게임 키) 또는 장바구니에 담긴 여러 게임의 사본 여러 개.고유한 사용자 ID 및 이메일 주소를 전달합니다. 이메일 주소와 기타 추가 데이터(사용자 이름 및 ISO 3166-1 alpha-2에 따른 국가 코드)는 Base64 인코딩을 가지며 결제 토큰을 얻기 위한 메소드 호출 시 제목에서 x-user 매개변수를 위해 전달됩니다.
아이템 1개.아이템 1개에는 빠른 구매 호출을 사용하세요.
장바구니에 담긴 아이템 여러 개.고유한 사용자 ID를 전달합니다. 고유한 사용자 ID는 게임 키 메소드 그룹에서 카탈로그 하위 섹션의 API 메소드를 호출할 때 제목에서 숫자 또는 행으로 사용됩니다(x-unauthorized-id 매개변수). 식별자는 프론트엔드에서 생성됩니다(예: 식별자 생성 라이브러리를 통해).

인증된 사용자

애플리케이션 및 엑솔라 제품의 기능에 대한 사용자 액세스를 관리하려면 인증 시스템을 설정하세요. 이때 엑솔라 로그인을 사용하거나 자체 인증 시스템을 구현할 수 있습니다.

자체 인증 시스템을 구현했으며 결제 UI만 필요한 경우 페이 스테이션 액세스 토큰을 생성한 후 서버에 웹훅을 설정하세요.

자체 서버가 없거나 기존 솔루션을 사용하려는 경우 인게임 스토어에 대해 엑솔라 로그인을 사용할 수 있습니다. 엑솔라에서 수행하는 기능:

  • 카탈로그 저장 및 관리
  • 가격 관리
  • 지역별 가격 데이터 저장
  • 사용자 인증
  • 거래 처리

엑솔라 로그인을 통한 인증

엑솔라 로그인은 사용자 등록 및 인증을 위해 OAuth 2.0 표준 프로토콜을 지원합니다. 표준 OAuth 2.0 프로토콜을 통해 클라이언트 애플리케이션의 개발을 단순화할 수 있습니다. OAuth 2.0을 사용하면 사용자가 참여하지 않아도 액세스 토큰을 업데이트할 수 있습니다.

승인된 사용자 데이터를 다음에 저장할 수 있습니다.

알림
실제 통화(잔액), 저장된 카드, 거래 내역, 구독 정보 등이 사용자 데이터로 구분됩니다.

페이 스테이션 액세스 토큰을 통한 인증

알림
In-Game Store and Buy Button API 메서드를 통합하려는 경우 권장드립니다.

귀하의 클라이언트와 엑솔라 서버 간의 상호 작용 흐름:

  1. 클라이언트가 인증 요청을 귀하의 서버에 전송합니다.
  2. 서버가 권한 부여 토큰을 요청하고 헤더를 엑솔라 서버에 전송하는데, 이는 project_id/merchant_idapi_key 매개 변수를 포함하고 있습니다.
  3. 엑솔라 서버가 페이 스테이션 액세스 토큰을 반환합니다.
  4. 서버가 페이 스테이션 액세스 토큰을 클라이언트에게 전달합니다.
  5. 반환된 페이 스테이션 액세스 토큰이 인게임 스토어 및 구매 버튼 API 인증 및 스토어 인터페이스 빌드용 권한 부여 토큰으로 사용됩니다.

페이 스테이션 액세스 토큰 받기

애플리케이션의 백 엔드에서 HTTP POST 요청을 사용하여 페이 스테이션 액세스 토큰 가져오기 메서드를 구현하세요.

엑솔라 API는 기본 HTTP 인증을 사용합니다. 요청에는 Authorization: Basic <your_authorization_basic_key> 헤더가 있어야 합니다. 여기에서 <your_authorization_basic_key>는 Base64 표준으로 인코딩된 판매자 ID:API 키 쌍입니다. 이러한 매개변수를 찾으려면 게시자 계정으로 이동합니다.

  • 판매자 ID 표시 위치:
    • 프로젝트 설정 > 웹훅 섹션
    • 회사 설정 > 회사 섹션
    • 게시자 계정 페이지의 브라우저 주소 표시줄에 있는 URL. 이 URL의 형식: https://publisher.xsolla.com/​판매자 ID/게시자 계정 섹션

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

주의

API 키 작업에 대한 자세한 정보는 API 참조를 확인하세요.

주요 권장 사항:

  • 본인의 공간에 생성된 API 키를 저장합니다.. 생성된 API 키는 게시자 계정에서 한 번만 볼 수 있습니다.
  • API 키를 비밀로 유지해야 합니다. 이러한 API 키는 개인 계정과 게시자 계정의 프로젝트에 대한 액세스를 제공합니다.
  • API 키는 서버에 저장해야 하며 바이너리나 프론트엔드에는 저장해선 안 됩니다.

HTTP 요청:

POST https://api.xsolla.com/merchant/v2/merchants/{merchant_id}/token

토큰을 받으려면 전달해야 하는 요청 본문의 매개 변수:

매개 변수유형설명
설정
object사용자 지정 프로젝트 설정와 관련된 객체입니다.
settings.project_id
integer게임의 엑솔라 ID. 프로젝트 이름 옆 게시자 계정에서 찾으실 수 있습니다. 필수.
사용자
object사용자에 대한 데이터가 포함된 개체입니다.
user.id
object권한 부여 시스템의 사용자 ID(개체).
user.id.value
string사용자 ID. 필수.
user.email
object사용자 이메일(개체).
user.email.value
string사용자 이메일. RFC 822 프로토콜에 따라 유효해야 합니다. 필수.
user.name
object게임유저 닉네임 데이터와 관련된 값입니다. 필수.
user.name.value
string사용자 닉네임.
user.steam_id
object사용자 Steam ID(개체).
user.steam_id.value
string사용자 Steam ID. 애플리케이션이 Steam에 게시된 경우 필수입니다.
user.playfab_id
object사용자 PlayFab ID(개체).
user.playfab_id.value
string사용자 PlayFab ID. 애플리케이션이 PlayFab 서비스를 사용하여 아이템 부여를 하는 경우 필수입니다.

요청 및 응답 예시를 API 참조에서 확인하세요.

주의
요청에서는 위의 목록의 매개 변수만 사용하세요. API 호출의 다른 매개 변수(custom_parameters, purchase, 등)는 전달하지 마세요. 다른 매개 변수는 권한 부여 토큰 수신용이 아닙니다.

페이 스테이션 액세스 토큰을 인게임 스토어 및 인벤토리와 같이 사용하는 경우 엑솔라 API로의 마지막 호출 후 1시간이 지나면 만료됩니다. 페이 스테이션 액세스 토큰의 수명을 변경하려면, 계정 관리자에게 문의하세요.

만료 후 새 페이 스테이션 액세스 토큰을 수신하는 로직을 구현합니다. 새 토큰을 백그라운드 모드에서 수신하여 사용자가 애플리케이션에 다시 로그인하지 않아도 되게 할 것을 권장합니다.

다이텍트 링크, 스토어 UI 혹은 위젯을 통해 게임 키를 판매할 수 있습니다.

결제 UI를 열기 위한 링크:

Copy
Full screen
Small screen

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}

알림

다이렉트 링크를 통해 실제 통화로 게임 키를 구매하는 기능은 엑솔라와 라이선스 계약을 체결한 후에만 가능합니다. 이렇게 하려면 게시자 계정에서 정산 > 라이선스 계약 섹션으로 이동하여 계약 양식을 작성한 후 확인을 기다립니다. 계약을 검토하는 데에는 영업일 기준 최대 3일이 소요될 수 있습니다.

결제 테스트를 위해 링크에 mode=sandbox 매개변수를 추가하고 테스트 환경을 사용할 수 있습니다.

이 링크에 추가해야 하는 데이터:

  • YOUR-ITEM-TYPE — 아이템 유형:
    • game — 게임. game_key — 특정 플랫폼의 게임.
    • bundle — 번들.
  • YOUR-PROJECT-ID게시자 계정프로젝트 설정 > 일반 설정 > 프로젝트 ID 섹션에서 확인할 수 있는 프로젝트 ID.
  • YOUR-ITEM-SKU — 게임 키 패키지 SKU. 특정 플랫폼에서 게임을 판매하려면 게임 목록 가져오기(일반적으로 이 SKU는 unit_name_drm_sku와 같음)를 사용하여 SKU를 가져옵니다.

  • 결제 UI 스타일: 테마(다크 혹은 기본 라이트 테마), 크기 및 기타 매개변수. URL에서 ui_settings 매개변수를 지정하고 Base64 인코딩을 값으로 가지는settings.ui JSON-개체를 전달합니다. UI 설정이 된 URL 예시:

Copy
Full screen
Small screen

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=

  • 사용자 데이터 전달을 위한 토큰. 인증된 사용자에게만 게임 키를 판매할 때 사용합니다. 이 토큰은 인증 메소드에 따라 달라집니다. 토큰 URL 예시:

Copy
Full screen
Small screen

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR_ITEM_SKU}&xsolla_login_token={ACCESS_TOKEN}

  • 결제 테스트용 mode=sandbox 매개변수입니다. 은행 카드 테스트 를 사용하여 결제를 완료할 수 있습니다.

알림
결제 시 엑솔라 서버는 웹훅 URL로 요청을 전송하여 사용자가 게임에 존재하는지 확인합니다. 결제 테스트 시 오류를 방지하려면 게시자 계정 > 프로젝트 설정 > 웹훅으로 이동한 후 스위치를 OFF로 설정합니다. 웹훅을 사용하려면 사용자 유효성 검사 웹훅이 성공적으로 처리되도록 구현합니다.

  1. 테스트용 URL 예시:

Copy
Full screen
Small screen

https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox

스토어 UI를 통해 판매

스토어 인터페이스를 통해 게임 키를 판매할 수 있습니다. 스토어 생성 방법:

자체 버전의 스토어를 구현하는 경우 스토어 데모 버전을 기본으로 하고 GitHub에 게시된 코드 스니펫을 추가할 수 있습니다.

게임 키 패키지를 판매하려면 다음과 같이 인게임 스토어 및 구매 버튼 API를 통합합니다.

  1. 카탈로그를 표시하려면 게임 목록 가져오기 메소드를 사용합니다.
  2. 게임 키 구매 구현 방법:

메소드가 올바르게 작동할 수 있도록 적합한 인증 옵션을 선택하세요.

알림
인게임 스토어 및 구매 버튼 API를 통해 게임을 판매하는 경우 플레이어가 클라이언트에서 특정 플랫폼을 선택할 수 있도록 허용하는 기능을 구현해야 합니다. SKU를 가져오려면 요청의items.unit_items.sku 매개변수 값을 게임 목록 가져오기로 전달합니다.

위젯으로 판매

버튼을 개발하고 엑솔라 API와 통합하는 방법:

버튼 사용자 정의

  1. 게시자 계정을 엽니다.
  2. 사이드 메뉴에서 스토어를 클릭합니다.
  3. 게임 키 창에서 구성을 클릭합니다.
  4. 게임 키를 선택한 후 위젯 사용자 정의 탭으로 이동합니다.

알림
게임 키가 없는 경우 새로운 게임 키를 생성합니다.

  1. 사용자 정의 블록에서 배경 색상으로 밝게를 선택합니다.

알림
또한 background 매개변수가 값으로 빈 문자열을 갖도록 코드에서 theme 개체를 수정할 수 있습니다.

  1. 페이지에 위젯 코드를 추가하면 상속한 스타일이 포함됩니다. 스타일을 다시 정의하려면 아래 스타일을 추가하세요.

주의
CSS 상속/우선순위의 이유로 위젯 사용자 정의 탭에서 가져온 script 태그 아래의 style 태그에 이 항목이 추가되었습니다.
Copy
Full screen
Small screen

/* This should be used for button positioning but note this technically repositions the entire widget */
#xsolla-buy-button-widget {
  /* place code for button positioning here */
}

/* Styles the button itself */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button {
  background-color: #ff005b;
  color: black;
}

/* Button on hover */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button:hover {
  background-color: #ff005b;
}

/* The following are style overrides to leave you with just the button */

/* space immediately surrounding button */
.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
  background-color: white;
}

/* space above button (including game title area) */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-game-logo {
  height: 200px;
  background-image: none !important;
  background-color: white;
}

 /* Game title (located right above button) */
.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
  display: none !important;
}

주의
  • 위의 ID/클래스 이름과 코드 스니펫은 복사한 위젯 코드(5단계의 이미지)와 함께 사용됩니다. 따라서 복사한 위젯 코드를 구현하는 것이 중요합니다.
  • 위의 코드를 그대로 사용하거나 시나리오에 따라 코드를 수정할 수 있습니다. 코드 주석(1, 3, 5, 11, 16, 18, 22, 29행)은 각 CSS 규칙의 대상을 결정하고 향후 스타일을 설정하는 데 도움이 됩니다. 예를 들어, 전체 위젯이 아니라 버튼만 변경하려는 경우 아래에서 색상 설정이 white인 20행과 27행의 페이지의 배경 색상 설정을 대체해야 합니다.

여러 버튼 또는 SKU를 생성하는 방법

Pay2Play 위젯을 사용하여 이를 수행하는 방법에 대한 예제 코드는 엑솔라 Pay2Play 위젯 간단 통합 4 버튼을 참조하세요.

구조는 구매 버튼 위젯 코드와 유사합니다. 마이그레이션 예제:

Copy
Full screen
Small screen

<div id="xsolla-buy-button-widget"></div>
<div id="xsolla-buy-button-widget-2"></div>
    <script>
      var options = {
        project_id: "191204",
        sku: "789",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      // options for second buy button - note the different SKU and target_element
      var options2 = {
        project_id: "191204",
        sku: "123",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget-2",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";

// one event listener per widget instance. repeat for more buttons, passing in different SKUs
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance = XBuyButtonWidget.create(options);
        },
        false
      );
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance2 = XBuyButtonWidget.create(options2);
        },
        false
      );
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(s);
    </script>

주의
  • 1행과 2행 — 버튼 당 하나의 div. 각각 고유한 ID 부여.
  • 26행부터 두 번째 버튼의 옵션 보유(options2 개체에서 레이아웃 설정됨). 각 구매 버튼에 대해 위의 버튼과 같은 options 세트가 필요합니다. sku(28행)와 target_element(34행, 2행의 div을 대상으로 함)의 차이점에 주의해야 합니다.
이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
이 페이지 평가
이 페이지 평가
개선해야 할 점이 있을까요?

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!

계속 읽기

다음 단계

웹훅 설정
마지막 업데이트: 2023년 1월 31일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!