게임 키 판매 설정
구매 버튼을 사용하면 게임 웹사이트에서 게임 키를 실제 통화나 인게임 재화로 판매하여 게임에서 수익을 창출할 수 있습니다.
인증되지 않은 사용자와 인증된 사용자에게 게임 키를 판매할 수 있습니다.
인증되지 않은 사용자
구매 시 사용자에게 다음과 같은 제약 사항이 적용됩니다.
- 자격 관리 시스템을 이용할 수 없습니다.
- 결제 방식 및 엑솔라 잔액이 엑솔라 페이 스테이션에 저장되지 않습니다.
상품 | 판매 방식 |
---|---|
게임(게임 키) 사본 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을 사용하면 사용자가 참여하지 않아도 액세스 토큰을 업데이트할 수 있습니다.
승인된 사용자 데이터를 다음에 저장할 수 있습니다.
- 엑솔라 스토리지의 경우. 설정하려면 엑솔라 로그인 시작하기를 참조하세요.
- PlayFab 데이터베이스의 경우. 설정하려면 PlayFab 저장소 사용법을 참조하세요.
- 사용자 지정 저장소의 경우. 설정하려면 사용자 지정 저장소 사용법을 참조하세요.
페이 스테이션 액세스 토큰을 통한 인증
귀하의 클라이언트와 엑솔라 서버 간의 상호 작용 흐름:
- 클라이언트가 인증 요청을 귀하의 서버에 전송합니다.
- 서버가 권한 부여 토큰을 요청하고 헤더를 엑솔라 서버에 전송하는데, 이는
project_id/merchant_id
및api_key
매개 변수를 포함하고 있습니다. - 엑솔라 서버가 페이 스테이션 액세스 토큰을 반환합니다.
- 서버가 페이 스테이션 액세스 토큰을 클라이언트에게 전달합니다.
- 반환된 페이 스테이션 액세스 토큰이 인게임 스토어 및 구매 버튼 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 참조에서 확인하세요.
custom_parameters
, purchase
, 등)는 전달하지 마세요. 다른 매개 변수는 권한 부여 토큰 수신용이 아닙니다.페이 스테이션 액세스 토큰을 인게임 스토어 및 인벤토리와 같이 사용하는 경우 엑솔라 API로의 마지막 호출 후 1시간이 지나면 만료됩니다. 페이 스테이션 액세스 토큰의 수명을 변경하려면, 계정 관리자에게 문의하세요.
만료 후 새 페이 스테이션 액세스 토큰을 수신하는 로직을 구현합니다. 새 토큰을 백그라운드 모드에서 수신하여 사용자가 애플리케이션에 다시 로그인하지 않아도 되게 할 것을 권장합니다.
다이텍트 링크, 스토어 UI 혹은 위젯을 통해 게임 키를 판매할 수 있습니다.
다이렉트 링크로 판매
결제 UI를 열기 위한 링크:
- curl
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 예시:
- curl
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=
- 사용자 데이터 전달을 위한 토큰. 인증된 사용자에게만 게임 키를 판매할 때 사용합니다. 이 토큰은 인증 메소드에 따라 달라집니다. 토큰 URL 예시:
- curl
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 예시:
- curl
https://purchase.xsolla.com/pages/buy?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox
스토어 UI를 통해 판매
스토어 인터페이스를 통해 게임 키를 판매할 수 있습니다. 스토어 생성 방법:
- 사이트 빌더
- 를 사용하여 자체 스토어 버전을 생성하고 인게임 스토어 및 구매 버튼 API를 통합합니다.
자체 버전의 스토어를 구현하는 경우 스토어 데모 버전을 기본으로 하고 GitHub에 게시된 코드 스니펫을 추가할 수 있습니다.
게임 키 패키지를 판매하려면 다음과 같이 인게임 스토어 및 구매 버튼 API를 통합합니다.
- 카탈로그를 표시하려면 게임 목록 가져오기 메소드를 사용합니다.
- 게임 키 구매 구현 방법:
- 하나의 키만 빠르게 구매하는 경우 지정된 아이템으로 주문 생성 메소드를 사용합니다. 이 메소드에 대한 응답으로 결제 인터페이스를 여는 데 사용해야 하는 토큰을 받게 됩니다.
- 여러 개의 게임 키를 구매하는 경우 다음과 같은 관리 메소드를 사용합니다.
- 현재 장바구니의 장바구니 아이템 업데이트는 게임 키를 장바구니에 추가합니다.
- 현재 사용자의 장바구니 가져오기는 장바구니에서 게임 키 목록을 가져옵니다.
- 현재 장바구니의 모든 아이템으로 주문 생성은 장바구니에 있는 게임 키의 비용을 지불합니다.이 메소드에 대한 응답으로 결제 인터페이스를 여는 데 사용해야 하는 토큰을 받게 됩니다.
메소드가 올바르게 작동할 수 있도록 적합한 인증 옵션을 선택하세요.
items.unit_items.sku
매개변수 값을 게임 목록 가져오기로 전달합니다.위젯으로 판매
버튼을 개발하고 엑솔라 API와 통합하는 방법:
- 버튼 사용자 정의를 통해 게시자 계정에서 수행
- 페이 스테이션 위젯 사용
버튼 사용자 정의
- 게시자 계정을 엽니다.
- 사이드 메뉴에서 스토어를 클릭합니다.
- 게임 키 창에서 구성을 클릭합니다.
- 게임 키를 선택한 후 위젯 사용자 정의 탭으로 이동합니다.
- 사용자 정의 블록에서 배경 색상으로 밝게를 선택합니다.
background
매개변수가 값으로 빈 문자열을 갖도록 코드에서 theme
개체를 수정할 수 있습니다.- 페이지에 위젯 코드를 추가하면 상속한 스타일이 포함됩니다. 스타일을 다시 정의하려면 아래 스타일을 추가하세요.
script
태그 아래의 style
태그에 이 항목이 추가되었습니다.- 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 버튼을 참조하세요.
구조는 구매 버튼 위젯 코드와 유사합니다. 마이그레이션 예제:
- 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
을 대상으로 함)의 차이점에 주의해야 합니다.
이 기사가 도움이 되었나요?
이 페이지 평가
답하기 원하지 않습니다
의견을 보내 주셔서 감사드립니다!
계속 읽기
다음 단계
웹훅 설정오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.