게임 키 판매 설정

콘텐츠

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

결제 UI를 열기 위한 링크:

Copy
Full screen
Small screen
  • curl
https://store.xsolla.com/pages/buy.php?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
  • curl
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=

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

Copy
Full screen
Small screen
  • curl
https://store.xsolla.com/pages/buy.php?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
  • curl
https://store.xsolla.com/pages/buy.php?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
  • css
/* 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
  • js
<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을 대상으로 함)의 차이점에 주의해야 합니다.
이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
이 페이지 평가
이 페이지 평가
개선해야 할 점이 있을까요?

답하기 원하지 않습니다

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

계속 읽기

다음 단계

웹훅 설정
마지막 업데이트: 2022년 9월 20일

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

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