게임 키 판매 설정

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

아이템판매 방식
게임(게임 키) 사본 1개.다이렉트 링크, 위젯 또는 스토어 인터페이스. 스토어 인터페이스를 통해 판매하는 경우에는 장바구니를 생성하지 않고 빠른 구매 메소드를 사용합니다.
게임(게임 키) 또는 장바구니에 담긴 여러 게임의 사본 여러 개.스토어 인터페이스. 웹사이트 빌더를 사용하거나 IGS API를 연동합니다.

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

인증을 통해 할 수 있는 작업:

로그인 상품 또는 자체 인증 시스템을 사용하여 사용자를 인증할 수 있습니다. 자세한 설정 정보는 이 지침에서 확인할 수 있습니다.

알림
사용자는 키를 환불할 수 있습니다. 환불에 성공하면 엑솔라 이메일로 해당 키 목록을 받게 됩니다. 타사 플랫폼에서의 이러한 키에 대한 액세스는 차단하는 것이 좋습니다.

결제 UI를 열기 위한 링크:

Copy
Full screen
Small screen
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOUR_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={YOUR_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={YOUR_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox

스토어 UI를 통해 판매

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

IGS API를 사용하여 게임 키 패키지를 판매하는 방법:

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

메소드가 올바르게 작동할 수 있도록 적합한 인증 옵션을 선택하세요.
알림
IGS API를 통해 게임을 판매하는 경우 플레이어가 클라이언트에서 특정 플랫폼을 선택할 수 있도록 허용하는 기능을 구현해야 합니다. SKU를 가져오려면 요청의items.unit_items.sku 매개 변수 값을 게임 목록 가져오기로 전달합니다.

위젯으로 판매

페이지에 위젯을 추가하여 게임 키를 판매하고 사용자 정의할 수 있습니다. 위젯 코드를 복사하려면 관리자 페이지에서 키 패키지 생성한 후 위젯 사용자 정의 섹션으로 이동합니다.

게임이 단일 플랫폼에서 판매되는 경우 해당 플랫폼에 맞는 게임 가격이 위젯에 표시됩니다.

예시: 지금 $10에 구매하세요.

게임이 여러 플랫폼에서 판매되는 경우 플랫폼 중에서 가장 낮은 가격이 위젯에 표시됩니다.

예시: 10달러부터 구입할 수 있어요.

주문 생성 창에서 사용자가 모든 플랫폼의 가격을 확인하고 선택할 수 있습니다.

또한 drm 매개변수에서 플랫폼 SKU를 지정하여 위젯에 특정 플랫폼의 가격을 표시할 수도 있습니다.

위젯 코드 예시:

Copy
Full screen
Small screen
    <div id="xsolla-buy-button-widget"></div>
          <script>
              var options = {
                  project_id: "101010",
                  sku: "my_key",
                  user: {
                      auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
                  },
                  drm: "steam",
                  item_type: "unit",
                  api_settings: {
                      sandbox: true,
                  },
                  widget_ui: {
                      target_element: "#xsolla-buy-button-widget",
                      theme: {
                          foreground: "green",
                          background: "light"
                      },
                  },
    
                 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.8/widget.min.js";
              s.addEventListener('load', function (e) {
                  var widgetInstance = XBuyButtonWidget.create(options);
              }, false);
              var head = document.getElementsByTagName('head')[0];
              head.appendChild(s);
          </script>
          <style>
              #xsolla-buy-button-widget {
    
              /* place code for button positioning here */
                margin: 10px  
              }
    
              /* Styles the button itself */
              .x-buy-button-widget.x-buy-button-widget__tiny
                .x-buy-button-widget-payment-button {
                background-color: #ff005b;
                color: black;
              }     
          </style>
    
    알림
    위젯 매개변수

    매개 변수유형설명
    project_id
    integer게임 키 또는 게임 키가 포함된 번들, 인게임 아이템 또는 아이템이 포함된 번들이 업로드되는 프로젝트의 ID입니다.
    item_type
    string아이템 유형. virtual_good, virtual_currency, game_key, unit 값을 사용할 수 있음. unit 유형은 게임을 배포할 플랫폼이 여러 개일 때 사용.
    sku
    string고유한 아이템 ID.
    drm
    string배포 플랫폼 SKU(예: steam). 특정 플랫폼의 가격 표시 허용.
    api_settings
    object환경 및 호스트 구성 설정:
    • host - 요청을 수행하는 호스트. 기본값 - store.xsolla.com
    • api_host - API 요청을 수행하는 호스트. 기본값 - store.xsolla.com/api
    • sandbox - 결제 프로세스를 테스트하는 true 값을 설정. 결제 처리에 sandbox-secure.xsolla.com 대신 secure.xsolla.com 사용(결제 프로세스 테스트 참조)
    user
    object사용자 데이터가 있는 개체입니다.
    user.auth
    string사용자 인증 토큰: JSON 웹 토큰 또는 페이 스테이션 액세스 토큰.
    user.locale
    string사용자 로케일. 버튼 텍스트 및 결제 인터페이스의 언어를 결정. ISO_639-1에 해당하는 두 글자 언어 코드 사용.
    widget_ui.theme
    object위젯의 색상 테마로, 위젯의 모양을 결정. {foreground:[‘blue’,‘red’,‘green’,‘gold’], background:[’light’,‘dark’]}의 값을 사용할 수 있음
    widget_ui.template
    string템플릿. 사용 가능한 값:
    • standard(기본값) - 게임 이미지, 제목, 스타일이 적용된 버튼 포함
    • simple - 스타일이 적용되지 않은 버튼만 표시
    widget_ui.target_element
    string위젯이 렌더링되어야 하는 페이지의 구성 요소(jQuery 선택기를 사용해야 함, 예: #widget-example). 필수

    결제 인터페이스의 모양을 결정하는 매개변수

    매개 변수유형설명
    payment_ui
    object결제 인터페이스 표시 매개변수.
    payment_widget_ui
    object결제 인터페이스의 모양을 결정하는 매개변수가 있는 개체.
    payment_widget_ui.lightbox
    object결제 인터페이스가 열리는 모달 창에 대한 옵션이 있는 개체.
    payment_widget_ui.lightbox.width
    stringLightbox 프레임 높이입니다. null인 경우, 페이 스테이션 높이에 따라 달라집니다. 기본값은 null입니다.
    payment_widget_ui.lightbox.height
    stringLightbox 프레임 높이입니다.null인 경우, 페이 스테이션 높이에 따라 달라집니다. 기본값은 100%입니다.
    payment_widget_ui.lightbox.zIndex
    integer속성에 의해 수직 스태킹 순서가 제어됩니다. 기본값은 1000입니다.
    payment_widget_ui.lightbox.overlayOpacity
    integer위젯 배경의 불투명도입니다(0 - 완전히 투명함, 1 - 완전히 불투명함). 기본값은 60%입니다(.6).
    payment_widget_ui.lightbox.overlayBackground
    string오버레이의 배경입니다. 기본 값은 #000000입니다.
    payment_widget_ui.lightbox.contentBackground
    string프레임 배경 색상. 기본값은 #ffffff입니다. 이러한 색상 변경은 이를 포함하는 라이트박스 설정에만 영향을 미치며 페이 스테이션 iframe 자체에는 영향을 미치지 않음에 유의하시기 바랍니다.
    payment_widget_ui.lightbox.spinner
    string애니메이션 로딩 표시기의 유형입니다. xsolla 또는 round일 수 있습니다. 기본값은 xsolla입니다.
    payment_widget_ui.lightbox.spinnerColor
    string회전자의 색상입니다. 기본값에 의해 설정되지 않습니다.
    payment_widget_ui.childWindow
    object결제 인터페이스가 열리는 하위 창에 대한 설정. 모바일 버전에서 작동.
    payment_widget_ui.childWindow.target
    string하위 창이 열릴 위치를 결정하는 속성. _blank, _self, _parent 값을 사용할 수 있음. 기본값 - _blank.

    위젯 메소드

    • var widgetInstance = XBuyButtonWidget.create(options) - 위젯 인스턴스를 생성하고 페이지에 렌더링합니다.
    • widgetInstance.on(event, handler) - 이벤트에 대한 이벤트 핸들러 함수를 위젯에 첨부합니다.
      • event (string) - 이벤트 유형입니다.
      • handler (function) - 이벤트가 트리거될 때 실행하는 함수입니다.
    • widgetInstance.off(event, handler) - 이벤트 핸들러를 제거합니다.
      • event (string) - 이벤트 유형입니다.
      • handler (function) - 이벤트에 대해 이전에 첨부된 핸들러 함수입니다.

    이벤트 목록:

    매개 변수설명
    init위젯 초기화 이벤트입니다.
    open위젯 개시 이벤트입니다.
    load결제 인터페이스(페이 스테이션)가 로딩된 후 이벤트입니다.
    close결제 인터페이스(페이 스테이션)가 닫힌 후 이벤트입니다.
    status게임유저가 상태 페이지에서 이동한 경우의 이벤트입니다.
    status-invoice게임유저가 상태 페이지에서 이동했지만 결제가 완료되지 않은 경우의 이벤트입니다.
    status-delivering게임유저가 상태 페이지에서 이동했고, 결제가 완료되었으며, 결제 알림을 보내는 중인 경우의 이벤트입니다.
    status-done게임유저가 상태 페이지에서 이동했고 결제가 성공적으로 완료된 경우의 이벤트입니다.
    status-troubled게임유저가 상태 페이지에서 이동했지만 결제에 실패한 경우의 이벤트입니다.

    XBuyButtonWidget.eventTypes 개체를 사용하여 이벤트 목록에 액세스할 수 있습니다.

    버튼 사용자 정의

    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을 대상으로 함)의 차이점에 주의해야 합니다.
    이 기사가 도움이 되었나요?
    감사합니다!
    개선해야 할 점이 있을까요? 메시지
    유감입니다
    이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
    의견을 보내 주셔서 감사드립니다!
    메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
    마지막 업데이트: 2024년 11월 8일

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

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